@omniumretail/component-library 1.2.34 → 1.2.36

package/dist/main.css

@@ -32,3 +32,4 @@
 .OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
 :root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;box-sizing:border-box;height:72px}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center;max-width:calc(100% - 60px)}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.gSVYvBn1sLbcMsGI32b9 .fVSt3bSZBcJGsOdA5nIN{font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-black)}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px;width:30px;display:flex;align-items:center;justify-content:center}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:430px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.YKSQJmdRP_7tKwvQpeuV{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.ISssYC5Uz452JVWP0xDc img{max-width:160px}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:23px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}.u7k2VQ30AQDk6mKA22GX .fjNRYZMP1O0pTvBDBB3L span{margin-left:8px;transform:translateY(-2px);display:inline-block;font-size:var(--font-size-body-3);text-transform:capitalize}
 @media(max-width: 768px){.muC1BdCbIEMIs70EtJoA{position:unset}}.msELhnfhfo6un3c4Spoc{max-width:300px;max-height:400px;padding:0 !important}@media(max-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:100vw}}@media(min-width: 1024px){.msELhnfhfo6un3c4Spoc{max-width:600px;max-height:700px}}@media(max-width: 768px){.oGsIq0O_Hzwg2mLR72la{position:absolute}}.KSVguXBQ_A1SUSR6e8Wq{overflow-y:auto;max-height:calc(100vh - 60px - 72px - 43px)}.GeNg2HVTmhQDmsLLTpWj{display:flex;flex-direction:column;align-items:unset !important;padding:10px;border-bottom:1px solid #f0f0f0;background-color:#fff !important;cursor:pointer}.GeNg2HVTmhQDmsLLTpWj:hover{background-color:#f9f9f9}@media(max-width: 768px){.GeNg2HVTmhQDmsLLTpWj{padding:8px}}.GBb48KXbGnQtAY8xqmUp{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:#f5f5f5;border-bottom:1px solid #e8e8e8}.LoCH7sYpmK3VgRASqTgz{font-size:20px;cursor:pointer;color:#595959}.Xjs10kZPSsD_BVFomnIe{color:#ff674c;margin-right:8px}.oibCayv_cOyhyWCKzHSr{display:flex;align-items:center;gap:10px}.oibCayv_cOyhyWCKzHSr span{font-size:14px;font-weight:500;color:#595959}.hhwYXSd0CR75D8ETnUML{display:flex;align-items:center;position:relative;padding-left:12px}@media(max-width: 768px){.hhwYXSd0CR75D8ETnUML{padding-left:8px}}.LkP1cqeAyAYI9rCurnE8{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:16px}@media(max-width: 768px){.LkP1cqeAyAYI9rCurnE8{font-size:12px}}.u_jT9kmq2kyThRlj8HT1{width:50px;height:50px;margin-left:10px;margin-right:10px}@media(max-width: 768px){.u_jT9kmq2kyThRlj8HT1{width:40px;height:40px;margin-left:8px;margin-right:8px}}.ieGdf5FTgLUPcfuZi7Xz{flex:1;overflow:hidden}.QgZ3oHW9IRTexL8xWVqP{font-weight:bold;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}@media(max-width: 768px){.QgZ3oHW9IRTexL8xWVqP{font-size:12px}}.JwfbSOSIRAz5OO2hiSFc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%;font-size:12px;color:#666;margin-top:2px}@media(max-width: 768px){.JwfbSOSIRAz5OO2hiSFc{font-size:10px}}.XfXQBYqMfZc4p8s2Mhla{width:6px;height:6px;background-color:#1890ff;border-radius:50%;margin-left:10px}@media(max-width: 768px){.XfXQBYqMfZc4p8s2Mhla{width:4px;height:4px;margin-left:8px}}.RGXTlVxCxbZpD6__J5_g{font-size:12px}.rWa5cnbZQLDtxFxJU6qA{font-size:20px;cursor:pointer}@media(max-width: 768px){.rWa5cnbZQLDtxFxJU6qA{font-size:18px}}.Pus_rAoqX05D4Qz2pYxo{animation:Pus_rAoqX05D4Qz2pYxo 1s ease-in-out infinite}@keyframes Pus_rAoqX05D4Qz2pYxo{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}
+.rUOcBpTPxrzfRw36v939{display:flex;align-items:center;width:100%;margin:16px 0;box-sizing:border-box}.rUOcBpTPxrzfRw36v939 .ant-descriptions{width:calc(100vw - 24px)}.rUOcBpTPxrzfRw36v939 .ant-descriptions-item-label{max-width:140px !important;padding:8px 16px !important;color:var(--color-blue) !important;font-weight:700 !important;font-size:12px !important}.rUOcBpTPxrzfRw36v939 .ant-descriptions-item-content{padding:8px 16px !important;font-size:12px !important}.cyz9pmVdkD7z1n7QUlfu{width:100vw !important;max-width:100vw !important}.PQ794lq3KZF_sigL5bbI{overflow:hidden !important}.PQ794lq3KZF_sigL5bbI .ant-modal .ant-modal-body{overflow-y:auto;overflow-x:hidden;max-height:80vh}.PQ794lq3KZF_sigL5bbI .ant-modal .ant-modal-content{padding:20px 12px !important}.PQ794lq3KZF_sigL5bbI .ant-modal-header{text-align:center !important}.PQ794lq3KZF_sigL5bbI .ant-modal-close{color:var(--button-default-background-hover-color)}.b23UIWngPXOEh5FC2mcC{display:flex;justify-content:center}.b23UIWngPXOEh5FC2mcC.DEfmwZ5CmWvodIcPVgfo{justify-content:space-between}.lIEwxxVD_vq2cGux3ehI{color:var(--button-default-background);font-size:26px}.ckRiBia09XQRtMVbNqvy{color:#c7cac9;pointer-events:none}

package/dist/types/components/MobileTable/UserInfoTable/index.d.ts

@@ -0,0 +1,21 @@
+import { Dispatch, SetStateAction } from 'react';
+interface Action {
+    key: string;
+    label: string;
+    onClick: () => void;
+}
+interface MobileTableProps {
+    data: Record<string, any>;
+    translation: string;
+    modalVisible: boolean;
+    setModalVisible: Dispatch<SetStateAction<boolean>>;
+    actions: Action[];
+    hasArrows?: boolean;
+    handlePrev?: () => void;
+    handleNext?: () => void;
+    hiddenColumns?: string[];
+    modalTableData?: any;
+    currentIndex?: number;
+}
+export declare const MobileTable: ({ data, translation, modalVisible, setModalVisible, actions, hiddenColumns, hasArrows, handleNext, handlePrev, modalTableData, currentIndex }: MobileTableProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/MobileTable/index.d.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from 'react';
+interface Action {
+    key: string;
+    label: string;
+    onClick: () => void;
+}
+interface MobileTableProps {
+    data: Record<string, any>;
+    translation: string;
+    modalVisible: boolean;
+    setModalVisible: Dispatch<SetStateAction<boolean>>;
+    actions: Action[];
+    title: string;
+    hasArrows?: boolean;
+    handlePrev?: () => void;
+    handleNext?: () => void;
+    hiddenColumns?: string[];
+    modalTableData?: any;
+    currentIndex?: number;
+}
+export declare const MobileTable: ({ data, title, translation, modalVisible, setModalVisible, actions, hiddenColumns, hasArrows, handleNext, handlePrev, modalTableData, currentIndex }: MobileTableProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Tag/index.d.ts

@@ -18,5 +18,6 @@ export interface customTagProps extends TagProps {
         value: string;
     }[];
     inputPlacehold?: string;
+    inputDefaultAdvancedFilter?: string;
 }
 export declare const TagField: (props: customTagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/index.d.ts

@@ -30,3 +30,4 @@ export * from './WebCam';
 export * from './ResponseType';
 export * from './Header';
 export * from './BellNotifications';
+export * from './MobileTable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.2.34",
+  "version": "1.2.36",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/MobileTable/index.tsx

@@ -0,0 +1,99 @@
+import styles from './styles.module.scss';
+import { Descriptions, Dropdown, Menu, Modal } from 'antd';
+import { useTranslation } from 'react-i18next';
+import {
+    LeftCircleOutlined,
+    RightCircleOutlined,
+} from "@ant-design/icons";
+import { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+import { Button } from '../Button';
+
+interface Action {
+    key: string;
+    label: string;
+    onClick: () => void;
+}
+
+interface MobileTableProps {
+    data: Record<string, any>;
+    translation: string;
+    modalVisible: boolean;
+    setModalVisible: Dispatch<SetStateAction<boolean>>;
+    actions: Action[];
+    title: string;
+    hasArrows?: boolean;
+    handlePrev?: () => void;
+    handleNext?: () => void;
+    hiddenColumns?: string[];
+    modalTableData?: any;
+    currentIndex?: number;
+}
+
+export const MobileTable = (
+    {
+        data, title, translation, modalVisible, setModalVisible, actions = [], hiddenColumns = [], hasArrows = true, handleNext, handlePrev, modalTableData, currentIndex
+    }: MobileTableProps) => {
+
+    const { t } = useTranslation();
+
+    const menu = (
+        <Menu>
+            {actions.map((action, index) => (
+                <React.Fragment key={action.key}>
+                    <Menu.Item key={action.key} onClick={action.onClick}>
+                        {action.label}
+                    </Menu.Item>
+
+                    {index < actions.length - 1 && <Menu.Divider />}
+                </React.Fragment>
+            ))}
+        </Menu>
+    );
+
+    return (
+        <Modal
+            title={title}
+            open={modalVisible}
+            onCancel={() => setModalVisible(false)}
+            className={styles.fullScreenModal}
+            wrapClassName={styles.wrapModal}
+            centered
+            footer={(
+                <div className={`${styles.footer} ${hasArrows ? styles.center : ""}`}>
+                    {hasArrows &&
+                        <LeftCircleOutlined
+                            className={`${styles.arrowIcons} ${currentIndex === 0 ? styles.disabledIcon : ""}`}
+                            onClick={handlePrev}
+                            disabled={currentIndex === 0}
+                        />
+                    }
+
+                    <Dropdown overlay={menu}>
+                        <Button>{t("tableHeadings.action")}</Button>
+                    </Dropdown>
+
+                    {hasArrows &&
+                        <RightCircleOutlined
+                            className={`${styles.arrowIcons} ${currentIndex === modalTableData?.length! - 1 ? styles.disabledIcon : ""}`}
+                            onClick={handleNext}
+                            disabled={currentIndex === modalTableData?.length! - 1}
+                        />
+                    }
+                </div>
+            )}
+        >
+            <div className={styles.details}>
+                <Descriptions bordered column={{ xs: 1, sm: 1, md: 1 }}>
+                    {Object.entries(data)
+                        .filter(([key]) => !hiddenColumns.includes(key))
+                        .map(([key, value]) => (
+                            <Descriptions.Item key={key} label={t(`${translation}.${key}`, key)}>
+                                {Array.isArray(value) ? value.join(", ") : value ?? "-"}
+                            </Descriptions.Item>
+                        ))}
+                </Descriptions>
+            </div>
+        </Modal>
+    );
+};

package/src/components/MobileTable/styles.module.scss

@@ -0,0 +1,74 @@
+.details {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 16px 0;
+    box-sizing: border-box;
+
+    :global {
+        .ant-descriptions {
+            width: calc(100vw - 24px);
+        }
+
+        .ant-descriptions-item-label {
+            max-width: 140px !important;
+            padding: 8px 16px !important;
+            color: var(--color-blue) !important;
+            font-weight: 700 !important;
+            font-size: 12px !important;
+        }
+
+        .ant-descriptions-item-content {
+            padding: 8px 16px !important;
+            font-size: 12px !important;
+        }
+    }
+}
+
+.fullScreenModal {
+    width: 100vw !important;
+    max-width: 100vw !important;
+}
+
+.wrapModal {
+    overflow: hidden !important;
+
+    :global {
+        .ant-modal .ant-modal-body {
+            overflow-y: auto;
+            overflow-x: hidden;
+            max-height: 80vh;
+        }
+
+        .ant-modal .ant-modal-content {
+            padding: 20px 12px !important;
+        }
+
+        .ant-modal-header {
+            text-align: center !important;
+        }
+
+        .ant-modal-close {
+            color: var(--button-default-background-hover-color);
+        }
+    }
+}
+
+.footer {
+    display: flex;
+    justify-content: center;
+
+    &.center {
+        justify-content: space-between;
+    }
+}
+
+.arrowIcons {
+    color: var(--button-default-background);
+    font-size: 26px;
+}
+
+.disabledIcon {
+    color: #c7cac9;
+    pointer-events: none;
+}

package/src/components/Tag/Tag.stories.tsx

@@ -22,7 +22,8 @@ const Template: Story<TagProps> = (args) => {
         advancedTags={advancedsFilters}
         tagsInfo={setTagsInfo}
         advancedTagsInfo={setAdvancedTagsInfo}
-        addExtraTags={"ola"}>
+        inputPlacehold="ola"
+        >
     </TagField>;
 }
 

package/src/components/Tag/index.tsx

@@ -20,15 +20,17 @@ export interface customTagProps extends TagProps {
     hideAdvancedFilters?: boolean;
     defaultAdvancedFilters?: { display: string; value: string }[];
     inputPlacehold?: string;
+    inputDefaultAdvancedFilter?: string;
 }
 
 export const TagField = (props: customTagProps) => {
-    const { customTags = [], advancedTags, disable, defaultAdvancedFilters = [], hideAdvancedFilters = false, inputPlacehold } = props;
+    const { customTags = [], advancedTags, disable, defaultAdvancedFilters = [], hideAdvancedFilters = false, inputPlacehold, inputDefaultAdvancedFilter = "" } = props;
 
     const [tags, setTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
     const [inputVisible, setInputVisible] = useState<boolean>(false);
-    const [inputValue, setInputValue] = useState('');
-    // const [switchValue, setSwitchValue] = useState<boolean>(false);
+    const [inputValue, setInputValue] = useState(
+        inputDefaultAdvancedFilter !== "" ? inputDefaultAdvancedFilter + '=' : ''
+    );    // const [switchValue, setSwitchValue] = useState<boolean>(false);
     const inputRef = useRef<InputRef>(null);
     const [advancedTagList, setAdvancedTagList] = useState<Array<{ display: string; value: string }>>(
         defaultAdvancedFilters

package/src/components/index.tsx

@@ -30,3 +30,4 @@ export * from './WebCam';
 export * from './ResponseType';
 export * from './Header';
 export * from './BellNotifications';
+export * from './MobileTable';

package/src/locales/pt.json

@@ -7,7 +7,7 @@
         "role": "Posição",
         "type": "Tipo",
         "id": "Id",
-        "action": "Ação"
+        "action": "Ações"
     },
     "userInfoColumn": {
         "Date": "Data",