123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import { useShallow } from 'zustand/react/shallow';
|
|
import { useFileStore } from '../store';
|
|
import { useEffect } from 'react';
|
|
import path from 'path-browserify';
|
|
import prettyBytes from 'pretty-bytes';
|
|
import clsx from 'clsx';
|
|
import { isObjectNull } from '@/utils/is-null';
|
|
export const CardPath = ({ children }: any) => {
|
|
const userAppStore = useFileStore(
|
|
useShallow((state) => {
|
|
return {
|
|
list: state.list,
|
|
getList: state.getList,
|
|
setPath: state.setPath,
|
|
path: state.path,
|
|
};
|
|
}),
|
|
);
|
|
const paths = ['root', ...userAppStore.path.split('/').filter((item) => item)];
|
|
const onDirectoryClick = (prefix: string) => {
|
|
if (prefix === 'root') {
|
|
userAppStore.setPath('');
|
|
userAppStore.getList();
|
|
return;
|
|
}
|
|
userAppStore.setPath(prefix.replace('root/', '') + '/');
|
|
userAppStore.getList();
|
|
};
|
|
return (
|
|
<div className='border'>
|
|
<div className='p-2'>
|
|
<div className='flex flex-col'>
|
|
<div className=' flex gap-2 py-2'>
|
|
<div>Path: </div>
|
|
<div className='flex'>
|
|
{paths.map((item, index) => {
|
|
const isLast = index === paths.length - 1;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={clsx('select-none', !isLast && 'hover:text-gray-400 cursor-pointer')}
|
|
onClick={(e) => {
|
|
if (!isLast) {
|
|
onDirectoryClick(paths.slice(0, index + 1).join('/'));
|
|
}
|
|
}}>
|
|
{item}/
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className=''>{children}</div>
|
|
</div>
|
|
);
|
|
};
|
|
export const List = () => {
|
|
const userAppStore = useFileStore(
|
|
useShallow((state) => {
|
|
return {
|
|
list: state.list,
|
|
getList: state.getList,
|
|
setPath: state.setPath,
|
|
path: state.path,
|
|
getFile: state.getFile,
|
|
file: state.file,
|
|
};
|
|
}),
|
|
);
|
|
useEffect(() => {
|
|
userAppStore.getList();
|
|
}, []);
|
|
const onDirectoryClick = (prefix: string) => {
|
|
userAppStore.setPath(prefix);
|
|
userAppStore.getList();
|
|
};
|
|
return (
|
|
<div>
|
|
<div className='p-4'>
|
|
<CardPath>
|
|
<div className='flex flex-col'>
|
|
{userAppStore.list.map((item, index) => {
|
|
if (item.prefix) {
|
|
let showPrefix = item.prefix.replace(userAppStore.path, '');
|
|
showPrefix = showPrefix.replace('/', '');
|
|
return (
|
|
<div
|
|
className=' border-t flex gap-2 p-2'
|
|
key={index}
|
|
onClick={() => {
|
|
onDirectoryClick(item.prefix);
|
|
}}>
|
|
<div>Directory: </div>
|
|
<div>{showPrefix}</div>
|
|
</div>
|
|
);
|
|
}
|
|
const name = path.basename(item.name);
|
|
const size = prettyBytes(item.size);
|
|
return (
|
|
<div
|
|
className=' border-t flex gap-2 p-2'
|
|
key={index}
|
|
onClick={() => {
|
|
userAppStore.getFile(item.name);
|
|
}}>
|
|
<div>{name}</div>
|
|
<div>size: {size}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardPath>
|
|
<div>
|
|
<pre>{!isObjectNull(userAppStore.file) && JSON.stringify(userAppStore.file, null, 2)}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|