feat: temp barcode templates

src/components/ObjectSelect/ObjectSelect.tsx

@@ -0,0 +1,65 @@
+import {Select, SelectProps} from "@mantine/core";
+import {useEffect, useMemo, useState} from "react";
+import {ObjectWithNameAndId} from "../../types/utils.ts";
+
+
+export type SelectObjectType<T extends ObjectWithNameAndId> = T;
+
+type ControlledValueProps<T extends ObjectWithNameAndId> = {
+    value: SelectObjectType<T>,
+    onChange: (value: SelectObjectType<T>) => void;
+}
+
+type RestProps<T extends ObjectWithNameAndId> = {
+    defaultValue?: SelectObjectType<T>
+    onChange: (value: SelectObjectType<T>) => void;
+    data: SelectObjectType<T>[];
+}
+
+export type ObjectSelectProps<T extends ObjectWithNameAndId> =
+    (RestProps<T> & Partial<ControlledValueProps<T>>)
+    & Omit<SelectProps, 'value' | 'onChange' | 'data'>;
+
+const ObjectSelect = <T extends ObjectWithNameAndId, >(props: ObjectSelectProps<T>) => {
+
+    const isControlled = 'value' in props;
+    const [internalValue, setInternalValue] = useState<SelectObjectType<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 | null) => {
+        if (!event) return;
+        const object = props.data.find(item => parseInt(event) == item.id);
+        if (!object) return;
+        if (isControlled) {
+            props.onChange(object);
+            return;
+        }
+        setInternalValue(object);
+    }
+
+    useEffect(() => {
+        if (isControlled || !internalValue) return;
+        props.onChange(internalValue);
+    }, [internalValue]);
+
+    return (
+        <Select
+            {...props}
+            value={value?.id.toString()}
+            onChange={handleOnChange}
+            data={data}
+        />
+    )
+}
+
+export default ObjectSelect;