XS-887 | Multi language support - Seller content

index.d.ts

@@ -249,6 +249,7 @@ export {
     ToggleButton,
     Tooltip,
     TransferArrowIcon,
+    TranslationIcon,
     TrashIcon,
     TutorialsBadgeIcon,
     TutorialsButtonIcon,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.3.26",
+    "version": "2.3.27",
     "description": "Xola UI Kit",
     "license": "MIT",
     "repository": {

src/components/Table.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { Children, cloneElement } from "react";
+import React, { Children, cloneElement, useEffect, useRef, useState } from "react";
 
 export const Table = ({ className, ...rest }) => (
     <div className="ui-table flex flex-col">
@@ -74,3 +74,83 @@ Table.Cell.displayName = "Table.Cell";
 Table.Cell.propTypes = {
     className: PropTypes.string,
 };
+
+const EditableCell = ({ className, value, onSave, ...rest }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [localValue, setLocalValue] = useState(value);
+
+    const textRef = useRef(null);
+    const textAreaRef = useRef(null);
+    const [height, setHeight] = useState("auto");
+
+    const handleBlur = async () => {
+        setIsEditing(false);
+
+        if (localValue !== value) {
+            onSave(localValue);
+        }
+    };
+
+    const handleCellClick = () => {
+        if (!isEditing) {
+            setIsEditing(true);
+        }
+    };
+
+    const handleChange = (e) => {
+        setLocalValue(e.target.value);
+        e.target.style.height = "auto";
+        e.target.style.height = `${e.target.scrollHeight}px`;
+    };
+
+    useEffect(() => {
+        if (isEditing) {
+            // eslint-disable-next-line no-undef
+            requestAnimationFrame(() => {
+                textAreaRef.current?.focus();
+            });
+
+            return;
+        }
+
+        if (textRef.current) {
+            setHeight(`${textRef.current.scrollHeight * 1.07}px`);
+        }
+    }, [isEditing]);
+
+    return (
+        <td
+            className={clsx(
+                "ui-table-cell",
+                "whitespace-nowrap px-4 py-2 text-base text-gray-darker",
+                { "bg-gray-hover": isEditing },
+                className,
+            )}
+            onClick={handleCellClick}
+            {...rest}
+        >
+            {isEditing ? (
+                <textarea
+                    ref={textAreaRef}
+                    value={localValue}
+                    style={{ height: height }}
+                    className="h-auto w-full rounded border-none p-1 focus:outline-0 focus:!ring-gray-light"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                />
+            ) : (
+                <div ref={textRef} className="cursor-text whitespace-pre-wrap">
+                    {localValue || <span className="text-gray">Not Available</span>}
+                </div>
+            )}
+        </td>
+    );
+};
+
+Table.EditableCell = EditableCell;
+Table.EditableCell.displayName = "Table.EditableCell";
+Table.EditableCell.propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    onSave: PropTypes.func.isRequired,
+};

src/icons/index.js

@@ -184,6 +184,7 @@ export { ThumbsUpIcon } from "./src/ThumbsUpIcon";
 export { TicketIcon } from "./src/TicketIcon";
 export { TikTokIcon } from "./src/Logos/TikTokIcon";
 export { TransferArrowIcon } from "./src/TransferArrowIcon";
+export { TranslationIcon } from "./src/TranslationIcon";
 export { TrashIcon } from "./src/TrashIcon";
 export { TripadvisorIcon } from "./src/Logos/TripadvisorIcon";
 export { TutorialsBadgeIcon } from "./src/Tutorials/TutorialsBadgeIcon";

src/icons/src/TranslationIcon.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { createIcon } from "./helpers/icon";
+
+export const TranslationIcon = createIcon((props) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
+            <g stroke="#222324" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} clipPath="url(#a)">
+                <path d="M7.314 3.357v2.969M20.18 19.19l-3.959-8.906-3.958 8.907M13.143 17.212h6.155M3.357 14.242c4.052-.32 7.596-3.864 7.918-7.916H3.358" />
+                <path d="M11.274 14.242c-2.533-.2-4.748-2.415-4.948-4.947" />
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#fff" d="M2 2h19v19H2z" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+});
+
+TranslationIcon.tags = ["translation", "i18n", "language", "locale", "localize"];