file-manage

基于React框架的一套类似windows资源管理器的文件管理UI库，已经实现的功能如下：

• 拖拽上传文件、文件夹
• 文件右键菜单
• 框选文件（从空白处开始按下鼠标左键，拖拽到文件列表方可触发）
• 按指定规则排序

Installation

npm install file-mng

useage

import { FileManage } from 'file-mng'
// 导入样式
import 'file-mng/dist/style.css'
import { useRef } from 'react'

const App = () => {
  const actionRef = useRef()

  return (
    <div className='w-full h-screen'>
      <FileManage
        dataSource={[
          {
            filename: 'Paid.zip',
            size: 59882,
            updateTime: '2024-03-25 14:00:00',
            isFolder: false,
            key: '1',
          },
          {
            filename: 'Tick.txt',
            size: 581,
            updateTime: '2024-03-25 13:51:47',
            isFolder: false,
            key: '2',
          },
          {
            filename: 'Hook.pdf',
            size: 4122,
            updateTime: '2024-03-15 16:15:06',
            isFolder: false,
            key: '3',
          },
          {
            filename: '学习',
            size: 0,
            updateTime: '2024-03-21 16:55:06',
            isFolder: true,
            key: '4',
          },
        ]}
        columns={[
          {
            dataIndex: 'updateTime',
            title: '修改时间',
            sorter: true,
            sorterFormatter: value => {
              return new Date(value).valueOf()
            },
          },
          {
            dataIndex: 'size',
            title: '大小',
            sorter: true,
          },
        ]}
        actionRef={actionRef}
        contextMenuItems={[
          {
            label: '下载',
            onClick: () => {
              console.log(123)
            },
          },
          {
            label: '删除',
          },
          {
            label: '测试',
            children: [
              {
                label: '测试1',
                children: [
                  {
                    label: '测试2',
                    children: [
                      {
                        label: '测试3',
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ]}
        onRowClick={(...args) => {
          console.log(args)
        }}
        onRowDoubleClick={(...args) => {
          console.log(args)
        }}
        onSelect={(...args) => {
          console.log(args)
        }}
        selectedTableAlertRender={() => {
          return (
            <div className='pl-4 flex gap-x-4'>
              <span>删除</span>
              <span>下载</span>
            </div>
          )
        }}
        onDropSuccess={(records, to) => {
          console.log(records, to)
        }}
        onUpload={fileList => {
          console.log(fileList)
        }}
        paths={[
          {
            key: '1',
            label: '全部文件',
            onClick: path => {
              console.log(path)
            },
          },
          { key: '2', label: '测试' },
        ]}
        onBreadcrumbBack={() => {
          console.log(123)
        }}
      />
    </div>
  )
}

export default App

doc

| 参数 | 说明 | 类型 | 默认值 | | -------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------ | | *dataSource | 数据数组 | object[] | | | *columns | 表格列的配置描述 | {dataIndex:string, title:React.ReactNode, sorter?:boolean, sorterFormatter?:(value: any, data: IDateSourceItem) => number, render?:(value: any, data: IDateSourceItem) => React.ReactNode}[] | | | contextMenuItems | 右键菜单数组 | {label: React.ReactNode|((record: IDateSourceItem, menu: IContextMenuItem) => React.ReactNode),icon?: React.ReactNode,children?: IContextMenuItem[],onClick?: () => void }[] | | | selectedRowKeys | 指定选中项的 key 数组（传入该数组则完全受控） | string[] | | | needTableAlert | 是否需要表格弹出框 | boolean | true | | tableAlertRender | 表格弹出框整体渲染函数（needTableAlert为true才有效） | (selectedRowKeys: string[], selectedRows: IDateSourceItem[]) => React.ReactNode | | | selectedTableAlertRender | 有被选中项时的表格弹出框内容渲染函数（needTableAlert为true才有效） | (selectedRowKeys: string[], selectedRows: IDateSourceItem[]) => React.ReactNode | | | unSelectedTableAlertRender | 无被选中项时的表格弹出框内容渲染函数（needTableAlert为true才有效） | (selectedRowKeys: string[], selectedRows: IDateSourceItem[]) => React.ReactNode | | | paths | 面包屑数据数组 | {key: string, label: React.ReactNode, onClick?: (key: IPathItem) => void}[] | | | className | 容器的样式类 | | | | actionRef | 功能方法的引用，便于自定义触发 | MutableRefObject<{uploadFile: () => void, uploadFolder: () => void}> | | | onRowClick | 单击表格行触发 | (record: IDateSourceItem, index: number) => void | | | onRowDoubleClick | 双击表格行触发 | (record: IDateSourceItem, index: number) => void | | | onSelect | 用户手动选择/取消选择某行的回调 | (record: IDateSourceItem, flag: boolean, selectedRowKeys: string[]) => void | | | onSelectAll | 用户手动点击全选复选框的回调 | (flag: boolean, selectedRowKeys: string[]) => void | | | onDropSuccess | 拖拽成功时触发 | (records: IDateSourceItem[], to: IDateSourceItem) => void | | | onBreadcrumbBack | 面包屑点击返回上一级触发 | ()=>void | | | onUpload | 上传时触发，用于获取上传的文件列表 | (fileList: IFileItem[]) => void | | | | | | |

Tips

该库主容器宽高跟随父元素，使用时最好先定义一个父元素，设置好宽高，这样可以预留大量空白处，方便进行框选操作

import { FileManage } from 'file-mng'

const App = () => {
  return (
    // 外层设置好高度
    <div style={{ height: '100vh' }}> 
      <FileManage />
    </div>
  )
}
export default App