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

package/media/MediaModals.js

@@ -0,0 +1,461 @@
+"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}
+//     </>];
+//   }
+// }