@antscorp/antsomi-ui 1.3.5-beta.280 → 1.3.5-beta.282

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -20,9 +20,10 @@ import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMA
 import { ToggleDrawerSizeButton } from './components';
 // Hooks
 import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
+import { ConfigProvider } from 'antd';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth"]);
+    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max' } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize"]);
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { onClose = () => { } } = props;
     const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
@@ -32,8 +33,19 @@ export const DrawerDetail = props => {
     const [collapseDrawer, toggleCollapseDrawer] = useToggle(false);
     // Effects
     useEffect(() => {
-        toggleCollapseDrawer(!matchesSmallScreen);
-    }, [matchesSmallScreen, toggleCollapseDrawer]);
+        if (matchesSmallScreen) {
+            toggleCollapseDrawer(false);
+        }
+        switch (defaultSize) {
+            case 'max':
+                toggleCollapseDrawer(false);
+                break;
+            case 'min':
+            default:
+                toggleCollapseDrawer(true);
+                break;
+        }
+    }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
     // Memo
     const drawerWidth = useMemo(() => {
         if (fullScreen)
@@ -63,22 +75,23 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
-    return (React.createElement(StyledDrawer, Object.assign({}, restProps, { push: false, closable: false, width: drawerWidth, classNames: {
-            body: 'drawer-detail-body',
-        } }),
-        showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
-                onCloseIconClick(e);
-                onClose(e);
+    return (React.createElement(ConfigProvider, { theme: { components: { Drawer: { motionDurationSlow: '0ms' } } } },
+        React.createElement(StyledDrawer, Object.assign({}, restProps, { push: false, closable: false, width: drawerWidth, classNames: {
+                body: 'drawer-detail-body',
             } }),
-            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-        showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
-        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
-            React.createElement("div", null,
-                showClose && (React.createElement(CloseBtn, { onClick: onClose },
-                    React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-                React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
-                    React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
-            React.createElement(MenuFooter, null, footer))),
-        React.createElement(Content, null, children)));
+            showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
+                    onCloseIconClick(e);
+                    onClose(e);
+                } }),
+                React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
+            showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
+                React.createElement("div", null,
+                    showClose && (React.createElement(CloseBtn, { onClick: onClose },
+                        React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+                    React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
+                        React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
+                React.createElement(MenuFooter, null, footer))),
+            React.createElement(Content, null, children))));
 };
 DrawerDetail.defaultProps = {};

package/es/components/molecules/DrawerDetail/types.d.ts

@@ -1,10 +1,12 @@
 import React, { ReactNode } from 'react';
 import type { DrawerProps, MenuProps as AntdProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
+export type TDefaultSize = 'max' | 'min';
 export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
     fullScreen?: boolean;
     maxWidth?: string | number;
     minWidth?: string | number;
+    defaultSize?: TDefaultSize;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
 }

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -93,23 +93,26 @@ export const ImageSlider = props => {
         var _a;
         (_a = fileRef === null || fileRef === void 0 ? void 0 : fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
     }, []);
-    const onImportImageSelect = (e) => {
+    const onImportImageSelect = useCallback((e) => {
         var _a, _b, _c;
         if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
             if (((_b = e.target.files) === null || _b === void 0 ? void 0 : _b[0].size) > SIZE_LIMIT) {
-                // return message.error('File size too big');
+                /**
+                 * NOTE: This reset e.target.files (fix: upload the same image later will trigger change input)
+                 * use DataTransfer because e.target.files = null not work in this case
+                 */
+                e.target.files = new DataTransfer().files;
                 message.error({
                     content: 'File size too big',
                     style: { fontSize: '11px', fontFamily: 'Roboto' },
                 });
-                e.target.files = null;
                 return;
             }
             (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL(e.target.files[0]));
             setUploadThumbnail(undefined);
         }
-        e.target.files = null;
-    };
+        e.target.files = new DataTransfer().files;
+    }, []);
     useDropFile('.image-upload-zone', e => {
         var _a, _b, _c, _d;
         if (!((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0]))
@@ -143,16 +146,9 @@ export const ImageSlider = props => {
     const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
     return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": showSkeletonMemo, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
         React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
-            React.createElement(ImageResizeComponent, { style: { visibility: typeof uploadThumbnail === 'number' ? 'hidden' : 'visible' }, className: "image-resize-wrapper", width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: 
-                // latestCanvas && isEditPrevious
-                (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
+            React.createElement(ImageResizeComponent, { className: `image-resize-wrapper ${typeof uploadThumbnail === 'number' ? 'visibility-hidden' : ''}`, width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
                     ? undefined
-                    : getUrlNoCache(currentThumbnailUrl, timeGenerated), 
-                // imageUrl={getUrlNoCache(
-                //   thumbnails[editingThumbnail ?? (uploadThumbnail as number)],
-                //   timeGenerated,
-                // )}
-                defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing] }),
+                    : getUrlNoCache(currentThumbnailUrl, timeGenerated), defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing] }),
             typeof uploadThumbnail !== 'number' ? null : (React.createElement(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
                 React.createElement(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }),
                 React.createElement(Flex, { vertical: true, align: "flex-start" },

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -47,6 +47,10 @@ export const ImageSliderStyled = styled(Flex) `
     background-size: 90% 90%;
   }
 
+  .image-resize-wrapper.visibility-hidden {
+    visibility: hidden;
+  }
+
   .image-resize-wrapper,
   .image-upload-zone {
     border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_1};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.280",
+  "version": "1.3.5-beta.282",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",