@mezzanine-ui/react 0.10.2 → 0.10.3

package/Upload/UploadPictureWall.d.ts

@@ -22,6 +22,10 @@ export interface UploadPictureWallBaseProps extends Omit<NativeElementPropsWitho
      * @default false
      */
     disabled?: boolean;
+    /**
+     * maximum file lengths
+     */
+    maxLength?: number;
     /**
      * Whether the input which is multiple.
      * @default true

package/Upload/UploadPictureWall.js

@@ -9,7 +9,7 @@ import UploadPictureWallItem from './UploadPictureWallItem.js';
 import cx from 'clsx';
 
 const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
-    const { accept = 'image/*', className, controllerRef, defaultValues, disabled = false, multiple = true, onChange, onDelete, onError, onMultiUpload, onUpload, onUploadSuccess, parallel = false, style, } = props;
+    const { accept = 'image/*', className, controllerRef, defaultValues, disabled = false, maxLength, multiple = true, onChange, onDelete, onError, onMultiUpload, onUpload, onUploadSuccess, parallel = false, style, } = props;
     const [uploadPictureImageLoaders, setUploadPictureImageLoader] = useState(defaultValues ? compact(defaultValues).map((value) => new ImageUploader(undefined, value)) : []);
     const [needUploadImageLoaders, setNeedUploadImageLoaders] = useState([]);
     const [needUploadImageLoaderSets, setNeedUploadImageLoaderSets] = useState([]);
@@ -24,8 +24,8 @@ const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
         }
     }, [onChange, prevValues, values]);
     useEffect(() => {
-        if (prevNeedUploadImageLoadersLength > needUploadImageLoaders.length ||
-            prevNeedUploadImageLoaderSetsLength > needUploadImageLoaderSets.length) {
+        if (prevNeedUploadImageLoadersLength > needUploadImageLoaders.length
+            || prevNeedUploadImageLoaderSetsLength > needUploadImageLoaderSets.length) {
             setValues(compact(uploadPictureImageLoaders.map((loader) => loader.getUrl())));
         }
     }, [
@@ -99,7 +99,9 @@ const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
     }, [needUploadImageLoaders, onError, onUpload, onUploadSuccess]);
     const onImagesUpload = useCallback((files) => {
         if (files.length) {
-            const imageLoaders = files.map((file) => new ImageUploader(file));
+            const imageLoaders = files
+                .map((file) => new ImageUploader(file))
+                .slice(0, Math.max(0, (maxLength !== null && maxLength !== void 0 ? maxLength : 999999) - loaderList.length));
             setUploadPictureImageLoader((ups) => [...ups, ...imageLoaders]);
             if (onMultiUpload) {
                 const uploadFiles = imageLoaders.map((loader) => loader.getFile());
@@ -134,7 +136,7 @@ const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
                 }
             }
         }
-    }, [onError, onMultiUpload, onUpload, onUploadSuccess, parallel]);
+    }, [onError, onMultiUpload, onUpload, onUploadSuccess, parallel, maxLength, loaderList]);
     const onImageDelete = useCallback((uid) => {
         setUploadPictureImageLoader((ups) => ups.filter((up) => up.getUid() !== uid));
         setNeedUploadImageLoaders((nUps) => nUps.filter((nUp) => nUp.getUid() !== uid));
@@ -148,7 +150,7 @@ const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
     useImperativeHandle(controllerRef, () => ({
         getAllData: () => uploadPictureImageLoaders.map((loader) => loader.getAll()),
     }));
-    return (jsxs("div", { ref: ref, className: cx(uploadPictureWallClasses.host, className), style: style, children: [loaderList.map((up) => (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()) }, up.getUid()))), jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload })] }));
+    return (jsxs("div", { ref: ref, className: cx(uploadPictureWallClasses.host, className), style: style, children: [loaderList.map((up) => (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()) }, up.getUid()))), maxLength && loaderList.length >= maxLength ? null : (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload }))] }));
 });
 var UploadPictureWall$1 = UploadPictureWall;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {