All files / src/imagepreview ImagePreview.tsx

57.14% Statements 4/7
0% Branches 0/1
25% Functions 1/4
57.14% Lines 4/7

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                                                  1x             1x 1x   1x                                                
import React, { useState } from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
import { Modal } from "../modal";
 
export interface ImagePreviewProps extends StyledProps {
  /**
   * 图片 url
   */
  src: string;
  /**
   * 预览图片 url
   */
  previewSrc: string;
  /**
   * 预览弹窗标题
   */
  previewTitle?: string;
}
 
/**
 * 图片预览
 */
export function ImagePreview(props: ImagePreviewProps) {
  const { classPrefix } = useConfig();
  const {
    style,
    src,
    previewSrc,
    className,
    previewTitle = "图片预览",
  } = props;
  const [visible, setVisible] = useState(false);
 
  return (
    <>
      <img
        style={style}
        alt="预览图片"
        src={src}
        className={classNames(className, `${classPrefix}-img__preview`)}
        title="点击查看大图"
        onClick={() => setVisible(true)}
      />
      <Modal
        className={`${classPrefix}-dialog--img`}
        visible={visible}
        caption={previewTitle}
        onClose={() => setVisible(false)}
        onExited={() => setVisible(false)}
      >
        <Modal.Body>
          <img src={previewSrc} alt="" />
        </Modal.Body>
      </Modal>
    </>
  );
}