@omniumretail/component-library 1.0.69 → 1.0.71

package/src/components/ModalConfirmation/index.tsx

@@ -1,70 +1,70 @@
-import { Button } from '../Button';
-import { Modal } from 'antd';
-import { useEffect, useState } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
-import styles from './styles.module.scss';
-import { ModalStatus } from './ModalStatusList';
-
-export interface ModalConfirmationProps {
-    closeText: string;
-    title: string;
-    description: string;
-    buttonText: string;
-    isOpen: boolean;
-    modalData?: any;
-}
-
-export const ModalConfirmation = (props: ModalConfirmationProps) => {
-    const {
-        closeText,
-        title,
-        description,
-        buttonText,
-        isOpen = false,
-        modalData,
-    } = props;
-    
-    const [status, setStatus] = useState<string>('');
-    
-    useEffect(()=> {
-        isOpen &&
-        setStatus(ModalStatus.OPEN);
-    }, [isOpen])
-
-
-    const closeAndChangeStatus = (status: string) => {
-        setStatus(status);
-    }
-
-    useEffect(() => {
-        modalData({
-            "status": status,
-        });
-    }, [status]);
-
-    return (
-        <>
-            <Modal
-                destroyOnClose={true}
-                closeIcon={
-                    <div className={styles.closeButton}>
-                        <p>{closeText}</p><CloseOutlined />
-                    </div>
-                } 
-                open={status === ModalStatus.OPEN}
-                onCancel={() => closeAndChangeStatus(ModalStatus.CANCELED)}
-                centered
-                width={'742px'}
-                footer={[
-                    <Button key="submit" onClick={() => closeAndChangeStatus(ModalStatus.REQUESTED_CHANGES)}>
-                        {buttonText}
-                    </Button>
-                ]}
-                className={styles.modal}
-            >
-                <h2 className={styles.title}>{title}</h2>
-                <p className={styles.description}>{description}</p>
-            </Modal>
-        </>
-    )
-}
+import { Button } from '../Button';
+import { Modal } from 'antd';
+import { useEffect, useState } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import styles from './styles.module.scss';
+import { ModalStatus } from './ModalStatusList';
+
+export interface ModalConfirmationProps {
+    closeText: string;
+    title: string;
+    description: string;
+    buttonText: string;
+    isOpen: boolean;
+    modalData?: any;
+}
+
+export const ModalConfirmation = (props: ModalConfirmationProps) => {
+    const {
+        closeText,
+        title,
+        description,
+        buttonText,
+        isOpen = false,
+        modalData,
+    } = props;
+    
+    const [status, setStatus] = useState<string>('');
+    
+    useEffect(()=> {
+        isOpen &&
+        setStatus(ModalStatus.OPEN);
+    }, [isOpen])
+
+
+    const closeAndChangeStatus = (status: string) => {
+        setStatus(status);
+    }
+
+    useEffect(() => {
+        modalData({
+            "status": status,
+        });
+    }, [status]);
+
+    return (
+        <>
+            <Modal
+                destroyOnClose={true}
+                closeIcon={
+                    <div className={styles.closeButton}>
+                        <p>{closeText}</p><CloseOutlined />
+                    </div>
+                } 
+                open={status === ModalStatus.OPEN}
+                onCancel={() => closeAndChangeStatus(ModalStatus.CANCELED)}
+                centered
+                width={'742px'}
+                footer={[
+                    <Button key="submit" onClick={() => closeAndChangeStatus(ModalStatus.REQUESTED_CHANGES)}>
+                        {buttonText}
+                    </Button>
+                ]}
+                className={styles.modal}
+            >
+                <h2 className={styles.title}>{title}</h2>
+                <p className={styles.description}>{description}</p>
+            </Modal>
+        </>
+    )
+}

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

@@ -1,62 +1,62 @@
-.modal {
-    :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;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            text-align: center;
-
-            @media(min-width: 742px) {
-                padding: 64px;
-            }
-        }
-    }
-
-    .ant-modal-close {
-        &:hover {
-            .closeButton {
-                color: red;
-            }
-        }
-    }
-
-    .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;
-    }
-
-    .title {
-        color: var(--color-blue);
-        font-weight: var(--font-weight-semibold);
-        font-size: var(--font-size-body-6);
-        line-height: 100%;
-    }
-
-    .description {
-        color: var(--color-black);
-        font-size: var(--font-size-body-4);
-        margin: 12px 0 24px 0;
-        padding: 0;
-    }
-}
+.modal {
+    :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;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+
+            @media(min-width: 742px) {
+                padding: 64px;
+            }
+        }
+    }
+
+    .ant-modal-close {
+        &:hover {
+            .closeButton {
+                color: red;
+            }
+        }
+    }
+
+    .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;
+    }
+
+    .title {
+        color: var(--color-blue);
+        font-weight: var(--font-weight-semibold);
+        font-size: var(--font-size-body-6);
+        line-height: 100%;
+    }
+
+    .description {
+        color: var(--color-black);
+        font-size: var(--font-size-body-4);
+        margin: 12px 0 24px 0;
+        padding: 0;
+    }
+}

package/src/components/ModalWithTable/ModalWithTable.stories.tsx

@@ -1,96 +1,96 @@
-import { Meta, Story } from "@storybook/react";
-import { useEffect, useState } from "react";
-import { ModalWithTable, ModalWithTableProps } from '.';
-
-export default {
-    title: 'ModalWithTable',
-    component: ModalWithTable,
-} as Meta;
-
-const Template: Story<ModalWithTableProps> = (args) => {
-    const [modalData, setModalData] = useState<any>({});
-    const [isFetching, setIsFetching] = useState<boolean>(false);
-    const [tagsData, setTagsData] = useState<any>({});
-    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-    const [selectedSupervisors, setSelectedSupervisors] = useState<any>(['232']);
-
-    const onClickMe = () => {
-        setIsModalOpen(true);
-    }
-    
-    let data = {
-        dataSource: [
-            {
-                key: `1`,
-                name: `John Brown`,
-                mecanographicNumber: "232",
-                store: `Levi's Sta Catarina`,
-                role: `Gerente`,
-                type: `Efetivo`
-            },
-            {
-                key: `2`,
-                name: `Mary Brown`,
-                mecanographicNumber: "32",
-                store: `Levi's Sta Catarina`,
-                role: `Comercial`,
-                type: `Efetivo`
-            },
-            {
-                key: `3`,
-                name: `Anna Astori`,
-                mecanographicNumber: "3212",
-                store: `Levi's Sta Catarina`,
-                role: `Funcionário`,
-                type: `Efetivo`
-            },
-            {
-                key: `4`,
-                name: `Yield Ona`,
-                mecanographicNumber: "21232",
-                store: `Adidas Restaurantes`,
-                role: `Gerente`,
-                type: `Efetivo`
-            },
-        ],
-        pagination: {
-            total: 4,
-            pageSize: 2
-        },
-        rowKeyValue: 'mecanographicNumber',
-        rowSelection: {
-            type: 'checkbox',
-            selectedRowKeys: selectedSupervisors?.length > 0 ? selectedSupervisors : []
-        },
-    }
-
-    useEffect(() => {
-        if(modalData?.tagsInfo?.length > 0 && tagsData !== modalData?.tagsInfo) {
-            setTagsData(modalData.tagsInfo);
-            setIsFetching(true);
-
-            setTimeout(() => {
-                setIsFetching(false);
-            }, 1000);
-        }
-
-        if(modalData?.rowSelectionInfo?.length !== undefined) {
-            setSelectedSupervisors(modalData.rowSelectionInfo);
-        }
-
-        setIsModalOpen(modalData?.open!);
-    }, [modalData]);
-
-    return (
-        <>
-            <button onClick={() => onClickMe()}> Button </button>
-            <ModalWithTable {...args} modalData={setModalData} isLoading={isFetching} tableData={data} isOpen={isModalOpen} advancedTagsList={['Country', 'County']}></ModalWithTable>
-        </>
-    );
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-    closeText: 'cancelar',
-    buttonText: 'Alterar',
-};
+import { Meta, Story } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { ModalWithTable, ModalWithTableProps } from '.';
+
+export default {
+    title: 'ModalWithTable',
+    component: ModalWithTable,
+} as Meta;
+
+const Template: Story<ModalWithTableProps> = (args) => {
+    const [modalData, setModalData] = useState<any>({});
+    const [isFetching, setIsFetching] = useState<boolean>(false);
+    const [tagsData, setTagsData] = useState<any>({});
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [selectedSupervisors, setSelectedSupervisors] = useState<any>(['232']);
+
+    const onClickMe = () => {
+        setIsModalOpen(true);
+    }
+    
+    let data = {
+        dataSource: [
+            {
+                key: `1`,
+                name: `John Brown`,
+                mecanographicNumber: "232",
+                store: `Levi's Sta Catarina`,
+                role: `Gerente`,
+                type: `Efetivo`
+            },
+            {
+                key: `2`,
+                name: `Mary Brown`,
+                mecanographicNumber: "32",
+                store: `Levi's Sta Catarina`,
+                role: `Comercial`,
+                type: `Efetivo`
+            },
+            {
+                key: `3`,
+                name: `Anna Astori`,
+                mecanographicNumber: "3212",
+                store: `Levi's Sta Catarina`,
+                role: `Funcionário`,
+                type: `Efetivo`
+            },
+            {
+                key: `4`,
+                name: `Yield Ona`,
+                mecanographicNumber: "21232",
+                store: `Adidas Restaurantes`,
+                role: `Gerente`,
+                type: `Efetivo`
+            },
+        ],
+        pagination: {
+            total: 4,
+            pageSize: 2
+        },
+        rowKeyValue: 'mecanographicNumber',
+        rowSelection: {
+            type: 'checkbox',
+            selectedRowKeys: selectedSupervisors?.length > 0 ? selectedSupervisors : []
+        },
+    }
+
+    useEffect(() => {
+        if(modalData?.tagsInfo?.length > 0 && tagsData !== modalData?.tagsInfo) {
+            setTagsData(modalData.tagsInfo);
+            setIsFetching(true);
+
+            setTimeout(() => {
+                setIsFetching(false);
+            }, 1000);
+        }
+
+        if(modalData?.rowSelectionInfo?.length !== undefined) {
+            setSelectedSupervisors(modalData.rowSelectionInfo);
+        }
+
+        setIsModalOpen(modalData?.open!);
+    }, [modalData]);
+
+    return (
+        <>
+            <button onClick={() => onClickMe()}> Button </button>
+            <ModalWithTable {...args} modalData={setModalData} isLoading={isFetching} tableData={data} isOpen={isModalOpen} advancedTagsList={['Country', 'County']}></ModalWithTable>
+        </>
+    );
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+    closeText: 'cancelar',
+    buttonText: 'Alterar',
+};