All files / src/upload/preset Dragger.tsx

80% Statements 4/5
14.29% Branches 1/7
100% Functions 1/1
80% Lines 4/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108                                                                                            2x 2x   2x                                                                       2x                                            
import React, { useContext } from "react";
import classNames from "classnames";
import { useConfig } from "../../_util/config-context";
import { UploadContext } from "../UploadContext";
import { Text } from "../../text";
 
export interface DraggerProps {
  /**
   * 文件名
   */
  filename?: React.ReactNode;
 
  /**
   * 预览图,仅在 `filename` 不为空时展示
   */
  image?: string;
 
  /**
   * 上传进度,仅在 `filename` 不为空时展示
   */
  percent?: number;
 
  /**
   * 文件描述,仅在 `filename` 不为空时展示
   */
  description?: React.ReactNode;
 
  /**
   * 按钮区域内容,仅在 `filename` 不为空时展示
   */
  button?: React.ReactNode;
 
  /**
   * `filename` 为空时展示内容,此时支持拖拽上传
   */
  children?: React.ReactNode;
}
 
export function Dragger({
  filename,
  image,
  percent,
  button,
  description,
  children,
}: DraggerProps) {
  const { classPrefix } = useConfig();
  const { isDragging, getDraggerProps } = useContext(UploadContext);
 
  Iif (filename) {
    return (
      <div className={`${classPrefix}-form-upload-drag`}>
        <div className={`${classPrefix}-form-upload__inner`}>
          <div className={`${classPrefix}-form-upload__box`}>
            {image && (
              <div className={`${classPrefix}-form-upload__thumb`}>
                <img
                  className={`${classPrefix}-form-upload__preview`}
                  src={image}
                  alt=""
                />
              </div>
            )}
            <div className={`${classPrefix}-form-upload__info`}>
              <div className={`${classPrefix}-form-upload__file`}>
                <span className={`${classPrefix}-text`}>{filename}</span>
                {(percent || percent === 0) && (
                  <span className={`${classPrefix}-form__help-text--inline`}>
                    {Math.floor(percent)}%
                  </span>
                )}
              </div>
              <div
                className={`${classPrefix}-form-upload__intro ${classPrefix}-text-weak`}
              >
                {description}
              </div>
              <div className={`${classPrefix}-form-upload__btn`}>{button}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div
      className={classNames(`${classPrefix}-form-upload-drag`, {
        [`${classPrefix}-form-upload-drag--drag`]: isDragging,
      })}
    >
      <div
        {...getDraggerProps({ className: `${classPrefix}-form-upload__inner` })}
      >
        <Text
          theme="text"
          className={classNames(`${classPrefix}-text__upload-drag`, {
            [`${classPrefix}-text__upload-drag--hover`]: isDragging,
          })}
          parent="p"
        >
          {children}
        </Text>
      </div>
    </div>
  );
}