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

ai-boss 业务 ui 组件库

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; }

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';
import classnames from 'classnames';
import { getPrefixCls } from '../style/config';
import "./style/index.css";

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 = getPrefixCls('preview-image');
    const previewImageCls = classnames(prefixCls, className);
    const DOM = visible ? React.createElement("section", {
      className: previewImageCls
    }, closable && React.createElement("span", {
      className: `${prefixCls}-close-x`,
      onClick: this.handleClose
    }, React.createElement(Icon, {
      type: "close"
    })), React.createElement("span", {
      className: `${prefixCls}-pagenation ${prefixCls}-pagenation-left`,
      onClick: this.handlePreNextPage.bind(this, -1)
    }, React.createElement(Icon, {
      type: "left"
    })), React.createElement("span", {
      className: `${prefixCls}-pagenation ${prefixCls}-pagenation-right`,
      onClick: this.handlePreNextPage.bind(this, 1)
    }, React.createElement(Icon, {
      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: classnames(`${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);
  }

}

export default PreviewImage;