@omniumretail/component-library 1.0.72 → 1.0.74

package/src/components/ModalWithTable/index.tsx

@@ -1,232 +1,232 @@
-import { Button } from '../Button';
-import { Modal } from 'antd';
-import { useEffect, useRef, useState } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
-import styles from './styles.module.scss';
-import { TagField } from '../Tag';
-import { Table, TableCustomProps } from '../Table';
-import classnames from 'classnames';
-
-export interface ModalWithTableProps {
-    closeText: string;
-    buttonText: string;
-    isOpen: boolean;
-    tableData: TableCustomProps,
-    modalData?: any;
-    isLoading?: boolean;
-    confirmLoading?: boolean;
-    initialRowSelectedInfo?: any;
-    // Tags List for advanced search
-    advancedTagsList?: string[];
-}
-function objectsAreEqual(obj1: any, obj2: any) {
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-
-    for (const key of keys1) {
-        if (!keys2.includes(key) || obj1[key] !== obj2[key]) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-function arrayContainsObject(array: any, newObj: any) {
-    return array.some((existingObj: any) => objectsAreEqual(existingObj, newObj));
-}
-
-export const ModalWithTable = (props: ModalWithTableProps) => {
-    const {
-        closeText,
-        buttonText,
-        isOpen = false,
-        tableData,
-        modalData,
-        isLoading,
-        initialRowSelectedInfo,
-        advancedTagsList
-    } = props;
-
-    const prevIsOpenRef = useRef<boolean>();
-    useEffect(() => {
-        prevIsOpenRef.current = isOpen;
-    }, [isOpen]);
-    const prevIsOpen = prevIsOpenRef.current;
-
-    // Add a new state to store the initial values
-    const [initialValues, setInitialValues] = useState<any>({
-        pageInfo: {},
-        rowSelectionInfo: [],
-        tagsInfo: [],
-        advancedTagsInfo: [],
-        selectedData: [],
-    });
-    const pageBase = { currentPage: 1 };
-    const [open, setOpen] = useState((isOpen));
-    const [confirmLoading, setConfirmLoading] = useState(false);
-    const [pageInfo, setPageInfo] = useState<any>(pageBase);
-    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>(undefined);
-    const [tagsInfo, setTagsInfo] = useState<any>([]);
-    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>([]);
-    const [selectedData, setSelectedData] = useState<any>([]);
-
-    useEffect(() => {
-        setOpen(isOpen);
-
-        if (isOpen && !prevIsOpen) {
-            setInitialValues({
-                pageInfo: pageInfo,
-                rowSelectionInfo: rowSelectionInfo,
-                tagsInfo: tagsInfo,
-                advancedTagsInfo: advancedTagsInfo,
-                selectedData: selectedData,
-            });
-        }
-    }, [isOpen])
-
-    useEffect(() => {
-        initialRowSelectedInfo && setRowSelectionInfo(initialRowSelectedInfo);
-    }, [initialRowSelectedInfo])
-
-    const hideModal = () => {
-        setOpen(false);
-        setPageInfo(initialValues.pageInfo);
-        setRowSelectionInfo(initialValues.rowSelectionInfo);
-        setTagsInfo(initialValues.tagsInfo);
-        setAdvancedTagsInfo(initialValues.advancedTagsInfo)
-        setSelectedData(initialValues.selectedData);
-    };
-
-    const saveChanges = () => {
-        setOpen(false);
-        if (tableData?.rowSelection?.type === 'radio') {
-            setSelectedData([selectedData[selectedData.length - 1]]);
-        }
-    };
-
-    useEffect(() => {
-        if (!open) {
-            setPageInfo(pageBase);
-        }
-
-        const modalDataObj = {
-            pageInfo: pageInfo,
-            rowSelectionInfo: rowSelectionInfo,
-            tagsInfo: tagsInfo,
-            advancedTagsInfo: advancedTagsInfo,
-            open: open,
-            selectedData: selectedData,
-        };
-
-        modalData(modalDataObj);
-    }, [tagsInfo, advancedTagsInfo, open, rowSelectionInfo, selectedData]);
-
-    useEffect(() => {
-        const selectedRowKeys = rowSelectionInfo || tableData.rowSelection.selectedRowKeys;
-
-        if (tableData?.rowSelection?.type === 'radio') {
-            setSelectedData((prevData: any) => {
-                const newData = tableData?.dataSource?.filter((element) => {
-                    return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
-                }) || [];
-
-                if (newData.length < 1) {
-                    return selectedData;
-                }
-                if (arrayContainsObject(selectedData, newData[0])) {
-                    return selectedData;
-                }
-                const combinedData = [...selectedData, ...newData];
-                return combinedData;
-            });
-
-            return;
-        }
-
-        setSelectedData((prevData: any) => {
-            const newData = tableData?.dataSource?.filter((element) => {
-                return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
-            }) || [];
-
-            const oldData = prevData.filter((dataItem: any) => {
-                return !tableData?.dataSource?.some(
-                    (element) => element[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
-                );
-            });
-
-            const combinedData = [...oldData, ...newData].filter((dataItem, index, self) => {
-                return (
-                    index ===
-                    self.findIndex(
-                        (item) => item[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
-                    )
-                );
-            });
-
-            setInitialValues({ ...initialValues, selectedData: combinedData });
-            return combinedData;
-        });
-    }, [rowSelectionInfo])
-
-    useEffect(() => {
-        if (tagsInfo.length > 0) {
-            setConfirmLoading(true);
-        }
-    }, [tagsInfo]);
-
-    useEffect(() => {
-        if (advancedTagsInfo.length > 0) {
-            setConfirmLoading(true);
-        }
-    }, [advancedTagsInfo]);
-
-    useEffect(() => {
-        setConfirmLoading(isLoading!);
-    }, [isLoading]);
-
-    const modalClasses = classnames({
-        [styles.disabled]: confirmLoading,
-    }, styles.modal);
-
-    return (
-        <>
-            <Modal
-                destroyOnClose={true}
-                closeIcon={
-                    <div className={styles.closeButton}>
-                        <p>{closeText}</p><CloseOutlined />
-                    </div>
-                }
-                open={open}
-                onOk={hideModal}
-                onCancel={hideModal}
-                maskClosable={false}
-                centered
-                width={'100%'}
-                footer={[
-                    <Button key="submit" onClick={saveChanges}>
-                        {buttonText}
-                    </Button>
-                ]}
-                className={modalClasses}
-            >
-                <div className={styles.tagsWrapper}>
-                    <TagField tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo} advancedTags={advancedTagsList} />
-                </div>
-
-                <div className={styles.tableWrapper}>
-                    {tableData &&
-                        <Table {...tableData} paginationInfo={setPageInfo} rowSelectionInfo={setRowSelectionInfo} headingTranslationsKey={'tableHeadings'} />
-                    }
-                </div>
-
-            </Modal>
-        </>
-    )
-}
-
+import { Button } from '../Button';
+import { Modal } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import styles from './styles.module.scss';
+import { TagField } from '../Tag';
+import { Table, TableCustomProps } from '../Table';
+import classnames from 'classnames';
+
+export interface ModalWithTableProps {
+    closeText: string;
+    buttonText: string;
+    isOpen: boolean;
+    tableData: TableCustomProps,
+    modalData?: any;
+    isLoading?: boolean;
+    confirmLoading?: boolean;
+    initialRowSelectedInfo?: any;
+    // Tags List for advanced search
+    advancedTagsList?: string[];
+}
+function objectsAreEqual(obj1: any, obj2: any) {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+
+    for (const key of keys1) {
+        if (!keys2.includes(key) || obj1[key] !== obj2[key]) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+function arrayContainsObject(array: any, newObj: any) {
+    return array.some((existingObj: any) => objectsAreEqual(existingObj, newObj));
+}
+
+export const ModalWithTable = (props: ModalWithTableProps) => {
+    const {
+        closeText,
+        buttonText,
+        isOpen = false,
+        tableData,
+        modalData,
+        isLoading,
+        initialRowSelectedInfo,
+        advancedTagsList
+    } = props;
+
+    const prevIsOpenRef = useRef<boolean>();
+    useEffect(() => {
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen]);
+    const prevIsOpen = prevIsOpenRef.current;
+
+    // Add a new state to store the initial values
+    const [initialValues, setInitialValues] = useState<any>({
+        pageInfo: {},
+        rowSelectionInfo: [],
+        tagsInfo: [],
+        advancedTagsInfo: [],
+        selectedData: [],
+    });
+    const pageBase = { currentPage: 1 };
+    const [open, setOpen] = useState((isOpen));
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const [pageInfo, setPageInfo] = useState<any>(pageBase);
+    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>(undefined);
+    const [tagsInfo, setTagsInfo] = useState<any>([]);
+    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>([]);
+    const [selectedData, setSelectedData] = useState<any>([]);
+
+    useEffect(() => {
+        setOpen(isOpen);
+
+        if (isOpen && !prevIsOpen) {
+            setInitialValues({
+                pageInfo: pageInfo,
+                rowSelectionInfo: rowSelectionInfo,
+                tagsInfo: tagsInfo,
+                advancedTagsInfo: advancedTagsInfo,
+                selectedData: selectedData,
+            });
+        }
+    }, [isOpen])
+
+    useEffect(() => {
+        initialRowSelectedInfo && setRowSelectionInfo(initialRowSelectedInfo);
+    }, [initialRowSelectedInfo])
+
+    const hideModal = () => {
+        setOpen(false);
+        setPageInfo(initialValues.pageInfo);
+        setRowSelectionInfo(initialValues.rowSelectionInfo);
+        setTagsInfo(initialValues.tagsInfo);
+        setAdvancedTagsInfo(initialValues.advancedTagsInfo)
+        setSelectedData(initialValues.selectedData);
+    };
+
+    const saveChanges = () => {
+        setOpen(false);
+        if (tableData?.rowSelection?.type === 'radio') {
+            setSelectedData([selectedData[selectedData.length - 1]]);
+        }
+    };
+
+    useEffect(() => {
+        if (!open) {
+            setPageInfo(pageBase);
+        }
+
+        const modalDataObj = {
+            pageInfo: pageInfo,
+            rowSelectionInfo: rowSelectionInfo,
+            tagsInfo: tagsInfo,
+            advancedTagsInfo: advancedTagsInfo,
+            open: open,
+            selectedData: selectedData,
+        };
+
+        modalData(modalDataObj);
+    }, [tagsInfo, advancedTagsInfo, open, rowSelectionInfo, selectedData]);
+
+    useEffect(() => {
+        const selectedRowKeys = rowSelectionInfo || tableData.rowSelection.selectedRowKeys;
+
+        if (tableData?.rowSelection?.type === 'radio') {
+            setSelectedData((prevData: any) => {
+                const newData = tableData?.dataSource?.filter((element) => {
+                    return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
+                }) || [];
+
+                if (newData.length < 1) {
+                    return selectedData;
+                }
+                if (arrayContainsObject(selectedData, newData[0])) {
+                    return selectedData;
+                }
+                const combinedData = [...selectedData, ...newData];
+                return combinedData;
+            });
+
+            return;
+        }
+
+        setSelectedData((prevData: any) => {
+            const newData = tableData?.dataSource?.filter((element) => {
+                return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
+            }) || [];
+
+            const oldData = prevData.filter((dataItem: any) => {
+                return !tableData?.dataSource?.some(
+                    (element) => element[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
+                );
+            });
+
+            const combinedData = [...oldData, ...newData].filter((dataItem, index, self) => {
+                return (
+                    index ===
+                    self.findIndex(
+                        (item) => item[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
+                    )
+                );
+            });
+
+            setInitialValues({ ...initialValues, selectedData: combinedData });
+            return combinedData;
+        });
+    }, [rowSelectionInfo])
+
+    useEffect(() => {
+        if (tagsInfo.length > 0) {
+            setConfirmLoading(true);
+        }
+    }, [tagsInfo]);
+
+    useEffect(() => {
+        if (advancedTagsInfo.length > 0) {
+            setConfirmLoading(true);
+        }
+    }, [advancedTagsInfo]);
+
+    useEffect(() => {
+        setConfirmLoading(isLoading!);
+    }, [isLoading]);
+
+    const modalClasses = classnames({
+        [styles.disabled]: confirmLoading,
+    }, styles.modal);
+
+    return (
+        <>
+            <Modal
+                destroyOnClose={true}
+                closeIcon={
+                    <div className={styles.closeButton}>
+                        <p>{closeText}</p><CloseOutlined />
+                    </div>
+                }
+                open={open}
+                onOk={hideModal}
+                onCancel={hideModal}
+                maskClosable={false}
+                centered
+                width={'100%'}
+                footer={[
+                    <Button key="submit" onClick={saveChanges}>
+                        {buttonText}
+                    </Button>
+                ]}
+                className={modalClasses}
+            >
+                <div className={styles.tagsWrapper}>
+                    <TagField tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo} advancedTags={advancedTagsList} />
+                </div>
+
+                <div className={styles.tableWrapper}>
+                    {tableData &&
+                        <Table {...tableData} paginationInfo={setPageInfo} rowSelectionInfo={setRowSelectionInfo} headingTranslationsKey={'tableHeadings'} />
+                    }
+                </div>
+
+            </Modal>
+        </>
+    )
+}
+

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

@@ -1,77 +1,77 @@
-.modal {
-    &.disabled {
-        pointer-events: none;
-        position: relative;
-        
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(var(--color-white-rgb), .6);
-            z-index: 9999999;
-        }
-    }
-
-    :global {
-        .ant-modal-close {
-            width: auto;
-            color: var(--button-default-background);
-            
-            &:hover {
-                background-color: transparent;
-                color: var(--button-default-background-hover-color);
-            }
-        }
-
-        .ant-modal-content {
-            padding: 36px 24px;
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            text-align: center;
-
-            @media(min-width: 742px) {
-                padding: 32px;
-            }
-        }
-
-        .ant-modal-body {
-            width: 100%;
-            padding-top: 24px;
-        }
-
-        .ant-modal-footer {
-            button {
-                margin-left: auto;
-            }
-        }
-    }
-
-    .closeButton {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: row;
-        gap: 8px;
-        color: inherit;
-        font-size: var(--font-size-body-3);
-        line-height: 100%;
-        font-weight: var(--font-weight-light);
-        text-transform: capitalize;
-        letter-spacing: .6px;
-        justify-self: flex-end;
-
-        > p {
-            padding: 0;
-            margin: 0;
-        }
-    }
-
-    .tagsWrapper {
-        max-width: 640px;
-        text-align: left;
-    }
-}
+.modal {
+    &.disabled {
+        pointer-events: none;
+        position: relative;
+        
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(var(--color-white-rgb), .6);
+            z-index: 9999999;
+        }
+    }
+
+    :global {
+        .ant-modal-close {
+            width: auto;
+            color: var(--button-default-background);
+            
+            &:hover {
+                background-color: transparent;
+                color: var(--button-default-background-hover-color);
+            }
+        }
+
+        .ant-modal-content {
+            padding: 36px 24px;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+
+            @media(min-width: 742px) {
+                padding: 32px;
+            }
+        }
+
+        .ant-modal-body {
+            width: 100%;
+            padding-top: 24px;
+        }
+
+        .ant-modal-footer {
+            button {
+                margin-left: auto;
+            }
+        }
+    }
+
+    .closeButton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+        gap: 8px;
+        color: inherit;
+        font-size: var(--font-size-body-3);
+        line-height: 100%;
+        font-weight: var(--font-weight-light);
+        text-transform: capitalize;
+        letter-spacing: .6px;
+        justify-self: flex-end;
+
+        > p {
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    .tagsWrapper {
+        max-width: 640px;
+        text-align: left;
+    }
+}

package/src/components/Navigation/Navigation.stories.tsx

@@ -1,17 +1,17 @@
-import { Meta, Story } from "@storybook/react";
-import { Navigation, NavigationProps } from '.';
-
-export default {
-    title: 'Navigation',
-    component: Navigation,
-} as Meta;
-
-const Template: Story<NavigationProps> = (args) => <Navigation {...args}></Navigation>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    backLink: true,
-    title: 'Gestão de Aplicações',
-    homeLink: true,
-    loginLink: true,
-};
+import { Meta, Story } from "@storybook/react";
+import { Navigation, NavigationProps } from '.';
+
+export default {
+    title: 'Navigation',
+    component: Navigation,
+} as Meta;
+
+const Template: Story<NavigationProps> = (args) => <Navigation {...args}></Navigation>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    backLink: true,
+    title: 'Gestão de Aplicações',
+    homeLink: true,
+    loginLink: true,
+};