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

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.281",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",