@mezzanine-ui/react 0.13.10 → 0.14.0

package/Upload/UploadPictureBlock.js

@@ -7,76 +7,76 @@ import UploadInput from './UploadInput.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
-    const { accept = 'image/*', defaultUploadErrorLabel = '上傳錯誤', defaultUploadingLabel = '上傳中...', defaultUploadLabel = '上傳影像', disabled = false, imageLoader, multiple = false, onDelete, onUpload, onValueChange, fileHost, } = props;
-    const [previewImage, setPreviewImage] = useState(imageLoader.getPreview() || '');
-    const [value, setValue] = useState(imageLoader.getUrl() || '');
-    const [percentage, setPercentage] = useState(imageLoader.getPercentage() || 0);
-    const [isLoading, setIsLoading] = useState(imageLoader.getIsLoading() || false);
-    const [isError, setIsError] = useState(imageLoader.getIsError() || false);
-    const inputRef = useRef(null);
-    const prevValue = usePreviousValue(value);
-    useEffect(() => {
-        if (onValueChange && value !== prevValue) {
-            onValueChange(value);
-        }
-    }, [onValueChange, prevValue, value]);
-    const setImageUploaderData = useCallback(() => {
-        const data = imageLoader.getAll();
-        setPreviewImage(data.preview);
-        setValue(data.url);
-        setPercentage(data.percentage);
-        setIsLoading(data.isLoading);
-        setIsError(data.isError);
-    }, [imageLoader]);
-    useEffect(() => {
-        imageLoader.on('fileChange', () => {
-            setImageUploaderData();
-        });
-        imageLoader.on('previewChange', () => {
-            setPreviewImage(imageLoader.getPreview());
-        });
-        imageLoader.on('percentageChange', () => {
-            setPercentage(imageLoader.getPercentage());
-        });
-        imageLoader.on('urlChange', () => {
-            setValue(imageLoader.getUrl());
-        });
-        imageLoader.on('loadingStatusChange', () => {
-            setIsLoading(imageLoader.getIsLoading());
-        });
-        imageLoader.on('errorStatusChange', () => {
-            setIsError(imageLoader.getIsError());
-        });
-        imageLoader.on('clear', () => {
-            setImageUploaderData();
-        });
-        return () => {
-            imageLoader.removeAllListeners();
-        };
-    }, [imageLoader, setImageUploaderData]);
-    const cssVars = toUploadPictureBlockCssVars({ percentage });
-    const style = {
-        ...cssVars,
-    };
-    const showImage = useMemo(() => ((value || previewImage) && !isError), [previewImage, value, isError]);
-    const canDeleteImage = useMemo(() => ((showImage || isError) && !isLoading), [showImage, isError, isLoading]);
-    return (jsxs("button", { ref: ref, type: "button", "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
-            var _a;
-            if (!showImage && !isError) {
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-            }
-            if (canDeleteImage && onDelete) {
-                onDelete(event);
-            }
-        }, className: cx(uploadPictureBlockClasses.host, {
-            [uploadPictureBlockClasses.loading]: isLoading,
-            [uploadPictureBlockClasses.error]: isError,
-            [uploadPictureBlockClasses.disabled]: disabled,
-        }), style: style, children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }), isError ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: TimesIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadErrorLabel })] })) : (
-            // eslint-disable-next-line react/jsx-no-useless-fragment
-            jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value ? `${fileHost || ''}${value}` : previewImage), className: uploadPictureBlockClasses.preview }), isLoading ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: SpinnerIcon, spin: true }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadingLabel })] })) : null] })) : (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: UploadIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadLabel })] })) })), !disabled && canDeleteImage && (jsx("div", { className: uploadPictureBlockClasses.delete, children: jsx(Icon, { icon: TrashIcon }) }))] }));
-});
+const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
+    const { accept = 'image/*', defaultUploadErrorLabel = '上傳錯誤', defaultUploadingLabel = '上傳中...', defaultUploadLabel = '上傳影像', disabled = false, imageLoader, multiple = false, onDelete, onUpload, onValueChange, fileHost, } = props;
+    const [previewImage, setPreviewImage] = useState(imageLoader.getPreview() || '');
+    const [value, setValue] = useState(imageLoader.getUrl() || '');
+    const [percentage, setPercentage] = useState(imageLoader.getPercentage() || 0);
+    const [isLoading, setIsLoading] = useState(imageLoader.getIsLoading() || false);
+    const [isError, setIsError] = useState(imageLoader.getIsError() || false);
+    const inputRef = useRef(null);
+    const prevValue = usePreviousValue(value);
+    useEffect(() => {
+        if (onValueChange && value !== prevValue) {
+            onValueChange(value);
+        }
+    }, [onValueChange, prevValue, value]);
+    const setImageUploaderData = useCallback(() => {
+        const data = imageLoader.getAll();
+        setPreviewImage(data.preview);
+        setValue(data.url);
+        setPercentage(data.percentage);
+        setIsLoading(data.isLoading);
+        setIsError(data.isError);
+    }, [imageLoader]);
+    useEffect(() => {
+        imageLoader.on('fileChange', () => {
+            setImageUploaderData();
+        });
+        imageLoader.on('previewChange', () => {
+            setPreviewImage(imageLoader.getPreview());
+        });
+        imageLoader.on('percentageChange', () => {
+            setPercentage(imageLoader.getPercentage());
+        });
+        imageLoader.on('urlChange', () => {
+            setValue(imageLoader.getUrl());
+        });
+        imageLoader.on('loadingStatusChange', () => {
+            setIsLoading(imageLoader.getIsLoading());
+        });
+        imageLoader.on('errorStatusChange', () => {
+            setIsError(imageLoader.getIsError());
+        });
+        imageLoader.on('clear', () => {
+            setImageUploaderData();
+        });
+        return () => {
+            imageLoader.removeAllListeners();
+        };
+    }, [imageLoader, setImageUploaderData]);
+    const cssVars = toUploadPictureBlockCssVars({ percentage });
+    const style = {
+        ...cssVars,
+    };
+    const showImage = useMemo(() => ((value || previewImage) && !isError), [previewImage, value, isError]);
+    const canDeleteImage = useMemo(() => ((showImage || isError) && !isLoading), [showImage, isError, isLoading]);
+    return (jsxs("button", { ref: ref, type: "button", "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
+            var _a;
+            if (!showImage && !isError) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            }
+            if (canDeleteImage && onDelete) {
+                onDelete(event);
+            }
+        }, className: cx(uploadPictureBlockClasses.host, {
+            [uploadPictureBlockClasses.loading]: isLoading,
+            [uploadPictureBlockClasses.error]: isError,
+            [uploadPictureBlockClasses.disabled]: disabled,
+        }), style: style, children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }), isError ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: TimesIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadErrorLabel })] })) : (
+            // eslint-disable-next-line react/jsx-no-useless-fragment
+            jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value ? `${fileHost || ''}${value}` : previewImage), className: uploadPictureBlockClasses.preview }), isLoading ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: SpinnerIcon, spin: true }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadingLabel })] })) : null] })) : (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: UploadIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadLabel })] })) })), !disabled && canDeleteImage && (jsx("div", { className: uploadPictureBlockClasses.delete, children: jsx(Icon, { icon: TrashIcon }) }))] }));
+});
 var UploadPictureBlock$1 = UploadPictureBlock;
 
 export { UploadPictureBlock$1 as default };

package/Upload/UploadPictureWall.d.ts

@@ -1,81 +1,81 @@
-import { Ref } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { UploadPictureWallItemProps } from './UploadPictureWallItem';
-export declare type UploadPictureWallControl = {
-    getAllData: () => void;
-};
-export interface UploadPictureWallBaseProps extends Pick<UploadPictureWallItemProps, 'defaultUploadErrorLabel' | 'defaultUploadingLabel' | 'defaultUploadLabel'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
-    /**
-     * The accept attributes of native input element.
-     * @default 'image/*'
-     */
-    accept?: string;
-    /**
-     * Provide `controllerRef` if you need detail data of files.
-     */
-    controllerRef?: Ref<UploadPictureWallControl | null>;
-    /**
-     * The default values of uploader.
-     */
-    defaultValues?: string[];
-    /**
-     * Whether the input which is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * File hostname such as http://xxxx.xxxx/
-     * @default ''
-     */
-    fileHost?: string;
-    /**
-     * maximum file lengths
-     */
-    maxLength?: number;
-    /**
-     * Whether the input which is multiple.
-     * @default true
-     */
-    multiple?: boolean;
-    /**
-    * Fired after values changed.
-    */
-    onChange?: (urls: string[]) => void;
-    /**
-    * Fired after user delete image.
-    */
-    onDelete?: (urls: string[]) => void;
-    /**
-    * Fired after user upload images failed.
-    */
-    onError?: (files: File | File[]) => void;
-    /**
-    * Fired after user upload images success.
-    */
-    onUploadSuccess?: (files: File | File[], urls: string | string[]) => void;
-}
-export interface UploadPictureWallSingleUploadProps extends UploadPictureWallBaseProps {
-    onMultiUpload?: undefined;
-    /**
-    * Fired when user upload image, need to return Promise<string>.
-    * Arg1 is target file, arg2 `setProgress` can set the progress of uploading.
-    */
-    onUpload?: (file: File, setProgress: (progress: number) => void) => Promise<string>;
-    /**
-     * Whether the uploading which is parallel, only enabled when `onUpload` is given .
-     * @default false
-     */
-    parallel?: boolean;
-}
-export interface UploadPictureWallMultiUploadProps extends UploadPictureWallBaseProps {
-    /**
-    * Fired when user upload images, need to return Promise<string[]>.
-    * Arg1 is target files, arg2 `setProgress` can set the progress of uploading.
-    */
-    onMultiUpload?: (files: File[], setProgress: (progress: number) => void) => Promise<string[]>;
-    onUpload?: undefined;
-    parallel?: undefined;
-}
-export declare type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
-declare const UploadPictureWall: import("react").ForwardRefExoticComponent<UploadPictureWallProps & import("react").RefAttributes<HTMLDivElement>>;
-export default UploadPictureWall;
+import { Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { UploadPictureWallItemProps } from './UploadPictureWallItem';
+export type UploadPictureWallControl = {
+    getAllData: () => void;
+};
+export interface UploadPictureWallBaseProps extends Pick<UploadPictureWallItemProps, 'defaultUploadErrorLabel' | 'defaultUploadingLabel' | 'defaultUploadLabel'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
+    /**
+     * The accept attributes of native input element.
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * Provide `controllerRef` if you need detail data of files.
+     */
+    controllerRef?: Ref<UploadPictureWallControl | null>;
+    /**
+     * The default values of uploader.
+     */
+    defaultValues?: string[];
+    /**
+     * Whether the input which is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * File hostname such as http://xxxx.xxxx/
+     * @default ''
+     */
+    fileHost?: string;
+    /**
+     * maximum file lengths
+     */
+    maxLength?: number;
+    /**
+     * Whether the input which is multiple.
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+    * Fired after values changed.
+    */
+    onChange?: (urls: string[]) => void;
+    /**
+    * Fired after user delete image.
+    */
+    onDelete?: (urls: string[]) => void;
+    /**
+    * Fired after user upload images failed.
+    */
+    onError?: (files: File | File[]) => void;
+    /**
+    * Fired after user upload images success.
+    */
+    onUploadSuccess?: (files: File | File[], urls: string | string[]) => void;
+}
+export interface UploadPictureWallSingleUploadProps extends UploadPictureWallBaseProps {
+    onMultiUpload?: undefined;
+    /**
+    * Fired when user upload image, need to return Promise<string>.
+    * Arg1 is target file, arg2 `setProgress` can set the progress of uploading.
+    */
+    onUpload?: (file: File, setProgress: (progress: number) => void) => Promise<string>;
+    /**
+     * Whether the uploading which is parallel, only enabled when `onUpload` is given .
+     * @default false
+     */
+    parallel?: boolean;
+}
+export interface UploadPictureWallMultiUploadProps extends UploadPictureWallBaseProps {
+    /**
+    * Fired when user upload images, need to return Promise<string[]>.
+    * Arg1 is target files, arg2 `setProgress` can set the progress of uploading.
+    */
+    onMultiUpload?: (files: File[], setProgress: (progress: number) => void) => Promise<string[]>;
+    onUpload?: undefined;
+    parallel?: undefined;
+}
+export type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
+declare const UploadPictureWall: import("react").ForwardRefExoticComponent<UploadPictureWallProps & import("react").RefAttributes<HTMLDivElement>>;
+export default UploadPictureWall;

package/Upload/UploadPictureWall.js

@@ -8,150 +8,150 @@ import { usePreviousValue } from '../hooks/usePreviousValue.js';
 import UploadPictureWallItem from './UploadPictureWallItem.js';
 import cx from 'clsx';
 
-const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
-    const { accept = 'image/*', className, controllerRef, defaultValues, defaultUploadErrorLabel, defaultUploadingLabel, defaultUploadLabel, disabled = false, fileHost = '', 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([]);
-    const [values, setValues] = useState(compact(defaultValues) || []);
-    const loaderList = useMemo(() => uploadPictureImageLoaders, [uploadPictureImageLoaders]);
-    const prevNeedUploadImageLoadersLength = usePreviousValue(needUploadImageLoaders.length);
-    const prevNeedUploadImageLoaderSetsLength = usePreviousValue(needUploadImageLoaderSets.length);
-    const prevValues = usePreviousValue(values);
-    useEffect(() => {
-        if (onChange && !isEqual(prevValues, values)) {
-            onChange(values);
-        }
-    }, [onChange, prevValues, values]);
-    useEffect(() => {
-        if (prevNeedUploadImageLoadersLength > needUploadImageLoaders.length
-            || prevNeedUploadImageLoaderSetsLength > needUploadImageLoaderSets.length) {
-            setValues(compact(uploadPictureImageLoaders.map((loader) => loader.getUrl())));
-        }
-    }, [
-        uploadPictureImageLoaders,
-        needUploadImageLoaders,
-        prevNeedUploadImageLoadersLength,
-        needUploadImageLoaderSets,
-        prevNeedUploadImageLoaderSetsLength,
-    ]);
-    useEffect(() => {
-        if (needUploadImageLoaderSets.length && onUpload) {
-            const imageLoaderSet = needUploadImageLoaderSets[0];
-            if (!imageLoaderSet[0].getIsLoading()) {
-                imageLoaderSet.forEach((imageLoader, index) => {
-                    const setProgress = (progress) => imageLoader.setPercentage(progress);
-                    imageLoader.setLoadingStatus(true);
-                    onUpload(imageLoader.getFile(), setProgress)
-                        .then((url) => {
-                        imageLoader.setUrl(url);
-                        imageLoader.setLoadingStatus(false);
-                        setProgress(100);
-                        if (onUploadSuccess) {
-                            onUploadSuccess(imageLoader.getFile(), url);
-                        }
-                        if (index === imageLoaderSet.length - 1) {
-                            setNeedUploadImageLoaderSets((nup) => drop(nup));
-                        }
-                    })
-                        .catch(() => {
-                        imageLoader.setErrorStatus(true);
-                        imageLoader.setLoadingStatus(false);
-                        setProgress(100);
-                        if (index === imageLoaderSet.length - 1) {
-                            setNeedUploadImageLoaderSets((nup) => drop(nup));
-                        }
-                        if (onError) {
-                            onError(imageLoader.getFile());
-                        }
-                    });
-                });
-            }
-        }
-    }, [needUploadImageLoaderSets, onError, onUpload, onUploadSuccess]);
-    useEffect(() => {
-        if (needUploadImageLoaders.length && onUpload) {
-            const imageLoader = needUploadImageLoaders[0];
-            if (imageLoader && imageLoader.getFile() && !imageLoader.getIsLoading()) {
-                const setProgress = (progress) => imageLoader.setPercentage(progress);
-                imageLoader.setLoadingStatus(true);
-                onUpload(imageLoader.getFile(), setProgress)
-                    .then((url) => {
-                    imageLoader.setUrl(url);
-                    imageLoader.setLoadingStatus(false);
-                    setProgress(100);
-                    setNeedUploadImageLoaders((nup) => drop(nup));
-                    if (onUploadSuccess) {
-                        onUploadSuccess(imageLoader.getFile(), url);
-                    }
-                })
-                    .catch(() => {
-                    imageLoader.setErrorStatus(true);
-                    imageLoader.setLoadingStatus(false);
-                    setProgress(100);
-                    setNeedUploadImageLoaders((nup) => drop(nup));
-                    if (onError) {
-                        onError(imageLoader.getFile());
-                    }
-                });
-            }
-        }
-    }, [needUploadImageLoaders, onError, onUpload, onUploadSuccess]);
-    const onImagesUpload = useCallback((files) => {
-        if (files.length) {
-            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());
-                const setProgress = (progress) => imageLoaders.forEach((loader) => loader.setPercentage(progress));
-                imageLoaders.forEach((loader) => loader.setLoadingStatus(true));
-                onMultiUpload(uploadFiles, setProgress)
-                    .then((urls) => {
-                    imageLoaders.forEach((loader, index) => loader.setUrl(urls[index]));
-                    imageLoaders.forEach((loader) => loader.setLoadingStatus(false));
-                    setProgress(100);
-                    setValues((v) => [...v, ...urls]);
-                    if (onUploadSuccess) {
-                        onUploadSuccess(uploadFiles, urls);
-                    }
-                })
-                    .catch(() => {
-                    imageLoaders.forEach((loader) => loader.setErrorStatus(true));
-                    imageLoaders.forEach((loader) => loader.setLoadingStatus(false));
-                    setProgress(100);
-                    if (onError) {
-                        onError(uploadFiles);
-                    }
-                });
-                return;
-            }
-            if (onUpload) {
-                if (!parallel) {
-                    setNeedUploadImageLoaders((nups) => [...nups, ...imageLoaders]);
-                }
-                else {
-                    setNeedUploadImageLoaderSets((set) => [...set, imageLoaders]);
-                }
-            }
-        }
-    }, [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));
-        const nowUploadPictureImageLoaders = uploadPictureImageLoaders.filter((up) => up.getUid() !== uid);
-        const urls = compact(nowUploadPictureImageLoaders.map((loader) => loader.getUrl()));
-        setValues(urls);
-        if (onDelete) {
-            onDelete(urls);
-        }
-    }, [onDelete, uploadPictureImageLoaders]);
-    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, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()), fileHost: fileHost }, up.getUid()))), maxLength && loaderList.length >= maxLength ? null : (jsx(UploadPictureWallItem, { accept: accept, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload, fileHost: fileHost }))] }));
-});
+const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
+    const { accept = 'image/*', className, controllerRef, defaultValues, defaultUploadErrorLabel, defaultUploadingLabel, defaultUploadLabel, disabled = false, fileHost = '', 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([]);
+    const [values, setValues] = useState(compact(defaultValues) || []);
+    const loaderList = useMemo(() => uploadPictureImageLoaders, [uploadPictureImageLoaders]);
+    const prevNeedUploadImageLoadersLength = usePreviousValue(needUploadImageLoaders.length);
+    const prevNeedUploadImageLoaderSetsLength = usePreviousValue(needUploadImageLoaderSets.length);
+    const prevValues = usePreviousValue(values);
+    useEffect(() => {
+        if (onChange && !isEqual(prevValues, values)) {
+            onChange(values);
+        }
+    }, [onChange, prevValues, values]);
+    useEffect(() => {
+        if (prevNeedUploadImageLoadersLength > needUploadImageLoaders.length
+            || prevNeedUploadImageLoaderSetsLength > needUploadImageLoaderSets.length) {
+            setValues(compact(uploadPictureImageLoaders.map((loader) => loader.getUrl())));
+        }
+    }, [
+        uploadPictureImageLoaders,
+        needUploadImageLoaders,
+        prevNeedUploadImageLoadersLength,
+        needUploadImageLoaderSets,
+        prevNeedUploadImageLoaderSetsLength,
+    ]);
+    useEffect(() => {
+        if (needUploadImageLoaderSets.length && onUpload) {
+            const imageLoaderSet = needUploadImageLoaderSets[0];
+            if (!imageLoaderSet[0].getIsLoading()) {
+                imageLoaderSet.forEach((imageLoader, index) => {
+                    const setProgress = (progress) => imageLoader.setPercentage(progress);
+                    imageLoader.setLoadingStatus(true);
+                    onUpload(imageLoader.getFile(), setProgress)
+                        .then((url) => {
+                        imageLoader.setUrl(url);
+                        imageLoader.setLoadingStatus(false);
+                        setProgress(100);
+                        if (onUploadSuccess) {
+                            onUploadSuccess(imageLoader.getFile(), url);
+                        }
+                        if (index === imageLoaderSet.length - 1) {
+                            setNeedUploadImageLoaderSets((nup) => drop(nup));
+                        }
+                    })
+                        .catch(() => {
+                        imageLoader.setErrorStatus(true);
+                        imageLoader.setLoadingStatus(false);
+                        setProgress(100);
+                        if (index === imageLoaderSet.length - 1) {
+                            setNeedUploadImageLoaderSets((nup) => drop(nup));
+                        }
+                        if (onError) {
+                            onError(imageLoader.getFile());
+                        }
+                    });
+                });
+            }
+        }
+    }, [needUploadImageLoaderSets, onError, onUpload, onUploadSuccess]);
+    useEffect(() => {
+        if (needUploadImageLoaders.length && onUpload) {
+            const imageLoader = needUploadImageLoaders[0];
+            if (imageLoader && imageLoader.getFile() && !imageLoader.getIsLoading()) {
+                const setProgress = (progress) => imageLoader.setPercentage(progress);
+                imageLoader.setLoadingStatus(true);
+                onUpload(imageLoader.getFile(), setProgress)
+                    .then((url) => {
+                    imageLoader.setUrl(url);
+                    imageLoader.setLoadingStatus(false);
+                    setProgress(100);
+                    setNeedUploadImageLoaders((nup) => drop(nup));
+                    if (onUploadSuccess) {
+                        onUploadSuccess(imageLoader.getFile(), url);
+                    }
+                })
+                    .catch(() => {
+                    imageLoader.setErrorStatus(true);
+                    imageLoader.setLoadingStatus(false);
+                    setProgress(100);
+                    setNeedUploadImageLoaders((nup) => drop(nup));
+                    if (onError) {
+                        onError(imageLoader.getFile());
+                    }
+                });
+            }
+        }
+    }, [needUploadImageLoaders, onError, onUpload, onUploadSuccess]);
+    const onImagesUpload = useCallback((files) => {
+        if (files.length) {
+            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());
+                const setProgress = (progress) => imageLoaders.forEach((loader) => loader.setPercentage(progress));
+                imageLoaders.forEach((loader) => loader.setLoadingStatus(true));
+                onMultiUpload(uploadFiles, setProgress)
+                    .then((urls) => {
+                    imageLoaders.forEach((loader, index) => loader.setUrl(urls[index]));
+                    imageLoaders.forEach((loader) => loader.setLoadingStatus(false));
+                    setProgress(100);
+                    setValues((v) => [...v, ...urls]);
+                    if (onUploadSuccess) {
+                        onUploadSuccess(uploadFiles, urls);
+                    }
+                })
+                    .catch(() => {
+                    imageLoaders.forEach((loader) => loader.setErrorStatus(true));
+                    imageLoaders.forEach((loader) => loader.setLoadingStatus(false));
+                    setProgress(100);
+                    if (onError) {
+                        onError(uploadFiles);
+                    }
+                });
+                return;
+            }
+            if (onUpload) {
+                if (!parallel) {
+                    setNeedUploadImageLoaders((nups) => [...nups, ...imageLoaders]);
+                }
+                else {
+                    setNeedUploadImageLoaderSets((set) => [...set, imageLoaders]);
+                }
+            }
+        }
+    }, [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));
+        const nowUploadPictureImageLoaders = uploadPictureImageLoaders.filter((up) => up.getUid() !== uid);
+        const urls = compact(nowUploadPictureImageLoaders.map((loader) => loader.getUrl()));
+        setValues(urls);
+        if (onDelete) {
+            onDelete(urls);
+        }
+    }, [onDelete, uploadPictureImageLoaders]);
+    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, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()), fileHost: fileHost }, up.getUid()))), maxLength && loaderList.length >= maxLength ? null : (jsx(UploadPictureWallItem, { accept: accept, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload, fileHost: fileHost }))] }));
+});
 var UploadPictureWall$1 = UploadPictureWall;
 
 export { UploadPictureWall$1 as default };

package/Upload/UploadPictureWallItem.d.ts

@@ -1,15 +1,15 @@
-import { MouseEventHandler } from 'react';
-import { ImageUploader } from '@mezzanine-ui/core/upload';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { UploadPictureBlockProps } from './UploadPictureBlock';
-export interface UploadPictureWallItemProps extends Pick<UploadPictureBlockProps, 'defaultUploadErrorLabel' | 'defaultUploadingLabel' | 'defaultUploadLabel'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'value' | 'onChange' | 'children'> {
-    accept?: string;
-    disabled?: boolean;
-    fileHost?: string;
-    imageLoader: ImageUploader;
-    multiple?: boolean;
-    onDelete?: MouseEventHandler;
-    onUpload?: (files: File[]) => void;
-}
-declare const UploadPictureWallItem: (props: UploadPictureWallItemProps) => JSX.Element;
-export default UploadPictureWallItem;
+import { MouseEventHandler } from 'react';
+import { ImageUploader } from '@mezzanine-ui/core/upload';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { UploadPictureBlockProps } from './UploadPictureBlock';
+export interface UploadPictureWallItemProps extends Pick<UploadPictureBlockProps, 'defaultUploadErrorLabel' | 'defaultUploadingLabel' | 'defaultUploadLabel'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'value' | 'onChange' | 'children'> {
+    accept?: string;
+    disabled?: boolean;
+    fileHost?: string;
+    imageLoader: ImageUploader;
+    multiple?: boolean;
+    onDelete?: MouseEventHandler;
+    onUpload?: (files: File[]) => void;
+}
+declare const UploadPictureWallItem: (props: UploadPictureWallItemProps) => JSX.Element;
+export default UploadPictureWallItem;