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

Slightly less obtuse way of handling this little checkbox

Browse source
This commit is contained in:
Dane Everitt 2020-12-08 20:34:31 -08:00
parent 60f170e919
commit 24417ac516
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 23 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

27
resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
View file

@ -1,26 +1,20 @@
import React, { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { NavLink, useRouteMatch } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import { cleanDirectoryPath } from '@/helpers';
import tw from 'twin.macro';
import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
interface Props {
renderLeft?: JSX.Element;
withinFileEditor?: boolean;
isNewFile?: boolean;
}
export default ({ withinFileEditor, isNewFile }: Props) => {
export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
const [ file, setFile ] = useState<string | null>(null);
const { params } = useRouteMatch<Record<string, string>>();
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { data: files } = useFileManagerSwr();
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
useEffect(() => {
const parts = cleanDirectoryPath(window.location.hash).split('/');
@ -39,22 +33,9 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
return { name: directory, path: `/${dirs.slice(0, index + 1).join('/')}` };
});
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []);
};
return (
<div css={tw`flex flex-grow-0 items-center text-sm text-neutral-500 overflow-x-hidden`}>
{(files && files.length > 0 && !params?.action) ?
<FileActionCheckbox
type={'checkbox'}
css={tw`mx-4`}
checked={selectedFilesLength === (files ? files.length : -1)}
onChange={onSelectAllClick}
/>
:
<div css={tw`w-12`}/>
}
{renderLeft || <div css={tw`w-12`}/>}
/<span css={tw`px-1 text-neutral-300`}>home</span>/
<NavLink
to={`/server/${id}/files`}