All files / src/upload/preset Image.tsx

100% Statements 2/2
85.71% Branches 6/7
100% Functions 1/1
100% Lines 2/2

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                                                                          1x 1x                                                                        
import React from "react";
import { useConfig } from "../../_util/config-context";
 
export interface ImageProps {
  /**
   * 文件名
   */
  filename?: React.ReactNode;
 
  /**
   * 预览图
   */
  image?: string;
 
  /**
   * 上传进度
   */
  percent?: number;
 
  /**
   * 文件描述
   */
  description?: React.ReactNode;
 
  /**
   * 按钮区域内容
   */
  button?: React.ReactNode;
}
 
export function Image({
  filename,
  image,
  percent,
  description,
  button,
}: ImageProps) {
  const { classPrefix } = useConfig();
  return (
    <div className={`${classPrefix}-form-upload-img`}>
      <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`}>
            {filename && (
              <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>
  );
}