@chaomingd/design 0.0.68

package/dist/esm/UploadFile/index.js

@@ -0,0 +1,277 @@
+import { Image, Typography } from 'antd';
+import classNames from 'classnames';
+import React, { useMemo, useRef } from 'react';
+import IconButton from "./components/IconButton";
+import "./index.less";
+import SlashSvg from "./components/Slash";
+import { CloseSvg, DeleteSvg, RarSvg, ZipSvg, TxtSvg, PdfSvg, DocSvg } from "./components/SvgIcons";
+import { useUploadModel } from "./hooks/useUploadModel";
+import { getExt } from "./utils/getExt";
+import { isImage } from "./utils/isImage";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var EXT_SVG = {
+  zip: ZipSvg,
+  rar: RarSvg,
+  txt: TxtSvg,
+  pdf: PdfSvg,
+  doc: DocSvg,
+  docx: DocSvg
+};
+var preCls = '@chaomingd/upload-file';
+var TextBtn = function TextBtn(_ref) {
+  var children = _ref.children,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(preCls, "-text-btn"),
+    onClick: onClick,
+    children: children
+  });
+};
+var UploadFile = function UploadFile(props) {
+  var accepts = props.accepts,
+    multiple = props.multiple,
+    _props$maxCount = props.maxCount,
+    maxCount = _props$maxCount === void 0 ? 1 : _props$maxCount,
+    children = props.children,
+    id = props.id,
+    getIcon = props.getIcon,
+    _props$acceptsJoinCha = props.acceptsJoinCharacter,
+    acceptsJoinCharacter = _props$acceptsJoinCha === void 0 ? '、' : _props$acceptsJoinCha;
+  var inputFileRef = useRef(null);
+  var inputFileReplaceRef = useRef(null);
+  var inputRelaceId = useRef('');
+  var _useUploadModel = useUploadModel(props),
+    model = _useUploadModel.model,
+    onDragOver = _useUploadModel.onDragOver,
+    handleUploadFiles = _useUploadModel.handleUploadFiles,
+    onDeleteFileList = _useUploadModel.onDeleteFileList;
+  var _model$useGetState = model.useGetState(),
+    dragEnter = _model$useGetState.dragEnter,
+    fileList = _model$useGetState.value;
+
+  // input accept 属性
+  var _useMemo = useMemo(function () {
+      if (!accepts) return {
+        accept: '',
+        extstr: ''
+      };
+      var exts = accepts.map(function (ext) {
+        if (ext[0] === '.') {
+          return ext;
+        }
+        return ".".concat(ext);
+      });
+      return {
+        accept: exts.join(','),
+        extstr: exts.map(function (ext) {
+          return ext.slice(1);
+        }).join(acceptsJoinCharacter)
+      };
+    }, [accepts, acceptsJoinCharacter]),
+    accept = _useMemo.accept,
+    extstr = _useMemo.extstr;
+  var openFileDialog = function openFileDialog() {
+    var _inputFileRef$current;
+    (_inputFileRef$current = inputFileRef.current) === null || _inputFileRef$current === void 0 || _inputFileRef$current.click();
+  };
+  var handleReUpload = function handleReUpload(uid) {
+    var _inputFileReplaceRef$;
+    inputRelaceId.current = uid;
+    (_inputFileReplaceRef$ = inputFileReplaceRef.current) === null || _inputFileReplaceRef$ === void 0 || _inputFileReplaceRef$.click();
+  };
+  var renderDragger = function renderDragger() {
+    return /*#__PURE__*/_jsx("div", {
+      onDragOver: onDragOver,
+      onDrop: function onDrop(e) {
+        e.preventDefault();
+        handleUploadFiles(e.dataTransfer.files || []);
+      },
+      className: classNames("".concat(preCls, "-dragger-container"), fileList.length && "".concat(preCls, "-dragger-container-has-file-list")),
+      onClick: openFileDialog,
+      children: children ? children : /*#__PURE__*/_jsx("div", {
+        className: "".concat(preCls, "-dragger"),
+        children: dragEnter ? /*#__PURE__*/_jsx("div", {
+          className: "".concat(preCls, "-dragger-tip"),
+          children: "\u91CA\u653E\u9F20\u6807"
+        }) : /*#__PURE__*/_jsxs("div", {
+          className: "".concat(preCls, "-dragger-inner"),
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "".concat(preCls, "-dragger-top"),
+            children: [/*#__PURE__*/_jsx(TextBtn, {
+              children: "\u70B9\u51FB\u4E0A\u4F20"
+            }), /*#__PURE__*/_jsx("div", {
+              className: "".concat(preCls, "-split"),
+              children: /*#__PURE__*/_jsx(SlashSvg, {})
+            }), /*#__PURE__*/_jsx("div", {
+              className: "".concat(preCls, "-drag-text"),
+              children: "\u62D6\u62FD\u5230\u6B64\u533A\u57DF"
+            })]
+          }), extstr && /*#__PURE__*/_jsxs("div", {
+            className: "".concat(preCls, "-support-ext"),
+            children: ["\u652F\u6301\u6269\u5C55\u540D\uFF1A", extstr]
+          })]
+        })
+      })
+    });
+  };
+  var getProgress = function getProgress(fileListItem) {
+    if (!fileListItem.status || fileListItem.status === 'error' || fileListItem.status === 'done') {
+      return '100%';
+    }
+    if (fileListItem.percent) {
+      return "".concat(+Math.min(fileListItem.percent, 99.9).toFixed(2), "%");
+    }
+    return '0%';
+  };
+  var renderValidation = function renderValidation(fileListItem) {
+    var validateText = '';
+    if (fileListItem.validationStatus === 'validating') {
+      if (typeof fileListItem.validationPercent !== 'number') {
+        validateText = '校验中...';
+      } else {
+        validateText = "\u6821\u9A8C\u4E2D ".concat(Math.min(+fileListItem.validationPercent.toFixed(2), 99.99), "%");
+      }
+    }
+    if (fileListItem.validationStatus === 'error') {
+      var _fileListItem$validat;
+      validateText = ((_fileListItem$validat = fileListItem.validationError) === null || _fileListItem$validat === void 0 ? void 0 : _fileListItem$validat.message) || '校验出错';
+    }
+    if (fileListItem.validationStatus === 'success') {
+      validateText = '校验成功';
+    }
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames("".concat(preCls, "-file-item-validate"), "".concat(preCls, "-validate-status--").concat(fileListItem.validationStatus || 'success')),
+      children: validateText
+    });
+  };
+  var renderIcon = function renderIcon(fileListItem) {
+    var _fileListItem$file;
+    var ext = getExt(fileListItem.name);
+    if (isImage(ext, fileListItem.type || ((_fileListItem$file = fileListItem.file) === null || _fileListItem$file === void 0 ? void 0 : _fileListItem$file.type) || '')) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "".concat(preCls, "-file-item-left"),
+        children: /*#__PURE__*/_jsx(Image, {
+          width: 66,
+          height: 66,
+          src: fileListItem.blobUrl || fileListItem.url || ''
+        })
+      });
+    }
+    var ExtSvgIcon = EXT_SVG[ext];
+    var iconNode = getIcon ? getIcon(ext, fileListItem) : null;
+    return (ExtSvgIcon !== undefined || iconNode) && /*#__PURE__*/_jsx("div", {
+      className: "".concat(preCls, "-file-item-left"),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "".concat(preCls, "-ext-svg"),
+        children: iconNode ? iconNode : /*#__PURE__*/_jsx(ExtSvgIcon, {})
+      })
+    });
+  };
+  var renderFileListItem = function renderFileListItem(fileListItem) {
+    var progress = getProgress(fileListItem);
+    var orignalNode = /*#__PURE__*/_jsxs("div", {
+      className: classNames("".concat(preCls, "-file-item"), "".concat(preCls, "-file-item-status-").concat(fileListItem.status || 'done')),
+      children: [renderIcon(fileListItem), /*#__PURE__*/_jsxs("div", {
+        className: "".concat(preCls, "-file-item-right"),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "".concat(preCls, "-file-item-header"),
+          children: [/*#__PURE__*/_jsx(Typography.Text, {
+            ellipsis: {
+              tooltip: {
+                title: fileListItem.name,
+                showArrow: false,
+                // @ts-ignore
+                arrow: false
+              }
+            },
+            className: "".concat(preCls, "-file-item-name"),
+            children: fileListItem.name
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "".concat(preCls, "-file-item-extra"),
+            children: [/*#__PURE__*/_jsx(TextBtn, {
+              onClick: function onClick() {
+                handleReUpload(fileListItem.uid);
+              },
+              children: "\u91CD\u65B0\u4E0A\u4F20"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              type: fileListItem.status === 'uploading' ? 'primary' : 'danger',
+              size: "small",
+              icon: fileListItem.status === 'uploading' ? /*#__PURE__*/_jsx(CloseSvg, {
+                onClick: function onClick() {
+                  onDeleteFileList(fileListItem.uid);
+                }
+              }) : /*#__PURE__*/_jsx(DeleteSvg, {
+                onClick: function onClick() {
+                  onDeleteFileList(fileListItem.uid);
+                }
+              }),
+              className: "".concat(preCls, "-file-item-action-btn")
+            })]
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "".concat(preCls, "-progress"),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "".concat(preCls, "-progress-bar"),
+            style: {
+              width: progress
+            }
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "".concat(preCls, "-file-item-feedback"),
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "".concat(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: orignalNode
+      });
+    }
+    return orignalNode;
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: preCls,
+    onDrop: function onDrop(e) {
+      e.preventDefault();
+    },
+    id: id,
+    children: [/*#__PURE__*/_jsx("input", {
+      accept: accept,
+      type: "file",
+      style: {
+        display: 'none'
+      },
+      multiple: multiple,
+      ref: inputFileRef,
+      onChange: function onChange(e) {
+        handleUploadFiles(e.target.files || []);
+        e.target.value = '';
+      }
+    }), /*#__PURE__*/_jsx("input", {
+      accept: accept,
+      type: "file",
+      style: {
+        display: 'none'
+      },
+      ref: inputFileReplaceRef,
+      onChange: function onChange(e) {
+        handleUploadFiles(e.target.files || [], {
+          replace: true,
+          replaceId: inputRelaceId.current
+        });
+        inputRelaceId.current = '';
+        e.target.value = '';
+      }
+    }), maxCount > 0 && fileList.length < maxCount && renderDragger(), fileList.map(function (fileListItem) {
+      return renderFileListItem(fileListItem);
+    })]
+  });
+};
+export default UploadFile;

package/dist/esm/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/esm/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/esm/UploadFile/type.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,9 @@
+export function formatBitString(bit) {
+  var units = ['B', 'K', 'M', 'G'];
+  var base = 1024;
+  for (var i = 0; i < units.length; i++) {
+    var n = Math.pow(base, i + 1);
+    if (bit < n) return "".concat(+(bit / (n / 1024)).toFixed(2), " ").concat(units[i]);
+  }
+  return "".concat(+(bit / Math.pow(1024, 3)).toFixed(2), " T");
+}

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

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

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

@@ -0,0 +1,6 @@
+export function getExt(fileName) {
+  if (!fileName) return '';
+  var lastIndex = fileName.lastIndexOf('.');
+  if (lastIndex === -1) return '';
+  return fileName.slice(lastIndex + 1);
+}

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

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

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

@@ -0,0 +1,8 @@
+var imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
+var imageMimeTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/bmp', 'image/svg+xml'];
+export function isImage(ext, type) {
+  if (imageExtensions.includes(ext)) {
+    return true;
+  }
+  return imageMimeTypes.includes(type);
+}

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

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

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

@@ -0,0 +1,4 @@
+export function normalizeExt(ext) {
+  if (ext[0] === '.') return ext;
+  return '.' + ext;
+}

package/dist/esm/UploadFile/utils/validateFileTypes.d.ts

@@ -0,0 +1,13 @@
+export declare function validateFileTypes(file: File, types: string[]): Promise<{
+    isValid: boolean;
+    fileInfo: {
+        extension: string;
+        mimeType: string;
+        description: string;
+    };
+}>;
+export declare function getFileInfo(file: File): Promise<{
+    extension: string;
+    mimeType: string;
+    description: string;
+}>;