@laser-ui/components 0.0.1

package/tree-select/types.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { TreeItem } from '../tree/types';
+import type { BaseProps, CloneHTMLElement, Size } from '../types';
+export {};
+export interface TreeSelectRef {
+    updatePosition: () => void;
+}
+export interface TreeSelectProps<V extends React.Key, T extends TreeItem<V>> extends BaseProps<'tree-select' | 'tree' | 'tree-select-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    formControl?: FormControlProvider;
+    list: T[];
+    model?: V | null | V[];
+    defaultModel?: V | null | V[];
+    expands?: V[];
+    defaultExpands?: V[];
+    visible?: boolean;
+    defaultVisible?: boolean;
+    placeholder?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    onlyLeafSelectable?: boolean;
+    showLine?: boolean;
+    clearable?: boolean;
+    loading?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    virtual?: boolean | number;
+    escClosable?: boolean;
+    customItem?: (item: T) => React.ReactNode;
+    customSelected?: (selected: T) => string;
+    customSearch?: {
+        filter?: (value: string, item: T) => boolean;
+        sort?: (a: T, b: T) => number;
+    };
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    inputRender?: CloneHTMLElement;
+    onModelChange?: (value: any, origin: any) => void;
+    onFirstExpand?: (value: V, origin: T) => void;
+    onExpandsChange?: (values: V[], origins: T[]) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    onSearch?: (value: string) => void;
+    onClear?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+    onScrollBottom?: () => void;
+}

package/tree-select/types.js

@@ -0,0 +1 @@
+export {};

package/tree-select/vars.d.ts

@@ -0,0 +1,37 @@
+export declare const CLASSES: {
+    'tree-select': string;
+    'tree-select.is-expanded': string;
+    'tree-select.is-disabled': string;
+    'tree-select--small': string;
+    'tree-select--medium': string;
+    'tree-select--large': string;
+    'tree-select__container': string;
+    'tree-select__content': string;
+    'tree-select__search': string;
+    'tree-select__placeholder-wrapper': string;
+    'tree-select__placeholder': string;
+    'tree-select__multiple-count': string;
+    'tree-select__close': string;
+    'tree-select__clear': string;
+    'tree-select__icon': string;
+    'tree-select__arrow': string;
+    'tree-select-popup': string;
+    'tree-select-popup__loading': string;
+    'tree-select-popup__loading--empty': string;
+    tree: string;
+    'tree--line': string;
+    tree__group: string;
+    'tree__group--root': string;
+    tree__option: string;
+    'tree__option.is-selected': string;
+    'tree__option.is-disabled': string;
+    'tree__option--root': string;
+    'tree__option--first': string;
+    'tree__option-dot': string;
+    'tree__option-icon': string;
+    'tree__option-arrow': string;
+    'tree__option-arrow.is-expand': string;
+    'tree__option-checkbox': string;
+    'tree__option-content': string;
+    tree__empty: string;
+};

package/tree-select/vars.js

@@ -0,0 +1,37 @@
+export const CLASSES = {
+    'tree-select': '^tree-select',
+    'tree-select.is-expanded': 'is-expanded',
+    'tree-select.is-disabled': 'is-disabled',
+    'tree-select--small': '^tree-select--small',
+    'tree-select--medium': '^tree-select--medium',
+    'tree-select--large': '^tree-select--large',
+    'tree-select__container': '^tree-select__container',
+    'tree-select__content': '^tree-select__content',
+    'tree-select__search': '^tree-select__search',
+    'tree-select__placeholder-wrapper': '^tree-select__placeholder-wrapper',
+    'tree-select__placeholder': '^tree-select__placeholder',
+    'tree-select__multiple-count': '^tree-select__multiple-count',
+    'tree-select__close': '^tree-select__close',
+    'tree-select__clear': '^tree-select__clear',
+    'tree-select__icon': '^tree-select__icon',
+    'tree-select__arrow': '^tree-select__arrow',
+    'tree-select-popup': '^tree-select-popup',
+    'tree-select-popup__loading': '^tree-select-popup__loading',
+    'tree-select-popup__loading--empty': '^tree-select-popup__loading--empty',
+    tree: '^tree',
+    'tree--line': '^tree--line',
+    tree__group: '^tree__group',
+    'tree__group--root': '^tree__group--root',
+    tree__option: '^tree__option',
+    'tree__option.is-selected': 'is-selected',
+    'tree__option.is-disabled': 'is-disabled',
+    'tree__option--root': '^tree__option--root',
+    'tree__option--first': '^tree__option--first',
+    'tree__option-dot': '^tree__option-dot',
+    'tree__option-icon': '^tree__option-icon',
+    'tree__option-arrow': '^tree__option-arrow',
+    'tree__option-arrow.is-expand': 'is-expand',
+    'tree__option-checkbox': '^tree__option-checkbox',
+    'tree__option-content': '^tree__option-content',
+    tree__empty: '^tree__empty',
+};

package/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export {};
+export type Lang = 'en-US' | 'zh-CN';
+export type Size = 'small' | 'medium' | 'large';
+export type PopupPlacement = 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom';
+export type VerticalSidePlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+export type CloneHTMLElement<T extends React.ReactElement = React.ReactElement> = (el: T) => T;
+export interface BaseProps<CR extends string, C extends {
+    [index: string]: string;
+}> {
+    styleOverrides?: {
+        [K in keyof C]?: {
+            remove?: boolean;
+            className?: string;
+            style?: React.CSSProperties;
+        };
+    };
+    styleProvider?: {
+        [K in CR]: string;
+    };
+}

package/types.js

@@ -0,0 +1 @@
+export {};

package/upload/Upload.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { UploadProps } from './types';
+import { UploadAction } from './UploadAction';
+import { UploadButton } from './UploadButton';
+import { UploadList } from './UploadList';
+import { UploadPicture } from './UploadPicture';
+import { UploadPictureList } from './UploadPictureList';
+import { UploadPreviewAction } from './UploadPreviewAction';
+declare function UploadFC(props: UploadProps, ref: React.ForwardedRef<HTMLInputElement>): JSX.Element | null;
+export declare const Upload: {
+    (props: UploadProps & React.RefAttributes<HTMLInputElement>): ReturnType<typeof UploadFC>;
+    Button: typeof UploadButton;
+    Action: typeof UploadAction;
+    PreviewAction: typeof UploadPreviewAction;
+    List: typeof UploadList;
+    Picture: typeof UploadPicture;
+    PictureList: typeof UploadPictureList;
+};
+export {};

package/upload/Upload.js

@@ -0,0 +1,203 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEventCallback, useForkRef, useUnmount } from '@laser-ui/hooks';
+import { isFunction, isNumber } from 'lodash';
+import { cloneElement, forwardRef, useMemo, useRef } from 'react';
+import { UploadAction } from './UploadAction';
+import { UploadButton } from './UploadButton';
+import { UploadList } from './UploadList';
+import { UploadPicture } from './UploadPicture';
+import { UploadPictureList } from './UploadPictureList';
+import { UploadPreviewAction } from './UploadPreviewAction';
+import { CLASSES, UploadContext } from './vars';
+import { useComponentProps, useControlled, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+function UploadFC(props, ref) {
+    var _a;
+    const _b = useComponentProps('Upload', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, request, max, drag = false, customUpload, beforeUpload, onModelChange, onRemove } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "request", "max", "drag", "customUpload", "beforeUpload", "onModelChange", "onRemove"]);
+    const styled = useStyled(CLASSES, { upload: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.upload, 'upload-list': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-list'] }, styleOverrides);
+    const inputRef = useRef(null);
+    const combineInputRef = useForkRef(inputRef, ref);
+    const dataRef = useRef({
+        fileURLs: [],
+    });
+    const [files, changeFiles] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : [], model, undefined, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    useUnmount(() => {
+        dataRef.current.fileURLs.forEach((fileURL) => {
+            URL.revokeObjectURL(fileURL);
+        });
+    });
+    const handleFiles = (fileList) => {
+        if (customUpload) {
+            customUpload(fileList);
+        }
+        else {
+            const filesAdded = [];
+            for (let index = 0; index < fileList.length; index++) {
+                const file = fileList.item(index);
+                if (file) {
+                    const xhr = new XMLHttpRequest();
+                    let uid = Date.now();
+                    const add = (obj) => {
+                        const fileURL = URL.createObjectURL(file);
+                        dataRef.current.fileURLs.push(fileURL);
+                        const fileAdded = Object.assign({ uid, name: file.name, url: fileURL, thumbUrl: file.type.startsWith('image') ? fileURL : undefined, originFile: file, response: xhr.response }, obj);
+                        if (isNumber(max) && files.length + filesAdded.length >= max) {
+                            if (max === 1) {
+                                uid = fileAdded.uid = files[0].uid;
+                                changeFiles([fileAdded]);
+                                onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange([fileAdded], {
+                                    type: 'update',
+                                    files: [fileAdded],
+                                });
+                                return;
+                            }
+                            return true;
+                        }
+                        filesAdded.push(fileAdded);
+                    };
+                    const update = (obj) => {
+                        let hasChange = true;
+                        const list = changeFiles((draft) => {
+                            const index = draft.findIndex((f) => f.uid === uid);
+                            if (index !== -1) {
+                                draft[index] = Object.assign(draft[index], Object.assign({ response: xhr.response }, obj));
+                            }
+                            else {
+                                hasChange = false;
+                            }
+                        });
+                        if (hasChange) {
+                            onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(list, {
+                                type: 'update',
+                                files: [list.find((f) => f.uid === uid)],
+                            });
+                        }
+                    };
+                    const upload = (condition) => {
+                        if (condition === false) {
+                            add({ state: null });
+                        }
+                        else {
+                            const abort = add({ state: 'progress', percent: 0 });
+                            if (abort) {
+                                return;
+                            }
+                            xhr.upload.addEventListener('progress', (e) => {
+                                if (e.lengthComputable) {
+                                    const percent = Math.round((e.loaded * 100) / e.total);
+                                    update({ state: 'progress', percent });
+                                }
+                            });
+                            xhr.addEventListener('error', () => {
+                                update({ state: 'error', percent: undefined });
+                            });
+                            xhr.addEventListener('load', () => {
+                                update({ state: xhr.status >= 200 && xhr.status < 300 ? 'load' : 'error', percent: undefined });
+                            });
+                            const { url, method = 'POST', responseType = 'json', header = {}, body = (file) => {
+                                const formData = new FormData();
+                                formData.append('file', file);
+                                return formData;
+                            }, custom,
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                             } = request;
+                            xhr.open(method, url);
+                            xhr.responseType = responseType;
+                            Object.entries(header).forEach((h) => {
+                                xhr.setRequestHeader(...h);
+                            });
+                            custom === null || custom === void 0 ? void 0 : custom(xhr);
+                            xhr.send(body(condition === true ? file : condition));
+                        }
+                    };
+                    let shouldUpload = true;
+                    if (beforeUpload) {
+                        shouldUpload = beforeUpload(file, fileList);
+                        if (shouldUpload instanceof Promise) {
+                            shouldUpload.then((condition) => {
+                                upload(condition);
+                            });
+                        }
+                        else {
+                            upload(shouldUpload);
+                        }
+                    }
+                    else {
+                        upload(true);
+                    }
+                }
+            }
+            if (filesAdded.length > 0) {
+                const list = changeFiles((draft) => draft.concat(filesAdded));
+                onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(list, {
+                    type: 'add',
+                    files: filesAdded,
+                });
+            }
+        }
+    };
+    const render = (el) => {
+        let dragProps = {};
+        if (drag) {
+            dragProps = {
+                onDragEnter: (e) => {
+                    var _a, _b;
+                    (_b = (_a = el.props).onDragEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    e.stopPropagation();
+                    e.preventDefault();
+                },
+                onDragOver: (e) => {
+                    var _a, _b;
+                    (_b = (_a = el.props).onDragOver) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    e.stopPropagation();
+                    e.preventDefault();
+                },
+                onDrop: (e) => {
+                    var _a, _b;
+                    (_b = (_a = el.props).onDrop) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const dt = e.dataTransfer;
+                    const files = dt.files;
+                    handleFiles(files);
+                },
+            };
+        }
+        return cloneElement(el, Object.assign(Object.assign({}, dragProps), { onClick: (e) => {
+                var _a, _b;
+                (_b = (_a = el.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                if (inputRef.current) {
+                    inputRef.current.click();
+                }
+            } }));
+    };
+    const handleRemove = useEventCallback((file) => {
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
+        const newList = changeFiles((draft) => {
+            const index = draft.findIndex((f) => f.uid === file.uid);
+            draft.splice(index, 1);
+        });
+        onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(newList, { type: 'remove', files: [file] });
+    });
+    const context = useMemo(() => ({ files, onRemove: handleRemove }), [files, handleRemove]);
+    return (_jsxs(_Fragment, { children: [_jsx(UploadContext.Provider, { value: context, children: isFunction(children) ? children(render) : render(children) }), _jsx("input", Object.assign({}, restProps, mergeCS(styled('upload'), {
+                className: restProps.className,
+                style: restProps.style,
+            }), { ref: combineInputRef, type: (_a = restProps.type) !== null && _a !== void 0 ? _a : 'file', onChange: (e) => {
+                    var _a;
+                    (_a = restProps.onChange) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    const files = e.currentTarget.files;
+                    if (files) {
+                        handleFiles(files);
+                    }
+                    e.currentTarget.value = '';
+                } }))] }));
+}
+export const Upload = forwardRef(UploadFC);
+Upload.Button = UploadButton;
+Upload.Action = UploadAction;
+Upload.PreviewAction = UploadPreviewAction;
+Upload.List = UploadList;
+Upload.Picture = UploadPicture;
+Upload.PictureList = UploadPictureList;

package/upload/UploadAction.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadActionProps } from './types';
+export declare const UploadAction: import("react").ForwardRefExoticComponent<UploadActionProps & import("react").RefAttributes<HTMLDivElement>>;

package/upload/UploadAction.js

@@ -0,0 +1,44 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { saveFile } from '@laser-ui/utils';
+import { ReactComponent as DeleteOutlineOutlined } from '@material-design-icons/svg/outlined/delete_outline.svg';
+import { ReactComponent as FileDownloadOutlined } from '@material-design-icons/svg/outlined/file_download.svg';
+import { isUndefined } from 'lodash';
+import { forwardRef } from 'react';
+import { ACTION_CLASSES } from './vars';
+import { useComponentProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export const UploadAction = forwardRef((props, ref) => {
+    var _a, _b, _c;
+    const _d = useComponentProps('UploadAction', props), { styleOverrides, styleProvider, children, preset, disabled: disabledProp = false, _file, _defaultActions, _light, _onRemove } = _d, restProps = __rest(_d, ["styleOverrides", "styleProvider", "children", "preset", "disabled", "_file", "_defaultActions", "_light", "_onRemove"]);
+    const styled = useStyled(ACTION_CLASSES, { 'upload-action': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-action'] }, styleOverrides);
+    const { t } = useTranslation();
+    const disabled = preset === 'download' ? disabledProp || isUndefined(_file.url) : disabledProp;
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('upload-action', {
+        'upload-action.is-disabled': disabled,
+        'upload-action--light': _light,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: ref, role: (_a = restProps['role']) !== null && _a !== void 0 ? _a : 'button', tabIndex: (_b = restProps['tabIndex']) !== null && _b !== void 0 ? _b : (disabled ? -1 : 0), title: ((_c = restProps.title) !== null && _c !== void 0 ? _c : preset === 'download')
+            ? t('Upload', 'Download file')
+            : preset === 'remove'
+                ? t('Upload', 'Remove file')
+                : undefined, onClick: (e) => {
+            var _a;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            e.stopPropagation();
+            if (preset === 'download') {
+                if (_defaultActions === null || _defaultActions === void 0 ? void 0 : _defaultActions.download) {
+                    _defaultActions.download(_file);
+                }
+                else {
+                    saveFile(_file.url, _file.name);
+                }
+            }
+            else if (preset === 'remove') {
+                _onRemove === null || _onRemove === void 0 ? void 0 : _onRemove();
+            }
+        }, children: children !== null && children !== void 0 ? children : (preset === 'download' ? (_jsx(Icon, { children: _jsx(FileDownloadOutlined, {}) })) : preset === 'remove' ? (_jsx(Icon, { children: _jsx(DeleteOutlineOutlined, {}) })) : null) })));
+});

package/upload/UploadButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadButtonProps } from './types';
+export declare const UploadButton: import("react").ForwardRefExoticComponent<UploadButtonProps & import("react").RefAttributes<HTMLDivElement>>;

package/upload/UploadButton.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
+import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import { Children, cloneElement, forwardRef } from 'react';
+import { UploadAction } from './UploadAction';
+import { UploadPreviewAction } from './UploadPreviewAction';
+import { BUTTON_CLASSES } from './vars';
+import { useComponentProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { mergeCS } from '../utils';
+export const UploadButton = forwardRef((props, ref) => {
+    var _a;
+    const _b = useComponentProps('UploadButton', props), { styleOverrides, styleProvider, file, actions, defaultActions, onRemove } = _b, restProps = __rest(_b, ["styleOverrides", "styleProvider", "file", "actions", "defaultActions", "onRemove"]);
+    const styled = useStyled(BUTTON_CLASSES, { 'upload-button': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-button'] }, styleOverrides);
+    const { t } = useTranslation();
+    const isLoading = file && file.state === 'progress';
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('upload-button', {
+        'upload-button.is-disabled': isLoading,
+        [`upload-button--${file === null || file === void 0 ? void 0 : file.state}`]: file,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: ref, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : (isLoading ? -1 : 0), children: file && file.state !== 'progress' ? (_jsxs(_Fragment, { children: [file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-button__thumbnail'), { src: file.thumbUrl, alt: file.name }))) : (_jsxs(_Fragment, { children: [_jsx(Icon, { theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) }), _jsx("div", Object.assign({}, styled('upload-button__name'), { children: file.name }))] })), _jsx("div", Object.assign({}, styled('upload-button__actions'), { children: Children.map(actions !== null && actions !== void 0 ? actions : [_jsx(UploadPreviewAction, {}), _jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
+                        _file: file,
+                        _defaultActions: defaultActions,
+                        _light: true,
+                        _onRemove: onRemove,
+                    })) }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('upload-button__icon'), { children: _jsx(Icon, { children: isLoading ? _jsx(CircularProgress, {}) : _jsx(AddOutlined, {}) }) })), _jsx("div", Object.assign({}, styled('upload-button__text'), { children: t('Upload', isLoading ? 'Uploading' : 'Upload') }))] })) })));
+});

package/upload/UploadList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadListProps } from './types';
+export declare function UploadList(props: UploadListProps): JSX.Element | null;

package/upload/UploadList.js

@@ -0,0 +1,62 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImmer } from '@laser-ui/hooks';
+import { ReactComponent as AttachFileOutlined } from '@material-design-icons/svg/outlined/attach_file.svg';
+import { isNumber, isUndefined } from 'lodash';
+import { Children, cloneElement, useContext } from 'react';
+import { UploadAction } from './UploadAction';
+import { LIST_CLASSES, UploadContext } from './vars';
+import { useComponentProps, useNextTick, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { CollapseTransition } from '../internal/transition';
+import { Progress } from '../progress';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function UploadList(props) {
+    const _a = useComponentProps('UploadList', props), { styleOverrides, styleProvider, actions, defaultActions } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "actions", "defaultActions"]);
+    const styled = useStyled(LIST_CLASSES, { 'upload-list': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-list'] }, styleOverrides);
+    const { files, onRemove } = useContext(UploadContext);
+    const nextTick = useNextTick();
+    const [removeUIDs, setRemoveUIDs] = useImmer([]);
+    return (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('upload-list'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: files.map((file, index) => (_jsx(CollapseTransition, { originalSize: {
+                height: 'auto',
+            }, collapsedSize: {
+                height: 0,
+            }, enter: !removeUIDs.includes(file.uid), during: TTANSITION_DURING_BASE, styles: {
+                entering: {
+                    transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                },
+                leaving: {
+                    transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                },
+                leaved: { display: 'none' },
+            }, skipFirstTransition: nextTick.current ? false : true, afterLeave: () => {
+                setRemoveUIDs((draft) => {
+                    draft.splice(draft.findIndex((uid) => uid === file.uid), 1);
+                });
+                onRemove(file);
+            }, children: (collapseRef, collapseStyle) => (_jsxs("li", Object.assign({}, mergeCS(styled('upload-list__item', {
+                [`upload-list__item--${file.state}`]: file.state,
+            }), {
+                style: collapseStyle,
+            }), { ref: collapseRef, children: [_jsx("div", Object.assign({}, styled('upload-list__icon'), { children: file.state === 'progress' ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (_jsx(Icon, { rotate: 45, children: _jsx(AttachFileOutlined, {}) })) })), _jsx("a", Object.assign({}, styled('upload-list__link', {
+                        'upload-list__link.is-active': file.state === 'load' && !isUndefined(file.url),
+                    }), { href: file.url, target: "_blank", rel: "noreferrer", title: file.name, onClick: (e) => {
+                            if (defaultActions && defaultActions.preview) {
+                                e.preventDefault();
+                                defaultActions.preview(file);
+                            }
+                        }, children: file.name })), _jsx("div", Object.assign({}, styled('upload-list__actions'), { children: Children.map(actions ? actions(file, index) : [_jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
+                            _file: file,
+                            _defaultActions: defaultActions,
+                            _onRemove: () => {
+                                setRemoveUIDs((draft) => {
+                                    draft.push(file.uid);
+                                });
+                            },
+                        })) })), _jsx("div", Object.assign({}, styled('upload-list__progress-wrapper'), { children: isNumber(file.percent) && _jsx(Progress, { percent: file.percent, label: false, lineWidth: 2 }) }))] }))) }, file.uid))) })));
+}

package/upload/UploadPicture.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadPictureProps } from './types';
+export declare function UploadPicture(props: UploadPictureProps): JSX.Element | null;

package/upload/UploadPicture.js

@@ -0,0 +1,72 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImmer } from '@laser-ui/hooks';
+import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import { isNumber } from 'lodash';
+import { Children, cloneElement, useContext } from 'react';
+import { UploadAction } from './UploadAction';
+import { UploadPreviewAction } from './UploadPreviewAction';
+import { PICTURE_CLASSES, UploadContext } from './vars';
+import { useComponentProps, useNextTick, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { Transition } from '../internal/transition';
+import { Progress } from '../progress';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function UploadPicture(props) {
+    const _a = useComponentProps('UploadPicture', props), { children, styleOverrides, styleProvider, actions, defaultActions } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "actions", "defaultActions"]);
+    const styled = useStyled(PICTURE_CLASSES, { 'upload-picture': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-picture'] }, styleOverrides);
+    const { t } = useTranslation();
+    const { files, onRemove } = useContext(UploadContext);
+    const nextTick = useNextTick();
+    const [removeUIDs, setRemoveUIDs] = useImmer([]);
+    return (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('upload-picture'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: _jsxs("div", Object.assign({}, styled('upload-picture__row'), { children: [files.map((file, index) => (_jsx(Transition, { enter: !removeUIDs.includes(file.uid), during: TTANSITION_DURING_BASE, skipFirstTransition: nextTick.current ? false : true, afterLeave: () => {
+                        setRemoveUIDs((draft) => {
+                            draft.splice(draft.findIndex((uid) => uid === file.uid), 1);
+                        });
+                        onRemove(file);
+                    }, children: (state) => {
+                        let transitionStyle = {};
+                        switch (state) {
+                            case 'enter':
+                                transitionStyle = { transform: 'scale(0)' };
+                                break;
+                            case 'entering':
+                                transitionStyle = {
+                                    transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                                    transformOrigin: 'top left',
+                                };
+                                break;
+                            case 'leaving':
+                                transitionStyle = {
+                                    transform: 'scale(0)',
+                                    transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                                    transformOrigin: 'top left',
+                                };
+                                break;
+                            case 'leaved':
+                                transitionStyle = { display: 'none' };
+                                break;
+                            default:
+                                break;
+                        }
+                        return (_jsx("div", { children: _jsx("li", Object.assign({}, mergeCS(styled('upload-picture__item', {
+                                [`upload-picture__item--${file.state}`]: file.state,
+                                'upload-picture__item.is-disabled': file && file.state === 'progress',
+                            }), {
+                                style: transitionStyle,
+                            }), { children: file.state !== 'progress' ? (_jsxs(_Fragment, { children: [file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-picture__thumbnail'), { src: file.thumbUrl, alt: file.name }))) : (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 28, theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) }), _jsx("div", Object.assign({}, styled('upload-picture__name'), { children: file.name }))] })), _jsx("div", Object.assign({}, styled('upload-picture__actions'), { children: Children.map(actions ? actions(file, index) : [_jsx(UploadPreviewAction, {}), _jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
+                                                _file: file,
+                                                _defaultActions: defaultActions,
+                                                _light: true,
+                                                _onRemove: () => {
+                                                    setRemoveUIDs((draft) => {
+                                                        draft.push(file.uid);
+                                                    });
+                                                },
+                                            })) }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('upload-picture__progress-text'), { children: t('Upload', 'Uploading') })), isNumber(file.percent) && (_jsx(Progress, { style: { width: '100%' }, percent: file.percent, label: false, lineWidth: 2 }))] })) })) }));
+                    } }, file.uid))), _jsx("div", { children: children })] })) })));
+}

package/upload/UploadPictureList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadPictureListProps } from './types';
+export declare function UploadPictureList(props: UploadPictureListProps): JSX.Element | null;