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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useEffect, useState } from 'react';
import { getProPrefixCls } from '../../../es/configure';
import { Size } from '../../../es/_util/enum';
import Button from '../button/Button';
import { FuncType } from '../button/enum';
import Picture from './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 = useState(defaultIndex),
      _useState2 = _slicedToArray(_useState, 2),
      index = _useState2[0],
      setIndex = _useState2[1];

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

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

  return null;
};

PictureViewer.displayName = 'PictureViewer';
export default PictureViewer;
//# sourceMappingURL=PictureViewer.js.map