<commit_before>import * as React from 'react'
import { Card, Layout, message } from 'antd'
import * as s from './index.styl'

interface StateProps {
}

interface PrevState {
  images: string[]
}

export default class ImageManager extends React.Component<StateProps> {
  state = {
    images: ['http://t2.hddhhn.com/uploads/tu/201607/176/efqomc0rcmu.jpg']
  }

  componentDidMount() {
    document.addEventListener('dragover', this.handleDragOver)
  }

  handleDropdown = e => {
    const fileList = e.dataTransfer.files
    if (fileList.length === 0) {
      return
    }
    this.previewImages(fileList)
    e.stopPropagation()
    e.preventDefault()
    return false
  }

  previewImages = files => {
    Array.from(files as any[]).filter(file => file.type.includes('image')).forEach(img => {
      const reader = new FileReader()
      reader.readAsDataURL(img)
      reader.onload = e => {
        const target = e.target as any
        const { result } = target
        this.setState((prevState: PrevState) => ({images: [...prevState.images, result]}) )
      }
    })
  }

  handleDragOver = e => {
    document.addEventListener('drop', this.handleDropdown)
    this.setState({ showDragOverModal: true })
    e.stopPropagation()
    e.preventDefault()
    return false
  }

  renderImageList = () => {
    const { images } = this.state
    return images.map((i, index) => (
      <Card.Grid className={s.cardGrid} key={index}>
        <div className={s.gridImage}>
          <img src={i} alt={i} />
        </div>
      </Card.Grid>
    ))
  }

  render() {
    return (
      <Layout>
        <Card hoverable={false} title="图片管理" bodyStyle={{ padding: 0 }}>
          {this.renderImageList()}
        </Card>
      </Layout>
    )
  }
}<commit_msg>antd-fileuploader<commit_after>import * as React from 'react'
import { Card, Icon, Modal, Upload } from 'antd'
import * as s from './index.styl'

interface StateProps {
}

interface PrevState {
  images: string[]
}

export default class ImageManager extends React.Component<StateProps> {
  state = {
    images: ['http://t2.hddhhn.com/uploads/tu/201607/176/efqomc0rcmu.jpg'],

    previewVisible: false,
    previewImage  : '',
    fileList      : [{
      uid : -1,
      size: 999,
      type: 'done',
      name: 'xxx.png',
      url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }]
  }

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage  : file.url || file.thumbUrl,
      previewVisible: true,
    })
  }

  handleChange = ({ fileList }) => this.setState({ fileList })

  render() {
    const { previewVisible, previewImage, fileList } = this.state
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    )
    return (
      <div className="clearfix">
        <Upload
          action="//jsonplaceholder.typicode.com/posts/"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.14757451782583283, 'fraction_numerical': 0.009351256575102279, 'mean_word_length': 2.565625, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 39, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '940771', 'n_tokens_mistral': 1120, 'n_tokens_neox': 1100, 'n_words': 216}