file-mng

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