Create tags widget with React Select

Update basic select widget to use react select

Author: danielfdsilva

package-lock.json

@@ -9,6 +9,7 @@ import { WidgetArray } from '../widgets/array';
 import { WidgetArrayInput } from '../widgets/array-input';
 import { WidgetSelect } from '../widgets/select';
 import { WidgetJSON } from '../widgets/json';
+import { WidgetTags } from '../widgets/tags';
 
 export const defaultPluginWidgetConfig = extendPluginConfig({
   'ui:widget': {
@@ -18,6 +19,7 @@ export const defaultPluginWidgetConfig = extendPluginConfig({
     radio: WidgetRadio,
     checkbox: WidgetCheckbox,
     select: WidgetSelect,
+    tags: WidgetTags,
     array: WidgetArray,
     'array:string': WidgetArrayInput,
     json: WidgetJSON

packages/data-widgets/lib/config/index.ts

@@ -61,3 +61,7 @@ export function toNumber(v: any) {
   const n = Number(v);
   return isNaN(n) ? null : n;
 }
+
+export function castArray<T>(value: T | T[]): T[] {
+  return Array.isArray(value) ? value : [value];
+}

packages/data-widgets/lib/utils/index.tsx

@@ -1,38 +1,74 @@
-import React from 'react';
-import { Select, FormControl, FormLabel } from '@chakra-ui/react';
-import { SchemaFieldString, WidgetProps } from '@stac-manager/data-core';
-import { FastField } from 'formik';
+import React, { useMemo } from 'react';
+import { FormControl, FormLabel } from '@chakra-ui/react';
+import { useField } from 'formik';
+import ReactSelect from 'react-select';
+import {
+  SchemaFieldArray,
+  SchemaFieldString,
+  WidgetProps
+} from '@stac-manager/data-core';
 
 import { FieldLabel } from '../components/elements';
+import { castArray } from '../utils';
+
+interface Option {
+  readonly label: string;
+  readonly value: string;
+}
 
 export function WidgetSelect(props: WidgetProps) {
-  const { pointer, isRequired } = props;
-  const field = props.field as SchemaFieldString;
+  const { pointer, isRequired, field } = props;
 
-  if (!field.enum?.length) {
+  const isMulti = field.type === 'array';
+
+  if (
+    isMulti
+      ? !(field as SchemaFieldArray<SchemaFieldString>).items?.enum?.length
+      : !(field as SchemaFieldString).enum?.length
+  ) {
     throw new Error('WidgetSelect: enum is required');
   }
 
+  const options = useMemo(() => {
+    const enums = isMulti
+      ? (field as SchemaFieldArray<SchemaFieldString>).items?.enum
+      : (field as SchemaFieldString).enum;
+
+    return enums!.map<Option>(([value, label]) => ({
+      value,
+      label
+    }));
+  }, [field]);
+
+  const [{ value }, , { setValue }] = useField(pointer);
+
+  const selectedOpts = options.filter((option) =>
+    castArray(value).includes(option.value)
+  );
+
   return (
     <FormControl isRequired={isRequired}>
       {field.label && (
         <FormLabel>
           <FieldLabel size='xs'>{field.label}</FieldLabel>
         </FormLabel>
       )}
-      <FastField
-        as={Select}
-        type='select'
+      <ReactSelect
         name={pointer}
-        placeholder='Select option'
-        size='sm'
-      >
-        {field.enum.map(([value, label]) => (
-          <option key={value} value={value}>
-            {label}
-          </option>
-        ))}
-      </FastField>
+        options={options}
+        isMulti={isMulti}
+        isClearable={!isRequired}
+        onChange={(option) => {
+          if (option) {
+            setValue(
+              castArray(option as Option | Option[]).map((o) => o.value)
+            );
+          } else {
+            setValue(isMulti ? [] : undefined);
+          }
+        }}
+        value={selectedOpts}
+      />
     </FormControl>
   );
 }

packages/data-widgets/lib/widgets/select.tsx

@@ -0,0 +1,143 @@
+import React, { KeyboardEventHandler, useMemo, useState } from 'react';
+import { Kbd, FormControl, FormLabel } from '@chakra-ui/react';
+import { useField } from 'formik';
+import CreatableSelect from 'react-select/creatable';
+import {
+  SchemaFieldArray,
+  SchemaFieldString,
+  WidgetProps
+} from '@stac-manager/data-core';
+
+import { FieldLabel } from '../components/elements';
+
+const components = {
+  DropdownIndicator: null
+};
+
+const createOption = (label: string): Option => ({
+  label,
+  value: label
+});
+
+interface Option {
+  readonly label: string;
+  readonly value: string;
+}
+
+export function WidgetTags(props: WidgetProps) {
+  const { field } = props;
+
+  if (field.type !== 'array') {
+    throw new Error('WidgetTags only supports array fields');
+  }
+
+  if (field.items.type === 'string' && field.items.enum) {
+    return <WidgetTagsWithOptions {...props} />;
+  }
+
+  return <WidgetTagsNoOptions {...props} />;
+}
+
+function WidgetTagsNoOptions(props: WidgetProps) {
+  const { pointer, isRequired, field } = props;
+
+  const [inputValue, setInputValue] = useState('');
+
+  const [{ value }, , { setValue }] = useField(pointer);
+  const selectedValues = Array.isArray(value) ? value.map(createOption) : [];
+
+  const handleKeyDown: KeyboardEventHandler = (event) => {
+    if (!inputValue) return;
+    switch (event.key) {
+      case 'Enter':
+      case 'Tab':
+        if (!value.includes(inputValue)) {
+          setValue([...value, inputValue]);
+        }
+        setInputValue('');
+        event.preventDefault();
+    }
+  };
+
+  return (
+    <FormControl isRequired={isRequired}>
+      {field.label && (
+        <FormLabel>
+          <FieldLabel size='xs'>{field.label}</FieldLabel>
+        </FormLabel>
+      )}
+
+      <CreatableSelect
+        components={components}
+        inputValue={inputValue}
+        isClearable
+        isMulti
+        menuIsOpen={false}
+        onChange={(newValue) => {
+          setValue(newValue.map((option) => option.value));
+        }}
+        onInputChange={(newValue) => setInputValue(newValue)}
+        onKeyDown={handleKeyDown}
+        placeholder={
+          <React.Fragment>
+            Type & <Kbd>enter</Kbd> to add options
+          </React.Fragment>
+        }
+        value={selectedValues}
+      />
+    </FormControl>
+  );
+}
+
+function WidgetTagsWithOptions(props: WidgetProps) {
+  const { pointer, isRequired } = props;
+  const field = props.field as SchemaFieldArray<SchemaFieldString>;
+
+  const [inputValue, setInputValue] = useState('');
+
+  const [{ value }, , { setValue }] = useField(pointer);
+  const selectedValues = Array.isArray(value) ? value.map(createOption) : [];
+
+  const options = useMemo(() => {
+    return field.items.enum!.map<Option>(([value, label]) => ({
+      value,
+      label
+    }));
+  }, [field]);
+
+  const handleKeyDown: KeyboardEventHandler = (event) => {
+    if (!inputValue) return;
+    switch (event.key) {
+      case 'Enter':
+      case 'Tab':
+        if (value.includes(inputValue)) {
+          setInputValue('');
+          event.preventDefault();
+        }
+    }
+  };
+
+  return (
+    <FormControl isRequired={isRequired}>
+      {field.label && (
+        <FormLabel>
+          <FieldLabel size='xs'>{field.label}</FieldLabel>
+        </FormLabel>
+      )}
+
+      <CreatableSelect
+        inputValue={inputValue}
+        isClearable
+        isMulti
+        onChange={(newValue) => {
+          setValue(newValue.map((option) => option.value));
+        }}
+        onInputChange={(newValue) => setInputValue(newValue)}
+        onKeyDown={handleKeyDown}
+        options={options}
+        placeholder='Select or type to add options'
+        value={selectedValues}
+      />
+    </FormControl>
+  );
+}

packages/data-widgets/lib/widgets/tags.tsx

@@ -34,6 +34,7 @@
     "jsoneditor": "^10.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-select": "^5.8.3",
     "uuid": "^11.0.3"
   },
   "devDependencies": {