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

package/net-disk/DirectoryMenusPanel.js

@@ -0,0 +1,337 @@
+"use strict";
+// import React, { CSSProperties, FC, ReactNode, useEffect, useState } from 'react';
+// import { App, ConfigProvider, Dropdown, Select, Skeleton, theme, Tree } from 'antd';
+// import { css } from '@emotion/css';
+// import { CaretDownOutlined, MenuOutlined, PlusOutlined } from '@ant-design/icons';
+// import type { ItemType } from 'antd/es/menu/interface';
+// import Flux from './Flux';
+//
+// export declare type Module = {
+//   code: string
+//   name: string
+// };
+// export declare type ModuleItem = {
+//   code?: string | undefined
+//   name?: string | ReactNode | undefined
+//   children?: ModuleItem[] | undefined
+// };
+// export declare type DirectoryMenusPanel = {
+//   /**
+//    * 宽度.
+//    */
+//   width?: number | undefined
+//   /**
+//    * 字体大小.
+//    */
+//   fontSize?: number | undefined
+//   /**
+//    * 样式.
+//    */
+//   style?: CSSProperties | undefined
+//   /**
+//    * 模块列表.
+//    */
+//   appList?: Module[] | undefined
+//   /**
+//    * 模块菜单明细.
+//    */
+//   appItems?: ModuleItem[] | undefined
+//   /**
+//    * 创建事件.
+//    */
+//   onCreate?: () => void | undefined
+//   /**
+//    * 模块切换事件.
+//    * @param app 模块.
+//    */
+//   onAppChange?: (app: Module | undefined) => Promise<void> | undefined
+//   /**
+//    * 模块明细切换事件.
+//    * @param code 明细.
+//    */
+//   onAppItemChange?: (code: string) => Promise<void> | undefined
+//   /**
+//    * 目录右侧菜单.
+//    */
+//   directoryMenus?: ItemType[] | undefined
+//   /**
+//    * 明细右侧菜单.
+//    */
+//   itemMenus?: ItemType[] | undefined
+//   /**
+//    * 是否允许创建.
+//    */
+//   isAllowCreate?: boolean | undefined
+// };
+// export const Component: FC<DirectoryMenusPanel> = (props) => {
+//   const { token } = theme.useToken();
+//
+//   const [appList, setAppList] = useState<Module[]>([]);
+//   const [app, setApp] = useState<string>('');
+//   const [appModuleLoading, setAppModuleLoading] = useState(false);
+//   const [appModuleItems, setAppModuleItems] = useState<ModuleItem[]>([]);
+//
+//   const TreeTitle = (titleProps: { children?: ReactNode | undefined }) => {
+//     return <Flux className={css`
+//         & .menus {
+//             display: none;
+//         }
+//
+//         &:hover {
+//             .menus {
+//                 display: flex;
+//             }
+//         }
+//     `}>
+//       {titleProps.children}
+//       {props?.directoryMenus === undefined || props?.directoryMenus.length <= 0 ? undefined : <Dropdown menu={{
+//         items: props?.directoryMenus
+//       }} trigger={['click']}>
+//         <div className="menus" style={{
+//           alignItems: 'center',
+//           justifyContent: 'center',
+//           position: 'absolute',
+//           top: 0,
+//           right: 4,
+//           bottom: 0,
+//           width: 30
+//         }} onClick={(e) => {
+//           e.stopPropagation();
+//         }}>
+//           <div style={{
+//             width: 24,
+//             maxWidth: 24,
+//             height: 24,
+//             display: 'flex',
+//             alignItems: 'center',
+//             justifyContent: 'center',
+//             fontSize: token.fontSize + 1
+//           }}>
+//             <MenuOutlined style={{ display: 'block' }}/>
+//           </div>
+//         </div>
+//       </Dropdown>}
+//     </Flux>;
+//   };
+//   const TreeLabel = (labelProps: { children?: ReactNode | undefined }) => {
+//     return <Flux style={{
+//       marginLeft: 18,
+//       overflow: 'hidden',
+//       position: 'relative'
+//     }} className={css`
+//         & .menus {
+//             display: none;
+//         }
+//
+//         &:hover {
+//             .menus {
+//                 display: flex;
+//             }
+//         }
+//     `}>
+//       {labelProps.children}
+//       {props?.itemMenus === undefined || props?.itemMenus.length <= 0 ? undefined : <Dropdown menu={{
+//         items: props?.itemMenus
+//       }} trigger={['click']}>
+//         <div className="menus" style={{
+//           alignItems: 'center',
+//           justifyContent: 'center',
+//           position: 'absolute',
+//           top: 0,
+//           right: 0,
+//           bottom: 0,
+//           width: 30
+//         }}>
+//           <div style={{
+//             width: 24,
+//             maxWidth: 24,
+//             height: 24,
+//             display: 'flex',
+//             alignItems: 'center',
+//             justifyContent: 'center',
+//             fontSize: token.fontSize + 1
+//           }}>
+//             <MenuOutlined style={{ display: 'block' }}/>
+//           </div>
+//         </div>
+//       </Dropdown>}
+//     </Flux>;
+//   };
+//
+//   const onConfirmApp = (code: string) => {
+//     setApp(code);
+//   };
+//   const onSelectItem = (itemCode: string) => {
+//     props?.onAppItemChange?.(itemCode);
+//   };
+//
+//   useEffect(() => {
+//     if (app === undefined || app === '') {
+//       return;
+//     }
+//     setAppModuleLoading(true);
+//     const change = props?.onAppChange;
+//     if (change === undefined) {
+//       setAppModuleLoading(false);
+//       return;
+//     }
+//     change(appList.find(it => it.code === app))
+//       ?.then(() => setAppModuleLoading(false));
+//   }, [app]);
+//   useEffect(() => {
+//     setAppList(props.appList || []);
+//     const code = props?.appList?.[0]?.code;
+//     if (code !== undefined) {
+//       setApp(code);
+//     }
+//   }, [props.appList]);
+//   useEffect(() => {
+//     setAppModuleItems(props?.appItems?.map((it: any) => {
+//       it.title = <TreeTitle>{it.name}</TreeTitle>;
+//       it.key = it.code;
+//       it.children = it?.children?.map((c: any) => {
+//         return {
+//           ...c,
+//           key: c.code,
+//           title: <TreeLabel>{c.name}</TreeLabel>
+//         };
+//       });
+//       return it;
+//     }) || []);
+//   }, [props.appItems]);
+//   return <App style={{
+//     width: props.width || 320,
+//     minWidth: props.width || 320,
+//     maxWidth: props.width || 320,
+//     height: '100%',
+//     background: '#fff',
+//     overflow: 'hidden',
+//     display: 'flex',
+//     flexDirection: 'column',
+//     ...(props.style || {})
+//   }}>
+//     <ConfigProvider
+//       theme={{
+//         token: {
+//           fontSize: props?.fontSize || 13
+//         },
+//         components: {
+//           Tree: {
+//             motion: false,
+//             directoryNodeSelectedBg: '#eee',
+//             directoryNodeSelectedColor: '#333',
+//             titleHeight: 32,
+//             padding: 0
+//           }
+//         }
+//       }}>
+//       <div style={{
+//         padding: '10px 16px',
+//         borderBottom: '1px solid #eee',
+//         fontSize: token.fontSize + 2,
+//         fontWeight: 500
+//       }}>
+//         <Flux style={{
+//           height: 32
+//         }} size={10}>
+//           <Select
+//             variant="filled"
+//             placeholder="选择模块"
+//             className={css`
+//                 flex: 1;
+//
+//                 .ant-select-selection-item {
+//                     font-size: 14px;
+//                     font-weight: 500;
+//                 }`}
+//             value={app}
+//             onChange={(e) => onConfirmApp(e)}
+//             options={appList.map(it => {
+//               return {
+//                 value: it.code,
+//                 label: it.name
+//               };
+//             })}
+//           />
+//           {props?.isAllowCreate ? <a className={css`
+//               background: rgba(0, 0, 0, 0.04);
+//               width: 30px;
+//               height: 30px;
+//               display: flex;
+//               align-items: center;
+//               justify-content: center;
+//               color: #333;
+//               border-radius: ${token.borderRadius}px;
+//               overflow: hidden;
+//               font-size: 16px;
+//
+//               &:hover {
+//                   color: #333;
+//                   background: rgba(0, 0, 0, 0.08);
+//               }
+//           `} onClick={() => props?.onCreate?.()}>
+//             <PlusOutlined/>
+//           </a> : undefined}
+//         </Flux>
+//       </div>
+//       {appModuleLoading ? <Skeleton style={{
+//         minHeight: 400,
+//         padding: '5px 16px'
+//       }} active/> : <div
+//         style={{
+//           flexGrow: 1,
+//           overflowX: 'hidden',
+//           overflowY: 'auto'
+//         }}
+//         className={css`
+//             .ant-tree-treenode {
+//                 &:before {
+//                     bottom: 0 !important;
+//                 }
+//
+//                 padding: 1px 0 !important;
+//                 margin: 0 !important;
+//             }
+//
+//             .ant-tree-node-content-wrapper {
+//                 padding: 0 4px !important;
+//             }
+//
+//             .ant-tree-switcher {
+//                 &:before {
+//                     display: none;
+//                 }
+//
+//                 width: 18px !important;
+//                 margin: 0 0 0 10px !important;
+//             }
+//
+//             .ant-tree-switcher-noop {
+//                 width: 0 !important;
+//             }
+//
+//             .ant-tree-indent {
+//                 width: 0 !important;
+//             }
+//         `}>
+//         <Tree.DirectoryTree
+//           style={{
+//             background: '#fff'
+//           }}
+//           treeData={appModuleItems as never}
+//           icon={false}
+//           showIcon={false}
+//           blockNode={true}
+//           switcherIcon={<CaretDownOutlined style={{
+//             fontSize: token.fontSize - 1
+//           }}/>}
+//           onSelect={(e) => {
+//             onSelectItem(e.toString());
+//           }}
+//         />
+//       </div>}
+//     </ConfigProvider>
+//   </App>;
+// };
+//
+// export default Component;

package/net-disk/DirectorySelect.js

@@ -0,0 +1,240 @@
+"use strict";
+// import React, { FC, useEffect, useState } from 'react';
+// import { Modal, Space, Spin, theme, Typography } from 'antd';
+// import { css } from '@emotion/css';
+// import { RootPath } from './FileItemTable';
+// import FileNavigation from './FileNavigation';
+// import IconDirectory from './icon/directory.svg';
+// import IconConfirm from './icon/select_confirm.svg';
+// import IconCancel from './icon/close.svg';
+//
+// const { Text } = Typography;
+// export declare type Directory = {
+//   id: string
+//   name: string
+// }
+// export declare type DirectorySelectProps = {
+//   phrase?: string | undefined
+//   open?: boolean | undefined
+//   isCreate?: boolean | undefined
+//   request?: {
+//     getDirectoryList?: (parentId: string | undefined) => Promise<Directory[]> | undefined;
+//     create?: (parentId: string, name: string) => Promise<boolean> | undefined;
+//   } | undefined
+//   onCancel?: () => void | undefined
+//   onOk?: (value: string) => Promise<void> | undefined
+// };
+// const App: FC<DirectorySelectProps> = (props) => {
+//   const { token } = theme.useToken();
+//   const inputRef = React.createRef<HTMLInputElement>();
+//   const [loading, setLoading] = useState(false);
+//   const [isCreate, setIsCreate] = useState(false);
+//   const [directoryList, setDirectoryList] = useState([] as Directory[]);
+//   const [modal, setModal] = useState(false);
+//   const [rootPaths, setRootPaths] = useState([] as RootPath[]);
+//   const [directoryName, setDirectoryName] = useState('');
+//   const Directory = () => {
+//     return <div style={{
+//       width: 20,
+//       height: 20,
+//       marginRight: 6,
+//       display: 'flex',
+//       alignItems: 'center'
+//     }}>
+//       <img src={IconDirectory} style={{
+//         width: 18,
+//         display: 'block'
+//       }} alt=""/>
+//     </div>;
+//   };
+//   const requestDirectory = async () => {
+//     setLoading(true);
+//     const result = await props?.request?.getDirectoryList?.(rootPaths[rootPaths.length - 1]?.id);
+//     setLoading(false);
+//     if (result !== undefined) {
+//       setDirectoryList(result);
+//     }
+//   };
+//   const onSwitchPath = async (_id: string, index: number) => {
+//     setRootPaths(rootPaths.slice(0, index + 1));
+//   };
+//   const onOpen = async (fileId: string, name: string) => {
+//     setRootPaths([...rootPaths, {
+//       id: fileId,
+//       title: name
+//     }]);
+//   };
+//   const onConfirm = async () => {
+//     props?.onOk?.(rootPaths[rootPaths.length - 1]?.id);
+//   };
+//   const onCancelCreate = async () => {
+//     setIsCreate(false);
+//   };
+//   const onConfirmCreate = async () => {
+//     setLoading(true);
+//     const result = await props?.request?.create?.(rootPaths[rootPaths.length - 1]?.id || '', directoryName);
+//     setLoading(false);
+//     if (result !== undefined && result) {
+//       await requestDirectory();
+//       setIsCreate(false);
+//     }
+//   };
+//   useEffect(() => {
+//     inputRef?.current?.focus();
+//   }, [isCreate]);
+//   useEffect(() => {
+//     if (props?.open === true) {
+//       setRootPaths([{
+//         id: '',
+//         title: '根目录'
+//       }]);
+//     }
+//     setModal(props?.open || false);
+//   }, [props.open]);
+//   useEffect(() => {
+//     if (props?.open === true) {
+//       requestDirectory()
+//         .then();
+//     }
+//   }, [rootPaths]);
+//   return <>
+//     <Modal open={modal} width={380} title={<><span style={{ marginInlineStart: 10 }}>{props?.phrase || '移动'}到</span></>} onCancel={props?.onCancel} styles={{
+//       content: {
+//         padding: '15px 12px 15px 12px'
+//       },
+//       body: {
+//         padding: '0',
+//         borderBottom: '1px solid #eee',
+//         height: 356
+//       },
+//       footer: {
+//         textAlign: 'inherit'
+//       }
+//     }} onOk={onConfirm} okText={(props?.phrase || '移动') + '到此'} maskClosable={false} footer={(node) => {
+//       return <div style={{
+//         display: 'flex',
+//         alignItems: 'center',
+//         marginInlineStart: 10,
+//         userSelect: 'none'
+//       }}>
+//         <div style={{
+//           width: '100%',
+//           flex: 1
+//         }}>
+//           {props?.isCreate === false ? undefined : <a onClick={() => {
+//             setDirectoryName('');
+//             setIsCreate(true);
+//           }}>新建文件夹</a>}
+//         </div>
+//         <Space>
+//           {node}
+//         </Space>
+//       </div>;
+//     }}>
+//       <div>
+//         <FileNavigation style={{
+//           marginBottom: 4,
+//           marginLeft: 10,
+//           marginTop: 4
+//         }} paths={rootPaths} onSwitchPath={onSwitchPath}/>
+//         <Spin spinning={loading}>
+//           <div style={{
+//             maxHeight: 320,
+//             overflow: 'auto',
+//             marginBottom: 5
+//           }} className={css`
+//               .item:hover {
+//                   background: #efefef;
+//               }
+//           `}>
+//             {isCreate ? <>
+//               <div className="item" style={{
+//                 height: 34,
+//                 padding: '0 12px',
+//                 display: 'flex',
+//                 marginBottom: 2,
+//                 alignItems: 'center',
+//                 cursor: 'pointer',
+//                 position: 'relative',
+//                 userSelect: 'none',
+//                 borderRadius: token.borderRadius,
+//                 overflow: 'hidden'
+//               }}>
+//                 <Directory/>
+//                 <div style={{ marginRight: '10px' }}>
+//                   <input
+//                     ref={inputRef as never}
+//                     style={{
+//                       outline: 'none',
+//                       border: '1px solid #d3d3d3',
+//                       padding: '3px 5px',
+//                       borderRadius: 2
+//                     }}
+//                     className={css`
+//                         :focus {
+//                             outline: 2px solid ${token.colorPrimary} !important;
+//                             border-color: ${token.colorPrimary};
+//                         }
+//                     `}
+//                     type="text"
+//                     value={directoryName}
+//                     onChange={(e) => setDirectoryName(e.target.value)}/>
+//                 </div>
+//                 <div style={{
+//                   backgroundImage: `url(${IconConfirm})`,
+//                   backgroundSize: '22px 22px',
+//                   backgroundPosition: 'center',
+//                   backgroundRepeat: 'no-repeat',
+//                   width: 22,
+//                   height: 22,
+//                   marginRight: 8,
+//                   borderRadius: 10,
+//                   overflow: 'hidden'
+//                 }} className={css`
+//                     &:hover {
+//                         background: #ddd;
+//                     }
+//                 `} onClick={onConfirmCreate}/>
+//                 <div style={{
+//                   backgroundImage: `url(${IconCancel})`,
+//                   backgroundSize: '16px 16px',
+//                   backgroundPosition: 'center',
+//                   backgroundRepeat: 'no-repeat',
+//                   width: 22,
+//                   height: 22,
+//                   borderRadius: 10,
+//                   overflow: 'hidden'
+//                 }} className={css`
+//                     &:hover {
+//                         background: #ddd;
+//                     }
+//                 `} onClick={onCancelCreate}/>
+//               </div>
+//             </> : undefined}
+//             {directoryList.map(it => (
+//               <div key={it.id} className="item" style={{
+//                 height: 30,
+//                 padding: '0 12px',
+//                 display: 'flex',
+//                 marginBottom: 2,
+//                 alignItems: 'center',
+//                 cursor: 'pointer',
+//                 position: 'relative',
+//                 userSelect: 'none',
+//                 borderRadius: token.borderRadius,
+//                 overflow: 'hidden'
+//               }} onDoubleClick={() => onOpen(it.id, it.name)}>
+//                 <Directory/>
+//                 <Text style={{
+//                   width: '100%',
+//                   fontSize: token.fontSize
+//                 }} ellipsis={true}>{it.name}</Text>
+//               </div>
+//             ))}
+//           </div>
+//         </Spin>
+//       </div>
+//     </Modal>
+//   </>;
+// };
+// export default App;