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

package/media/MediaModals.js

@@ -1,461 +1,172 @@
-"use strict";
-// import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-// import { css } from '@emotion/css';
-// import { Breadcrumb, Button, Dropdown, Input, message, Modal, Popconfirm, Space, Spin, theme, Typography } from 'antd';
-// import ElementUtils from 'beer-network/elementUtils';
-// import Flux from 'beer-assembly/Flux';
-// import { CloudDownloadOutlined, CopyOutlined, DeleteOutlined, ExclamationCircleFilled, HighlightOutlined, RightCircleOutlined, ScissorOutlined } from '@ant-design/icons';
-// import DirectorySelect, { DirectorySelectProps } from 'beer-assembly/DirectorySelect';
-// import InlineContainer from './InlineContainer';
-// import IconDirectory from './icon/directory.svg';
-// import IconMedia from './icon/media.png';
-//
-// export type Handler<T> = {
-//   ok: (callback?: (params: T) => void) => void
-// }
-// type DirectoryRequest = NonNullable<DirectorySelectProps['request']>;
-// export declare type MediaItem = {
-//   id: string
-//   name: string
-//   type: 'DIRECTORY' | 'FILE'
-//   url: string
-//   active: boolean
-// };
-// export declare type RequestParams = {
-//   /**
-//    * 获取列表数据.
-//    * @param parentId 父类ID.
-//    */
-//   requestList: (parentId: string) => Promise<MediaItem[]>
-//   rename: (id: string, name: string) => Promise<Boolean>
-//   copy: (id: string) => Promise<Boolean>
-//   move: (moveId: string, targetId: string) => Promise<Boolean>
-//   remove: (id: string) => Promise<Boolean>
-//   createDirectory: (parentId: string, name: string) => Promise<Boolean>
-//   putFile: (parentId: string, files: FileList) => Promise<Boolean>
-// } & {
-//   directory: DirectoryRequest
-// };
-//
-// export class MediaModals {
-//   public static useMedia(request?: RequestParams): [Handler<string[]>, ReactNode] {
-//     const [messageApi, contextHolder] = message.useMessage();
-//     const { token } = theme.useToken();
-//     const [isOpenModal, setIsOpenModal] = useState(false);
-//     const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
-//     const [isOpenRenameModal, setIsOpenRenameModal] = useState(false);
-//     const [isOpenConfirmModal, setIsOpenConfirmModal] = useState(false);
-//     const [isLoading, setIsLoading] = useState(false);
-//     const [path, setPath] = useState<{ id: string, name: string }[]>([]);
-//     const [dataList, setDataList] = useState<MediaItem[][]>([]);
-//     const [selectId, setSelectId] = useState('');
-//     const [selectName, setSelectName] = useState('');
-//     const callbackRef = useRef<((params: string[]) => void) | undefined>(undefined);
-//     const refreshData = (force?: boolean) => {
-//       const item = path[path.length - 1];
-//       const chunkArray = (array: any[], size: number): any[][] => {
-//         const result: any[][] = [];
-//         for (let i = 0; i < array.length; i += size) {
-//           result.push(array.slice(i, i + size));
-//         }
-//         return result;
-//       };
-//       setIsLoading(true);
-//       if (force === true) {
-//         setDataList([]);
-//       }
-//       request?.requestList?.(item.id)
-//         .then(result => {
-//           setIsLoading(false);
-//           setDataList(chunkArray(result || [], 5));
-//         })
-//         .catch(() => {
-//           setIsLoading(false);
-//         });
-//     };
-//     const onActiveItem = (id: string) => {
-//       setDataList(dataList?.map(item => {
-//         return item.map(it => {
-//           return {
-//             ...it,
-//             active: it.id === id
-//           };
-//         });
-//       }));
-//     };
-//     const onDownload = async (name: string, url?: string) => {
-//       if ((url || '').trim() === '') {
-//         return;
-//       }
-//       ElementUtils.download(url || '', name);
-//     };
-//     const onPutFile = async () => {
-//       const files = await ElementUtils.selectFile();
-//       if (files === null) {
-//         return;
-//       }
-//       for (let i = 0; i < files.length; i += 1) {
-//         const file = files[i];
-//         if (file.size > (1048576 * 15)) {
-//           messageApi.error(`文件 ${file.name} 太大，不能超过 15MB`);
-//           return;
-//         }
-//         if (!['image/jpeg', 'image/png', 'image/gif', 'image/webp'].includes(file.type)) {
-//           messageApi.error(`文件 ${file.name} 不是有效的图片格式`);
-//           return;
-//         }
-//       }
-//       const parentId = path[path.length - 1]?.id;
-//       setIsLoading(true);
-//       const result = await request?.putFile(parentId, files);
-//       setIsLoading(false);
-//       if (result === true) {
-//         refreshData();
-//       }
-//     };
-//     const onCreateDirectory = async (name: string) => {
-//       const parentId = path[path.length - 1]?.id;
-//       setIsLoading(true);
-//       const result = await request?.createDirectory(parentId, name);
-//       setIsLoading(false);
-//       if (result === true) {
-//         refreshData();
-//       }
-//       setSelectName('');
-//       return true;
-//     };
-//     const onOpenDirectory = async (id: string, name: string) => {
-//       if (isLoading) {
-//         return;
-//       }
-//       const paths = [...getPaths(), {
-//         id,
-//         name
-//       }];
-//       setPaths(paths);
-//     };
-//     const onBackDirectory = async (id: string) => {
-//       if (isLoading) {
-//         return;
-//       }
-//       const paths = getPaths();
-//       const index = paths.findIndex(it => it.id === id);
-//       if (index < 0) {
-//         return;
-//       }
-//       paths.splice(index + 1);
-//       setPaths(paths);
-//     };
-//     const onSelectItem = async (id: string, name: string, url?: string) => {
-//       const current = callbackRef?.current;
-//       if (current === undefined) {
-//         return;
-//       }
-//       current?.([url || '']);
-//       setIsOpenModal(false);
-//     };
-//     const onRename = async (id: string, name: string) => {
-//       setIsOpenRenameModal(true);
-//       setSelectId(id);
-//       setSelectName(name);
-//     };
-//     const onConfirmRename = async () => {
-//       if (await request?.rename(selectId, selectName)) {
-//         refreshData();
-//         setSelectName('');
-//         setIsOpenRenameModal(false);
-//       }
-//     };
-//     const onCopy = async (id: string) => {
-//       const result = await request?.copy(id);
-//       if (result === true) {
-//         refreshData();
-//       }
-//       return result;
-//     };
-//     const onMove = async (id: string) => {
-//       setIsOpenMoveModal(true);
-//       setSelectId(id);
-//     };
-//     const onConfirmMove = async (targetId: string) => {
-//       const result = await request?.move(selectId, targetId);
-//       if (result === true) {
-//         setIsOpenMoveModal(false);
-//         refreshData();
-//       }
-//     };
-//     const onRemove = async (id: string) => {
-//       setIsOpenConfirmModal(true);
-//       setSelectId(id);
-//     };
-//     const onConfirmRemove = async () => {
-//       const result = await request?.remove(selectId);
-//       if (result === true) {
-//         setIsOpenConfirmModal(false);
-//         refreshData();
-//       }
-//       return result;
-//     };
-//     const setPaths = (items: { id: string, name: string }[]) => {
-//       setPath(items);
-//       sessionStorage.setItem('MEDIA_MODALS_PATHS', JSON.stringify(items));
-//     };
-//     const getPaths = (): { id: string, name: string }[] => {
-//       const paths = JSON.parse(sessionStorage.getItem('MEDIA_MODALS_PATHS') || '[]');
-//       if (paths.length <= 0) {
-//         paths.push({
-//           id: '0',
-//           name: '根目录'
-//         });
-//       }
-//       return paths;
-//     };
-//     const Item = (props: {
-//       id: string
-//       name: string
-//       type: 'DIRECTORY' | 'FILE'
-//       src?: string,
-//       style?: CSSProperties,
-//       active?: boolean
-//     }) => {
-//       const directoryMenusItem = props.type === 'DIRECTORY' ? [
-//         {
-//           label: <Space style={{ width: 100 }} size={5} onClick={() => onOpenDirectory(props.id, props.name)}><RightCircleOutlined/>打开目录</Space>,
-//           key: '0'
-//         },
-//         {
-//           type: 'divider'
-//         }
-//       ] : [
-//         {
-//           label: <Space style={{ width: 100 }} size={5} onClick={() => onDownload(props.name, props.src)}><CloudDownloadOutlined/>下载文件</Space>,
-//           key: '0'
-//         },
-//         {
-//           type: 'divider'
-//         }
-//       ];
-//       const menusItems = [
-//         ...directoryMenusItem,
-//         {
-//           label: <Space style={{ width: 100 }} size={5} onClick={() => onRename(props.id, props.name)}><HighlightOutlined/>重命名</Space>,
-//           key: '1'
-//         },
-//         {
-//           label: <Space style={{ width: 100 }} size={5} onClick={() => onCopy(props.id)}><CopyOutlined/>{props?.type === 'DIRECTORY' ? '复制目录' : '复制文件'}</Space>,
-//           key: '2'
-//         },
-//         {
-//           label: <Space style={{ width: 100 }} size={5} onClick={() => onMove(props.id)}><ScissorOutlined/>{props?.type === 'DIRECTORY' ? '移动目录' : '移动文件'}</Space>,
-//           key: '3'
-//         },
-//         {
-//           type: 'divider'
-//         },
-//         {
-//           label: <Space style={{ width: 100 }} size={5} onClick={() => onRemove(props.id)}><DeleteOutlined/>{props?.type === 'DIRECTORY' ? '删除目录' : '删除文件'}</Space>,
-//           key: '4',
-//           danger: true
-//         }
-//       ];
-//       return <Dropdown menu={{
-//         items: menusItems as never
-//       }} trigger={['contextMenu']}>
-//         <div
-//           style={{
-//             padding: '8px 12px',
-//             backgroundColor: props?.active ? '#e6f1ff' : undefined,
-//             display: 'block',
-//             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'};
-//               }
-//           `}
-//           onClick={() => {
-//             setTimeout(() => onActiveItem(props.id), 10);
-//           }}
-//           onDoubleClick={() => {
-//             if (props.type === 'DIRECTORY') {
-//               onOpenDirectory(props.id, props.name)
-//                 .then();
-//               return;
-//             }
-//             onSelectItem(props.id, props.name, props.src)
-//               .then();
-//           }}>
-//           <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'
-//           }}/>
-//           <Typography.Text style={{
-//             width: 70,
-//             fontSize: token.fontSize - 2,
-//             display: 'block',
-//             textAlign: 'center',
-//             color: '#323232',
-//             marginTop: props?.type === 'DIRECTORY' ? undefined : 1
-//           }} ellipsis={true}>{props?.name}</Typography.Text>
-//         </div>
-//       </Dropdown>;
-//     };
-//     const handler: Handler<string[]> = {
-//       ok: (callback?: (params: string[]) => void) => {
-//         setPath(getPaths());
-//         setIsOpenModal(true);
-//         if (callbackRef !== undefined) {
-//           callbackRef.current = callback;
-//         }
-//       }
-//     };
-//     useEffect(() => {
-//       if ((path || []).length <= 0) {
-//         return;
-//       }
-//       refreshData(true);
-//     }, [path]);
-//     return [handler, <>
-//       <InlineContainer>
-//         <Modal
-//           width={565}
-//           footer={null}
-//           styles={{
-//             content: { padding: 0 }
-//           }}
-//           open={isOpenModal}
-//           maskClosable={false}
-//           onCancel={() => {
-//             if (isLoading) {
-//               return;
-//             }
-//             setIsOpenModal(false);
-//           }}
-//           title={<div style={{
-//             padding: '16px 0 0 0'
-//           }}>
-//             <img style={{
-//               marginInlineStart: 20,
-//               display: 'block',
-//               height: '17px',
-//               padding: '2px 0 0 0'
-//             }} alt="" src={IconMedia}/>
-//           </div>}>
-//           <Flux style={{
-//             marginBottom: 6,
-//             padding: '0 20px 10px 20px',
-//             borderBottom: '1px solid #f3f3f3',
-//             justifyContent: 'space-between'
-//           }}>
-//             <Breadcrumb
-//               items={path?.map((it, index) => {
-//                 return {
-//                   title: (index + 1 === path.length
-//                     ? <Typography.Text style={{
-//                       maxWidth: 70,
-//                       fontSize: token.fontSize - 1
-//                     }} ellipsis={true}>{it.name}</Typography.Text>
-//                     : <a onClick={() => onBackDirectory(it.id)}><Typography.Text style={{
-//                       maxWidth: 70,
-//                       fontSize: token.fontSize - 1,
-//                       color: 'rgba(0, 0, 0, 0.45)'
-//                     }} ellipsis={true}>{it.name}</Typography.Text></a>)
-//                 };
-//               })}
-//             />
-//             <Space>
-//               <Button type="primary" onClick={() => onPutFile()} size="small" style={{
-//                 height: 24,
-//                 fontSize: token.fontSize - 1
-//               }} loading={isLoading}>上传文件</Button>
-//               <Popconfirm
-//                 title="请输入目录名称"
-//                 description={<Input value={selectName} onChange={(e) => setSelectName(e.currentTarget.value)}></Input>}
-//                 onCancel={() => setSelectName('')}
-//                 onConfirm={() => onCreateDirectory(selectName)}
-//                 okText="确定"
-//                 cancelText="取消"
-//               >
-//                 <Button size="small" style={{
-//                   height: 24,
-//                   fontSize: token.fontSize - 1
-//                 }} loading={isLoading}>新建目录</Button>
-//               </Popconfirm>
-//             </Space>
-//           </Flux>
-//           <Spin spinning={isLoading}>
-//             <div style={{
-//               padding: '6px 0 24px 0',
-//               height: 333,
-//               maxHeight: 333,
-//               overflowY: 'auto',
-//               overflowX: 'hidden'
-//             }}>
-//               {dataList?.map((group, index) => (
-//                 <div key={index} style={{
-//                   padding: '0 20px 10px 20px',
-//                   display: 'flex'
-//                 }}>
-//                   {group?.map((item) => (
-//                     <Item
-//                       id={item.id}
-//                       key={item.id}
-//                       active={item.active}
-//                       style={{ marginRight: 10 }}
-//                       type={item.type}
-//                       src={item.url}
-//                       name={item.name}/>
-//                   ))}
-//                 </div>
-//               ))}
-//             </div>
-//           </Spin>
-//         </Modal>
-//       </InlineContainer>
-//       <Modal
-//         title="重命名"
-//         width={340}
-//         open={isOpenRenameModal}
-//         onOk={() => onConfirmRename()}
-//         onCancel={() => setIsOpenRenameModal(false)}
-//         okText="确定"
-//         cancelText="取消">
-//         <Input value={selectName} onChange={(e) => setSelectName(e.currentTarget.value)}></Input>
-//       </Modal>
-//       <Modal
-//         title={<><ExclamationCircleFilled style={{
-//           marginRight: 6,
-//           fontSize: token.fontSize + 3,
-//           color: '#faad14'
-//         }}/>是否确认删除?</>}
-//         width={400}
-//         open={isOpenConfirmModal}
-//         onOk={() => onConfirmRemove()}
-//         onCancel={() => setIsOpenConfirmModal(false)}
-//         okText="确定"
-//         cancelText="取消">
-//         删除操作不能回复，确定要删除选中的文件或文件夹吗？
-//       </Modal>
-//       <DirectorySelect
-//         open={isOpenMoveModal}
-//         onCancel={() => {
-//           refreshData();
-//           setIsOpenMoveModal(false);
-//         }}
-//         request={request?.directory}
-//         onOk={(value) => onConfirmMove(value)}>
-//       </DirectorySelect>
-//       {contextHolder}
-//     </>];
-//   }
-// }
+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)];
+    }
+}