z-react-ui/lib/enlarge-img/index.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _hooks = require("@/_hooks");

var EnlargeImg = function EnlargeImg(_ref) {
  var src = _ref.src,
      _ref$alt = _ref.alt,
      alt = _ref$alt === void 0 ? '图片' : _ref$alt,
      onClick = _ref.onClick,
      className = _ref.className,
      warpClassName = _ref.warpClassName;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var prefixCls = (0, _hooks.usePrefixCls)('large-img');

  var handleClick = function handleClick() {
    onClick && onClick();
    setVisible(true);
  };

  var handleClickLarge = function handleClickLarge() {
    setVisible(false);
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: warpClassName
  }, /*#__PURE__*/_react.default.createElement("img", {
    className: (0, _classnames.default)("".concat(prefixCls, "-img"), className),
    src: src,
    alt: alt,
    onClick: handleClick
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)("".concat(prefixCls, "-large-modal"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-hide"), !visible)),
    onClick: handleClickLarge
  }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("img", {
    src: src,
    alt: alt
  }))));
};

var _default = EnlargeImg;
exports.default = _default;