beer-assembly-biz 1.1.1-alpha.12 → 1.1.1-alpha.13

package/MediaModals.d.ts

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

package/MediaModals.js

@@ -0,0 +1,229 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { css } from '@emotion/css';
+import { Breadcrumb, Dropdown, Input, Modal, Space, Typography } from 'antd';
+import { CopyOutlined, DeleteOutlined, ExclamationCircleFilled, HighlightOutlined, RightCircleOutlined, ScissorOutlined } from '@ant-design/icons';
+import DirectorySelect from 'beer-assembly/DirectorySelect';
+import IconDirectory from './icon/directory.svg';
+class MediaModals {
+    static useMedia(request) {
+        const [isOpenModal, setIsOpenModal] = useState(true);
+        const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
+        const [isOpenRenameModal, setIsOpenRenameModal] = useState(false);
+        const [isOpenConfirmModal, setIsOpenConfirmModal] = useState(false);
+        const [path, setPath] = useState([]);
+        const [dataList, setDataList] = useState([]);
+        const [selectId, setSelectId] = useState('');
+        const [selectName, setSelectName] = useState('');
+        const callbackRef = useRef(undefined);
+        const onOpenDirectory = async (id, name) => {
+            const paths = [...getPaths(), {
+                    id,
+                    name
+                }];
+            setPaths(paths);
+        };
+        const onBackDirectory = async (id) => {
+            const paths = getPaths();
+            const index = paths.findIndex(it => it.id === id);
+            if (index < 0) {
+                return;
+            }
+            paths.splice(index);
+            setPaths(paths);
+        };
+        const onSelectItem = async (id) => {
+            callbackRef?.current?.([id]);
+        };
+        const onRename = async (id, name) => {
+            setIsOpenRenameModal(true);
+            setSelectId(id);
+            setSelectName(name);
+        };
+        const onConfirmRename = async () => {
+            return request?.rename(selectId, selectName);
+        };
+        const onCopy = async (id) => {
+            return request?.copy(id);
+        };
+        const onMove = async (id) => {
+            setIsOpenMoveModal(true);
+            setSelectId(id);
+        };
+        const onConfirmMove = async (targetId) => {
+            request?.move(selectId, targetId);
+        };
+        const onRemove = async (id) => {
+            setIsOpenConfirmModal(true);
+            setSelectId(id);
+        };
+        const onConfirmRemove = async () => {
+            return request?.remove(selectId);
+        };
+        const setPaths = (items) => {
+            setPath(items);
+            sessionStorage.setItem('MEDIA_MODALS_PATHS', JSON.stringify(items));
+        };
+        const getPaths = () => {
+            const paths = JSON.parse(sessionStorage.getItem('MEDIA_MODALS_PATHS') || '[]');
+            if (paths.length <= 0) {
+                paths.push({
+                    id: '0',
+                    name: '根目录'
+                });
+            }
+            return paths;
+        };
+        const Item = (props) => {
+            const element = React.createElement("div", { style: {
+                    padding: '8px 12px',
+                    backgroundColor: props?.active ? '#e6f1ff' : undefined,
+                    display: 'block',
+                    margin: '0 auto',
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                    position: 'relative',
+                    ...props.style
+                }, className: css `
+          border: ${props?.active ? '1px solid #cddef5' : '1px solid #fff'};
+
+          &:hover {
+              background-color: #eef1f5;
+              border: 1px solid ${props.active ? '#cddef5' : '#e6e6e6'};
+          }
+      `, onDoubleClick: () => (props.type === 'DIRECTORY' ? onOpenDirectory(props.id, props.name) : onSelectItem(props.id)) },
+                React.createElement("img", { src: props?.type === 'DIRECTORY' ? IconDirectory : props?.src, alt: "", style: {
+                        width: 56,
+                        height: 56,
+                        margin: 'auto',
+                        display: 'block',
+                        overflow: 'hidden',
+                        objectFit: props?.type === 'DIRECTORY' ? undefined : 'cover'
+                    } }),
+                props?.rename ? React.createElement("input", { style: {
+                        boxSizing: 'border-box',
+                        width: 70,
+                        fontSize: 12,
+                        display: 'block',
+                        outline: '1px solid #59ABFE',
+                        border: '1px solid #59ABFE',
+                        padding: '2px 3px',
+                        borderRadius: 2,
+                        marginTop: props?.type === 'DIRECTORY' ? undefined : 2
+                    } }) : React.createElement(Typography.Text, { style: {
+                        width: 70,
+                        fontSize: 11,
+                        display: 'block',
+                        textAlign: 'center',
+                        color: '#323232',
+                        marginTop: props?.type === 'DIRECTORY' ? undefined : 1
+                    }, ellipsis: true }, props?.name || '？'));
+            const menusItems = [
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onOpenDirectory(props.id, props.name) },
+                        React.createElement(RightCircleOutlined, null),
+                        "\u6253\u5F00\u76EE\u5F55"),
+                    key: '0'
+                },
+                {
+                    type: 'divider'
+                },
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onRename(props.id, props.name) },
+                        React.createElement(HighlightOutlined, null),
+                        "\u91CD\u547D\u540D"),
+                    key: '1'
+                },
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onCopy(props.id) },
+                        React.createElement(CopyOutlined, null),
+                        "\u590D\u5236\u76EE\u5F55"),
+                    key: '2'
+                },
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onMove(props.id) },
+                        React.createElement(ScissorOutlined, null),
+                        "\u79FB\u52A8\u76EE\u5F55"),
+                    key: '3'
+                },
+                {
+                    type: 'divider'
+                },
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onRemove(props.id) },
+                        React.createElement(DeleteOutlined, null),
+                        "\u5220\u9664\u76EE\u5F55"),
+                    key: '4',
+                    danger: true
+                }
+            ];
+            return props.active ? React.createElement(Dropdown, { menu: {
+                    items: menusItems
+                }, trigger: ['contextMenu'] }, element) : element;
+        };
+        const handler = (callback) => {
+            setPath(getPaths());
+            setIsOpenModal(true);
+            if (callbackRef !== undefined) {
+                callbackRef.current = callback;
+            }
+        };
+        useEffect(() => {
+            if ((path || []).length <= 0) {
+                return;
+            }
+            const item = path[path.length - 1];
+            const chunkArray = (array, size) => {
+                const result = [];
+                for (let i = 0; i < array.length; i += size) {
+                    result.push(array.slice(i, i + size));
+                }
+                return result;
+            };
+            request?.requestList?.(item.id)
+                .then(result => {
+                setDataList(chunkArray(result || [], 5));
+            });
+        }, path);
+        return [handler, React.createElement(React.Fragment, null,
+                React.createElement(Modal, { width: 565, footer: null, styles: {
+                        content: { padding: 0 }
+                    }, open: isOpenModal, title: React.createElement("div", { style: {
+                            padding: '12px 0 8px 0',
+                            borderBottom: '1px solid #ddd'
+                        } },
+                        React.createElement("img", { style: {
+                                marginInlineStart: 20,
+                                display: 'block',
+                                width: '140px',
+                                height: '30px',
+                                backgroundColor: '#eee'
+                            }, alt: "" })) },
+                    React.createElement("div", { style: {
+                            marginBottom: 6,
+                            padding: '0 20px'
+                        } },
+                        React.createElement(Breadcrumb, { items: path?.map((it, index) => {
+                                return { title: index + 1 === path.length ? it.name : React.createElement("a", { onClick: () => onBackDirectory(it.id) }, it.name) };
+                            }) })),
+                    React.createElement("div", { style: {
+                            padding: '6px 0 24px 0',
+                            height: 333,
+                            maxHeight: 333,
+                            overflowY: 'auto',
+                            overflowX: 'hidden'
+                        } }, dataList?.map((group, index) => (React.createElement("div", { key: index, style: {
+                            padding: '0 20px 10px 20px',
+                            display: 'flex'
+                        } }, group?.map((item) => (React.createElement(Item, { id: item.id, key: item.id, style: { marginRight: 10 }, type: item.type, src: item.url, name: item.name })))))))),
+                React.createElement(Modal, { title: "\u91CD\u547D\u540D", width: 340, open: isOpenRenameModal, onOk: () => onConfirmRename(), onCancel: () => setIsOpenRenameModal(false), okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88" },
+                    React.createElement(Input, null)),
+                React.createElement(Modal, { title: React.createElement(React.Fragment, null,
+                        React.createElement(ExclamationCircleFilled, { style: {
+                                marginRight: 6,
+                                fontSize: 16,
+                                color: '#faad14'
+                            } }),
+                        "\u662F\u5426\u786E\u8BA4\u5220\u9664\u76EE\u5F55?"), width: 400, open: isOpenConfirmModal, onOk: () => onConfirmRemove(), onCancel: () => setIsOpenConfirmModal(false), okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88" }, "\u5220\u9664\u64CD\u4F5C\u4E0D\u80FD\u56DE\u590D\uFF0C\u786E\u5B9A\u8981\u5220\u9664\u9009\u4E2D\u7684\u6587\u4EF6\u6216\u6587\u4EF6\u5939\u5417\uFF1F"),
+                React.createElement(DirectorySelect, { open: isOpenMoveModal, onOk: (value) => onConfirmMove(value) }))];
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "beer-assembly-biz",
   "private": false,
-  "version": "1.1.1-alpha.12",
+  "version": "1.1.1-alpha.13",
   "scripts": {
     "pub-w": "tsc && copy package.json .\\dist\\package.json && npm publish ./dist",
     "pub-m": "tsc && cp -a src/icon ./dist && cp -a src/fonts ./dist && cp -a src/images ./dist && cp package.json ./dist/package.json && npm publish ./dist"