@omniumretail/component-library 1.0.41 → 1.0.42

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.42",
   "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/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;