kara-module-file-list/src/index.js

kara

import React, {Component} from 'react'
import Modal from 'react-modal-plugin'
import 'react-modal-plugin/lib/modal.css'
import './iconfont/iconfont.css'
import css from './file.scss'
import Item from './item'
import ImgView from 'kara-module-img-view'
import 'kara-module-img-view/lib/index.css'
import Forward from 'kara-module-forward'
import 'kara-module-forward/lib/index.css'

class File extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgViewShow: false,
      forwardIsShow: false,
    }
  }

  imgViewOpen = (id) => {
    this.setState({
      imgViewShow: true,
      activeFileId: id
    })
  }

  imgViewClose = () => {
    this.setState({
      imgViewShow: false
    })
  }

  forwardOpen = (id) => {
    this.setState({
      forwardIsShow: true,
      forwardId:id,
    })
  }

  forwardClose = () => {
    this.setState({
      forwardIsShow: false
    })
  }

  onFavorite = (msgId,yn) => {
    const { httpAgent } = this.props
    return httpAgent.post(`/webapi/message/favorite/${msgId}/${yn}`,{}).then(res => {
      if (res && res.resultCode === '000000') {
        return res
      }else{
        return null
      }
    })
  }

  onUpVote = (msgId,yn) => {
    const { httpAgent } = this.props
    return httpAgent.post(`/webapi/message/star/${msgId}/${yn}`,{}).then(res => {
      if (res && res.resultCode === '000000') {
        return res
      }else{
        return null
      }
    })
  }

  getItem = () => {
    const {data: {result = []}} = this.props
    if (result.length === 0) {
      return null
    }
    const li = result.map((v, i) => {
      return <Item
        key={i}
        {...v}
        onImgView={this.imgViewOpen}
        onForward={this.forwardOpen}
        onFavorite={this.onFavorite}
        onUpVote={this.onUpVote}
      />
    })
    return <ul className={`${css.list} clearfix`}>
      {li}
    </ul>
  }

  getImgList = () => {
    const {data: {result = []}} = this.props
    if (result.length === 0) {
      return []
    }
    const imgType = ['jpeg', 'gif', 'png', 'jpg', 'bmp'];
    const imgList = []
    for (const i of result) {
      if (imgType.includes(i.fileType)) {
        imgList.push(i);
      }
    }
    return imgList
  }


  render() {
    const {imgViewShow, activeFileId, forwardIsShow, forwardId} = this.state
    const {data: {count = 0}, modalParent, httpAgent} = this.props
    const imgList = this.getImgList()
    const replaceStyle = {
      top: '-40px',
      right: '0',
      bottom: '0',
      left: '-70px',
      width: 'auto',
      height: 'auto',
    }

    return (<div>
      {this.getItem()}
      <Modal show={forwardIsShow} onMask={this.forwardClose}>
        <Forward httpAgent={httpAgent} modalHidden={this.forwardClose} messageId={forwardId} />
      </Modal>
      <Modal show={imgViewShow} parent={modalParent} replaceStyle={replaceStyle}>
        <ImgView activeFileId={activeFileId} imgList={imgList} imgViewClose={this.imgViewClose}/>
      </Modal>
    </div>)
  }


}

export default File;