@mezzanine-ui/react 0.7.1 → 0.8.0

package/Select/SelectTrigger.d.ts

@@ -1,10 +1,9 @@
 import { Ref } from 'react';
-import { SelectMode } from '@mezzanine-ui/core/select';
 import { TextFieldProps } from '../TextField';
 import { SelectValue } from './typings';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export declare type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
-export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix'> {
+export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix'> {
     /**
      * Controls the chevron icon layout.
      */
@@ -13,6 +12,10 @@ export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      * force hide suffixAction icons
      */
     forceHideSuffixActionIcon?: boolean;
+    /**
+     * The ref for SelectTrigger root.
+     */
+    innerRef?: Ref<HTMLDivElement>;
     /**
      * Other props you may provide to input element.
      */
@@ -21,10 +24,6 @@ export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      * The ref object for input element.
      */
     inputRef?: Ref<HTMLInputElement>;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode?: SelectMode;
     /**
      * The click handler for the cross icon on tags
      */
@@ -38,17 +37,46 @@ export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      * Provide if you have a customize value rendering logic.
      * By default will have a comma between values.
      */
-    renderValue?: (value: SelectValue[]) => string;
+    renderValue?: (value: SelectValue[] | SelectValue | null) => string;
     /**
      * Whether the input is required.
      * @default false
      */
     required?: boolean;
+}
+export declare type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
+    /**
+     * Controls the layout of trigger.
+     */
+    mode: 'multiple';
     /**
      * The value of selection.
      * @default undefined
      */
     value?: SelectValue[];
-}
-declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Provide if you have a customize value rendering logic.
+     * By default will have a comma between values.
+     */
+    renderValue?: (value: SelectValue[]) => string;
+};
+export declare type SelectTriggerSingleProps = SelectTriggerBaseProps & {
+    /**
+     * Controls the layout of trigger.
+     */
+    mode?: 'single';
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue | null;
+    /**
+     * Provide if you have a customize value rendering logic.
+     * By default will have a comma between values.
+     */
+    renderValue?: (value: SelectValue | null) => string;
+};
+export declare type SelectTriggerComponentProps = SelectTriggerMultipleProps | SelectTriggerSingleProps;
+export declare type SelectTriggerProps = Omit<SelectTriggerComponentProps, 'innerRef'>;
+declare const SelectTrigger: import("react").ForwardRefExoticComponent<Pick<SelectTriggerComponentProps, "disabled" | "placeholder" | "readOnly" | "required" | "size" | "value" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "active" | "clearable" | "error" | "fullWidth" | "onClear" | "suffixActionIcon" | "forceHideSuffixActionIcon" | "inputProps" | "inputRef" | "onTagClose" | "renderValue" | "mode"> & import("react").RefAttributes<HTMLDivElement>>;
 export default SelectTrigger;

package/Select/SelectTrigger.js

@@ -7,21 +7,45 @@ import TextField from '../TextField/TextField.js';
 import Tag from '../Tag/Tag.js';
 import cx from 'clsx';
 
-const SelectTrigger = forwardRef(function SelectTrigger(props, ref) {
-    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, inputRef, mode, onTagClose, readOnly, renderValue: renderValueProp, required, size, suffixActionIcon: suffixActionIconProp, value, ...restTextFieldProps } = props;
+function SelectTriggerComponent(props) {
+    var _a;
+    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, mode, onTagClose, readOnly, renderValue: renderValueProp, required, size, suffixActionIcon: suffixActionIconProp, value, ...restTextFieldProps } = props;
     /** Render value to string for input */
     const renderValue = () => {
-        var _a, _b;
-        return ((_b = (_a = renderValueProp === null || renderValueProp === void 0 ? void 0 : renderValueProp(value || [])) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.map((v) => v.name).join(', ')) !== null && _b !== void 0 ? _b : '');
+        if (typeof renderValueProp === 'function') {
+            return renderValueProp(value || (mode === 'multiple' ? [] : null));
+        }
+        if (value) {
+            if (Array.isArray(value)) {
+                return value.map((v) => v.name).join(', ');
+            }
+            return value.name;
+        }
+        return '';
     };
     /** Compute suffix action icon */
     const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, className: cx(selectClasses.triggerSuffixActionIcon, {
             [selectClasses.triggerSuffixActionIconActive]: active,
         }) }, void 0));
-    return (jsx(TextField, Object.assign({ ref: ref }, restTextFieldProps, { active: !!(value === null || value === void 0 ? void 0 : value.length), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon }, { children: mode === 'multiple' && (value === null || value === void 0 ? void 0 : value.length) ? (jsx("div", Object.assign({ className: selectClasses.triggerTags }, { children: value.map((selection) => (jsx(Tag, Object.assign({ closable: true, disabled: disabled, onClose: (e) => {
+    const getTextFieldActive = () => {
+        if (value) {
+            if (Array.isArray(value)) {
+                return !!(value === null || value === void 0 ? void 0 : value.length);
+            }
+            return !!value;
+        }
+        return false;
+    };
+    return (jsx(TextField, Object.assign({ ref: innerRef }, restTextFieldProps, { active: getTextFieldActive(), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon }, { children: mode === 'multiple' && ((_a = value) === null || _a === void 0 ? void 0 : _a.length) ? (jsx("div", Object.assign({ className: selectClasses.triggerTags }, { children: value.map((selection) => (jsx(Tag, Object.assign({ closable: true, disabled: disabled, onClose: (e) => {
                     e.stopPropagation();
                     onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
                 }, size: size }, { children: selection.name }), selection.id))) }), void 0)) : (jsx("input", Object.assign({}, inputProps, { ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "false", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: renderValue() }), void 0)) }), void 0));
+}
+const SelectTrigger = forwardRef((props, ref) => {
+    if (props.mode === 'multiple') {
+        return (jsx(SelectTriggerComponent, Object.assign({}, props, { innerRef: ref }), void 0));
+    }
+    return (jsx(SelectTriggerComponent, Object.assign({}, props, { innerRef: ref }), void 0));
 });
 var SelectTrigger$1 = SelectTrigger;
 

package/Select/typings.d.ts

@@ -6,6 +6,6 @@ export interface TreeSelectOption extends SelectValue {
     siblings?: TreeSelectOption[];
 }
 export interface SelectControl {
-    value: SelectValue[];
-    onChange: (v: SelectValue | null) => SelectValue[];
+    value: SelectValue[] | SelectValue | null;
+    onChange: (v: SelectValue | null) => SelectValue[] | SelectValue | null;
 }

package/Transition/Transition.d.ts

@@ -19,7 +19,7 @@ export interface TransitionImplementationChildProps {
     style?: CSSProperties;
 }
 export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
-    children?: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
+    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
     /**
      * The delay of the transition, in milliseconds
      */

package/Upload/UploadInput.js

@@ -5,6 +5,8 @@ import { uploadInputClasses } from '@mezzanine-ui/core/upload';
 const UploadInput = forwardRef((props, ref) => {
     const { accept, disabled = false, multiple = false, onUpload, } = props;
     return (jsx("input", { ref: ref, accept: accept, "aria-disabled": disabled, className: uploadInputClasses.host, disabled: disabled, multiple: multiple, onClick: (event) => {
+            // eslint-disable-next-line no-param-reassign
+            event.currentTarget.value = '';
             event.stopPropagation();
             event.nativeEvent.stopImmediatePropagation();
         }, onChange: (event) => {

package/Upload/UploadPicture.d.ts

@@ -0,0 +1,48 @@
+import { Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type UploadPictureControl = {
+    getData: () => void;
+};
+export interface UploadPictureProps extends 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 file.
+     */
+    controllerRef?: Ref<UploadPictureControl | null>;
+    /**
+     * The default value of uploader.
+     */
+    defaultValue?: string;
+    /**
+     * Whether the input which is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+    * Fired after value changed.
+    */
+    onChange?: (url: string) => void;
+    /**
+    * Fired after user delete image.
+    */
+    onDelete?: () => void;
+    /**
+    * Fired after user upload image failed.
+    */
+    onError?: (file: File) => void;
+    /**
+    * 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>;
+    /**
+    * Fired after user upload image success.
+    */
+    onUploadSuccess?: (file: File, url: string) => void;
+}
+declare const UploadPicture: import("react").ForwardRefExoticComponent<UploadPictureProps & import("react").RefAttributes<HTMLDivElement>>;
+export default UploadPicture;

package/Upload/UploadPicture.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
+import { ImageUploader, uploadPictureClasses } from '@mezzanine-ui/core/upload';
+import UploadPictureBlock from './UploadPictureBlock.js';
+import cx from 'clsx';
+
+const UploadPicture = forwardRef(function UploadPicture(props, ref) {
+    const { accept = 'image/*', className, controllerRef, defaultValue, disabled = false, onChange, onDelete, onError, onUpload, onUploadSuccess, style, } = props;
+    const defaultImageUploader = new ImageUploader(undefined, defaultValue);
+    const uploadPictureImageLoader = useRef(defaultImageUploader);
+    const onImageUpload = useCallback((files) => {
+        if (files.length) {
+            const currentFile = files[0];
+            uploadPictureImageLoader.current.setNewFile(currentFile);
+            uploadPictureImageLoader.current.setPreview();
+            if (onUpload) {
+                const setProgress = (progress) => uploadPictureImageLoader.current.setPercentage(progress);
+                uploadPictureImageLoader.current.setLoadingStatus(true);
+                onUpload(currentFile, setProgress)
+                    .then((url) => {
+                    uploadPictureImageLoader.current.setUrl(url);
+                    uploadPictureImageLoader.current.setLoadingStatus(false);
+                    setProgress(100);
+                    if (onUploadSuccess) {
+                        onUploadSuccess(currentFile, url);
+                    }
+                })
+                    .catch(() => {
+                    uploadPictureImageLoader.current.setErrorStatus(true);
+                    uploadPictureImageLoader.current.setLoadingStatus(false);
+                    setProgress(100);
+                    if (onError) {
+                        onError(currentFile);
+                    }
+                });
+            }
+        }
+    }, [onUpload, onUploadSuccess, onError]);
+    const onImageDelete = useCallback(() => {
+        uploadPictureImageLoader.current.clear();
+        if (onDelete) {
+            onDelete();
+        }
+    }, [onDelete]);
+    useImperativeHandle(controllerRef, () => ({
+        getData: () => uploadPictureImageLoader.current.getAll(),
+    }));
+    return (jsx("div", Object.assign({ ref: ref, className: cx(uploadPictureClasses.host, className), style: style }, { children: jsx(UploadPictureBlock, { accept: accept, disabled: disabled, imageLoader: uploadPictureImageLoader.current, multiple: false, onDelete: onImageDelete, onUpload: onImageUpload, onValueChange: onChange }, void 0) }), void 0));
+});
+var UploadPicture$1 = UploadPicture;
+
+export { UploadPicture$1 as default };

package/Upload/UploadPictureBlock.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { ImageUploader } from '@mezzanine-ui/core/upload';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface UploadPictureBlockProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children' | 'onChange' | 'value'> {
+    accept?: string;
+    imageLoader: ImageUploader;
+    multiple?: boolean;
+    onDelete?: MouseEventHandler;
+    onUpload?: (files: File[]) => void;
+    onValueChange?: (value: string) => void;
+}
+declare const UploadPictureBlock: import("react").ForwardRefExoticComponent<UploadPictureBlockProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default UploadPictureBlock;

package/Upload/UploadPictureBlock.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { toUploadPictureBlockCssVars, uploadPictureBlockClasses } from '@mezzanine-ui/core/upload';
+import { TimesIcon, SpinnerIcon, UploadIcon, TrashIcon } from '@mezzanine-ui/icons';
+import { usePreviousValue } from '../hooks/usePreviousValue.js';
+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/*', disabled = false, imageLoader, multiple = false, onDelete, onUpload, onValueChange, } = 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", Object.assign({ 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 }, void 0),
+            isError ? (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: TimesIcon }, void 0),
+                    jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u932F\u8AA4" }), void 0)] }), void 0)) : (jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value || previewImage), className: uploadPictureBlockClasses.preview }, void 0),
+                        isLoading ? (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: SpinnerIcon, spin: true }, void 0),
+                                jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u4E2D..." }), void 0)] }), void 0)) : null] }, void 0)) : (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: UploadIcon }, void 0),
+                        jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u5F71\u50CF" }), void 0)] }), void 0)) }, void 0)),
+            !disabled && canDeleteImage && (jsx("div", Object.assign({ className: uploadPictureBlockClasses.delete }, { children: jsx(Icon, { icon: TrashIcon }, void 0) }), void 0))] }), void 0));
+});
+var UploadPictureBlock$1 = UploadPictureBlock;
+
+export { UploadPictureBlock$1 as default };

package/Upload/UploadPictureWall.d.ts

@@ -0,0 +1,71 @@
+import { Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type UploadPictureWallControl = {
+    getAllData: () => void;
+};
+export interface UploadPictureWallBaseProps extends 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;
+    /**
+     * 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<(UploadPictureWallSingleUploadProps & import("react").RefAttributes<HTMLDivElement>) | (UploadPictureWallMultiUploadProps & import("react").RefAttributes<HTMLDivElement>)>;
+export default UploadPictureWall;

package/Upload/UploadPictureWall.js

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useMemo, useEffect, useCallback, useImperativeHandle } from 'react';
+import { ImageUploader, uploadPictureWallClasses } from '@mezzanine-ui/core/upload';
+import compact from 'lodash/compact';
+import drop from 'lodash/drop';
+import isEqual from 'lodash/isEqual';
+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, disabled = false, 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));
+            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]);
+    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", Object.assign({ 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 }, void 0)] }), void 0));
+});
+var UploadPictureWall$1 = UploadPictureWall;
+
+export { UploadPictureWall$1 as default };

package/Upload/UploadPictureWallItem.d.ts

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

package/Upload/UploadPictureWallItem.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { uploadPictureWallClasses } from '@mezzanine-ui/core/upload';
+import UploadPictureBlock from './UploadPictureBlock.js';
+import cx from 'clsx';
+
+const UploadPictureWallItem = (props) => {
+    const { accept, disabled, imageLoader, multiple, onDelete, onUpload, } = props;
+    const loader = useRef(imageLoader);
+    useEffect(() => {
+        if (!loader.current.getPreview()) {
+            loader.current.setPreview();
+        }
+    }, []);
+    return (jsx("div", Object.assign({ className: cx(uploadPictureWallClasses.item) }, { children: jsx(UploadPictureBlock, { accept: accept, disabled: disabled, imageLoader: loader.current, multiple: multiple, onDelete: onDelete, onUpload: onUpload }, void 0) }), void 0));
+};
+var UploadPictureWallItem$1 = UploadPictureWallItem;
+
+export { UploadPictureWallItem$1 as default };