@itcase/forms 1.1.47 → 1.1.49

package/dist/itcase-forms.cjs.js

@@ -1019,10 +1019,10 @@ const defaultDropzoneProps = {
 
 const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileInputDropzone(props) {
   const {
-    className,
+    // className, unused
     maxFiles,
     maxSize,
-    size,
+    // size, unused
     fileErrorText,
     dropzoneProps = {},
     hintDescription,
@@ -1043,7 +1043,28 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   } = reactFinalForm.useForm();
   const [fileError, setFileError] = React.useState('');
   const [fileIsLoading, setFileIsLoading] = React.useState(false);
-  const filesList = React.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
+  const prevFilesListRef = React.useRef(null);
+  const filesList = React.useMemo(() => {
+    const newFilesList = inputValue ? castArray__default.default(inputValue) : [];
+    if (prevFilesListRef.current === null) {
+      prevFilesListRef.current = newFilesList;
+      return newFilesList;
+    }
+    // keep track of previous state and revoke unused object urls
+    prevFilesListRef.current.forEach(prevFile => {
+      if (!prevFile.preview) {
+        return;
+      }
+      const isFileDeleted = !newFilesList.some(newFile => {
+        return newFile.preview === prevFile.preview;
+      });
+      if (isFileDeleted) {
+        URL.revokeObjectURL(prevFile.preview);
+      }
+    });
+    prevFilesListRef.current = newFilesList;
+    return newFilesList;
+  }, [inputValue]);
   const changeFormState = React.useCallback(newFiles => {
     // If max files in dropzone is 1 - return file as it self, else as array of files
     // ps: for old projects compatibility
@@ -1109,7 +1130,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
       if (isPreviews) {
         // Add preview to every file
         acceptedFiles.forEach(file => {
-          if (!file.error) {
+          if (!file.error && !file.preview) {
             file.preview = URL.createObjectURL(file);
           }
         });
@@ -1156,17 +1177,18 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
       // First time convert value to Files and save to local and form state
       convertFiledValueAndSaveAsFiles(currentFilesList);
     }
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue]);
+  React.useEffect(() => {
     // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
     return () => {
-      filesList.forEach(file => {
-        if (file?.preview) {
+      prevFilesListRef.current.forEach(file => {
+        if (file.preview) {
           URL.revokeObjectURL(file.preview);
         }
       });
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue]);
+  }, []);
   const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
   const {
     fillClass,
@@ -1218,10 +1240,6 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     src: file.preview || file.image,
     onClick: event => {
       onClickPreview && onClickPreview(file, event);
-    },
-    onLoad: () => {
-      // Revoke data uri after image is loaded
-      URL.revokeObjectURL(file.preview);
     }
   })), file.error && /*#__PURE__*/React__default.default.createElement("div", null, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: thumbNameTextSize,
@@ -2777,6 +2795,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     fieldsGap,
     formName,
     groupGap,
+    heightClass,
     language,
     loader,
     loaderAppearance,
@@ -2821,6 +2840,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
     tertiaryButtonSize,
+    widthClass,
     before,
     after,
     isLoading,
@@ -2856,7 +2876,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       submitError
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', type && `form_type_${type}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        className: clsx__default.default(className, 'form', type && `form_type_${type}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,

package/dist/itcase-forms.esm.js

@@ -1,5 +1,5 @@
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
-import React, { useMemo, useEffect, useCallback, useState } from 'react';
+import React, { useMemo, useEffect, useCallback, useState, useRef } from 'react';
 import { setIn, FORM_ERROR, getIn } from 'final-form';
 import { useForm, Field, Form, FormSpy } from 'react-final-form';
 export { Field, useForm, useFormState } from 'react-final-form';
@@ -1008,10 +1008,10 @@ const defaultDropzoneProps = {
 
 const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
   const {
-    className,
+    // className, unused
     maxFiles,
     maxSize,
-    size,
+    // size, unused
     fileErrorText,
     dropzoneProps = {},
     hintDescription,
@@ -1032,7 +1032,28 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
   } = useForm();
   const [fileError, setFileError] = useState('');
   const [fileIsLoading, setFileIsLoading] = useState(false);
-  const filesList = useMemo(() => inputValue ? castArray(inputValue) : [], [inputValue]);
+  const prevFilesListRef = useRef(null);
+  const filesList = useMemo(() => {
+    const newFilesList = inputValue ? castArray(inputValue) : [];
+    if (prevFilesListRef.current === null) {
+      prevFilesListRef.current = newFilesList;
+      return newFilesList;
+    }
+    // keep track of previous state and revoke unused object urls
+    prevFilesListRef.current.forEach(prevFile => {
+      if (!prevFile.preview) {
+        return;
+      }
+      const isFileDeleted = !newFilesList.some(newFile => {
+        return newFile.preview === prevFile.preview;
+      });
+      if (isFileDeleted) {
+        URL.revokeObjectURL(prevFile.preview);
+      }
+    });
+    prevFilesListRef.current = newFilesList;
+    return newFilesList;
+  }, [inputValue]);
   const changeFormState = useCallback(newFiles => {
     // If max files in dropzone is 1 - return file as it self, else as array of files
     // ps: for old projects compatibility
@@ -1098,7 +1119,7 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
       if (isPreviews) {
         // Add preview to every file
         acceptedFiles.forEach(file => {
-          if (!file.error) {
+          if (!file.error && !file.preview) {
             file.preview = URL.createObjectURL(file);
           }
         });
@@ -1145,17 +1166,18 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
       // First time convert value to Files and save to local and form state
       convertFiledValueAndSaveAsFiles(currentFilesList);
     }
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue]);
+  useEffect(() => {
     // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
     return () => {
-      filesList.forEach(file => {
-        if (file?.preview) {
+      prevFilesListRef.current.forEach(file => {
+        if (file.preview) {
           URL.revokeObjectURL(file.preview);
         }
       });
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue]);
+  }, []);
   const propsGenerator = useDevicePropsGenerator(props);
   const {
     fillClass,
@@ -1207,10 +1229,6 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
     src: file.preview || file.image,
     onClick: event => {
       onClickPreview && onClickPreview(file, event);
-    },
-    onLoad: () => {
-      // Revoke data uri after image is loaded
-      URL.revokeObjectURL(file.preview);
     }
   })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
     size: thumbNameTextSize,
@@ -2766,6 +2784,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     fieldsGap,
     formName,
     groupGap,
+    heightClass,
     language,
     loader,
     loaderAppearance,
@@ -2810,6 +2829,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
     tertiaryButtonSize,
+    widthClass,
     before,
     after,
     isLoading,
@@ -2845,7 +2865,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       submitError
     }) => {
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, 'form', type && `form_type_${type}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        className: clsx(className, 'form', type && `form_type_${type}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.47",
+  "version": "1.1.49",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",