From 26e273acf32ab6d5f99da48b8619fec75b2ad341 Mon Sep 17 00:00:00 2001 From: Alexey Kuznetsov Date: Fri, 23 Jul 2021 02:42:14 +0500 Subject: [PATCH 1/5] feat: unify rename modal --- .../shared/file-browser/folder/folder.jsx | 14 +++++++------- .../file-browser/rename-folder-modal/index.js | 1 - .../shared/file-browser/rename-item-modal/index.js | 1 + .../rename-item-modal.jsx} | 10 +++++----- .../rename-item-modal.module.scss} | 0 5 files changed, 13 insertions(+), 13 deletions(-) delete mode 100644 templates/frontend/src/components/shared/file-browser/rename-folder-modal/index.js create mode 100644 templates/frontend/src/components/shared/file-browser/rename-item-modal/index.js rename templates/frontend/src/components/shared/file-browser/{rename-folder-modal/rename-folder-modal.jsx => rename-item-modal/rename-item-modal.jsx} (90%) rename templates/frontend/src/components/shared/file-browser/{rename-folder-modal/rename-folder-modal.module.scss => rename-item-modal/rename-item-modal.module.scss} (100%) diff --git a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx index 0a04e749..9de4db13 100644 --- a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx +++ b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx @@ -5,7 +5,7 @@ import Dropdown from 'components/shared/dropdown'; import AddFileModal from 'components/shared/file-browser/add-file-modal'; import AddFolderModal from 'components/shared/file-browser/add-folder-modal'; import DeleteFolderModal from 'components/shared/file-browser/delete-folder-modal'; -import RenameFolderModal from 'components/shared/file-browser/rename-folder-modal'; +import RenameItemModal from 'components/shared/file-browser/rename-item-modal'; import TreeRecursive from 'components/shared/file-browser/tree-recursive'; import ArrowSvg from 'icons/arrow-down.inline.svg'; import DotsIcon from 'icons/dots.inline.svg'; @@ -73,7 +73,7 @@ const Folder = ({ const [isAddFileModalOpen, setIsAddFileModalOpen] = useState(false); const [isAddFolderModalOpen, setIsAddFolderModalOpen] = useState(false); - const [isRenameFolderModalOpen, setIsRenameFolderModalOpen] = useState(false); + const [isRenameItemModalOpen, setIsRenameItemModalOpen] = useState(false); const [isDeleteFolderModalOpen, setIsDeleteFolderModalOpen] = useState(false); const menuItems = [ @@ -87,7 +87,7 @@ const Folder = ({ }, { text: 'Rename', - onClick: () => setIsRenameFolderModalOpen(true), + onClick: () => setIsRenameItemModalOpen(true), }, { text: 'Delete', @@ -143,11 +143,11 @@ const Folder = ({ onSave={(folderName) => onAddFolder(folderName, folder.id)} /> )} - {isRenameFolderModalOpen && ( - setIsRenameFolderModalOpen(false)} + isOpen={isRenameItemModalOpen} + onClose={() => setIsRenameItemModalOpen(false)} onSave={(newName) => onRenameFolder(newName, folder.id)} /> )} diff --git a/templates/frontend/src/components/shared/file-browser/rename-folder-modal/index.js b/templates/frontend/src/components/shared/file-browser/rename-folder-modal/index.js deleted file mode 100644 index 440e8e10..00000000 --- a/templates/frontend/src/components/shared/file-browser/rename-folder-modal/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './rename-folder-modal'; diff --git a/templates/frontend/src/components/shared/file-browser/rename-item-modal/index.js b/templates/frontend/src/components/shared/file-browser/rename-item-modal/index.js new file mode 100644 index 00000000..5cfba6a7 --- /dev/null +++ b/templates/frontend/src/components/shared/file-browser/rename-item-modal/index.js @@ -0,0 +1 @@ +export { default } from './rename-item-modal'; diff --git a/templates/frontend/src/components/shared/file-browser/rename-folder-modal/rename-folder-modal.jsx b/templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.jsx similarity index 90% rename from templates/frontend/src/components/shared/file-browser/rename-folder-modal/rename-folder-modal.jsx rename to templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.jsx index 09ef9541..691d1cf2 100644 --- a/templates/frontend/src/components/shared/file-browser/rename-folder-modal/rename-folder-modal.jsx +++ b/templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.jsx @@ -10,7 +10,7 @@ import Input from 'components/shared/input'; import Modal from 'components/shared/modal'; import ModalPortal from 'components/shared/modal-portal'; -import styles from './rename-folder-modal.module.scss'; +import styles from './rename-item-modal.module.scss'; const schema = yup.object().shape({ newName: yup @@ -23,7 +23,7 @@ const schema = yup.object().shape({ const cx = classNames.bind(styles); -const RenameFolderModal = (props) => { +const RenameItemModal = (props) => { const { name, isOpen, onClose, onSave } = props; const { register, handleSubmit, clearErrors, errors } = useForm({ @@ -62,17 +62,17 @@ const RenameFolderModal = (props) => { ); }; -RenameFolderModal.propTypes = { +RenameItemModal.propTypes = { name: PropTypes.string.isRequired, isOpen: PropTypes.bool, onClose: PropTypes.func, onSave: PropTypes.func, }; -RenameFolderModal.defaultProps = { +RenameItemModal.defaultProps = { isOpen: false, onClose: () => {}, onSave: () => {}, }; -export default RenameFolderModal; +export default RenameItemModal; diff --git a/templates/frontend/src/components/shared/file-browser/rename-folder-modal/rename-folder-modal.module.scss b/templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.module.scss similarity index 100% rename from templates/frontend/src/components/shared/file-browser/rename-folder-modal/rename-folder-modal.module.scss rename to templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.module.scss From 75e9a46bc8a9419b6eea652b1044c934e69ca670 Mon Sep 17 00:00:00 2001 From: Alexey Kuznetsov Date: Fri, 23 Jul 2021 02:43:25 +0500 Subject: [PATCH 2/5] feat: add rename file functionality --- .../shared/file-browser/file-browser.jsx | 8 ++++ .../shared/file-browser/file/file.jsx | 44 ++++++++++++++----- .../shared/file-browser/file/file.module.scss | 39 +++++++++++++++- .../tree-recursive/tree-recursive.jsx | 2 + .../frontend/src/contexts/files-provider.jsx | 7 +++ .../src/utils/files-provider-helpers.js | 9 ++++ 6 files changed, 97 insertions(+), 12 deletions(-) diff --git a/templates/frontend/src/components/shared/file-browser/file-browser.jsx b/templates/frontend/src/components/shared/file-browser/file-browser.jsx index c5387c0a..518d9a8a 100644 --- a/templates/frontend/src/components/shared/file-browser/file-browser.jsx +++ b/templates/frontend/src/components/shared/file-browser/file-browser.jsx @@ -157,6 +157,13 @@ const FileBrowser = ({ readOnly = false, onCreateManually, className }) => { }); }; + const handleRenameFile = (newName, fileId) => { + filesDispatch({ + type: 'renameFile', + fileId, + newName, + }); + }; const handleDeleteItem = (itemId) => { filesDispatch({ type: 'deleteItem', @@ -208,6 +215,7 @@ const FileBrowser = ({ readOnly = false, onCreateManually, className }) => { onAddFolder={!readOnly ? handleAddFolder : noop} onDropFile={!readOnly ? handleDropFile : noop} onRenameFolder={!readOnly ? handleRenameFolder : noop} + onRenameFile={!readOnly ? handleRenameFile : noop} onItemDelete={!readOnly ? handleDeleteItem : noop} onOpenFile={handleOpenFile} onDragStart={!readOnly ? handleDragStart : noop} diff --git a/templates/frontend/src/components/shared/file-browser/file/file.jsx b/templates/frontend/src/components/shared/file-browser/file/file.jsx index 2f6039e8..5777d18f 100644 --- a/templates/frontend/src/components/shared/file-browser/file/file.jsx +++ b/templates/frontend/src/components/shared/file-browser/file/file.jsx @@ -1,8 +1,10 @@ import classNames from 'classnames/bind'; import { useEffect, useRef, useState } from 'react'; +import Dropdown from 'components/shared/dropdown'; +import RenameItemModal from 'components/shared/file-browser/rename-item-modal'; import { useFiles } from 'contexts/files-provider'; -import CloseSvg from 'icons/close.inline.svg'; +import DotsIcon from 'icons/dots.inline.svg'; import { getIconByFilename } from 'utils/language'; import DeleteFileModal from '../delete-file-modal'; @@ -21,6 +23,7 @@ const File = ({ onDelete, onDragStart, onDragEnd, + onRenameFile, level, readOnly, }) => { @@ -31,6 +34,7 @@ const File = ({ } = useFiles(); const [isDeleteFileModalOpen, setIsDeleteFileModalOpen] = useState(false); + const [isRenameItemModalOpen, setIsRenameItemModalOpen] = useState(false); useEffect(() => { const fileElem = fileRef.current; @@ -54,12 +58,6 @@ const File = ({ onDelete(file.id); }; - const handleDeleteClick = (evt) => { - evt.preventDefault(); - evt.stopPropagation(); - setIsDeleteFileModalOpen(true); - }; - const handleDragStart = (evt) => { onOpen(null); evt.preventDefault(); @@ -68,7 +66,17 @@ const File = ({ }; const Icon = getIconByFilename(file.data.name); - + const menuItems = [ + { + text: 'Rename', + onClick: () => setIsRenameItemModalOpen(true), + }, + { + text: 'Delete', + onClick: () => setIsDeleteFileModalOpen(true), + theme: 'danger', + }, + ]; return (
)} + {isRenameItemModalOpen && ( + setIsRenameItemModalOpen(false)} + onSave={(newName) => onRenameFile(newName, file.id)} + /> + )}
{file.data.name} {!readOnly && ( - + + + )}
); diff --git a/templates/frontend/src/components/shared/file-browser/file/file.module.scss b/templates/frontend/src/components/shared/file-browser/file/file.module.scss index ebc9784e..e6b27fb6 100644 --- a/templates/frontend/src/components/shared/file-browser/file/file.module.scss +++ b/templates/frontend/src/components/shared/file-browser/file/file.module.scss @@ -15,9 +15,11 @@ &:hover { background-color: $color-secondary-black; + border-radius: 2px; - & .button-delete { + .options { visibility: visible; + opacity: 1; } } @@ -72,3 +74,38 @@ } } } + +.options { + position: absolute; + top: 50%; + right: 5px; + z-index: 1; + display: flex; + align-items: center; + justify-content: flex-end; + height: 12px; + padding-top: 7px; + padding-right: 10px; + padding-bottom: 7px; + padding-left: 10px; + margin-left: auto; + cursor: pointer; + visibility: hidden; + opacity: 0; + transform: translateY(-50%); + + &:hover { + circle { + fill: $color-white; + } + } +} + +.options-icon { + height: 15px; + fill: $color-grey; +} + +.options-menu { + min-width: 100px; +} diff --git a/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx b/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx index d46777c2..ffb5912e 100644 --- a/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx +++ b/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx @@ -16,6 +16,7 @@ const TreeRecursive = ({ onAddFile, onAddFolder, onRenameFolder, + onRenameFile, onDragStart, onDragEnd, level, @@ -37,6 +38,7 @@ const TreeRecursive = ({ onOpen={onOpenFile} onDragStart={onDragStart} onDragEnd={onDragEnd} + onRenameFile={onRenameFile} /> ); } diff --git a/templates/frontend/src/contexts/files-provider.jsx b/templates/frontend/src/contexts/files-provider.jsx index 96b2feaf..4fcc9b95 100644 --- a/templates/frontend/src/contexts/files-provider.jsx +++ b/templates/frontend/src/contexts/files-provider.jsx @@ -4,6 +4,7 @@ import { addItem, moveItem, renameFolder, + renameFile, deleteItem, changeFileContent, changeFileLanguage, @@ -43,6 +44,12 @@ export const filesReducer = (state, action) => { hasChangedFiles: true, ...renameFolder({ files: state.files, folderId: action.folderId, newName: action.newName }), }; + case 'renameFile': + return { + ...state, + hasChangedFiles: true, + ...renameFile({ files: state.files, fileId: action.fileId, newName: action.newName }), + }; case 'deleteItem': return { ...state, diff --git a/templates/frontend/src/utils/files-provider-helpers.js b/templates/frontend/src/utils/files-provider-helpers.js index 807dbe9e..c204b4c7 100644 --- a/templates/frontend/src/utils/files-provider-helpers.js +++ b/templates/frontend/src/utils/files-provider-helpers.js @@ -93,6 +93,15 @@ export const renameFolder = ({ files, folderId, newName }) => { return { files: newData }; }; +/** Changes file name */ +export const renameFile = ({ files, fileId, newName }) => { + let newData = cloneDeep(files); + newData = newData.map((item) => + item.id === fileId ? { ...item, data: { ...item.data, name: newName } } : item + ); + return { files: newData }; +}; + export const deleteItem = ({ files, itemId, isFileOpen = false }) => { let newData = cloneDeep(files); const filePath = findFolderPathByKey(newData, itemId); From e5a8a7e38aad1c8cd9d0a9600c30641f6066ae47 Mon Sep 17 00:00:00 2001 From: Alexey Kuznetsov Date: Fri, 23 Jul 2021 02:49:48 +0500 Subject: [PATCH 3/5] feat: add label parameter to RenameItemModal --- .../src/components/shared/file-browser/file/file.jsx | 1 + .../src/components/shared/file-browser/folder/folder.jsx | 1 + .../file-browser/rename-item-modal/rename-item-modal.jsx | 6 +++--- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/templates/frontend/src/components/shared/file-browser/file/file.jsx b/templates/frontend/src/components/shared/file-browser/file/file.jsx index 5777d18f..b0db39cb 100644 --- a/templates/frontend/src/components/shared/file-browser/file/file.jsx +++ b/templates/frontend/src/components/shared/file-browser/file/file.jsx @@ -97,6 +97,7 @@ const File = ({ )} {isRenameItemModalOpen && ( setIsRenameItemModalOpen(false)} diff --git a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx index 9de4db13..68f0d6fe 100644 --- a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx +++ b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx @@ -145,6 +145,7 @@ const Folder = ({ )} {isRenameItemModalOpen && ( setIsRenameItemModalOpen(false)} diff --git a/templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.jsx b/templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.jsx index 691d1cf2..228fcbc9 100644 --- a/templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.jsx +++ b/templates/frontend/src/components/shared/file-browser/rename-item-modal/rename-item-modal.jsx @@ -24,7 +24,7 @@ const schema = yup.object().shape({ const cx = classNames.bind(styles); const RenameItemModal = (props) => { - const { name, isOpen, onClose, onSave } = props; + const { name, isOpen, onClose, onSave, label } = props; const { register, handleSubmit, clearErrors, errors } = useForm({ defaultValues: { newName: name }, @@ -40,10 +40,10 @@ const RenameItemModal = (props) => { return ( - +
Date: Mon, 2 Aug 2021 01:31:07 +0500 Subject: [PATCH 4/5] chore: join renaming logic into common process --- .../shared/file-browser/file-browser.jsx | 16 +++------ .../shared/file-browser/file/file.jsx | 5 ++- .../shared/file-browser/folder/folder.jsx | 7 ++-- .../tree-recursive/tree-recursive.jsx | 7 ++-- .../frontend/src/contexts/files-provider.jsx | 13 ++----- .../src/utils/files-provider-helpers.js | 35 +++++++------------ 6 files changed, 28 insertions(+), 55 deletions(-) diff --git a/templates/frontend/src/components/shared/file-browser/file-browser.jsx b/templates/frontend/src/components/shared/file-browser/file-browser.jsx index 518d9a8a..e1657e41 100644 --- a/templates/frontend/src/components/shared/file-browser/file-browser.jsx +++ b/templates/frontend/src/components/shared/file-browser/file-browser.jsx @@ -149,21 +149,14 @@ const FileBrowser = ({ readOnly = false, onCreateManually, className }) => { }); }; - const handleRenameFolder = (newName, folderId) => { + const handleRenameItem = (newName, itemId) => { filesDispatch({ - type: 'renameFolder', - folderId, + type: 'renameItem', + itemId, newName, }); }; - const handleRenameFile = (newName, fileId) => { - filesDispatch({ - type: 'renameFile', - fileId, - newName, - }); - }; const handleDeleteItem = (itemId) => { filesDispatch({ type: 'deleteItem', @@ -214,8 +207,7 @@ const FileBrowser = ({ readOnly = false, onCreateManually, className }) => { onAddFile={!readOnly ? handleAddFile : noop} onAddFolder={!readOnly ? handleAddFolder : noop} onDropFile={!readOnly ? handleDropFile : noop} - onRenameFolder={!readOnly ? handleRenameFolder : noop} - onRenameFile={!readOnly ? handleRenameFile : noop} + onRenameItem={!readOnly ? handleRenameItem : noop} onItemDelete={!readOnly ? handleDeleteItem : noop} onOpenFile={handleOpenFile} onDragStart={!readOnly ? handleDragStart : noop} diff --git a/templates/frontend/src/components/shared/file-browser/file/file.jsx b/templates/frontend/src/components/shared/file-browser/file/file.jsx index b0db39cb..478fc34d 100644 --- a/templates/frontend/src/components/shared/file-browser/file/file.jsx +++ b/templates/frontend/src/components/shared/file-browser/file/file.jsx @@ -23,7 +23,7 @@ const File = ({ onDelete, onDragStart, onDragEnd, - onRenameFile, + onRenameItem, level, readOnly, }) => { @@ -100,8 +100,7 @@ const File = ({ label="file" name={file.data.name} isOpen={isRenameItemModalOpen} - onClose={() => setIsRenameItemModalOpen(false)} - onSave={(newName) => onRenameFile(newName, file.id)} + onSave={(newName) => onRenameItem(newName, file.id)} /> )}
diff --git a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx index 68f0d6fe..47898ae0 100644 --- a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx +++ b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx @@ -21,7 +21,7 @@ const Folder = ({ onOpenFile, onAddFile, onAddFolder, - onRenameFolder, + onRenameItem, onDragStart, onDragEnd, level, @@ -148,8 +148,7 @@ const Folder = ({ label="folder" name={folder.data.name} isOpen={isRenameItemModalOpen} - onClose={() => setIsRenameItemModalOpen(false)} - onSave={(newName) => onRenameFolder(newName, folder.id)} + onSave={(newName) => onRenameItem(newName, folder.id)} /> )} {isDeleteFolderModalOpen && ( @@ -175,7 +174,7 @@ const Folder = ({ onAddFile={onAddFile} onAddFolder={onAddFolder} onOpenFile={onOpenFile} - onRenameFolder={onRenameFolder} + onRenameItem={onRenameItem} onDragStart={onDragStart} onDragEnd={onDragEnd} /> diff --git a/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx b/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx index ffb5912e..3ee912db 100644 --- a/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx +++ b/templates/frontend/src/components/shared/file-browser/tree-recursive/tree-recursive.jsx @@ -15,8 +15,7 @@ const TreeRecursive = ({ onOpenFile, onAddFile, onAddFolder, - onRenameFolder, - onRenameFile, + onRenameItem, onDragStart, onDragEnd, level, @@ -38,7 +37,7 @@ const TreeRecursive = ({ onOpen={onOpenFile} onDragStart={onDragStart} onDragEnd={onDragEnd} - onRenameFile={onRenameFile} + onRenameItem={onRenameItem} /> ); } @@ -53,7 +52,7 @@ const TreeRecursive = ({ onAddFile={onAddFile} onAddFolder={onAddFolder} onOpenFile={onOpenFile} - onRenameFolder={onRenameFolder} + onRenameItem={onRenameItem} onDragStart={onDragStart} onDragEnd={onDragEnd} /> diff --git a/templates/frontend/src/contexts/files-provider.jsx b/templates/frontend/src/contexts/files-provider.jsx index 4fcc9b95..0158fae0 100644 --- a/templates/frontend/src/contexts/files-provider.jsx +++ b/templates/frontend/src/contexts/files-provider.jsx @@ -3,8 +3,7 @@ import React, { useContext, useReducer } from 'react'; import { addItem, moveItem, - renameFolder, - renameFile, + renameItem, deleteItem, changeFileContent, changeFileLanguage, @@ -38,17 +37,11 @@ export const filesReducer = (state, action) => { hasChangedFiles: true, ...moveItem({ files: state.files, item: action.item, newFolderId: action.newFolderId }), }; - case 'renameFolder': + case 'renameItem': return { ...state, hasChangedFiles: true, - ...renameFolder({ files: state.files, folderId: action.folderId, newName: action.newName }), - }; - case 'renameFile': - return { - ...state, - hasChangedFiles: true, - ...renameFile({ files: state.files, fileId: action.fileId, newName: action.newName }), + ...renameItem({ files: state.files, itemId: action.itemId, newName: action.newName }), }; case 'deleteItem': return { diff --git a/templates/frontend/src/utils/files-provider-helpers.js b/templates/frontend/src/utils/files-provider-helpers.js index c204b4c7..d4ddd666 100644 --- a/templates/frontend/src/utils/files-provider-helpers.js +++ b/templates/frontend/src/utils/files-provider-helpers.js @@ -33,7 +33,7 @@ const addFile = (files, fileData, parentFolderId = null) => { newFiles.push(file); sortFiles(newFiles); } else { - const folderPath = findFolderPathByKey(newFiles, parentFolderId); + const folderPath = findItemPathByKey(newFiles, parentFolderId); const lastFolder = folderPath[folderPath.length - 1]; lastFolder.data.files.push(file); sortFiles(lastFolder.data.files); @@ -55,7 +55,7 @@ const addFolder = (files, folderData, parentFolderId = null) => { newFiles.push(folder); sortFiles(newFiles); } else { - const folderPath = findFolderPathByKey(newFiles, parentFolderId); + const folderPath = findItemPathByKey(newFiles, parentFolderId); const lastFolder = folderPath[folderPath.length - 1]; lastFolder.data.files.push(folder); sortFiles(lastFolder.data.files); @@ -75,36 +75,27 @@ export const addItem = ({ files, data, parentFolderId = null }) => { }; /** Changes folder name */ -export const renameFolder = ({ files, folderId, newName }) => { +export const renameItem = ({ files, itemId, newName }) => { let newData = cloneDeep(files); - const filePath = findFolderPathByKey(newData, folderId); + const itemPath = findItemPathByKey(newData, itemId); // if file/folder in root directory - if (filePath.length === 1) { + if (itemPath.length === 1) { newData = newData.map((item) => - item.id === folderId ? { ...item, data: { ...item.data, name: newName } } : item + item.id === itemId ? { ...item, data: { ...item.data, name: newName } } : item ); // if has parent folder } else { - const parentFolder = filePath[filePath.length - 2]; + const parentFolder = itemPath[itemPath.length - 2]; parentFolder.data.files = parentFolder.data.files.map((item) => - item.id === folderId ? { ...item, data: { ...item.data, name: newName } } : item + item.id === itemId ? { ...item, data: { ...item.data, name: newName } } : item ); } return { files: newData }; }; -/** Changes file name */ -export const renameFile = ({ files, fileId, newName }) => { - let newData = cloneDeep(files); - newData = newData.map((item) => - item.id === fileId ? { ...item, data: { ...item.data, name: newName } } : item - ); - return { files: newData }; -}; - export const deleteItem = ({ files, itemId, isFileOpen = false }) => { let newData = cloneDeep(files); - const filePath = findFolderPathByKey(newData, itemId); + const filePath = findItemPathByKey(newData, itemId); // if file/folder in root directory if (filePath.length === 1) { newData = newData.filter((item) => item.id !== itemId); @@ -130,7 +121,7 @@ export const moveItem = ({ files, item, newFolderId = null }) => { newFiles.push(item); sortFiles(newFiles); } else { - const folderPath = findFolderPathByKey(newFiles, newFolderId); + const folderPath = findItemPathByKey(newFiles, newFolderId); const lastFolder = folderPath[folderPath.length - 1]; lastFolder.data.files.push(item); sortFiles(lastFolder.data.files); @@ -161,13 +152,13 @@ export const createFolder = (data) => ({ }); /** Find path to folder with id=folderId */ -export const findFolderPathByKey = (data, folderId, path = []) => { +export const findItemPathByKey = (data, folderId, path = []) => { for (const item of data) { if (item.id === folderId) { return [...path, item]; } if (item.data.files) { - const result = findFolderPathByKey(item.data.files, folderId, [...path, item]); + const result = findItemPathByKey(item.data.files, folderId, [...path, item]); if (result) { return result; } @@ -212,7 +203,7 @@ export const getFilePath = (files, fileId) => { return null; } - const path = findFolderPathByKey(files, fileId); + const path = findItemPathByKey(files, fileId); return path ? path.map((item) => item.data.name).join('/') : null; }; From 5929677dfb6f8f0493cba20547ee8d027312eb71 Mon Sep 17 00:00:00 2001 From: Alexey Kuznetsov Date: Mon, 2 Aug 2021 01:32:19 +0500 Subject: [PATCH 5/5] chore: apply useCallback hook for close modal handlers --- .../shared/file-browser/file/file.jsx | 9 ++++++-- .../shared/file-browser/folder/folder.jsx | 23 ++++++++++++++++--- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/templates/frontend/src/components/shared/file-browser/file/file.jsx b/templates/frontend/src/components/shared/file-browser/file/file.jsx index 478fc34d..9ad24332 100644 --- a/templates/frontend/src/components/shared/file-browser/file/file.jsx +++ b/templates/frontend/src/components/shared/file-browser/file/file.jsx @@ -1,5 +1,5 @@ import classNames from 'classnames/bind'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState, useCallback } from 'react'; import Dropdown from 'components/shared/dropdown'; import RenameItemModal from 'components/shared/file-browser/rename-item-modal'; @@ -77,6 +77,10 @@ const File = ({ theme: 'danger', }, ]; + + const handleCloseDeleteFileModalClick = useCallback(() => setIsDeleteFileModalOpen(false), []); + const handleCloseRenameFileModalClick = useCallback(() => setIsRenameItemModalOpen(false), []); + return (
setIsDeleteFileModalOpen(false)} + onClose={handleCloseDeleteFileModalClick} onSave={handleDelete} /> )} @@ -100,6 +104,7 @@ const File = ({ label="file" name={file.data.name} isOpen={isRenameItemModalOpen} + onClose={handleCloseRenameFileModalClick} onSave={(newName) => onRenameItem(newName, file.id)} /> )} diff --git a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx index 47898ae0..392a7657 100644 --- a/templates/frontend/src/components/shared/file-browser/folder/folder.jsx +++ b/templates/frontend/src/components/shared/file-browser/folder/folder.jsx @@ -96,6 +96,22 @@ const Folder = ({ }, ]; + const handleCloseRenameItemModalClick = useCallback(() => { + setIsRenameItemModalOpen(false); + }, []); + + const handleCloseAddFolderModalClick = useCallback(() => { + setIsAddFolderModalOpen(false); + }, []); + + const handleCloseDeleteFolderModalClick = useCallback(() => { + setIsDeleteFolderModalOpen(false); + }, []); + + const handleCloseAddFileModalClick = useCallback(() => { + setIsAddFileModalOpen(false); + }, []); + return (
setIsAddFileModalOpen(false)} + onClose={handleCloseAddFileModalClick} onSave={(fileName) => onAddFile(fileName, folder.id)} /> )} {isAddFolderModalOpen && ( setIsAddFolderModalOpen(false)} + onClose={handleCloseAddFolderModalClick} onSave={(folderName) => onAddFolder(folderName, folder.id)} /> )} @@ -148,6 +164,7 @@ const Folder = ({ label="folder" name={folder.data.name} isOpen={isRenameItemModalOpen} + onClose={handleCloseRenameItemModalClick} onSave={(newName) => onRenameItem(newName, folder.id)} /> )} @@ -155,7 +172,7 @@ const Folder = ({ setIsDeleteFolderModalOpen(false)} + onClose={handleCloseDeleteFolderModalClick} onSave={() => onDelete(folder.id)} /> )}