@beisen-phoenix/file-list

文件预览组件

显示文件预览的组件，此组件仅负责展示，没有内置功能。配合上传组件，可以组成上传加预览的功能

参数，详情请看 interface 定义

参数	说明	示例
files	文件列表	IPreviewItemFile[]
edit	列表是否可编辑，显示删除，下载按钮	boolean
tipStyle	用来设计tooltip的样式	React.CSSProperties
onDelete	点击删除按钮的回调，需要实现删除逻辑并更新files的值	(fileData: IPreviewItemFile) => void
onDownload	点击下载按钮的回调，需要实现下载逻辑	(fileData: IPreviewItemFile) => void
onClick	点击除删除和下载之外区域的事件回调	(fileData: IPreviewItemFile) => void
width	列表模式下可用，控制每项的宽度	string
layout	列表模式下可用，控制列表展示的方向	EListLayout

// 文件对象，定义请看下面的 【文件数据格式的定义】
 interface IPreviewItemFile extends IUploadFileType{
  deletable?: boolean
}

// 列表布局方式
export enum EListLayout {
  vertical = 'vertical',
  horizontal = 'horizontal'
}

interface IUploadFileType {
    name: string; // 文件名称
    status: EStatus; // 文件状态
    mediaType: string; // 文件类型
    previewUrl?: string; // 文件预览地址
    downloadUrl?: string; // 文件下载地址
    percent?: number; // 文件上传进度
    raw?: File; // 源文件对象
    id?: string; //后端文件id
    lid?: string; //前端生成的临时id
}

关于lid 与 id

在文件被选中并且没有上传完成的过程中，需要给文件数据一个标识，所以会临时生成一个lid = 文件名 + 时间戳，当文件上传完成并且后端返回文件对象之后，建议给文件数据追加上id作为后续操作的标识

代码示例： 只显示文件预览

import React from 'react';
import FilePreview, {ListView, IPreviewItemFile, EListLayout} from '../../src';
import {EStatus} from '@reacted/upload-intf'

const files: IPreviewItemFile[] = [
  {
    id: 'dfdsfds',
    name: 'xxxxxf放的开龙卷风fdfsfjdklsfjdsl.png',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.progress,
    mediaType: 'png',
    percent: 80
  },
  {
    id: 'fdsssss',
    name: '这个名字不很长.c',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.uploadFinish,
    mediaType: 'doc',
    percent: 100,
    deletable: true
  },
  {
    id: 'fds',
    name: '这个名字长啊长长长和啊.exe',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.done,
    mediaType: 'ppt',
    percent: 80 
  },
  {
    id: 'fdsss',
    name: '这个名字不很长.c',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.done,
    mediaType: 'doc',
    percent: 80,
    deletable: true
  },
  {
    id: 'fdsx',
    name: 'aaaabbbccdd.exe',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.error,
    mediaType: 'pnf',
    percent: 90
  }
];

export default function App(props: { url: string | ((f: any) => string) }) {
  return (
    <div style={{width: '60%'}}>
      <h3>块式预览</h3>
      <FilePreview files={files} edit />
      <h3>列表式：竖排</h3>
      <ListView files={files} edit width="400px"></ListView>
      <h3>列表式：横排</h3>
      <ListView files={files} layout={EListLayout.horizontal}></ListView>
    </div>
  );
}

代码示例： 上传 + 预览

import React, { useState, useCallback } from 'react';
import FilePreview, {ListView, EListLayout} from '../../src';
import Upload from '@beisen-phoenix/upload';
import {IUploadFileType, EMsgType} from '@reacted/upload-intf'

export default function App(props: { url: string | ((f: any) => string) }) {
  const [files, setFiles] = useState<IUploadFileType[]>([]);
  const handleChange = (files: IUploadFileType[]) => {
    console.log(files);
    setFiles(files);
  };
  const onError = useCallback(err => {
    let {log} = console;
    if (err.type === EMsgType.overLimit) {
      log('文件个数超出上限', err);
    }
    if (err.type === EMsgType.overSize) {
      log('文件体积超出上限',err);
    }
    if (err.type === EMsgType.networkFail) {
      log('网络出错', err);
    }
  }, []);

  const handleDelete = file => {
    let idx = files.findIndex(item => item.lid === file.lid);
    if (idx !== -1) {
      let newFiles = [...files.slice(0, idx), ...files.slice(idx + 1)];
      setFiles(newFiles);
    }
  };

  return (
    <div>
      <div>
        <Upload onChange={handleChange} onError={onError} url="hehe" files={files} multiple>
          <button>上传</button>
        </Upload>
      </div>
      <h3>块式列表</h3>
      <FilePreview files={files} edit onDelete={handleDelete} />
      <h3>列表式：竖排</h3>
      <ListView files={files} edit onDelete={handleDelete} width="50%"/>
      <h3>列表式：横排</h3>
      <ListView files={files} edit onDelete={handleDelete} layout={EListLayout.horizontal}/>
    </div>
  );
}