plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/components/Upload/index.tsx

@@ -0,0 +1,422 @@
+import './upload.scss';
+import {$file, FileServiceDefaultAccept, FileServiceSingleFile, FileServiceValidator} from "../$file";
+import {computed, designComponent, getComponentCls, iDragEvent, PropType, RenderNode, useClasses, useModel, useRefs} from 'plain-design-composition';
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {Icon} from "../Icon";
+import {Loading} from "../Loading";
+import {$message} from "../$message";
+import {$dialog} from "../$dialog";
+import {ButtonGroup} from "../ButtonGroup";
+import {Button} from "../Button";
+import {$notice} from "../$notice";
+import {createCounter} from "plain-utils/utils/createCounter";
+import {classnames} from "plain-utils/dom/classnames";
+import {toArray} from "plain-utils/utils/toArray";
+import {defer} from "plain-utils/utils/defer";
+import {createEnum} from "plain-utils/utils/createEnum";
+import i18n from "../i18n";
+
+const nextFileId = createCounter('upload');
+
+/**
+ * 上传状态
+ * ready              刚添加，还未上传
+ * success            已上传完毕
+ * error              上传失败
+ * uploading          正在上传
+ * remove             已删除
+ * empty              无文件
+ * @author  韦胜健
+ * @date    2022.10.5 16:07
+ */
+export const eUploadStatus = createEnum(['ready', 'success', 'error', 'uploading', 'remove', 'empty'] as const);
+
+/**
+ * 上传文件对象类型
+ * @author  韦胜健
+ * @date    2022.10.5 16:08
+ */
+export type UploadFile = {
+  status?: typeof eUploadStatus.TYPE,
+  id: string,
+  name: string,
+  response?: any,
+  file?: FileServiceSingleFile,
+  percent?: number,
+}
+
+export type BeforeRemove = (file: UploadFile) => boolean                            // 删除文件前
+export type BeforeUpload = (file: UploadFile) => void | Promise<void>               // 上传前
+export type HandleRemove = (file: UploadFile) => void | Promise<void>               // 手动处理删除文件
+export type HandleUpload = (files: UploadFile | UploadFile[]) => Promise<void>      // 手动处理上传文件
+export type HandlePreview = (file: UploadFile) => void                              // 手动处理预览文件逻辑
+
+export type UploadData = Record<string, string> | (() => Record<string, string>)    // 上传时参数
+export type UploadModelValue = UploadFile | UploadFile[]                            // 绑定值
+
+export const Upload = designComponent({
+  name: '-upload',
+  props: {
+    ...EditProps,
+    modelValue: { type: [Array, Object] as PropType<UploadModelValue> },// 双向绑定值，文件对象
+    /*chooseFile*/
+    accept: { type: String },                                         // FileServiceChooseFileConfig.accept, 接收上传的文件类型
+    multiple: { type: Boolean, default: true },                       // FileServiceChooseFileConfig.multiple, 是否上传多个文件
+    validator: { type: Function as PropType<FileServiceValidator> },  // FileServiceChooseFileConfig.validator, 选择文件的校验函数
+    max: { type: Number },                                            // 最多上传文件个数
+    /*upload*/
+    action: { type: String },                                         // 文件上传地址
+    data: { type: [Object, Function] as PropType<UploadData> },       // 上传时的额外参数，或者获取额外参数的函数
+    headers: { type: Object as PropType<Record<string, string>>, },   // 上传时的请求头
+    withCredentials: { type: Boolean },                               // 带cookie凭证信息
+    filename: { type: String },                                       // 文件上传的的时候接收的文件名
+    /*other*/
+    draggable: { type: Boolean },                                     // 支持拖拽上传
+    // request: {type: Function as PropType<CustomRequest>},           // 自定义上传行为
+    // method: {type: String, default: 'post'},                        // 上传时的method方法
+    autoUpload: { type: Boolean, default: true },                     // 获取到文件之后，自动上传文件
+    removeConfirm: { type: Boolean, default: true },                  // 删除前的确认提示
+
+    beforeUpload: { type: Function as PropType<BeforeUpload> },       // 上传前校验文件
+    beforeRemove: { type: Function as PropType<BeforeRemove> },       // 删除前校验
+    handleRemove: { type: Function as PropType<HandleRemove> },       // 执行删除逻辑
+    handleUpload: { type: Function as PropType<HandleUpload> },       // 自定义上传逻辑
+    handlePreview: { type: Function as PropType<HandlePreview> },     // 处理预览文件逻辑
+  },
+  emits: {
+    onUpdateModelValue: (val?: UploadModelValue) => true,
+    onUploadSuccess: (data: { file: UploadFile | UploadFile[], resp: any }) => true,
+    onUploadError: (error: any) => true,
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['button'],
+  scopeSlots: {
+    default: (scope: { item: UploadFile, index: number }) => {},
+  },
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const { editComputed } = useEdit();
+    const singleModel = useModel(() => props.modelValue as undefined | UploadFile, emit.onUpdateModelValue);
+    const multipleModel = useModel(() => props.modelValue as undefined | UploadFile[], emit.onUpdateModelValue);
+
+    const renderIcon = {
+      [eUploadStatus.success]: <Icon icon="pi-check-circle-fill"/>,
+      [eUploadStatus.ready]: <Icon icon="pi-info-circle-fill"/>,
+      [eUploadStatus.error]: <Icon icon="pi-close-circle-fill"/>,
+      [eUploadStatus.uploading]: <Loading type="beta" status="primary"/>,
+      [eUploadStatus.remove]: null,
+
+      [eUploadStatus.empty]: <Icon icon="pi-info-circle"/>,
+    };
+    const singleEmptyFile: UploadFile = {
+      name: i18n('file.notUpload').d('未上传'),
+      status: eUploadStatus.empty,
+      id: 'nothing'
+    };
+
+    const classes = useClasses(() => [
+      getComponentCls('upload'),
+      `upload-${props.multiple ? 'multiple' : 'single'}`,
+      {
+        'upload-remove': !!props.handleRemove,
+        'upload-disabled': editComputed.value.disabled,
+        'upload-preview': !!props.handlePreview,
+      }
+    ]);
+
+    const utils = {
+      getItemClass: (item: UploadFile) => classnames([
+        'upload-item',
+        {
+          [`upload-item-status-${item.status}`]: !!item.status
+        }
+      ]),
+    };
+
+    const handler = {
+      onSelectFile: async (files: File | File[]) => {
+
+        const selectFiles = toArray(files).filter(file => {
+          const f = file as FileServiceSingleFile;
+          f.calcSize = Number((file.size / (1024 * 1024)).toFixed(2));
+          /*validator*/
+          if (props.validator != null) {
+            const flag = props.validator(f);
+            if (flag === false) {
+              return false;
+            }
+          }
+          /*max*/
+          if (props.max != null) {
+            if (f.calcSize > props.max) {
+              $message.error(
+                i18n('file.oversize', { filename: file.name, filesize: f.calcSize, max: props.max }).d(`[${file.name}]大小为${f.calcSize}MB，超过最大限制${props.max}MB`)
+                , { time: 5000 });
+              return false;
+            }
+          }
+          return true;
+        }) as FileServiceSingleFile[];
+
+        if (!props.multiple) {
+          const file = selectFiles[0]!;
+          singleModel.value = {
+            id: nextFileId(),
+            name: file.name,
+            file,
+            status: eUploadStatus.ready,
+          };
+        } else {
+          const addFiles = toArray(selectFiles).map(f => ({
+            id: nextFileId(),
+            status: eUploadStatus.ready,
+            name: f.name,
+            file: f,
+          } as UploadFile));
+          multipleModel.value = [...addFiles, ...multipleModel.value || []];
+        }
+        if (props.autoUpload) {
+          await methods.upload();
+        }
+      },
+    };
+
+    const dropHandler = {
+      onDragOver: (e: iDragEvent) => {
+        e.preventDefault();
+      },
+      onDragLeave: (e: iDragEvent) => {
+        e.preventDefault();
+      },
+      onDrop: async (e: iDragEvent) => {
+        e.preventDefault();
+        if (!editComputed.value.editable) {
+          return;
+        }
+
+        const accept = !props.accept ? undefined : FileServiceDefaultAccept[props.accept] || props.accept;
+        let files: File[] = Array.from(e.dataTransfer!.files);
+        if (!!accept) {
+          files = Array.from(e.dataTransfer!.files).filter(file => {
+            const { type, name } = file;
+            const extension = name.indexOf('.') > -1
+              ? `.${name.split('.').pop()}`
+              : '';
+            const baseType = type.replace(/\/.*$/, '');
+            return accept.split(',')
+              .map(type => type.trim())
+              .filter(type => type)
+              .some(acceptedType => {
+                if (acceptedType === type) {
+                  return true;
+                }
+                if (/\..+$/.test(acceptedType)) {
+                  return extension === acceptedType;
+                }
+                if (/\/\*$/.test(acceptedType)) {
+                  return baseType === acceptedType.replace(/\/\*$/, '');
+                }
+                if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
+                  return type === acceptedType;
+                }
+                return false;
+              });
+          });
+        }
+        if (files.length > 0) {
+          await handler.onSelectFile(files);
+        }
+      },
+    };
+
+    const methods = {
+      chooseFile: async () => {
+        if (!editComputed.value.editable) {
+          return;
+        }
+        const files = await $file.chooseFile({
+          multiple: props.multiple,
+          accept: props.accept,
+          /*validator以及max不在这里校验，因为 drop file的时候不走这里，在onSelectFile中统一处理*/
+          // validator: props.validator,
+          // max: props.max,
+        });
+        await handler.onSelectFile(files);
+      },
+      removeFile: async (file: UploadFile) => {
+
+        // 状态不存在或者状态为success表示需要用户处理删除文件在后端的逻辑，否则其他状态直接前端删除
+        if (!file.status || file.status === eUploadStatus.success) {
+          if (props.removeConfirm) {
+            await $dialog.confirm(i18n('file.areYouSureToDeleteFile', { name: file.name }).d(`确认要删除文件：${file.name} 吗？`));
+          }
+          if (!!props.beforeRemove) {await props.beforeRemove(file);}
+          await props.handleRemove!(file);
+        }
+
+        // 前端删除
+        if (!props.multiple) {
+          singleModel.value = undefined;
+        } else {
+          const index = multipleModel.value!.indexOf(file);
+          if (index > -1) {
+            multipleModel.value!.splice(index, 1);
+          }
+        }
+      },
+      upload: () => {
+        let files = props.multiple ? multipleModel.value : (singleModel.value ? [singleModel.value] : undefined);
+        if (!files) return;
+        /*上传 准备就绪或者上传失败的文件*/
+        files = files.filter(f => f.status === eUploadStatus.ready || f.status === eUploadStatus.error);
+        if (files.length === 0) return;
+        return methods.uploadFile(props.multiple ? files : files[0]);
+      },
+      uploadFile: async (uploadFiles: UploadFile | UploadFile[]) => {
+
+        toArray(uploadFiles).forEach(file => {
+          file.percent = 0;
+          file.status = eUploadStatus.uploading;
+        });
+
+        if (!!props.beforeUpload) {
+          await Promise.all(toArray(uploadFiles).map(file => props.beforeUpload!(file)));
+        }
+
+        const handler = {
+          onSuccess: (data: any) => {
+            toArray(uploadFiles).forEach(file => {
+              file.status = eUploadStatus.success;
+              file.percent = undefined;
+              $notice.success(i18n('file.uploadFileSucceed', { name: file.name }).d(`文件[${file.name}]上传成功！`));
+            });
+            dfd.resolve();
+            emit.onUploadSuccess({ file: uploadFiles, resp: data });
+          },
+          onError: (error: any) => {
+            toArray(uploadFiles).forEach(file => file.status = eUploadStatus.error);
+            dfd.reject();
+            emit.onUploadError(error);
+            $notice.error(i18n('file.uploadFailed').d(`文件上传失败！`));
+          },
+        };
+
+        const dfd = defer();
+        if (!!props.handleUpload) {
+          const promise = props.handleUpload(uploadFiles);
+          if (!promise) {
+            console.error('Upload: handleUpload must return promise object!');
+          } else {
+            promise.then(handler.onSuccess, handler.onError);
+          }
+        } else {
+          if (!props.action) {
+            throw new Error('PlUpload: props.action is necessary!');
+          }
+          if (!props.filename) {
+            throw new Error('PlUpload: props.filename is necessary!');
+          }
+          $file.upload({
+            action: props.action,
+            data: typeof props.data === "function" ? props.data() : props.data,
+            headers: props.headers,
+            withCredentials: props.withCredentials,
+            file: Array.isArray(uploadFiles) ? uploadFiles.map(f => f.file!) : uploadFiles.file!,
+            filename: props.filename,
+            ...handler,
+            onProgress: (percent) => {
+              toArray(uploadFiles).forEach(file => file.percent = percent);
+            },
+          });
+        }
+        return dfd.promise;
+      },
+    };
+
+    const renderItem = (file: UploadFile, index: number, custom?: () => RenderNode) => (
+      <div className={utils.getItemClass(file)} key={file.id}>
+        <div className="upload-item-inner">
+          {!!custom ? custom() : <>
+            {file.status ? renderIcon[file.status] : <Icon icon="pi-file"/>}
+            {file.status === eUploadStatus.ready ? `(${i18n('file.toBeUpload').d('待上传')}) ` : ''}
+            <div className="upload-item-content" onClick={() => !!props.handlePreview && props.handlePreview(file)}>
+              {scopeSlots.default({ item: file, index }, file.name)}
+            </div>
+          </>}
+          {(
+            !!props.handleRemove
+            && file.status !== eUploadStatus.empty
+            && file.status !== eUploadStatus.uploading
+            && editComputed.value.editable
+          ) && (
+            <div className="upload-item-remove" onClick={() => methods.removeFile(file)}>
+              <Icon icon="pi-delete"/>
+            </div>
+          )}
+        </div>
+        {file.percent != null && (
+          <div className="upload-item-progress">
+            <div className="upload-item-progress-inner" style={{ width: `${file.percent}%` }}/>
+          </div>
+        )}
+      </div>
+    );
+
+    const singleRender = computed(() => <>
+      {editComputed.value.editable && (
+        <ButtonGroup>
+          <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+          {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+          {slots.button()}
+        </ButtonGroup>
+      )}
+      {renderItem(singleModel.value || singleEmptyFile, 0)}
+    </>);
+    const multipleRender = computed(() => <>
+      <div className="upload-button">
+        {!props.draggable ? (
+          editComputed.value.editable && (
+            <ButtonGroup>
+              <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+              {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+              {slots.button()}
+            </ButtonGroup>
+          )
+        ) : (
+          editComputed.value.editable && (
+            <div className="upload-drop-area" onClick={methods.chooseFile} {...dropHandler}>
+              <Icon icon="pi-share-external"/>
+              <div>
+                <span>{i18n('file.dropFilesOr').d('拖拽文件至此处，或者')}</span>
+                <Button mode="text" className="upload-drop-upload-button" onClick={methods.chooseFile}>
+                  <span>{i18n('file.clickToUpload').d('点击上传')}</span>
+                  <Icon icon="pi-upload"/>
+                </Button>
+                {slots.button()}
+              </div>
+            </div>
+          )
+        )}
+      </div>
+      <div className="upload-list">
+        {!!multipleModel.value && multipleModel.value
+          .filter(item => item.status !== eUploadStatus.remove)
+          .map((file, index) => renderItem(file, index))}
+      </div>
+    </>);
+
+    return {
+      refer: { refs },
+      render: () => {
+        return (
+          <div className={classes.value} ref={onRef.el}>
+            {props.multiple ? multipleRender.value : singleRender.value}
+          </div>
+        );
+      }
+    };
+  },
+});
+
+export default Upload;

package/src/packages/components/Upload/upload.scss

@@ -0,0 +1,185 @@
+@include prefix(upload) {
+  .upload-item {
+    position: relative;
+
+    .upload-item-inner {
+      padding: 6px 9px;
+      font-size: 14px;
+      color: plv(text-2);
+      position: relative;
+      z-index: 2;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+
+      & > .#{componentName(icon)}:first-child {
+        color: plv(text-2);
+      }
+
+      & > .#{componentName(icon)}, & > .#{componentName(loading)} {
+        margin-right: 4px;
+      }
+    }
+
+    .upload-item-progress {
+      position: absolute;
+      top: 2px;
+      bottom: 2px;
+      left: 2px;
+      right: 2px;
+      z-index: 1;
+
+      .upload-item-progress-inner {
+        transition: all 1s linear;
+        height: 100%;
+        background-color: plv(priamry-light-2);
+        border-top-right-radius: 100px;
+        border-bottom-right-radius: 100px;
+        z-index: -1;
+      }
+    }
+
+    .upload-item-content {
+      display: inline-block;
+    }
+
+    & + .upload-item {
+      margin-top: 8px;
+    }
+
+    &.upload-item-status-success {
+      .upload-item-inner {
+        &, & > .#{componentName(icon)} {
+          color: plv(primary-6);
+        }
+      }
+    }
+
+    &.upload-item-status-error {
+      .upload-item-inner {
+        &, & > .#{componentName(icon)} {
+          color: plv(error-6);
+        }
+      }
+    }
+
+    &.upload-item-status-ready {
+      .upload-item-inner {
+        &, & > .#{componentName(icon)} {
+          color: plv(warn-6);
+        }
+      }
+    }
+  }
+
+  &.upload-preview {
+    .upload-item {
+      .upload-item-content {
+        &:hover {
+          text-decoration: underline;
+          color: plv(primary-6);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  &.upload-remove {
+    .upload-item {
+      .upload-item-inner {
+        padding-right: 32px;
+      }
+
+      .upload-item-remove {
+        width: 32px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: plv(text-2);
+        transition: all 300ms linear;
+
+        &:hover {
+          color: plv(primary-6);
+        }
+      }
+    }
+  }
+
+  &.upload-single {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+
+    & > .#{componentName(button-group)}:first-child {
+      & > .#{componentName(button)}:last-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    .upload-item {
+      flex: 1;
+      border: solid 1px plv(border-color);
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+
+    &:not(.upload-disabled) {
+      .upload-item {
+        border-left: none;
+      }
+    }
+  }
+
+  &.upload-multiple {
+    .upload-button {
+
+    }
+
+    .upload-list {
+      margin-top: 8px;
+
+      .upload-item {
+        border: dashed 1px plv(border-color);
+      }
+    }
+
+    .upload-drop-area {
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      align-items: center;
+      justify-content: center;
+      border: dashed 1px plv(border-color);
+      cursor: pointer;
+
+      & > .#{componentName(icon)} {
+        font-size: 32px;
+        color: plv(primary-6);
+        margin-bottom: 8px;
+      }
+
+      .upload-drop-upload-button {
+        margin-left: 4px;
+      }
+    }
+
+    &.upload-disabled {
+      .upload-drop-area {
+        color: plv(text-2);
+        cursor: not-allowed;
+
+        & > .#{componentName(icon)} {
+          color: plv(text-2);
+        }
+      }
+    }
+  }
+}

package/src/packages/components/VirtualList/index.tsx

@@ -0,0 +1,63 @@
+import './virtual-list.scss';
+import {designComponent, useRefs} from "plain-design-composition";
+import Scroll from "../Scroll";
+import {useVirtualList} from "./useVirtualList";
+
+export const VirtualList = designComponent({
+  name: 'virtual-list',
+  inheritPropsType: Scroll,
+  props: {
+    data: { type: Array, require: true, default: [] },            // 要渲染的长数据
+    size: { type: Number, require: true, default: 40 },           // 每一行高度
+    dynamicSize: { type: Boolean },                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
+    disabled: { type: Boolean },                                  // 禁用虚拟滚动
+    width: { type: [String, Number] },                            // 当需要横向滚动是，需要指定内容宽度
+  },
+  emits: {
+    onScroll: (e: Event) => true,
+    onRefScroll: (scroll: typeof Scroll.use.class | null) => true,
+    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
+  },
+  scopeSlots: {
+    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+    content: (scope: { data: any[] }) => {},
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({
+      scroll: Scroll,
+      content: HTMLDivElement,
+    });
+
+    const { virtual } = useVirtualList({ refs, props, emit, });
+
+    const onRefScroll = (scroll: typeof Scroll.use.class | null) => {
+      onRef.scroll(scroll);
+      emit.onRefScroll(scroll);
+    };
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => {
+        const { list } = virtual.offsetData.value;
+        return (
+          <Scroll scrollX={!!props.width} onScroll={virtual.handler.onScroll} ref={onRefScroll as any} className={virtual.classes.value} disableTransitionWhenScroll>
+            <div className="virtual-list-strut" style={virtual.strutStyles.value}>
+              <div className="virtual-list-content" style={virtual.contentStyles.value} ref={onRef.content}>
+                {scopeSlots.content.isExist() ?
+                  scopeSlots.content({ data: list }, null) :
+                  list.map((node, virtualIndex) =>
+                    scopeSlots.default({ item: node.item, index: node.index, virtualIndex })
+                  )}
+              </div>
+            </div>
+          </Scroll>
+        );
+      }
+    };
+  },
+});
+
+export default VirtualList;