@forchange/aui/lib/preview-image/index.js

ai-boss 业务 ui 组件库

"use strict";

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

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

var ReactDOM = _interopRequireWildcard(require("react-dom"));

var _icon = _interopRequireDefault(require("antd/lib/icon"));

require("antd/lib/icon/style/index.css");

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

var _config = require("../style/config");

require("./style/index.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

class PreviewImage extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "escFunction", event => {
      if (event.keyCode === 27 && this.props.onCancel) {
        this.props.onCancel(event);
      }
    });

    _defineProperty(this, "handleClose", e => {
      if (this.props.onCancel) {
        this.props.onCancel(e);
      }
    });

    _defineProperty(this, "handleClick", currentSrc => {
      this.setState({
        currentSrc
      });
    });

    _defineProperty(this, "handlePreNextPage", page => {
      const {
        list = []
      } = this.props;
      const {
        currentSrc
      } = this.state;

      for (const i in list) {
        if (list[i] === currentSrc) {
          if (Number(i) === list.length - 1 && page === 1) {
            this.setState({
              currentSrc: list[0]
            });
          } else if (Number(i) === 0 && page === -1) {
            this.setState({
              currentSrc: list[list.length - 1]
            });
          } else {
            this.setState({
              currentSrc: list[Number(i) + page]
            });
          }
        }
      }
    });

    this.state = {
      currentSrc: this.props.currentSrc ? this.props.currentSrc : this.props.list ? this.props.list.length !== 0 ? this.props.list[0] : '' : ''
    };
  } // 是否支持键盘 esc 关闭
  // currentSrc改变是触发


  componentWillReceiveProps(nextProps) {
    if (nextProps.currentSrc !== this.props.currentSrc) {
      this.setState({
        currentSrc: nextProps.currentSrc
      });
    }
  }

  componentDidMount() {
    const {
      keyboard = true
    } = this.props;

    if (keyboard) {
      document.addEventListener('keydown', this.escFunction);
    }
  } // 清除操作


  componentWillUnmount() {
    const {
      keyboard = true
    } = this.props;

    if (keyboard) {
      document.removeEventListener('keydown', this.escFunction);
    }
  } // 点击关右上角关闭按钮


  render() {
    const {
      className,
      visible = false,
      closable = true,
      list = [],
      getContainer
    } = this.props;
    const prefixCls = (0, _config.getPrefixCls)('preview-image');
    const previewImageCls = (0, _classnames.default)(prefixCls, className);
    const DOM = visible ? React.createElement("section", {
      className: previewImageCls
    }, closable && React.createElement("span", {
      className: `${prefixCls}-close-x`,
      onClick: this.handleClose
    }, React.createElement(_icon.default, {
      type: "close"
    })), React.createElement("span", {
      className: `${prefixCls}-pagenation ${prefixCls}-pagenation-left`,
      onClick: this.handlePreNextPage.bind(this, -1)
    }, React.createElement(_icon.default, {
      type: "left"
    })), React.createElement("span", {
      className: `${prefixCls}-pagenation ${prefixCls}-pagenation-right`,
      onClick: this.handlePreNextPage.bind(this, 1)
    }, React.createElement(_icon.default, {
      type: "right"
    })), React.createElement("div", {
      className: `${prefixCls}-content`
    }, React.createElement("img", {
      className: `${prefixCls}-content-image`,
      src: this.state.currentSrc
    })), React.createElement("footer", {
      className: `${prefixCls}-footer`
    }, React.createElement("div", {
      className: `${prefixCls}-footer-pagenation`
    }, list.map((item, index) => React.createElement("img", {
      key: index,
      src: item,
      alt: "\u56FE\u7247",
      onClick: this.handleClick.bind(this, item),
      className: (0, _classnames.default)(`${prefixCls}-footer-pagenation-item`, {
        'aui-pagenation-item-active': item === this.state.currentSrc
      })
    }))))) : null;
    return ReactDOM.createPortal(DOM, getContainer === undefined ? document.body : typeof getContainer === 'function' ? getContainer() ? getContainer() : document.body : getContainer);
  }

}

var _default = PreviewImage;
exports.default = _default;