2024-05-31 12:07:24 +00:00
|
|
|
import { observer } from "mobx-react";
|
|
|
|
// hooks
|
|
|
|
import { TSelectionHelper, useMultipleSelect } from "@/hooks/use-multiple-select";
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
children: (helpers: TSelectionHelper) => React.ReactNode;
|
|
|
|
containerRef: React.MutableRefObject<HTMLElement | null>;
|
2024-06-07 08:29:57 +00:00
|
|
|
disabled?: boolean;
|
2024-05-31 12:07:24 +00:00
|
|
|
entities: Record<string, string[]>; // { groupID: entityIds[] }
|
|
|
|
};
|
|
|
|
|
|
|
|
export const MultipleSelectGroup: React.FC<Props> = observer((props) => {
|
2024-06-07 08:29:57 +00:00
|
|
|
const { children, containerRef, disabled = false, entities } = props;
|
2024-05-31 12:07:24 +00:00
|
|
|
|
|
|
|
const helpers = useMultipleSelect({
|
|
|
|
containerRef,
|
2024-06-07 08:29:57 +00:00
|
|
|
disabled,
|
2024-05-31 12:07:24 +00:00
|
|
|
entities,
|
|
|
|
});
|
|
|
|
|
|
|
|
return <>{children(helpers)}</>;
|
|
|
|
});
|
|
|
|
|
|
|
|
MultipleSelectGroup.displayName = "MultipleSelectGroup";
|