jc-biz-components/components/sortable-upload/index.js

jc component library based on Antd

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Upload, Icon } from 'antd'
import ReactDOM from 'react-dom'
import { beforeUpload, changeIndex } from '../upload/utils'
import { showModalWrapper } from '../modal'

export default class SortableUpload extends Component {

  static propTypes = {
    needOrder: PropTypes.bool,
    max: PropTypes.number
  }

  static defaultProps = {
    needOrder: false,
    max: 999999,
    prefixCls: 'jc-sortable-upload',
    beforeUpload
  }

  state = {
    mouseInAction: false
  }

  handleOrderChange(i, index) {
    if (this.fileList) {
      const modifyFileList = changeIndex(this.fileList[i], this.fileList, index)
      this.Upload.onChange({
        fileList: modifyFileList
      })
    }
  }

  componentDidUpdate() {
    if (this.props.needOrder) {
      (ReactDOM.findDOMNode(this).querySelectorAll('.ant-upload-list-item') || []).forEach((element, i) => {
        let node = element.querySelector(`.${this.props.prefixCls}-order`)
        if (!node) {
          const newDiv = document.createElement('span')
          newDiv.className = `${this.props.prefixCls}-order`
          element.appendChild(newDiv)
          node = newDiv
        }
        ReactDOM.render(
          <span
            onMouseOver={() => {
              this.setState({
                mouseInAction: true
              })
            }}
            onMouseOut={() => {
              this.setState({
                mouseInAction: false
              })
            }}
          >
            <Icon
              style={{ paddingRight: 8 }}
              type='left'
              onClick={this.handleOrderChange.bind(this, i, 0)}
            />
            <Icon
              style={{ paddingLeft: 8 }}
              type='right'
              onClick={this.handleOrderChange.bind(this, i, 1)}
            />
          </span>, node)
      })
    }
  }

  onChange = (info) => {
    this.fileList = info.fileList
    const { onChange } = this.props
    if (onChange && (info.file && info.file.originFileObj) || !info.file) {
      onChange(info)
    }
  }

  render() {
    const uploadButton = (
      <div>
        <Icon type='plus' />
        <div className='ant-upload-text'>图片上传
        </div>
      </div>
    )
    return (
      <Upload
        ref={Upload => { this.Upload = Upload }}
        className={`${this.props.prefixCls} ${this.state.mouseInAction ? `${this.props.prefixCls}-hover` : ''}`}
        onPreview={(file) => {
          const html = <img alt='preview' style={{ width: '100%' }} src={file.url} />
          showModalWrapper(html)
        }}
        {...this.props}
        prefixCls = {undefined}
        onChange={this.onChange.bind(this)}
      >
        {(this.fileList || []).length >= this.props.max ? null : this.props.children || uploadButton}
      </Upload>
    )
  }
}