beer-assembly-biz 1.1.2-alpha.9 → 1.1.3-alpha.10

package/media/Media.js

@@ -0,0 +1,241 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Checkbox, ConfigProvider, Form, Input, Select, Space, Spin, theme, Tree, Typography } from 'antd';
+import { Flux } from 'beer-assembly-plus';
+import { CaretDownOutlined, CloudUploadOutlined, SearchOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+export const Media = (props) => {
+    const { token } = theme.useToken();
+    const [form] = Form.useForm();
+    const [loading, setLoading] = useState(false);
+    const [keyword, setKeyword] = useState('');
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const onChange = (current) => {
+        if (current !== undefined && current?.sortType !== undefined) {
+            onDirectoryChange();
+            return;
+        }
+        const values = form.getFieldsValue();
+        props?.onFileChange?.(Object.keys(values)
+            .filter(key => values[key] === true)
+            .map((key) => {
+            return (props?.items ?? []).find(it => it.key === key);
+        })
+            .filter(it => it !== undefined));
+    };
+    const onDirectoryChange = (key) => {
+        key = key === undefined ? selectedKeys?.[0] : key;
+        if (key === undefined) {
+            return;
+        }
+        setSelectedKeys([key]);
+        props?.onDirectoryChange?.(key, form.getFieldValue('sortType') ?? 'DEFAULT', (status) => {
+            setLoading(status);
+        });
+    };
+    const recursion = (items, depth = 3) => {
+        if (depth <= 0) {
+            return [];
+        }
+        const result = items.filter(item => (item?.children ?? []).length > 0) ?? [];
+        return [...(result.map(item => item.key)), ...recursion(result?.map(item => item?.children ?? [])
+                .flat(), depth - 1)];
+    };
+    useEffect(() => {
+        const values = {};
+        for (const key of (props?.value?.map(item => item.key) ?? [])) {
+            values[key] = true;
+        }
+        form.setFieldsValue(values);
+    }, [props?.value]);
+    useEffect(() => {
+        if (selectedKeys.length > 0) {
+            return;
+        }
+        if (props?.directoryItems === undefined) {
+            return;
+        }
+        const directoryItem = props?.directoryItems?.[0];
+        if (directoryItem === undefined) {
+            return;
+        }
+        const directoryItemKey = directoryItem.key;
+        setSelectedKeys([directoryItemKey]);
+        setExpandedKeys(recursion(props?.directoryItems?.filter(item => (item.children ?? []).length > 0) ?? []));
+        onDirectoryChange(directoryItemKey);
+        form.setFieldsValue({ sortType: 'CREATE_TIME_DESC' });
+    }, [props?.directoryItems]);
+    return React.createElement(ConfigProvider, { theme: {
+            algorithm: theme.defaultAlgorithm,
+            token: {
+                colorBgContainerDisabled: '#fff',
+                colorBgTextHover: 'rgba(6,6,6,0.06)'
+            },
+            components: {
+                Tree: {
+                    paddingXS: 0,
+                    borderRadius: 2,
+                    directoryNodeSelectedBg: token.colorPrimaryBg,
+                    directoryNodeSelectedColor: token.colorPrimary,
+                    // 屏蔽样式
+                    nodeHoverColor: 'none',
+                    nodeSelectedColor: '#333',
+                    indentSize: 6,
+                    titleHeight: 20,
+                    fontSize: 13
+                }
+            }
+        } },
+        React.createElement("div", { style: {
+                ...(props?.style ?? {}),
+                borderRadius: token.borderRadius + 2,
+                display: 'flex',
+                justifyContent: 'space-between',
+                userSelect: 'none',
+                alignItems: 'stretch'
+            } },
+            React.createElement(Tree.DirectoryTree, { className: css `
+            .ant-tree-treenode {
+                padding-inline: 4px;
+                align-items: center;
+            }
+        `, expandAction: false, style: {
+                    height: '100%',
+                    display: 'block',
+                    minWidth: props?.directoryWidth ?? 180,
+                    maxWidth: props?.directoryWidth ?? 180,
+                    paddingBlockStart: 12,
+                    paddingInlineEnd: 12,
+                    overflow: 'auto'
+                }, onSelect: (selectKeys) => {
+                    const key = selectKeys[selectKeys.length - 1];
+                    onDirectoryChange(key);
+                }, onExpand: (expandedKeys) => {
+                    setExpandedKeys(expandedKeys);
+                }, treeData: props?.directoryItems ?? [], selectedKeys: selectedKeys, expandedKeys: expandedKeys, icon: false, switcherIcon: () => {
+                    return React.createElement(CaretDownOutlined, { style: {
+                            fontSize: 10,
+                            marginBlockEnd: 2
+                        } });
+                }, titleRender: (data) => {
+                    return React.createElement("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            height: 30
+                        } },
+                        React.createElement("div", { style: {
+                                width: data?.width ?? 100,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap'
+                            } }, data.title));
+                } }),
+            React.createElement(Form, { style: {
+                    width: '100%',
+                    paddingBlockStart: 12,
+                    paddingLeft: 12,
+                    borderLeft: '1px solid rgba(0,0,0,0.08)'
+                }, form: form, onValuesChange: (current) => onChange(current) },
+                React.createElement(Flux, { style: {
+                        justifyContent: 'space-between',
+                        paddingInlineStart: 2,
+                        paddingInlineEnd: 6,
+                        paddingBlockEnd: 12,
+                        borderBottom: '1px solid rgba(0,0,0,0.08)'
+                    } },
+                    React.createElement(Space, null,
+                        React.createElement(Form.Item, { noStyle: true, name: "sortType" },
+                            React.createElement(Select, { options: [{
+                                        label: '文件名称（升序）',
+                                        value: 'NAME_ASC'
+                                    }, {
+                                        label: '文件名称（降序）',
+                                        value: 'NAME_DESC'
+                                    }, {
+                                        label: '上传时间（升序）',
+                                        value: 'CREATE_TIME_ASC'
+                                    }, {
+                                        label: '上传时间（降序）',
+                                        value: 'CREATE_TIME_DESC'
+                                    }], prefix: React.createElement(UnorderedListOutlined, { style: { marginRight: 4 } }) })),
+                        React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0", prefix: React.createElement(SearchOutlined, { style: { marginRight: 4 } }), onChange: (e) => {
+                                setKeyword(e.target.value);
+                            } })),
+                    React.createElement(Button, { icon: React.createElement(CloudUploadOutlined, { style: {
+                                marginRight: 0,
+                                fontSize: token.fontSize + 2
+                            } }), type: "primary", onClick: () => {
+                            props?.onUpload?.();
+                        } }, "\u672C\u5730\u4E0A\u4F20")),
+                React.createElement(Spin, { spinning: loading },
+                    React.createElement(Flux, { style: {
+                            marginBlock: 4,
+                            paddingBlock: 4,
+                            paddingInlineStart: 2,
+                            paddingInlineEnd: 6,
+                            flexWrap: 'wrap',
+                            overflow: 'auto',
+                            height: props?.height ?? 500
+                        }, size: 12, alignItems: "flex-start" }, props?.items?.filter(item => {
+                        return item?.fileName?.indexOf(keyword) > -1;
+                    })
+                        .map((item, i) => (React.createElement("div", { key: i, style: {
+                            width: 140,
+                            borderRadius: token.borderRadius + 2,
+                            border: '1px solid rgba(0,0,0,0.1)',
+                            overflow: 'hidden',
+                            position: 'relative',
+                            padding: 4,
+                            cursor: (props?.maxLength ?? 1) <= (props?.value ?? []).length && props?.value?.find(it => it.key === item.key) === undefined ? 'not-allowed' : 'pointer'
+                        }, className: css `
+                    &:hover {
+                        outline: 1px solid ${token.colorPrimary} !important;
+                        border-color: ${token.colorPrimary} !important;
+                    }
+                ` },
+                        React.createElement(Form.Item, { noStyle: true, name: [item.key], valuePropName: "checked" },
+                            React.createElement(Checkbox, { style: {
+                                    position: 'absolute',
+                                    top: 8,
+                                    right: 12
+                                }, disabled: (props?.maxLength ?? 1) <= (props?.value ?? []).length && props?.value?.find(it => it.key === item.key) === undefined })),
+                        React.createElement("div", { onClick: () => {
+                                const status = form.getFieldValue([item.key]);
+                                if ((props?.maxLength ?? 1) <= (props?.value ?? []).length && !(status === true)) {
+                                    return;
+                                }
+                                form.setFieldsValue({
+                                    [item.key]: !form.getFieldValue([item.key])
+                                });
+                                onChange();
+                            } },
+                            React.createElement("img", { src: item?.preview ?? item?.url, alt: "", style: {
+                                    display: 'block',
+                                    width: 140,
+                                    height: 120,
+                                    objectFit: 'cover',
+                                    userSelect: 'none',
+                                    pointerEvents: 'none',
+                                    borderRadius: token.borderRadius
+                                } }),
+                            React.createElement("div", { style: {
+                                    padding: '2px 2px 0 2px'
+                                } },
+                                React.createElement(Typography.Paragraph, { ellipsis: true, style: {
+                                        margin: 0,
+                                        padding: 0,
+                                        fontSize: 12,
+                                        lineHeight: 1.6,
+                                        color: '#333'
+                                    } }, item?.fileName),
+                                React.createElement(Flux, { style: {
+                                        margin: 0,
+                                        padding: 0,
+                                        lineHeight: 1.45,
+                                        fontSize: token.fontSize - 2,
+                                        justifyContent: 'space-between',
+                                        color: '#666'
+                                    } },
+                                    React.createElement("span", null, item?.attribute?.resolution),
+                                    React.createElement("span", null, item?.fileLength))))))))))));
+};

package/media/MediaModals.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Handler } from '../type';
+import { DirectoryItem, MediaItem } from './Media';
+/**
+ * 图片空间模态框.
+ */
+export declare class MediaModals {
+    /**
+     * 打开图片选择模态框.
+     * @param request 请求接口.
+     */
+    static use(request: {
+        getDirectory: () => Promise<DirectoryItem[]>;
+        getItems: (directoryId: string, sortType: string) => Promise<MediaItem[]>;
+        uploadFile: (file: File) => Promise<boolean>;
+    }): [Handler<MediaItem[]>, ReactNode];
+}

package/media/MediaModals.js

@@ -0,0 +1,172 @@
+import React, { useRef, useState } from 'react';
+import { Button, message, Modal, Progress, Space, theme } from 'antd';
+import { Flux } from 'beer-assembly-plus';
+import { Media } from './Media';
+import { UploadModals } from '../UploadModals';
+/**
+ * 图片空间模态框.
+ */
+export class MediaModals {
+    /**
+     * 打开图片选择模态框.
+     * @param request 请求接口.
+     */
+    static use(request) {
+        const { token } = theme.useToken();
+        const directoryGroupRef = useRef({});
+        const directoryCurrentRef = useRef('');
+        const directoryCurrentSortTypeRef = useRef('');
+        const mediaCallbackRef = useRef(null);
+        const [messageApi, contextHolder] = message.useMessage();
+        const [uploadModal, contextUploadHolder] = UploadModals.useUpload(['IMAGE']);
+        const [isOpenModal, setIsOpenModal] = useState(false);
+        const [maxLength, setMaxLength] = useState(1);
+        const [directorySelectMaxLength, setDirectorySelectMaxLength] = useState(1);
+        const [selectItems, setSelectItems] = useState([]);
+        const [directoryItem, setDirectoryItem] = useState([]);
+        const [mediaItem, setMediaItem] = useState([]);
+        const [progress, setProgress] = useState(0);
+        const callbackRef = useRef(undefined);
+        const getSelectKeyLength = () => {
+            const numbers = Object.keys(directoryGroupRef.current)
+                .map(it => directoryGroupRef.current[it])
+                .map(it => it.length) ?? [];
+            return numbers.reduce((value, current) => value + current, 0);
+        };
+        const refreshMedia = () => {
+            mediaCallbackRef?.current?.(true);
+            request.getItems(directoryCurrentRef.current, directoryCurrentSortTypeRef.current)
+                .then(items => {
+                mediaCallbackRef?.current?.(false);
+                setMediaItem(items);
+            });
+        };
+        const onConfirm = async () => {
+            if (callbackRef.current) {
+                const selectItems = Object.keys(directoryGroupRef.current)
+                    .map(key => directoryGroupRef.current[key] ?? [])
+                    .flat();
+                if (await callbackRef.current(selectItems)) {
+                    setIsOpenModal(false);
+                }
+            }
+            else {
+                setIsOpenModal(false);
+            }
+        };
+        const handler = {
+            ok: (callback, args) => {
+                setIsOpenModal(true);
+                setMaxLength(args?.maxLength ?? 1);
+                if (args?.directoryItem !== undefined) {
+                    setDirectoryItem(args.directoryItem);
+                }
+                else {
+                    request.getDirectory()
+                        .then(directoryItems => {
+                        setDirectoryItem(directoryItems);
+                    });
+                }
+                setProgress(0);
+                callbackRef.current = callback;
+            }
+        };
+        return [handler, React.createElement(React.Fragment, null,
+                React.createElement(Modal, { maskClosable: false, title: React.createElement(Space, { size: 24 },
+                        React.createElement("span", null, "\u56FE\u7247\u7A7A\u95F4"),
+                        progress > 0 ? React.createElement(Flux, { style: {
+                                fontSize: token.fontSize - 1,
+                                fontWeight: 'normal'
+                            } },
+                            React.createElement(Progress, { percent: progress, style: { width: 120 } }),
+                            React.createElement("span", { style: {
+                                    marginBlockStart: 3,
+                                    fontWeight: 500
+                                } }, "\u6587\u4EF6\u6B63\u5728\u4E0A\u4F20\uFF0C\u8BF7\u4E0D\u8981\u5173\u95ED\u7A97\u53E3")) : undefined), open: isOpenModal, width: 1035, styles: {
+                        content: {
+                            padding: 0
+                        },
+                        header: {
+                            paddingBlock: '16px 12px',
+                            paddingInline: 24,
+                            marginInlineStart: 0,
+                            marginBlockEnd: 0,
+                            borderBottom: '1px solid rgba(0,0,0,0.08)'
+                        },
+                        wrapper: {
+                            padding: 0
+                        },
+                        body: {
+                            paddingInline: 12
+                        },
+                        footer: {
+                            margin: 0
+                        }
+                    }, onCancel: () => setIsOpenModal(false), footer: React.createElement(Flux, { style: {
+                            justifyContent: 'space-between',
+                            borderTop: '1px solid rgba(0,0,0,0.08)',
+                            paddingInline: 24,
+                            paddingBlock: 12
+                        } },
+                        React.createElement("a", null, "\u8FDB\u5165\u56FE\u7247\u7A7A\u95F4"),
+                        React.createElement(Space, { size: 12 },
+                            React.createElement(Space, { style: {
+                                    fontSize: 12,
+                                    marginInlineEnd: 8,
+                                    color: 'rgba(0,0,0,0.6)'
+                                }, size: 2 },
+                                "\u6700\u591A\u9009",
+                                React.createElement("span", { style: { color: '#FF7700' } }, maxLength),
+                                "\u5F20\uFF0C\u5DF2\u9009",
+                                React.createElement("span", { style: { color: '#FF7700' } }, getSelectKeyLength()),
+                                "\u5F20"),
+                            React.createElement(Button, { type: "primary", onClick: () => onConfirm() }, "\u786E\u5B9A"),
+                            React.createElement(Button, { onClick: () => setIsOpenModal(false) }, "\u53D6\u6D88"))) },
+                    React.createElement(Media, { directoryItems: directoryItem, items: mediaItem, onUpload: () => {
+                            if (progress > 0) {
+                                return;
+                            }
+                            uploadModal.ok(async (files) => {
+                                if (files === undefined || files.length <= 0) {
+                                    return true;
+                                }
+                                setProgress(5);
+                                const async = async () => {
+                                    const total = files.length;
+                                    let index = 0;
+                                    for (const file of files) {
+                                        index += 1;
+                                        // eslint-disable-next-line no-await-in-loop
+                                        await request.uploadFile(file);
+                                        setProgress(Math.min(5 + Math.floor(95 / total) * index, 100));
+                                    }
+                                    messageApi?.success('文件上传成功！');
+                                    setTimeout(() => {
+                                        setProgress(0);
+                                    }, 500);
+                                    // 刷新页面
+                                    refreshMedia();
+                                };
+                                async()
+                                    .then();
+                                return true;
+                            });
+                        }, onDirectoryChange: (key, sortType, callback) => {
+                            directoryCurrentRef.current = key.toString();
+                            directoryCurrentSortTypeRef.current = sortType;
+                            mediaCallbackRef.current = callback;
+                            const selectItems = directoryGroupRef.current?.[directoryCurrentRef.current] ?? [];
+                            setDirectorySelectMaxLength(maxLength - getSelectKeyLength() + selectItems.length);
+                            setSelectItems(selectItems);
+                            refreshMedia();
+                        }, onFileChange: (items) => {
+                            directoryGroupRef.current = {
+                                ...(directoryGroupRef.current ?? {}),
+                                [directoryCurrentRef.current]: items
+                            };
+                            setSelectItems(items);
+                        }, value: selectItems, maxLength: directorySelectMaxLength })),
+                contextHolder,
+                contextUploadHolder)];
+    }
+}