feat: temp barcode templates

src/components/ObjectMultiSelect/ObjectMultiSelect.tsx

@@ -0,0 +1,61 @@
+import {MultiSelect, MultiSelectProps} from "@mantine/core";
+import {useEffect, useMemo, useState} from "react";
+import {ObjectWithNameAndId} from "../../types/utils.ts";
+
+
+export type MultiselectObjectType<T extends ObjectWithNameAndId> = T;
+
+type ControlledValueProps<T extends ObjectWithNameAndId> = {
+    value: MultiselectObjectType<T>[],
+    onChange: (value: MultiselectObjectType<T>[]) => void;
+}
+
+type RestProps<T extends ObjectWithNameAndId> = {
+    defaultValue?: MultiselectObjectType<T>[]
+    onChange: (value: MultiselectObjectType<T>[]) => void;
+    data: MultiselectObjectType<T>[];
+}
+
+export type ObjectMultiSelectProps<T extends ObjectWithNameAndId> =
+    (RestProps<T> & Partial<ControlledValueProps<T>>)
+    & Omit<MultiSelectProps, 'value' | 'onChange' | 'data'>;
+
+const ObjectMultiSelect = <T extends ObjectWithNameAndId, >(props: ObjectMultiSelectProps<T>) => {
+
+    const isControlled = 'value' in props;
+    const [internalValue, setInternalValue] = useState<MultiselectObjectType<T>[] | undefined>(props.defaultValue);
+
+    const value = (isControlled ? props.value : internalValue) || [];
+
+    const data = useMemo(() => props.data.reduce((acc, item) => {
+        acc.push({
+            label: item.name,
+            value: item.id.toString()
+        });
+        return acc;
+    }, [] as { label: string, value: string }[]), [props.data]);
+
+    const handleOnChange = (event: string[]) => {
+        const objects = props.data.filter(item => event.includes(item.id.toString()));
+        if (isControlled) {
+            props.onChange(objects);
+            return;
+        }
+        setInternalValue(objects);
+    }
+    useEffect(() => {
+        if (isControlled || !internalValue) return;
+        props.onChange(internalValue);
+    }, [internalValue]);
+
+    return (
+        <MultiSelect
+            {...props}
+            value={value.map(item => item.id.toString())}
+            onChange={handleOnChange}
+            data={data}
+        />
+    )
+}
+
+export default ObjectMultiSelect;