💄 Only folders in the tree view (#115) (#135)

* 💄 Only folders in the tree view (#115)
This commit is contained in:
Greemty
2023-07-11 20:21:53 +02:00
committed by GitHub
parent 7d5ee1a87f
commit e0c74d59bd
@@ -34,12 +34,12 @@ export const SelectorModal = () => {
return ( return (
<Modal open={state.open} onClose={() => setState({ ...state, open: false })}> <Modal open={state.open} onClose={() => setState({ ...state, open: false })}>
<SelectorModalContent key={state.parent_id} /> <SelectorModalContent key={state.parent_id} showfiles={false}/>
</Modal> </Modal>
); );
}; };
const SelectorModalContent = () => { const SelectorModalContent = (key:any,showfiles:boolean) => {
const [state, setState] = useRecoilState(SelectorModalAtom); const [state, setState] = useRecoilState(SelectorModalAtom);
const [selected, setSelected] = useState<DriveItem[]>([]); const [selected, setSelected] = useState<DriveItem[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -91,36 +91,41 @@ const SelectorModalContent = () => {
</div> </div>
</div> </div>
))} ))}
{key.showfiles && (
<>
{files.map(file => ( {files.map(file => (
<div <div
key={file.id} key={file.id}
className={ className={
'flex flex-row items-center border-t -mt-px px-4 py-2 cursor-pointer ' + 'flex flex-row items-center border-t -mt-px px-4 py-2 cursor-pointer ' +
'hover:bg-zinc-500 hover:bg-opacity-10 ' 'hover:bg-zinc-500 hover:bg-opacity-10 '
} }
onClick={() => { onClick={() => {
if (state.mode === 'select-files') { if (state.mode === 'select-files') {
if (!selected.some(i => i.id === file.id)) { if (!selected.some(i => i.id === file.id)) {
setSelected([...selected, file]); setSelected([...selected, file]);
} else { } else {
setSelected(selected.filter(i => i.id !== file.id)); setSelected(selected.filter(i => i.id !== file.id));
}
} else if (state.mode === 'select-file') {
setSelected([file]);
} }
}} } else if (state.mode === 'select-file') {
setSelected([file]);
}
}}
> >
<div className="grow flex flex-row items-center"> <div className="grow flex flex-row items-center">
<DocumentIcon className="h-5 w-5 shrink-0 text-gray-400 mr-2" /> <DocumentIcon className="h-5 w-5 shrink-0 text-gray-400 mr-2" />
{file.name} {file.name}
</div>
{(state.mode === 'select-file' || state.mode === 'select-files') && (
<div className="shrink-0" onClick={e => e.stopPropagation()}>
<Checkbox value={selected.some(i => i.id === file.id)} />
</div>
)}
</div> </div>
))} {(state.mode === 'select-file' || state.mode === 'select-files') && (
<div className="shrink-0" onClick={e => e.stopPropagation()}>
<Checkbox value={selected.some(i => i.id === file.id)} />
</div>
)}
</div>
))}
</>
)}
</div> </div>
<Button <Button