48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
//@ts-nocheck
|
|
import { Box, Center, Text } from '@mantine/core';
|
|
import EventEmitter from 'events';
|
|
import { includes, isEmpty, map, not, pipe, sort } from 'ramda';
|
|
import { FC, useCallback, useContext } from 'react';
|
|
import { EventBusContext } from '../EventBus';
|
|
import { useFileListStore } from '../states/files';
|
|
|
|
export const FileList: FC = () => {
|
|
const files = useFileListStore.use.files();
|
|
const activeFiles = useFileListStore.use.actives();
|
|
const ebus = useContext<EventEmitter>(EventBusContext);
|
|
const handleFileSelectAction = useCallback(
|
|
(filename: string) => {
|
|
ebus.emit('navigate_offset', { filename });
|
|
},
|
|
[ebus]
|
|
);
|
|
|
|
return (
|
|
<Box w="100%" h="100%" pl={4} sx={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}>
|
|
{pipe(
|
|
sort((fa, fb) => fa.sort - fb.sort),
|
|
map(item => (
|
|
<Box
|
|
bg={includes(item.filename, activeFiles) && 'grape'}
|
|
key={item.filename}
|
|
px={4}
|
|
py={2}
|
|
onClick={() => handleFileSelectAction(item.filename)}
|
|
sx={theme => ({
|
|
cursor: 'pointer',
|
|
'&:hover': { color: not(includes(item.filename, activeFiles)) && theme.colors.red }
|
|
})}
|
|
>
|
|
{item.filename}
|
|
</Box>
|
|
))
|
|
)(files)}
|
|
{isEmpty(files) && (
|
|
<Center h="100%">
|
|
<Text size="xs">请先打开一个文件夹。</Text>
|
|
</Center>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|