@aliretail/react-materials-components/es/FormComponents/upload/Preview.js

B 端物料组件库

import _Overlay from "@alifd/next/es/overlay";
import _Icon from "@alifd/next/es/icon";
import React, { useRef, useState, useCallback } from 'react';
export default function Preview(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? {} : _props$value;
  var wrapperRef = useRef(null);

  var _useState = useState(false),
      visible = _useState[0],
      setVisible = _useState[1];

  var showFull = useCallback(function () {
    setVisible(true);
  }, []);
  var onClose = useCallback(function () {
    setVisible(false);
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: "aliretail-upload-preview-wrapper",
    ref: wrapperRef
  }, /*#__PURE__*/React.createElement("div", {
    className: "aliretail-upload-preview-thumbnail"
  }, /*#__PURE__*/React.createElement("img", {
    src: value.url
  })), /*#__PURE__*/React.createElement("span", {
    className: "aliretail-upload-preview-tool"
  }, /*#__PURE__*/React.createElement("a", {
    className: "enlarge-link",
    onClick: showFull
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: "enlarge"
  }))), /*#__PURE__*/React.createElement(_Overlay, {
    visible: visible,
    safeNode: wrapperRef.current,
    align: "cc cc",
    hasMask: true,
    disableScroll: true,
    onRequestClose: onClose,
    animation: false,
    shouldUpdatePosition: true,
    canCloseByEsc: true,
    canCloseByMask: true
  }, /*#__PURE__*/React.createElement("div", {
    className: "aliretail-upload-preview-full-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "aliretail-upload-preview-full-close"
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: "close",
    onClick: onClose
  })), /*#__PURE__*/React.createElement("img", {
    alt: "img-full",
    src: value.url
  }))));
}