beer-assembly-biz 1.1.3-alpha.4 → 1.1.3-alpha.5

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];
+}