@chaomingd/design 0.0.68

package/dist/lib/UploadFile/index.js

@@ -0,0 +1,280 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _IconButton = _interopRequireDefault(require("./components/IconButton"));
+require("./index.less");
+var _Slash = _interopRequireDefault(require("./components/Slash"));
+var _SvgIcons = require("./components/SvgIcons");
+var _useUploadModel = require("./hooks/useUploadModel");
+var _getExt = require("./utils/getExt");
+var _isImage = require("./utils/isImage");
+var _jsxRuntime = require("react/jsx-runtime");
+const EXT_SVG = {
+  zip: _SvgIcons.ZipSvg,
+  rar: _SvgIcons.RarSvg,
+  txt: _SvgIcons.TxtSvg,
+  pdf: _SvgIcons.PdfSvg,
+  doc: _SvgIcons.DocSvg,
+  docx: _SvgIcons.DocSvg
+};
+const preCls = '@chaomingd/upload-file';
+const TextBtn = ({
+  children,
+  onClick
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${preCls}-text-btn`,
+    onClick: onClick,
+    children: children
+  });
+};
+const UploadFile = props => {
+  const {
+    accepts,
+    multiple,
+    maxCount = 1,
+    children,
+    id,
+    getIcon,
+    acceptsJoinCharacter = '、'
+  } = props;
+  const inputFileRef = (0, _react.useRef)(null);
+  const inputFileReplaceRef = (0, _react.useRef)(null);
+  const inputRelaceId = (0, _react.useRef)('');
+  const {
+    model,
+    onDragOver,
+    handleUploadFiles,
+    onDeleteFileList
+  } = (0, _useUploadModel.useUploadModel)(props);
+  const {
+    dragEnter,
+    value: fileList
+  } = model.useGetState();
+
+  // input accept 属性
+  const {
+    accept,
+    extstr
+  } = (0, _react.useMemo)(() => {
+    if (!accepts) return {
+      accept: '',
+      extstr: ''
+    };
+    const exts = accepts.map(ext => {
+      if (ext[0] === '.') {
+        return ext;
+      }
+      return `.${ext}`;
+    });
+    return {
+      accept: exts.join(','),
+      extstr: exts.map(ext => ext.slice(1)).join(acceptsJoinCharacter)
+    };
+  }, [accepts, acceptsJoinCharacter]);
+  const openFileDialog = () => {
+    inputFileRef.current?.click();
+  };
+  const handleReUpload = uid => {
+    inputRelaceId.current = uid;
+    inputFileReplaceRef.current?.click();
+  };
+  const renderDragger = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onDragOver: onDragOver,
+      onDrop: e => {
+        e.preventDefault();
+        handleUploadFiles(e.dataTransfer.files || []);
+      },
+      className: (0, _classnames.default)(`${preCls}-dragger-container`, fileList.length && `${preCls}-dragger-container-has-file-list`),
+      onClick: openFileDialog,
+      children: children ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${preCls}-dragger`,
+        children: dragEnter ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${preCls}-dragger-tip`,
+          children: "\u91CA\u653E\u9F20\u6807"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${preCls}-dragger-inner`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: `${preCls}-dragger-top`,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextBtn, {
+              children: "\u70B9\u51FB\u4E0A\u4F20"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${preCls}-split`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slash.default, {})
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${preCls}-drag-text`,
+              children: "\u62D6\u62FD\u5230\u6B64\u533A\u57DF"
+            })]
+          }), extstr && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: `${preCls}-support-ext`,
+            children: ["\u652F\u6301\u6269\u5C55\u540D\uFF1A", extstr]
+          })]
+        })
+      })
+    });
+  };
+  const getProgress = fileListItem => {
+    if (!fileListItem.status || fileListItem.status === 'error' || fileListItem.status === 'done') {
+      return '100%';
+    }
+    if (fileListItem.percent) {
+      return `${+Math.min(fileListItem.percent, 99.9).toFixed(2)}%`;
+    }
+    return '0%';
+  };
+  const renderValidation = fileListItem => {
+    let validateText = '';
+    if (fileListItem.validationStatus === 'validating') {
+      if (typeof fileListItem.validationPercent !== 'number') {
+        validateText = '校验中...';
+      } else {
+        validateText = `校验中 ${Math.min(+fileListItem.validationPercent.toFixed(2), 99.99)}%`;
+      }
+    }
+    if (fileListItem.validationStatus === 'error') {
+      validateText = fileListItem.validationError?.message || '校验出错';
+    }
+    if (fileListItem.validationStatus === 'success') {
+      validateText = '校验成功';
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(`${preCls}-file-item-validate`, `${preCls}-validate-status--${fileListItem.validationStatus || 'success'}`),
+      children: validateText
+    });
+  };
+  const renderIcon = fileListItem => {
+    const ext = (0, _getExt.getExt)(fileListItem.name);
+    if ((0, _isImage.isImage)(ext, fileListItem.type || fileListItem.file?.type || '')) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${preCls}-file-item-left`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Image, {
+          width: 66,
+          height: 66,
+          src: fileListItem.blobUrl || fileListItem.url || ''
+        })
+      });
+    }
+    const ExtSvgIcon = EXT_SVG[ext];
+    const iconNode = getIcon ? getIcon(ext, fileListItem) : null;
+    return (ExtSvgIcon !== undefined || iconNode) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${preCls}-file-item-left`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${preCls}-ext-svg`,
+        children: iconNode ? iconNode : /*#__PURE__*/(0, _jsxRuntime.jsx)(ExtSvgIcon, {})
+      })
+    });
+  };
+  const renderFileListItem = fileListItem => {
+    const progress = getProgress(fileListItem);
+    const orignalNode = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(`${preCls}-file-item`, `${preCls}-file-item-status-${fileListItem.status || 'done'}`),
+      children: [renderIcon(fileListItem), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: `${preCls}-file-item-right`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${preCls}-file-item-header`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Typography.Text, {
+            ellipsis: {
+              tooltip: {
+                title: fileListItem.name,
+                showArrow: false,
+                // @ts-ignore
+                arrow: false
+              }
+            },
+            className: `${preCls}-file-item-name`,
+            children: fileListItem.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: `${preCls}-file-item-extra`,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextBtn, {
+              onClick: () => {
+                handleReUpload(fileListItem.uid);
+              },
+              children: "\u91CD\u65B0\u4E0A\u4F20"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              type: fileListItem.status === 'uploading' ? 'primary' : 'danger',
+              size: "small",
+              icon: fileListItem.status === 'uploading' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcons.CloseSvg, {
+                onClick: () => {
+                  onDeleteFileList(fileListItem.uid);
+                }
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcons.DeleteSvg, {
+                onClick: () => {
+                  onDeleteFileList(fileListItem.uid);
+                }
+              }),
+              className: `${preCls}-file-item-action-btn`
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${preCls}-progress`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${preCls}-progress-bar`,
+            style: {
+              width: progress
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${preCls}-file-item-feedback`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${preCls}-file-item-percent`,
+            children: progress
+          }), props.validation && renderValidation(fileListItem)]
+        })]
+      })]
+    }, fileListItem.uid);
+    if (props.itemRender) {
+      return props.itemRender({
+        remove: onDeleteFileList,
+        reUpload: handleReUpload,
+        fileItem: fileListItem,
+        orignalNode
+      });
+    }
+    return orignalNode;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: preCls,
+    onDrop: e => {
+      e.preventDefault();
+    },
+    id: id,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      accept: accept,
+      type: "file",
+      style: {
+        display: 'none'
+      },
+      multiple: multiple,
+      ref: inputFileRef,
+      onChange: e => {
+        handleUploadFiles(e.target.files || []);
+        e.target.value = '';
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      accept: accept,
+      type: "file",
+      style: {
+        display: 'none'
+      },
+      ref: inputFileReplaceRef,
+      onChange: e => {
+        handleUploadFiles(e.target.files || [], {
+          replace: true,
+          replaceId: inputRelaceId.current
+        });
+        inputRelaceId.current = '';
+        e.target.value = '';
+      }
+    }), maxCount > 0 && fileList.length < maxCount && renderDragger(), fileList.map(fileListItem => renderFileListItem(fileListItem))]
+  });
+};
+var _default = exports.default = UploadFile;

package/dist/lib/UploadFile/index.less

@@ -0,0 +1,274 @@
+@import '../styles/var.less';
+
+@preCls: ~'@{prefix}-upload-file';
+
+// 主色
+@upload-file-color-primary: var(--cm-upload-file-color-primary, #126bf1);
+@upload-file-color-primary-hover: var(--cm-upload-file-color-primary-hover, #3b90ff);
+@upload-file-color-primary-active: var(--cm-upload-file-color-primary-active, #3b90ff);
+@upload-file-color-error: var(--cm-upload-file-color-error, #e04667);
+@upload-file-color-split: var(--cm-upload-file-color-split, #777f93);
+@upload-file-color-validating: var(--cm-upload-file-color-validating, #049a6d);
+@upload-file-color-validating-success: var(--cm-upload-file-color-validating-success, #049a6d);
+@upload-file-color-validating-error: var(
+  --cm-upload-file-color-validating-error,
+  @upload-file-color-error
+);
+
+// 背景
+@upload-file-bg-color: var(--cm-upload-file-bg-color, #fff);
+
+// border
+@upload-file-border-color: var(--cm-upload-file-border-color, #d5d8dc);
+@upload-file-border-color-hover: var(
+  --cm-upload-file-border-color-hover,
+  @upload-file-color-primary
+);
+@upload-file-border-color-active: var(
+  --cm-upload-file-border-color-active,
+  @upload-file-color-primary-active
+);
+
+// 上传按钮
+@upload-file-btn-color: var(--cm-upload-file-btn-color, @upload-file-color-primary);
+@upload-file-btn-color-hover: var(
+  --cm-upload-file-btn-color-hover,
+  @upload-file-color-primary-hover
+);
+@upload-file-btn-color-active: var(
+  --cm-upload-file-btn-color-active,
+  @upload-file-color-primary-active
+);
+
+// 文字颜色
+@upload-file-text-color1: var(--cm-upload-file-text-color-1, #777f93);
+@upload-file-text-color2: var(--cm-upload-file-text-color-2, #777f93);
+@upload-file-text-color3: var(--cm-upload-file-text-color-3, #777f93);
+
+// 文件列表
+@upload-file-item-bg-color: var(--cm-upload-file-item-bg-color, @upload-file-bg-color);
+@upload-file-item-border-color: var(--cm-upload-file-item-border-color, @upload-file-border-color);
+@upload-file-item-progress-bg-color: var(--cm-upload-file-item-progress-bg-color, transparent);
+@upload-file-item-progress-color: var(
+  --cm-upload-file-item-progress-color,
+  @upload-file-color-primary
+);
+@upload-file-item-progress-color-error: var(
+  --cm-upload-file-item-progress-color-error,
+  @upload-file-color-error
+);
+
+// 操作按钮
+@upload-file-action-icon-color: var(--cm-upload-file-action-icon-color, #9a9c9e);
+
+.@{preCls} {
+  position: relative;
+  box-sizing: border-box;
+
+  svg {
+    display: block;
+  }
+
+  &-dragger-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 144px;
+    background-color: @upload-file-bg-color;
+
+    &-has-file-list {
+      margin-bottom: 8px;
+    }
+
+    border: 1px dashed @upload-file-border-color;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: @upload-file-border-color-hover;
+    }
+
+    &:active {
+      border-color: @upload-file-border-color-active;
+    }
+  }
+
+  &-dragger-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-text-btn {
+    flex: 0 0 auto;
+    font-size: 14px;
+    line-height: 22px;
+    color: @upload-file-btn-color;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      color: @upload-file-btn-color-hover;
+    }
+
+    &:active {
+      color: @upload-file-btn-color-active;
+    }
+  }
+
+  &-split {
+    color: @upload-file-color-split;
+    font-size: 16px;
+    margin: 0 4px;
+  }
+
+  &-drag-text {
+    font-size: 14px;
+    color: @upload-file-text-color2;
+  }
+
+  &-support-ext {
+    text-align: center;
+    font-size: 14px;
+    line-height: 22px;
+    color: @upload-file-text-color3;
+    margin-top: 8px;
+  }
+
+  &-dragger-tip {
+    font-size: 14px;
+    line-height: 22px;
+    color: @upload-file-text-color2;
+  }
+
+  &-file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120px;
+    padding: 0 32px;
+    border-radius: 4px;
+    border: 1px solid @upload-file-border-color;
+    box-sizing: border-box;
+    background-color: @upload-file-item-bg-color;
+
+    &-status-error {
+      border-style: dashed;
+      border-color: @upload-file-item-progress-color-error;
+
+      .@{preCls}-progress-bar {
+        background-color: @upload-file-item-progress-color-error;
+      }
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    &-left {
+      flex: 0 0 auto;
+      margin-right: 23px;
+    }
+
+    &-right {
+      flex: 1;
+    }
+
+    &-name {
+      display: block;
+      flex: 1;
+      width: 0;
+      min-width: 0;
+      margin-right: 16px;
+      font-size: 16px;
+      line-height: 22px;
+      color: @upload-file-text-color1;
+    }
+
+    &-feedback {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &-percent {
+      font-size: 14px;
+      line-height: 20px;
+      color: @upload-file-text-color2;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &-extra {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+
+    &-action-btn {
+      --cm-icon-btn-primary-color: @upload-file-action-icon-color;
+
+      width: 16px;
+      flex: 0 0 auto;
+      margin-left: 18px;
+      cursor: pointer;
+    }
+  }
+
+  &-file-item-validate {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  &-validate-status--error {
+    color: @upload-file-color-validating-error;
+  }
+
+  &-validate-status--validating {
+    color: @upload-file-color-validating;
+  }
+
+  &-validate-status--success {
+    color: @upload-file-color-validating-success;
+  }
+
+  &-ext-svg {
+    width: 66px;
+    height: auto;
+    color: @upload-file-color-primary;
+  }
+
+  .ant-image {
+    width: 66px;
+    height: 66px;
+    border: 1px solid @upload-file-border-color;
+    border-radius: 4px;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &-progress {
+    height: 8px;
+    border-radius: 4px;
+    background-color: @upload-file-item-progress-bg-color;
+    overflow: hidden;
+    margin: 8px 0;
+
+    &-bar {
+      height: 100%;
+      background-color: @upload-file-item-progress-color;
+      transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    }
+  }
+}

package/dist/lib/UploadFile/type.d.ts

@@ -0,0 +1,63 @@
+import { UploadFile } from 'antd';
+import { AxiosRequestConfig } from 'axios';
+import { ReactNode } from 'react';
+export interface FileListItemProps extends UploadFile {
+    file?: File;
+    abort?: () => any;
+    validationStatus?: 'validating' | 'success' | 'error';
+    validationPercent?: number;
+    validationError?: Error;
+    validationAbort?: () => any;
+    blobUrl?: string;
+}
+export interface UploadFileProps {
+    uploadConcurrency?: number;
+    id?: string;
+    name?: string;
+    accepts?: string[];
+    acceptsJoinCharacter?: string;
+    data?: Record<string, any>;
+    value?: FileListItemProps[];
+    onRemove?: (fileItem: FileListItemProps) => any;
+    onChange?: (fileList: FileListItemProps[]) => any;
+    beforeUpload?: (file: File) => Promise<any>;
+    customRequest?: (options: {
+        onProgress: (event: {
+            percent: number;
+        }) => any;
+        onError: (e: Error, body?: any) => any;
+        onSuccess: (body: any) => any;
+        file: File;
+        fileItem: FileListItemProps;
+        signal: AbortSignal;
+    }) => {
+        abort: () => any;
+    } | void;
+    uploadRequest?: (formData: FormData, options: AxiosRequestConfig, fileItem: FileListItemProps) => Promise<string | {
+        url?: string;
+        [key: string]: any;
+    }>;
+    itemRender?: (options: {
+        remove: (uid: string) => any;
+        reUpload: (uid: string) => any;
+        fileItem: FileListItemProps;
+        orignalNode: ReactNode;
+    }) => ReactNode;
+    getIcon?: (ext: string, fileItem: FileListItemProps) => ReactNode;
+    maxCount?: number;
+    maxFileSize?: number;
+    multiple?: boolean;
+    dragable?: boolean;
+    children?: ReactNode | ReactNode[];
+    validation?: {
+        validateRequest: (options: {
+            onProgress: (percent: number) => void;
+            onSuccess: () => void;
+            onError: (e: Error) => void;
+            axiosRequestConfig: AxiosRequestConfig;
+            fileItem: FileListItemProps;
+        }) => {
+            abort: () => any;
+        } | void;
+    };
+}

package/dist/lib/UploadFile/type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/lib/UploadFile/utils/formatBitString.d.ts

@@ -0,0 +1 @@
+export declare function formatBitString(bit: number): string;

package/dist/lib/UploadFile/utils/formatBitString.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatBitString = formatBitString;
+function formatBitString(bit) {
+  const units = ['B', 'K', 'M', 'G'];
+  const base = 1024;
+  for (let i = 0; i < units.length; i++) {
+    const n = Math.pow(base, i + 1);
+    if (bit < n) return `${+(bit / (n / 1024)).toFixed(2)} ${units[i]}`;
+  }
+  return `${+(bit / Math.pow(1024, 3)).toFixed(2)} T`;
+}

package/dist/lib/UploadFile/utils/getExt.d.ts

@@ -0,0 +1 @@
+export declare function getExt(fileName: string): string;

package/dist/lib/UploadFile/utils/getExt.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getExt = getExt;
+function getExt(fileName) {
+  if (!fileName) return '';
+  const lastIndex = fileName.lastIndexOf('.');
+  if (lastIndex === -1) return '';
+  return fileName.slice(lastIndex + 1);
+}

package/dist/lib/UploadFile/utils/isImage.d.ts

@@ -0,0 +1 @@
+export declare function isImage(ext: string, type: string): boolean;

package/dist/lib/UploadFile/utils/isImage.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isImage = isImage;
+const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
+const imageMimeTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/bmp', 'image/svg+xml'];
+function isImage(ext, type) {
+  if (imageExtensions.includes(ext)) {
+    return true;
+  }
+  return imageMimeTypes.includes(type);
+}

package/dist/lib/UploadFile/utils/normalizeExt.d.ts

@@ -0,0 +1 @@
+export declare function normalizeExt(ext: string): string;

package/dist/lib/UploadFile/utils/normalizeExt.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeExt = normalizeExt;
+function normalizeExt(ext) {
+  if (ext[0] === '.') return ext;
+  return '.' + ext;
+}