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

package/UploadModals.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Handler } from './type';
+export type FileType = 'IMAGE' | 'GIT' | 'VIDEO' | 'DOCUMENT';
+/**
+ * 文件上传模态框.
+ */
+export declare class UploadModals {
+    /**
+     * 弹出文件上传.
+     */
+    static useUpload(fileType: FileType[], key?: string): [Handler<File[]>, ReactNode];
+}

package/UploadModals.js

@@ -0,0 +1,233 @@
+import React, { useRef, useState } from 'react';
+import { Button, Checkbox, Modal, Space } from 'antd';
+import { css } from '@emotion/css';
+import ElementUtils from 'beer-network/elementUtils';
+/**
+ * 文件上传模态框.
+ */
+export class UploadModals {
+    /**
+     * 弹出文件上传.
+     */
+    static useUpload(fileType, key = 'DEFAULT') {
+        const [isOpenModal, setIsOpenModal] = useState(false);
+        const [isPop, setIsPop] = useState(false);
+        const callbackRef = useRef(undefined);
+        const getPopStatus = () => {
+            return localStorage.getItem('__UPLOAD_MODALS_' + key) !== '1';
+        };
+        const setPopStatus = (status) => {
+            if (status) {
+                localStorage.setItem('__UPLOAD_MODALS_' + key, '1');
+            }
+        };
+        const filterFile = (files) => {
+            if (files === null) {
+                return [];
+            }
+            const result = [];
+            for (let i = 0; i < files.length; i += 1) {
+                const file = files.item(i) ?? undefined;
+                if (file === undefined) {
+                    continue;
+                }
+                const type = fileType.find(it => {
+                    if (it === 'IMAGE' && ['image/png', 'image/jpeg', 'image/webp'].indexOf(file.type) > -1) {
+                        return true;
+                    }
+                    const fileExtension = file.name.split('.')
+                        ?.pop()
+                        ?.toLowerCase() ?? 'none';
+                    return it === 'VIDEO' && ['wmv', 'avi', '3gp', 'mov', 'mp4', 'flv', 'rmvb', 'mkv', 'm4v', 'x-flv'].indexOf(fileExtension) > -1;
+                });
+                if (type === undefined) {
+                    continue;
+                }
+                let size = 0;
+                switch (type) {
+                    case 'IMAGE':
+                        size = 10 * 1024 * 1024;
+                        break;
+                    case 'VIDEO':
+                        size = 300 * 1024 * 1024;
+                        break;
+                    default:
+                        size = 50 * 1024 * 1024;
+                        break;
+                }
+                if (file.size > size) {
+                    continue;
+                }
+                result.push(file);
+            }
+            return result;
+        };
+        const onSelectFile = async () => {
+            const fileList = await ElementUtils.selectFile(true);
+            await callbackRef.current?.(filterFile(fileList));
+        };
+        const onConfirm = async () => {
+            if (callbackRef.current) {
+                setPopStatus(isPop);
+                onSelectFile()
+                    .then();
+                setIsOpenModal(false);
+            }
+            else {
+                setIsOpenModal(false);
+            }
+            return true;
+        };
+        const handler = {
+            ok: (callback) => {
+                if (!getPopStatus()) {
+                    onSelectFile()
+                        .then();
+                    return;
+                }
+                setIsPop(false);
+                setIsOpenModal(true);
+                callbackRef.current = callback;
+            }
+        };
+        return [handler, React.createElement(React.Fragment, null,
+                React.createElement(Modal, { title: "\u6587\u4EF6\u4E0A\u4F20\u8981\u6C42", width: 360, open: isOpenModal, onCancel: () => setIsOpenModal(false), styles: {
+                        content: {
+                            padding: 0
+                        },
+                        header: {
+                            paddingBlock: '16px 0',
+                            paddingInline: 20,
+                            marginInlineStart: 0,
+                            marginBlockEnd: 0
+                        },
+                        wrapper: {
+                            padding: 0
+                        },
+                        body: {
+                            paddingInline: 20,
+                            paddingBlockStart: 8,
+                            paddingBlockEnd: 4
+                        },
+                        footer: {
+                            margin: 0,
+                            paddingBlockEnd: 12
+                        }
+                    }, footer: React.createElement(Space, { style: {
+                            width: '100%',
+                            boxSizing: 'border-box',
+                            justifyContent: 'space-between',
+                            paddingInline: 20,
+                            paddingBlock: 4
+                        } },
+                        React.createElement(Checkbox, { checked: isPop, onChange: (e) => setIsPop(e.target.checked) }, "\u4E0B\u6B21\u4E0D\u5728\u5F39\u51FA"),
+                        React.createElement(Space, { size: 12 },
+                            React.createElement(Button, { type: "primary", onClick: onConfirm }, "\u786E\u5B9A"),
+                            React.createElement(Button, { onClick: () => setIsOpenModal(false) }, "\u53D6\u6D88"))) },
+                    React.createElement("div", { className: css `
+            .title {
+                font-weight: 500;
+                font-size: 14px;
+                margin: 12px 0 4px 0;
+            }
+
+            .title:first-child {
+                margin-top: 4px;
+            }
+
+            ul {
+                margin: 0;
+                padding-left: 20px;
+            }
+
+            li {
+                padding-block: 2px;
+            }
+
+            .desc {
+                margin: 4px 0;
+                font-size: 12px;
+                color: #444
+            }
+
+            code {
+                background: #EFEFEF;
+                padding: 2px 4px;
+                border-radius: 2px;
+                font-size: 12px;
+            }
+        ` },
+                        fileType.find(it => it === 'IMAGE') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u56FE\u7247"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u5F20\u5927\u5C0F\uFF1A\u226410M"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "JPEG"),
+                                    "\u3001",
+                                    React.createElement("code", null, "JPG"),
+                                    "\u3001",
+                                    React.createElement("code", null, "PNG"),
+                                    "\u3001",
+                                    React.createElement("code", null, "WEBP")))) : undefined,
+                        fileType.find(it => it === 'GIT') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u52A8\u56FE\uFF08GIF\uFF09"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u4E2A\u5927\u5C0F\uFF1A\u226410M"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "GIF")))) : undefined,
+                        fileType.find(it => it === 'VIDEO') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u89C6\u9891"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u4E2A\u5927\u5C0F\uFF1A\u2264300M"),
+                                React.createElement("li", null, "\u65F6\u957F\uFF1A\u226410\u5206\u949F"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "WMV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "AVI"),
+                                    "\u3001",
+                                    React.createElement("code", null, "3GP"),
+                                    "\u3001",
+                                    React.createElement("code", null, "MOV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "MP4"),
+                                    "\u3001",
+                                    React.createElement("code", null, "FLV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "RMVB"),
+                                    "\u3001",
+                                    React.createElement("code", null, "MKV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "M4V"),
+                                    "\u3001",
+                                    React.createElement("code", null, "X-FLV")))) : undefined,
+                        fileType.find(it => it === 'DOCUMENT') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u6587\u6863"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u4E2A\u5927\u5C0F\uFF1A\u226430M"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "PDF"),
+                                    "\u3001",
+                                    React.createElement("code", null, "DOC"),
+                                    "\u3001",
+                                    React.createElement("code", null, "DOCX"),
+                                    "\u3001",
+                                    React.createElement("code", null, "XLS"),
+                                    "\u3001",
+                                    React.createElement("code", null, "XLSX"),
+                                    "\u3001",
+                                    React.createElement("code", null, "PPT"),
+                                    "\u3001",
+                                    React.createElement("code", null, "PPTX"),
+                                    "\u3001",
+                                    React.createElement("code", null, "TXT")))) : undefined,
+                        React.createElement("div", { style: { marginTop: 12 } },
+                            React.createElement("div", { className: "desc" },
+                                React.createElement("span", { style: { fontWeight: 500 } }, "\u4E25\u7981\u4E0A\u4F20\u5BFC\u6D41\u3001\u8FDD\u89C4\u6216\u8FDD\u7981\u5185\u5BB9"),
+                                "\uFF0C\u8FDD\u8005\u5C06\u5C01\u7981\u8D26\u53F7\u5904\u7406\u3002"),
+                            React.createElement("div", { className: "desc" }, "\u8BF7\u786E\u4FDD\u6587\u4EF6\u7B26\u5408\u683C\u5F0F\u53CA\u5927\u5C0F\u8981\u6C42\uFF0C\u5426\u5219\u53EF\u80FD\u4E0A\u4F20\u5931\u8D25\u3002")))))];
+    }
+}

package/auth/AuthStyle01.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Slider, SliderCodeToken } from '../slider/SliderCode';
-export declare type AuthStyleProps = {
+export declare type AuthStyle01Props = {
     /**
      * 主颜色.
      */
@@ -67,4 +67,4 @@ export declare type AuthStyleProps = {
      */
     login?: (userInfo: any) => void;
 };
-export declare const AuthStyle: FC<AuthStyleProps>;
+export declare const AuthStyle01: FC<AuthStyle01Props>;

package/auth/AuthStyle01.js

@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
 import { AuthPassword } from './AuthPassword';
 import ImageBackground from '../images/assets_background_01.png';
 import { Session } from './session';
-export const AuthStyle = (props) => {
+export const AuthStyle01 = (props) => {
     const { token } = theme.useToken();
     const [errorMessage, setErrorMessage] = useState('');
     const onConfirmLogin = async (code, slider, params) => {

package/auth/AuthStyle02.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Slider, SliderCodeToken } from '../slider/SliderCode';
-export declare type AuthStyleProps = {
+export declare type AuthStyle02Props = {
     /**
      * 主颜色.
      */
@@ -63,4 +63,4 @@ export declare type AuthStyleProps = {
      */
     login?: (userInfo: any) => void;
 };
-export declare const AuthStyle: FC<AuthStyleProps>;
+export declare const AuthStyle02: FC<AuthStyle02Props>;

package/auth/AuthStyle02.js

@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
 import ImageBackground from '../images/assets_background_01.png';
 import { Session } from './session';
 import { AuthPassword } from './AuthPassword';
-export const AuthStyle = (props) => {
+export const AuthStyle02 = (props) => {
     const { token } = theme.useToken();
     const [errorMessage, setErrorMessage] = useState('');
     const onConfirmLogin = async (code, slider, params) => {

package/index.d.ts

@@ -1,14 +1,17 @@
 export { AuthPassword, AuthPasswordProps } from './auth/AuthPassword';
-export { AuthStyle as AuthStyle01, AuthStyleProps as AuthStyleProps01 } from './auth/AuthStyle01';
-export { AuthStyle as AuthStyle02, AuthStyleProps as AuthStyleProps02 } from './auth/AuthStyle02';
+export { AuthStyle01, AuthStyle01Props } from './auth/AuthStyle01';
+export { AuthStyle02, AuthStyle02Props } from './auth/AuthStyle02';
 export { Config } from './config';
 export { ParentContext } from './content/ParentContext';
 export { PermissionContext } from './content/PermissionContext';
 export { AppLayout } from './layout/AppLayout';
 export { BackPageContainer } from './layout/BackPageContainer';
 export { MyPageContainer } from './layout/MyPageContainer';
+export { MediaItem, DirectoryItem, Media, MediaProps } from './media/Media';
+export { MediaModals } from './media/MediaModals';
 export { Permission } from './permission/Permission';
 export { AIEditor, AIEditorProps } from './rich/AIEditor';
 export { Slider, SliderCode, SliderCodeToken } from './slider/SliderCode';
 export { Promises, Async, NumberUtils, CascadeUtils, ArrayUtils, NavigateUtils } from './promises';
 export { UserModals } from './UserModals';
+export { UploadModals, FileType } from './UploadModals';

package/index.js

@@ -1,14 +1,17 @@
 export { AuthPassword } from './auth/AuthPassword';
-export { AuthStyle as AuthStyle01 } from './auth/AuthStyle01';
-export { AuthStyle as AuthStyle02 } from './auth/AuthStyle02';
+export { AuthStyle01 } from './auth/AuthStyle01';
+export { AuthStyle02 } from './auth/AuthStyle02';
 export { Config } from './config';
 export { ParentContext } from './content/ParentContext';
 export { PermissionContext } from './content/PermissionContext';
 export { AppLayout } from './layout/AppLayout';
 export { BackPageContainer } from './layout/BackPageContainer';
 export { MyPageContainer } from './layout/MyPageContainer';
+export { Media } from './media/Media';
+export { MediaModals } from './media/MediaModals';
 export { Permission } from './permission/Permission';
 export { AIEditor } from './rich/AIEditor';
 export { SliderCode } from './slider/SliderCode';
 export { Promises, Async, NumberUtils, CascadeUtils, ArrayUtils, NavigateUtils } from './promises';
 export { UserModals } from './UserModals';
+export { UploadModals } from './UploadModals';

package/layout/BackPageContainer.d.ts

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 export declare type BackPageContainerProps = {
     title?: string | undefined;
     children?: React.ReactNode | undefined;
+    onBack?: () => void;
 };
 /**
  * 子页面容器布局.

package/layout/BackPageContainer.js

@@ -11,7 +11,10 @@ export const BackPageContainer = (props) => {
     const navigate = useNavigate();
     return React.createElement(React.Fragment, null,
         React.createElement(PageContainer, { onBack: () => {
-                navigate(-1);
+                const defaultBack = () => {
+                    return navigate(-1);
+                };
+                (props?.onBack ?? defaultBack)?.();
             }, className: css `
           .ant-page-header-heading {
               padding-block-start: 0 !important;

package/media/Media.d.ts

@@ -0,0 +1,84 @@
+import { CSSProperties, FC, Key } from 'react';
+import { TreeDataNode } from 'antd';
+export declare type MediaItem = {
+    /**
+     * 资源唯一标识.
+     */
+    key: string;
+    /**
+     * 文件名称.
+     */
+    fileName: string;
+    /**
+     * 文件长度.
+     */
+    fileLength?: string;
+    /**
+     * 文件属性.
+     */
+    attribute?: {
+        resolution?: string;
+    };
+    /**
+     * 文件实际地址.
+     */
+    url?: string;
+    /**
+     * 预览地址 缩略图.
+     */
+    preview?: string;
+};
+export declare type DirectoryItem = {
+    /**
+     * 宽度 (控制是否显示省略号).
+     */
+    width?: number;
+    children?: DirectoryItem[];
+} & TreeDataNode;
+export declare type MediaProps = {
+    /**
+     * 已选组件.
+     */
+    value?: MediaItem[];
+    /**
+     * 样式.
+     */
+    style?: CSSProperties;
+    /**
+     * 目录宽度.
+     */
+    directoryWidth?: number;
+    /**
+     * 组件高度.
+     */
+    height?: number;
+    /**
+     * 目录项.
+     */
+    directoryItems?: DirectoryItem[];
+    /**
+     * 资源项.
+     */
+    items?: MediaItem[];
+    /**
+     * 选择目录回执.
+     * @param key 目录ID.
+     * @param sortType 排序类型.
+     * @param callback 异步状态.
+     */
+    onDirectoryChange?: (key: Key, sortType: string, callback: (status: boolean) => void) => void;
+    /**
+     * 选择资源发生变化.
+     * @param items 资源列表。
+     */
+    onFileChange?: (items: MediaItem[]) => void;
+    /**
+     * 上传文件.
+     */
+    onUpload?: () => void;
+    /**
+     * 最大长度.
+     */
+    maxLength?: number;
+};
+export declare const Media: FC<MediaProps>;