choerodon-ui/pro/lib/picture/PictureViewer.js

An enterprise-class UI design language and React-based implementation

"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

var _configure = require("../../../lib/configure");

var _enum = require("../../../lib/_util/enum");

var _Button = _interopRequireDefault(require("../button/Button"));

var _enum2 = require("../button/enum");

var _Picture = _interopRequireDefault(require("./Picture"));

var PictureViewer = function PictureViewer(props) {
  var list = props.list,
      _props$defaultIndex = props.defaultIndex,
      defaultIndex = _props$defaultIndex === void 0 ? 0 : _props$defaultIndex,
      prefixCls = props.prefixCls,
      modal = props.modal;

  var _useState = (0, _react.useState)(defaultIndex),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      index = _useState2[0],
      setIndex = _useState2[1];

  var customizedPrefixCls = (0, _configure.getProPrefixCls)('picture-viewer', prefixCls);
  var handlePrev = (0, _react.useCallback)(function () {
    return setIndex(index - 1);
  }, [index]);
  var handleNext = (0, _react.useCallback)(function () {
    return setIndex(index + 1);
  }, [index]);
  var length = list.length;
  (0, _react.useEffect)(function () {
    if (modal) {
      modal.update({
        header: function header(title, closeBtn) {
          return _react["default"].createElement("div", {
            className: "".concat(customizedPrefixCls, "-header")
          }, _react["default"].createElement("span", null, title), length > 1 ? _react["default"].createElement("span", null, index + 1, " / ", length) : undefined, closeBtn);
        }
      });
    }
  }, [index, length, customizedPrefixCls]);

  if (length) {
    var src = list[index];
    return _react["default"].createElement("div", {
      className: customizedPrefixCls
    }, length > 1 && _react["default"].createElement(_Button["default"], {
      icon: "navigate_before",
      disabled: index === 0,
      funcType: _enum2.FuncType.link,
      onClick: handlePrev,
      className: "".concat(customizedPrefixCls, "-btn"),
      size: _enum.Size.large
    }), _react["default"].createElement("div", {
      className: "".concat(customizedPrefixCls, "-picture")
    }, _react["default"].createElement(_Picture["default"], {
      src: src,
      objectFit: "scale-down",
      status: "loaded",
      preview: false,
      lazy: false
    })), length > 1 && _react["default"].createElement(_Button["default"], {
      icon: "navigate_next",
      disabled: index === length - 1,
      funcType: _enum2.FuncType.link,
      onClick: handleNext,
      className: "".concat(customizedPrefixCls, "-btn"),
      size: _enum.Size.large
    }));
  }

  return null;
};

PictureViewer.displayName = 'PictureViewer';
var _default = PictureViewer;
exports["default"] = _default;
//# sourceMappingURL=PictureViewer.js.map