48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Combobox, Checkbox } from '@mantine/core';
|
|
import { useMemo } from 'react';
|
|
|
|
import type { BoxerItem } from '../Boxer.types';
|
|
|
|
interface UseBoxerOptionsProps {
|
|
boxerData: Array<BoxerItem>;
|
|
value?: any | Array<any>;
|
|
multiSelect?: boolean;
|
|
onOptionSubmit: (index: number) => void;
|
|
}
|
|
|
|
const useBoxerOptions = (props: UseBoxerOptionsProps) => {
|
|
const { boxerData, value, multiSelect, onOptionSubmit } = props;
|
|
|
|
const options = useMemo(() => {
|
|
return boxerData.map((item, index) => {
|
|
const isSelected = multiSelect
|
|
? Array.isArray(value) && value.includes(item.value)
|
|
: value === item.value;
|
|
|
|
return (
|
|
<Combobox.Option
|
|
key={`${item.value}-${index}`}
|
|
value={String(index)}
|
|
active={isSelected}
|
|
onClick={() => {
|
|
onOptionSubmit(index);
|
|
}}
|
|
>
|
|
{multiSelect ? (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
<Checkbox checked={isSelected} onChange={() => {}} tabIndex={-1} />
|
|
<span>{item.label}</span>
|
|
</div>
|
|
) : (
|
|
item.label
|
|
)}
|
|
</Combobox.Option>
|
|
);
|
|
});
|
|
}, [boxerData, value, multiSelect, onOptionSubmit]);
|
|
|
|
return { options };
|
|
};
|
|
|
|
export default useBoxerOptions;
|