File size: 2,476 Bytes
71d280d 3927930 71d280d 3927930 71d280d 3927930 71d280d 3927930 71d280d f9e19e4 71d280d f9e19e4 71d280d 3927930 f9e19e4 3927930 71d280d 3927930 71d280d f9e19e4 71d280d 3927930 71d280d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
import type { CheckboxProps } from 'antd';
import { Avatar, Checkbox, Layout, List, Space, Typography } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import {
Dispatch,
SetStateAction,
useCallback,
useEffect,
useMemo,
} from 'react';
import { UserOutlined } from '@ant-design/icons';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import styles from './index.less';
const { Sider } = Layout;
interface IProps {
checkedList: string[];
setCheckedList: Dispatch<SetStateAction<string[]>>;
}
const SearchSidebar = ({ checkedList, setCheckedList }: IProps) => {
const { list } = useNextFetchKnowledgeList();
const ids = useMemo(() => list.map((x) => x.id), [list]);
const checkAll = list.length === checkedList.length;
const indeterminate =
checkedList.length > 0 && checkedList.length < list.length;
const onChange = useCallback(
(list: CheckboxValueType[]) => {
setCheckedList(list as string[]);
},
[setCheckedList],
);
const onCheckAllChange: CheckboxProps['onChange'] = useCallback(
(e: CheckboxChangeEvent) => {
setCheckedList(e.target.checked ? ids : []);
},
[ids, setCheckedList],
);
useEffect(() => {
setCheckedList(ids);
}, [ids, setCheckedList]);
return (
<Sider className={styles.searchSide} theme={'light'} width={240}>
<Checkbox
className={styles.modelForm}
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
All
</Checkbox>
<Checkbox.Group
className={styles.checkGroup}
onChange={onChange}
value={checkedList}
>
<List
bordered
dataSource={list}
className={styles.list}
renderItem={(item) => (
<List.Item>
<Checkbox value={item.id} className={styles.checkbox}>
<Space>
<Avatar size={30} icon={<UserOutlined />} src={item.avatar} />
<Typography.Text
ellipsis={{ tooltip: item.name }}
className={styles.knowledgeName}
>
{item.name}
</Typography.Text>
</Space>
</Checkbox>
</List.Item>
)}
/>
</Checkbox.Group>
</Sider>
);
};
export default SearchSidebar;
|