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

kara

import React, {Component} from 'react'
import css from './file.scss'
import FileAvatar from './fileAvatar'
import {fullTime} from './getTime'
import getHighLightText from './getHighLightText'
import PlainMessage from "./plainMessage";

class FileItem extends Component {
  constructor(props) {
    super(props);
    const {thumbNum, isStared, isThumbed} = this.props
    this.state = {
      isStared,
      isThumbed,
      thumbNum,
    }
  }

  onFavorite = () => {
    const {onFavorite, messageId} = this.props
    const {isStared} = this.state
    onFavorite(messageId, isStared ? 'no' : 'yes').then(res => {
      if (res) {
        this.setState({
          isStared: res.flag,
        })
      }
    })
  }

  onUpVote = () => {
    const {onUpVote, messageId} = this.props
    const {isThumbed} = this.state
    onUpVote(messageId, isThumbed ? 'no' : 'yes').then(res => {
      if (res) {
        this.setState({
          isThumbed: res.flag,
          thumbNum: res.countStar
        })
      }
    })
  }

  onDownload = () => {
    const {id, channelId} = this.props
    window.$file.download(id, channelId)
  }

  filterSpan = (text) => {
    // const textArr = text.replace(/\<span.*?\>.+?\<\/span\>/g, "");

    // if (textArr) {
    //   newText = textArr[1] + textArr[2] + textArr[3]
    // } else {
    //   newText = text
    // }
    return text.replace(/\<span.*?\>.+?\<\/span\>/g, "");

  }

  render() {
    const {
      id, name, fileType, username, timestamp, messageId,
      channelId, fileSourceChannel, urlPrivateDownload,
      mimeType, // 文件类型
      urlOrigin,  // 视频地址
      firstFrame, // 首帧图片
      onForward,
    } = this.props;
    const {isStared, isThumbed, thumbNum} = this.state
    const sfDate = fullTime(timestamp);
    const imageType = ['png', 'jpe', 'jpeg', 'jpg', 'bmp', 'gif'];

    const isImage = imageType.includes(fileType); // 是否照片


    return (<li className={`${css.item} clearfix`}>
      <div className={css.info}>
        {typeof mimeType === 'string' && mimeType.includes('video/') ?
          <div className={css.avatar}>
            <video
              controls
              muted
              preload
              poster={firstFrame}
              className={css.video}
              src={urlOrigin}
            >
              抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href={urlPrivateDownload}>下载</a>并用你喜欢的播放器观看!
            </video>
          </div> :
          <div
            className={`${css.avatar} ${isImage ? css.picture : css.attachment}`}
          >
            <FileAvatar file={this.props}/>
            {isImage ?
              <div>
                <div className={css.imageName}/>
                <div className={css.imgNameDiv} title={this.filterSpan(name)}>
                  <PlainMessage text={name}/>
                </div>

                {/*<p title={this.filterSpan(name)}>{fileName}</p>*/}
              </div>
              : <div className={css.fileNameDiv} title={this.filterSpan(name)}><PlainMessage text={name}/></div>
            }
          </div>
        }
        <a
          onClick={this.onUpVote}
          className={`${css.upvote} ${isThumbed ? '' : css.vote}`}
        >
          <i className="kmfl-iconfont kmfl-icon-upvote-active"/>
          <span>{thumbNum}</span>
        </a>
      </div>
      <div className={css.msg}>
        <p className={css.desc}>{sfDate}</p>
        <p className={css.desc}>{this.props.isPrivate ? '' : username}</p>
      </div>
      <div className={css.handle}>
        <a onClick={this.onDownload}>
          <i className="kmfl-iconfont kmfl-icon-download"/>
        </a>
        <a onClick={() => {
          onForward(messageId)
        }}>
          <i className="kmfl-iconfont kmfl-icon-forward"/>
        </a>
        <a className={isStared ? css.favorited : ''} onClick={this.onFavorite}>
          <i className={isStared ? 'kmfl-iconfont kmfl-icon-favorite-active' : 'kmfl-iconfont kmfl-icon-favorite'}/>
        </a>
      </div>
    </li>)
  }
}

export default FileItem;