StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Basic working file rename modal

Browse source
This commit is contained in:
Dane Everitt 2019-08-02 22:22:01 -07:00
parent f4d0694670
commit 2716ff8841
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 120 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

22
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -7,14 +7,16 @@ import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons/faArrowsAltH';
import { faBalanceScaleLeft } from '@fortawesome/free-solid-svg-icons/faBalanceScaleLeft';
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
import RenameFileModal from '@/components/server/files/RenameFileModal';
type ModalType = 'rename' | 'move';
export default ({ file }: { file: FileObject }) => {
const menu = createRef<HTMLDivElement>();
const [ visible, setVisible ] = useState(false);
const [posX, setPosX] = useState(0);
const [ modal, setModal ] = useState<ModalType | null>(null);
const [ posX, setPosX ] = useState(0);
const windowListener = (e: MouseEvent) => {
if (e.button === 2 || !visible || !menu.current) {
@ -37,7 +39,7 @@ export default ({ file }: { file: FileObject }) => {
if (visible && menu.current) {
menu.current.setAttribute(
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`,
);
}
}, [ visible ]);
@ -54,18 +56,28 @@ export default ({ file }: { file: FileObject }) => {
e.preventDefault();
if (!visible) {
setPosX(e.clientX);
} else if (visible) {
setModal(null);
}
setVisible(!visible);
}}
>
<FontAwesomeIcon icon={faEllipsisH}/>
</div>
{visible &&
<React.Fragment>
<RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
</React.Fragment>
}
<CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
<div
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
ref={menu}
>
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
<div
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
onClick={() => setModal('rename')}
>
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
<span className={'ml-2'}>Rename</span>
</div>

9
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -9,6 +9,7 @@ import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom';
import Spinner from '@/components/elements/Spinner';
import FileObjectRow from '@/components/server/files/FileObjectRow';
import { getDirectoryFromHash } from '@/helpers';
export default () => {
const [ loading, setLoading ] = useState(true);
@ -16,12 +17,10 @@ export default () => {
const server = ServerContext.useStoreState(state => state.server.data!);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const currentDirectory = window.location.hash.replace(/^#(\/)+/, '/');
const load = () => {
setLoading(true);
clearFlashes();
loadDirectory(server.uuid, currentDirectory)
loadDirectory(server.uuid, getDirectoryFromHash())
.then(files => {
setFiles(files);
setLoading(false);
@ -37,7 +36,7 @@ export default () => {
});
};
const breadcrumbs = (): { name: string; path?: string }[] => currentDirectory.split('/')
const breadcrumbs = (): { name: string; path?: string }[] => getDirectoryFromHash().split('/')
.filter(directory => !!directory)
.map((directory, index, dirs) => {
if (index === dirs.length - 1) {
@ -87,7 +86,7 @@ export default () => {
<div>
{
files.map(file => (
<FileObjectRow key={file.name} directory={currentDirectory} file={file}/>
<FileObjectRow key={file.name} directory={getDirectoryFromHash()} file={file}/>
))
}
</div>

55
resources/scripts/components/server/files/RenameFileModal.tsx Normal file
View file

@ -0,0 +1,55 @@
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikActions } from 'formik';
import { FileObject } from '@/api/server/files/loadDirectory';
import Field from '@/components/elements/Field';
import { getDirectoryFromHash } from '@/helpers';
import { join } from 'path';
import renameFile from '@/api/server/files/renameFile';
import { ServerContext } from '@/state/server';
interface FormikValues {
name: string;
}
export default ({ file, ...props }: RequiredModalProps & { file: FileObject }) => {
const server = ServerContext.useStoreState(state => state.server.data!);
const submit = (values: FormikValues, { setSubmitting }: FormikActions<FormikValues>) => {
const renameFrom = join(getDirectoryFromHash(), file.name);
const renameTo = join(getDirectoryFromHash(), values.name);
renameFile(server.uuid, { renameFrom, renameTo })
.then(() => props.onDismissed())
.catch(error => {
setSubmitting(false);
console.error(error);
});
};
return (
<Formik
onSubmit={submit}
initialValues={{ name: file.name }}
>
{({ isSubmitting }) => (
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
<Form className={'m-0'}>
<Field
type={'string'}
id={'file_name'}
name={'name'}
label={'File Name'}
description={'Enter the new name of this file or folder.'}
/>
<div className={'mt-6 text-right'}>
<button className={'btn btn-sm btn-primary'}>
Rename
</button>
</div>
</Form>
</Modal>
)}
</Formik>
);
};