@omniumretail/component-library 1.0.41 → 1.0.43

package/dist/types/components/{RangePickerTag/RangePickerTag.stories.d.ts → ImageUpload/ImageUpload.stories.d.ts}

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import { TagProps } from 'antd';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Primary: Story<TagProps>;
+export declare const Primary: Story<any>;

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

@@ -0,0 +1,2 @@
+export declare const getResizedImage: (imageFile: any, maxWidth: any, maxHeight: any) => Promise<unknown>;
+export declare const getCroppedImg: (image: any, crop: any) => Promise<unknown>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ImageUpload: () => JSX.Element;

package/dist/types/components/Upload/Upload.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<any>;

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

@@ -0,0 +1,7 @@
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
+interface UploadPropsExtended extends UploadProps {
+    onImageChange?: (file: UploadFile | null) => void;
+    initialFileList?: UploadFile[];
+}
+export declare const Upload: (props: UploadPropsExtended) => JSX.Element;
+export {};

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

@@ -19,3 +19,4 @@ export * from './Category';
 export * from './DatePickerTag';
 export * from './AnalyticsBar';
 export * from './CategoryResponse';
+export * from './Upload';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -18,11 +18,13 @@
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-dom": "^18.0.9",
     "antd": "^5.1.2",
+    "antd-img-crop": "^4.10.2",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
+    "browser-image-compression": "^2.0.2",
     "browserslist": "^4.18.1",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
@@ -59,6 +61,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
+    "react-easy-crop": "^4.7.4",
     "react-i18next": "^12.1.4",
     "react-refresh": "^0.11.0",
     "resolve": "^1.20.0",

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

@@ -12,6 +12,7 @@ const Template: Story<ModalWithTableProps> = (args) => {
     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);
@@ -53,13 +54,13 @@ const Template: Story<ModalWithTableProps> = (args) => {
             },
         ],
         pagination: {
-            total: 6,
+            total: 4,
             pageSize: 2
         },
         rowKeyValue: 'mecanographicNumber',
         rowSelection: {
-            type: 'radio',
-            selectedRowKeys: ['232']
+            type: 'checkbox',
+            selectedRowKeys: selectedSupervisors?.length > 0 ? selectedSupervisors : []
         },
     }
 
@@ -73,6 +74,10 @@ const Template: Story<ModalWithTableProps> = (args) => {
             }, 1000);
         }
 
+        if(modalData?.rowSelectionInfo?.length !== undefined) {
+            setSelectedSupervisors(modalData.rowSelectionInfo);
+        }
+
         setIsModalOpen(modalData?.open!);
     }, [modalData]);
 

package/src/components/ModalWithTable/index.tsx

@@ -27,12 +27,14 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
         isLoading,
     } = props;
     
+    const pageBase = {currentPage: 1};
     const [open, setOpen] = useState((isOpen));
     const [confirmLoading, setConfirmLoading] = useState(false);
-    const [pageInfo, setPageInfo] = useState<any>({});
-    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
+    const [pageInfo, setPageInfo] = useState<any>(pageBase);
+    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>();
     const [tagsInfo, setTagsInfo] = useState<any>([]);
     const [ModalCanceled, setModalCanceled] = useState<boolean>(false);
+    const [selectedData, setSelectedData] = useState<any>([]);
 
     useEffect(()=> {
         setOpen(isOpen);
@@ -49,27 +51,36 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
     };
 
     useEffect(() => {
-        modalData({
-                "pageInfo": pageInfo,
-                "rowSelectionInfo": rowSelectionInfo,
-                "tagsInfo": tagsInfo,
-                "open": open
-            });
-    }, [tagsInfo, pageInfo, rowSelectionInfo, open]);
+        if(!open) {
+            setPageInfo(pageBase);
+        }
 
-    useEffect(() => {
-        setTimeout(() => {
-            ModalCanceled 
-            && modalData({
+        ModalCanceled 
+            ?   modalData({
                     "pageInfo": {},
-                    "rowSelectionInfo": {},
+                    "rowSelectionInfo": [],
                     "tagsInfo": [],
-                    "open": open
-                });   
+                    "open": open,
+                    "selectedData": []
+                })
+            :   modalData({
+                    "pageInfo": pageInfo,
+                    "rowSelectionInfo": rowSelectionInfo,
+                    "tagsInfo": tagsInfo,
+                    "open": open,
+                    "selectedData": selectedData
+                });
+    }, [open]);
+
+    useEffect(() => {
+        const selectedRowKeys = rowSelectionInfo || tableData.rowSelection.selectedRowKeys;
+
+        const filteredArray = tableData?.dataSource?.filter((element) => {
+            return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
+        });
 
-            setModalCanceled(false);
-        }, 100);
-    },[ModalCanceled]);
+        setSelectedData(filteredArray);
+    }, [rowSelectionInfo])
 
     useEffect(()=> {
         if(tagsInfo.length > 0) {

package/src/components/Upload/Upload.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, Story } from "@storybook/react";
+import { Form, UploadFile } from "antd";
+import { Button } from "components/Button";
+import { Upload } from '.';
+
+export default {
+    title: 'Upload',
+    component: Upload,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+    const [form] = Form.useForm();
+    
+    const handleSubmit = (values: any) => {
+        console.log('Form values:', values);
+    };
+
+    const handleImageChange = (file: UploadFile | null) => {
+        form.setFieldsValue({ image: file });
+    };
+    
+    const initialValue = {
+        uid: '-1',
+        name: 'image.png',
+        status: 'done',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    }
+    return (
+        <Form form={form} onFinish={handleSubmit}>
+            <Form.Item name="image" valuePropName="file" initialValue={initialValue}>
+                <Upload {...args} onImageChange={handleImageChange} initialFileList={[initialValue]}></Upload>
+            </Form.Item>
+            <Form.Item>
+                <Button type="primary" htmlType="submit">
+                    Submit
+                </Button>
+            </Form.Item>
+        </Form>
+    )
+}
+
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Upload/index.tsx

@@ -0,0 +1,93 @@
+import { Upload as UploadAntd } from 'antd';
+import ImgCrop from 'antd-img-crop';
+import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
+import React, { useState } from 'react';
+import imageCompression from 'browser-image-compression';
+
+interface UploadPropsExtended extends UploadProps {
+    onImageChange?: (file: UploadFile | null) => void;
+    initialFileList?: UploadFile[];
+}
+
+export const Upload = (props: UploadPropsExtended) => {
+    const {
+        onImageChange,
+        initialFileList
+    } = props;
+    const [fileList, setFileList] = useState<UploadFile[]>(initialFileList || []);
+    console.log(fileList);
+
+    const compressImage = async (file: RcFile) => {
+        const options = {
+            maxSizeMB: 1,
+            maxWidthOrHeight: 1920,
+            useWebWorker: true,
+        };
+
+        try {
+            const compressedFile = await imageCompression(file, options);
+            return compressedFile;
+        } catch (error) {
+            console.error('Image compression failed:', error);
+            return file;
+        }
+    };
+
+    const beforeUpload: UploadProps['beforeUpload'] = async (file: RcFile) => {
+        const compressedFile = await compressImage(file);
+        
+        const newFile: UploadFile = {
+            uid: file.uid,
+            name: file.name,
+            type: file.type,
+            size: compressedFile.size,
+            originFileObj: compressedFile as any,
+            status: 'done',
+        };
+    
+        setFileList((prevFileList) => [...prevFileList, newFile]);
+        if (onImageChange) {
+            onImageChange(newFile);
+        }
+        return false;
+    };
+
+    const onChange: UploadProps['onChange'] = ({ file, fileList: newFileList }) => {
+        if (file.status === 'removed') {
+            setFileList(newFileList);
+            if (onImageChange) {
+                onImageChange(newFileList[0] || null);
+            }
+        }
+    };
+
+    const onPreview = async (file: UploadFile) => {
+        let src = file.url as string;
+        if (!src) {
+            src = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file.originFileObj as RcFile);
+                reader.onload = () => resolve(reader.result as string);
+            });
+        }
+        const image = new Image();
+        image.src = src;
+        const imgWindow = window.open(src);
+        imgWindow?.document.write(image.outerHTML);
+    };
+
+    return (
+        <ImgCrop rotationSlider>
+            <UploadAntd
+                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                listType="picture-card"
+                fileList={fileList}
+                beforeUpload={beforeUpload}
+                onChange={onChange}
+                onPreview={onPreview}
+            >
+                {fileList.length < 1 && '+ Upload'}
+            </UploadAntd>
+        </ImgCrop>
+    );
+};

package/src/components/index.tsx

@@ -19,3 +19,4 @@ export * from './Category';
 export * from './DatePickerTag';
 export * from './AnalyticsBar';
 export * from './CategoryResponse';
+export * from './Upload';

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

@@ -1,6 +0,0 @@
-import { TagProps } from 'antd';
-export interface RangePickerTagProps extends TagProps {
-    customTags?: any;
-    tagsInfo?: any;
-}
-export declare const RangePickerTag: (props: RangePickerTagProps) => JSX.Element;