Rename selector.tsx to Selector.tsx

components/Selector.tsx

@@ -0,0 +1,68 @@
+import { MutableRefObject, useEffect, useState } from 'react';
+import Select, { OptionsOrGroups, GroupBase } from 'react-select';
+
+type Option = { label: string | number; value: string | number; }
+
+interface SelectorProps {
+    name: string;
+    label?: string;
+    labelComponent?: JSX.Element;
+    innerRef?: MutableRefObject<any>;
+    fieldClass?: string;
+
+    options: OptionsOrGroups<Option, GroupBase<Option>>;
+    value?: number | string;
+    onChangeCallback?: (value: number | string) => void;
+
+    disabled?: boolean;
+}
+
+export default function Selector({
+    name,
+    label,
+    labelComponent,
+    innerRef = null,
+    fieldClass = '',
+    value,
+    options = [],
+    onChangeCallback,
+    disabled = false
+}: SelectorProps): JSX.Element {
+    const [selectorValue, setSelectorValue] = useState<Option>();
+
+    useEffect(() => {
+        if (options.length === 0) return;
+
+        const option = options.find((o: Option) => o.value === value) as Option;
+        if (option) {
+            setSelectorValue(option);
+        }
+    }, [options, value]);
+
+    function handleChange(selectedOption: Option) {
+        setSelectorValue(selectedOption);
+        if (onChangeCallback) {
+            onChangeCallback(selectedOption.value);
+        }
+    }
+
+    return (<div className={`input-field ${fieldClass}`}>
+        {label && (
+            <label htmlFor={name} title={`${name} field`}>
+                {label}
+            </label>
+        )}
+        {labelComponent && (
+            <label htmlFor={name} title={`${name} field`}>
+                {labelComponent}
+            </label>
+        )}
+        <Select
+            value={selectorValue}
+            onChange={handleChange}
+            options={options}
+            ref={innerRef}
+            isDisabled={disabled}
+        />
+    </div>);
+}