1.0.12 • Published 1 month ago
file-mng v1.0.12
file-manage
基于React框架的一套类似windows资源管理器的文件管理UI库，已经实现的功能如下：
- 拖拽上传文件、文件夹
- 文件右键菜单
- 框选文件（从空白处开始按下鼠标左键，拖拽到文件列表方可触发）
- 按指定规则排序
Installation
npm install file-mnguseage
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 Appdoc
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| *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