React File Manager - Toolbar and Context Menu

import React, { useCallback, useRef } from 'react'; import FileManager, { Permissions, Toolbar, ContextMenu, Item, FileSelectionItem, ItemView, Details, Column, } from 'devextreme-react/file-manager'; import { fileItems, getItemInfo } from './data.js'; export default function App() { const fileManagerRef = useRef(null); const createFile = useCallback((fileExtension, directory = fileManagerRef?.current ?.instance() ?.getCurrentDirectory()) => { const newItem = { __KEY__: Date.now(), name: `New file${fileExtension}`, isDirectory: false, size: 0, }; if (!directory?.isDirectory) { return false; } let array; if (!directory?.dataItem) { array = fileItems; } else { array = directory.dataItem.items; if (!array) { array = []; directory.dataItem.items = array; } } array.push(newItem); return true; }, []); const updateCategory = useCallback((newCategory, directory, viewArea) => { let items = null; if (viewArea === 'navPane') { items = [directory]; } else { items = fileManagerRef?.current?.instance()?.getSelectedItems(); } items?.forEach((item) => { if (item.dataItem) { item.dataItem.category = newCategory; } }); return items && items.length > 0; }, []); const onItemClick = useCallback( ({ itemData, viewArea, fileSystemItem }) => { let updated = false; const { extension, category } = getItemInfo(itemData.text); if (extension) { updated = createFile(extension, fileSystemItem); } else if (category !== undefined) { updated = updateCategory(category, fileSystemItem, viewArea); } if (updated) { fileManagerRef?.current?.instance()?.refresh(); } }, [createFile, updateCategory], ); const getNewFileMenuOptions = useCallback( () => ({ items: [ { text: 'Create new file', icon: 'plus', items: [ { text: 'Text Document', extension: '.txt', }, { text: 'RTF Document', extension: '.rtf', }, { text: 'Spreadsheet', extension: '.xls', }, ], }, ], onItemClick, }), [onItemClick], ); const getChangeCategoryMenuOptions = useCallback( () => ({ items: [ { text: 'Category', icon: 'tags', items: [ { text: 'Work', category: 'Work', }, { text: 'Important', category: 'Important', }, { text: 'Home', category: 'Home', }, { text: 'None', category: '', }, ], }, ], onItemClick, }), [onItemClick], ); return ( <FileManager ref={fileManagerRef} fileSystemProvider={fileItems} onContextMenuItemClick={onItemClick} height={450} > <Permissions create={true} delete={true} rename={true} download={true} ></Permissions> <ItemView showParentFolder={false}> <Details> <Column dataField="thumbnail"></Column> <Column dataField="name"></Column> <Column dataField="category" caption="Category" width="95" ></Column> <Column dataField="dateModified"></Column> <Column dataField="size"></Column> </Details> </ItemView> <Toolbar> <Item name="showNavPane" visible={true} /> <Item name="separator" /> <Item name="create" /> <Item widget="dxMenu" location="before" options={getNewFileMenuOptions()} /> <Item name="refresh" /> <Item name="separator" location="after" /> <Item name="switchView" /> <FileSelectionItem name="rename" /> <FileSelectionItem name="separator" /> <FileSelectionItem name="delete" /> <FileSelectionItem name="separator" /> <FileSelectionItem widget="dxMenu" location="before" options={getChangeCategoryMenuOptions()} /> <FileSelectionItem name="refresh" /> <FileSelectionItem name="clearSelection" /> </Toolbar> <ContextMenu> <Item name="create" /> <Item text="Create new file" icon="plus" > <Item text="Text Document" /> <Item text="RTF Document" /> <Item text="Spreadsheet" /> </Item> <Item name="rename" beginGroup /> <Item name="delete" /> <Item text="Category" icon="tags" beginGroup > <Item text="Work" /> <Item text="Important" /> <Item text="Home" /> <Item text="None" /> </Item> <Item name="refresh" /> </ContextMenu> </FileManager> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const fileItems = [{ name: 'Documents', isDirectory: true, category: 'Work', items: [{ name: 'Projects', isDirectory: true, category: 'Work', items: [{ name: 'About.rtf', isDirectory: false, size: 1024, }, { name: 'Passwords.rtf', isDirectory: false, category: 'Important', size: 2048, }], }, { name: 'About.xml', isDirectory: false, size: 1024, }, { name: 'Managers.rtf', isDirectory: false, size: 2048, }, { name: 'ToDo.txt', isDirectory: false, size: 3072, }], }, { name: 'Images', isDirectory: true, category: 'Home', items: [{ name: 'logo.png', isDirectory: false, size: 20480, }, { name: 'banner.gif', isDirectory: false, size: 10240, }], }, { name: 'System', isDirectory: true, category: 'Important', items: [{ name: 'Employees.txt', isDirectory: false, category: 'Important', size: 3072, }, { name: 'PasswordList.txt', isDirectory: false, category: 'Important', size: 5120, }], }, { name: 'Description.rtf', isDirectory: false, size: 1024, }, { name: 'Description.txt', isDirectory: false, size: 2048, }]; const fileExtensions = { 'Text Document': '.txt', 'RTF Document': '.rtf', Spreadsheet: '.xls', } as const; type FileExtensionName = keyof typeof fileExtensions; const categories = ['Work', 'Important', 'Home', 'None']; export function getItemInfo(name: FileExtensionName) { const extension = fileExtensions[name]; const category = extension ?? categories.find((cat) => cat === name); return { extension, category, }; }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const fileItems = [ { name: 'Documents', isDirectory: true, category: 'Work', items: [ { name: 'Projects', isDirectory: true, category: 'Work', items: [ { name: 'About.rtf', isDirectory: false, size: 1024, }, { name: 'Passwords.rtf', isDirectory: false, category: 'Important', size: 2048, }, ], }, { name: 'About.xml', isDirectory: false, size: 1024, }, { name: 'Managers.rtf', isDirectory: false, size: 2048, }, { name: 'ToDo.txt', isDirectory: false, size: 3072, }, ], }, { name: 'Images', isDirectory: true, category: 'Home', items: [ { name: 'logo.png', isDirectory: false, size: 20480, }, { name: 'banner.gif', isDirectory: false, size: 10240, }, ], }, { name: 'System', isDirectory: true, category: 'Important', items: [ { name: 'Employees.txt', isDirectory: false, category: 'Important', size: 3072, }, { name: 'PasswordList.txt', isDirectory: false, category: 'Important', size: 5120, }, ], }, { name: 'Description.rtf', isDirectory: false, size: 1024, }, { name: 'Description.txt', isDirectory: false, size: 2048, }, ]; const fileExtensions = { 'Text Document': '.txt', 'RTF Document': '.rtf', Spreadsheet: '.xls', }; const categories = ['Work', 'Important', 'Home', 'None']; export function getItemInfo(name) { const extension = fileExtensions[name]; const category = extension ?? categories.find((cat) => cat === name); return { extension, category, }; }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>