80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { Avatar, theme, Transfer, TransferProps } from "antd";
|
|
import { StaffDto } from "@nicestack/common";
|
|
import React, { forwardRef, useImperativeHandle, useMemo, useState } from "react";
|
|
|
|
// Define the ref type
|
|
export interface StaffTransferRef {
|
|
resetSelection: () => void;
|
|
}
|
|
|
|
interface StaffTransferProps {
|
|
staffs?: StaffDto[];
|
|
onChange?: (targetKeys: string[]) => void;
|
|
}
|
|
|
|
interface TransferRecordType {
|
|
key: string;
|
|
title: string;
|
|
description?: string;
|
|
chosen: boolean;
|
|
}
|
|
|
|
const StaffTransfer = forwardRef<StaffTransferRef, StaffTransferProps>(({ staffs = [], onChange: externalOnChange }, ref) => {
|
|
const [targetKeys, setTargetKeys] = useState<React.Key[]>([]);
|
|
const { token } = theme.useToken();
|
|
|
|
const dataSource = useMemo<TransferRecordType[]>(() => {
|
|
// console.log(staffs)
|
|
return staffs.map(staff => ({
|
|
key: staff.id,
|
|
title: staff.showname || staff.username,
|
|
description: staff.officerId,
|
|
chosen: false
|
|
}));
|
|
}, [staffs]);
|
|
|
|
const handleChange: TransferProps['onChange'] = (newTargetKeys, direction, moveKeys) => {
|
|
setTargetKeys(newTargetKeys);
|
|
// console.log(newTargetKeys);
|
|
if (externalOnChange) {
|
|
externalOnChange(newTargetKeys as string[]);
|
|
}
|
|
};
|
|
|
|
const filterOption = (inputValue: string, item: TransferRecordType) =>
|
|
item.title.toLowerCase().includes(inputValue.toLowerCase()) ||
|
|
item.description?.toLowerCase().includes(inputValue.toLowerCase());
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
resetSelection: () => {
|
|
setTargetKeys([]);
|
|
}
|
|
}));
|
|
|
|
return (
|
|
<Transfer
|
|
dataSource={dataSource}
|
|
targetKeys={targetKeys}
|
|
oneWay={true}
|
|
onChange={handleChange}
|
|
showSearch
|
|
filterOption={filterOption}
|
|
listStyle={{
|
|
width: 400,
|
|
height: 450,
|
|
}}
|
|
render={(item) => (
|
|
<div className="flex items-center gap-2">
|
|
<Avatar style={{ background: token.colorPrimary }}>
|
|
{item.title?.slice(0, 1).toUpperCase()}
|
|
</Avatar>
|
|
<span>{item.title}</span>
|
|
<span className="text-tertiary">{item.description}</span>
|
|
</div>
|
|
)}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export default StaffTransfer;
|