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

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

@ -18,6 +18,7 @@ import UploadButton from '@/components/server/files/UploadButton';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import { useStoreActions } from '@/state/hooks';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
const sortFiles = (files: FileObject[]): FileObject[] => {
return files.sort((a, b) => a.name.localeCompare(b.name))
@ -31,7 +32,9 @@ export default () => {
const directory = ServerContext.useStoreState(state => state.files.directory);
const clearFlashes = useStoreActions(actions => actions.flashes.clearFlashes);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
useEffect(() => {
clearFlashes('files');
@ -43,6 +46,10 @@ export default () => {
mutate();
}, [ directory ]);
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []);
};
if (error) {
return (
<ServerError message={httpErrorToHuman(error)} onRetry={() => mutate()}/>
@ -53,9 +60,17 @@ export default () => {
<ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
<div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
<ErrorBoundary>
<FileManagerBreadcrumbs/>
<FileManagerBreadcrumbs
renderLeft={
<FileActionCheckbox
type={'checkbox'}
css={tw`mx-4`}
checked={selectedFilesLength === (files ? files.length : -1)}
onChange={onSelectAllClick}
/>
}
/>
</ErrorBoundary>
<Can action={'file.create'}>
<ErrorBoundary>
<div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-no-wrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>