Use FastField for widget rendering and other improvements

danielfdsilva · danielfdsilva · commit 1d59c3f7a143 · 2024-11-19T10:56:07.000Z
diff --git a/packages/data-widgets/lib/widgets/array-input.tsx b/packages/data-widgets/lib/widgets/array-input.tsx
@@ -55,6 +55,13 @@ export function WidgetArrayInput(props: WidgetProps) {
                     onDeleteClick={() => {
                       remove(index);
                     }}
+                    transformValue={(v) => {
+                      if (field.items.type === 'number') {
+                        const n = Number(v);
+                        return isNaN(n) ? null : n;
+                      }
+                      return v;
+                    }}
                     isDeleteDisabled={fields.length <= minItems}
                   />
                 </ListItem>
diff --git a/packages/data-widgets/lib/widgets/checkbox.tsx b/packages/data-widgets/lib/widgets/checkbox.tsx
@@ -4,9 +4,10 @@ import {
   CheckboxGroup,
   Flex,
   FormControl,
+  FormErrorMessage,
   FormLabel
 } from '@chakra-ui/react';
-import { useField } from 'formik';
+import { FastField, FastFieldProps } from 'formik';
 import {
   SchemaFieldArray,
   SchemaFieldString,
@@ -19,34 +20,45 @@ export function WidgetCheckbox(props: WidgetProps) {
   const { pointer, isRequired } = props;
   const field = props.field as SchemaFieldArray<SchemaFieldString>;
 
-  const [{ value }, , { setValue, setTouched }] = useField(pointer);
+  const options = field.items.enum;
 
-  if (!field.items.enum?.length) {
+  if (!options?.length) {
     throw new Error('WidgetCheckbox: items.enum is required');
   }
 
   return (
-    <FormControl isRequired={isRequired}>
-      {field.label && (
-        <FormLabel>
-          <FieldLabel size='xs'>{field.label}</FieldLabel>
-        </FormLabel>
+    <FastField name={pointer}>
+      {({
+        field: { value },
+        meta,
+        form: { setFieldValue, setFieldTouched }
+      }: FastFieldProps) => (
+        <FormControl isRequired={isRequired}>
+          {field.label && (
+            <FormLabel>
+              <FieldLabel size='xs'>{field.label}</FieldLabel>
+            </FormLabel>
+          )}
+          <Flex gap={4}>
+            <CheckboxGroup
+              value={value}
+              onChange={(v) => {
+                setFieldValue(pointer, v);
+                setFieldTouched(pointer, true);
+              }}
+            >
+              {options.map(([checkboxVal, label]) => (
+                <Checkbox key={checkboxVal} size='sm' value={checkboxVal}>
+                  {label}
+                </Checkbox>
+              ))}
+            </CheckboxGroup>
+          </Flex>
+          {meta.touched && meta.error && (
+            <FormErrorMessage>{meta.error}</FormErrorMessage>
+          )}
+        </FormControl>
       )}
-      <Flex gap={4}>
-        <CheckboxGroup
-          value={value}
-          onChange={(v) => {
-            setValue(v);
-            setTouched(true);
-          }}
-        >
-          {field.items.enum.map(([label, checkboxVal]) => (
-            <Checkbox key={label} size='sm' value={checkboxVal}>
-              {label}
-            </Checkbox>
-          ))}
-        </CheckboxGroup>
-      </Flex>
-    </FormControl>
+    </FastField>
   );
 }
diff --git a/packages/data-widgets/lib/widgets/input.tsx b/packages/data-widgets/lib/widgets/input.tsx
@@ -6,7 +6,7 @@ import {
   FormLabel,
   Input
 } from '@chakra-ui/react';
-import { useField } from 'formik';
+import { FastField, FastFieldProps } from 'formik';
 import { SchemaFieldString, WidgetProps } from '@stac-manager/data-core';
 import { CollecticonTrashBin } from '@devseed-ui/collecticons-chakra';
 
@@ -21,6 +21,8 @@ interface WidgetInputProps extends WidgetProps {
   isDeleteDisabled?: boolean;
 }
 
+const identity = (v: any) => v;
+
 export function WidgetInput(props: WidgetInputProps) {
   const {
     label,
@@ -30,47 +32,56 @@ export function WidgetInput(props: WidgetInputProps) {
     pointer,
     isRequired,
     type,
-    transformValue = (v) => v
+    transformValue = identity
   } = props;
   const field = props.field as SchemaFieldString;
 
-  const [{ onBlur }, meta, { setValue }] = useField<number>(props.pointer);
-
   const fieldLabel = label || field.label;
 
   return (
-    <FormControl isRequired={isRequired}>
-      <Flex gap={4}>
-        {fieldLabel && (
-          <FormLabel>
-            <FieldLabel size='xs'>{fieldLabel}</FieldLabel>
-          </FormLabel>
-        )}
-        <Flex ml='auto' gap={2}>
-          {isDeletable && (
-            <FieldIconBtn
-              aria-label='Remove item'
-              onClick={onDeleteClick}
-              icon={<CollecticonTrashBin size={3} />}
-              isDisabled={isDeleteDisabled}
-            />
+    <FastField name={pointer}>
+      {({
+        field: { value, onBlur },
+        meta,
+        form: { setFieldValue }
+      }: FastFieldProps) => (
+        <FormControl isRequired={isRequired}>
+          <Flex gap={4}>
+            {fieldLabel && (
+              <FormLabel>
+                <FieldLabel size='xs'>{fieldLabel}</FieldLabel>
+              </FormLabel>
+            )}
+            <Flex ml='auto' gap={2}>
+              {isDeletable && (
+                <FieldIconBtn
+                  aria-label='Remove item'
+                  onClick={onDeleteClick}
+                  icon={<CollecticonTrashBin size={3} />}
+                  isDisabled={isDeleteDisabled}
+                />
+              )}
+            </Flex>
+          </Flex>
+          <Input
+            type={type}
+            size='sm'
+            name={pointer}
+            bg='surface.500'
+            borderColor='base.200'
+            borderRadius='md'
+            value={value === null ? '' : value}
+            onBlur={onBlur}
+            onChange={(e) => {
+              setFieldValue(pointer, transformValue(e.target.value));
+            }}
+            isInvalid={meta.touched && meta.error ? true : false}
+          />
+          {meta.touched && meta.error && (
+            <FormErrorMessage>{meta.error}</FormErrorMessage>
           )}
-        </Flex>
-      </Flex>
-      <Input
-        type={type}
-        size='sm'
-        name={pointer}
-        bg='surface.500'
-        borderColor='base.200'
-        borderRadius='md'
-        onBlur={onBlur}
-        onChange={(e) => setValue(transformValue(e.target.value))}
-        isInvalid={meta.touched && meta.error ? true : false}
-      />
-      {meta.touched && meta.error && (
-        <FormErrorMessage>{meta.error}</FormErrorMessage>
+        </FormControl>
       )}
-    </FormControl>
+    </FastField>
   );
 }
diff --git a/packages/data-widgets/lib/widgets/json.tsx b/packages/data-widgets/lib/widgets/json.tsx
@@ -6,7 +6,7 @@ import {
   FormControl,
   FormLabel
 } from '@chakra-ui/react';
-import { useField } from 'formik';
+import { FastField, FastFieldProps } from 'formik';
 import {
   CollecticonArrowSemiSpinCcw,
   CollecticonArrowSemiSpinCw,
@@ -20,6 +20,7 @@ import { CollecticonIndent } from '../components/icons/indent';
 
 const JsonEditor = React.lazy(() => import('../components/json-jsoneditor'));
 
+// Extend to have access to internal methods provided by the textmode.
 interface JSONEditorCodeMode extends JSONEditor {
   compact: () => void;
   format: () => void;
@@ -33,28 +34,30 @@ export function WidgetJSON(props: WidgetProps) {
   const editorRef = useRef<JSONEditorCodeMode>(null);
   const [isLoaded, setIsLoaded] = useState(false);
 
-  const [{ value }, , { setValue }] = useField<any>(props.pointer);
-
   return (
-    <FormControl>
-      <Flex gap={4}>
-        {field.label && (
-          <FormLabel>
-            <FieldLabel size='xs'>{field.label}</FieldLabel>
-          </FormLabel>
-        )}
-        {isLoaded && <ControlBar editor={editorRef.current!} />}
-      </Flex>
+    <FastField name={props.pointer}>
+      {({ field: { value }, form: { setFieldValue } }: FastFieldProps) => (
+        <FormControl>
+          <Flex gap={4}>
+            {field.label && (
+              <FormLabel>
+                <FieldLabel size='xs'>{field.label}</FieldLabel>
+              </FormLabel>
+            )}
+            {isLoaded && <ControlBar editor={editorRef.current!} />}
+          </Flex>
 
-      <Suspense fallback={<Loading />}>
-        <JsonEditor
-          value={value}
-          onChange={setValue}
-          editorRef={editorRef}
-          onLoad={() => setIsLoaded(true)}
-        />
-      </Suspense>
-    </FormControl>
+          <Suspense fallback={<Loading />}>
+            <JsonEditor
+              value={value}
+              onChange={(v) => setFieldValue(props.pointer, v)}
+              editorRef={editorRef}
+              onLoad={() => setIsLoaded(true)}
+            />
+          </Suspense>
+        </FormControl>
+      )}
+    </FastField>
   );
 }
 
diff --git a/packages/data-widgets/lib/widgets/radio.tsx b/packages/data-widgets/lib/widgets/radio.tsx
@@ -1,43 +1,60 @@
 import React from 'react';
-import { FormControl, FormLabel, Radio, RadioGroup } from '@chakra-ui/react';
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Radio,
+  RadioGroup
+} from '@chakra-ui/react';
 import { SchemaFieldString, WidgetProps } from '@stac-manager/data-core';
-import { useField } from 'formik';
+import { FastField, FastFieldProps } from 'formik';
 
 import { FieldLabel } from '../components/elements';
 
 export function WidgetRadio(props: WidgetProps) {
   const { pointer, isRequired } = props;
   const field = props.field as SchemaFieldString;
 
-  const [{ value }, , { setValue, setTouched }] = useField<string>(pointer);
+  const options = field.enum;
 
-  if (!field.enum?.length) {
+  if (!options?.length) {
     throw new Error('WidgetRadio: enum is required');
   }
 
   return (
-    <FormControl isRequired={isRequired}>
-      {field.label && (
-        <FormLabel>
-          <FieldLabel size='xs'>{field.label}</FieldLabel>
-        </FormLabel>
+    <FastField name={pointer}>
+      {({
+        field: { value },
+        meta,
+        form: { setFieldValue, setFieldTouched }
+      }: FastFieldProps) => (
+        <FormControl isRequired={isRequired}>
+          {field.label && (
+            <FormLabel>
+              <FieldLabel size='xs'>{field.label}</FieldLabel>
+            </FormLabel>
+          )}
+          <RadioGroup
+            size='sm'
+            gap={4}
+            display='flex'
+            value={value}
+            onChange={(v) => {
+              setFieldValue(pointer, v);
+              setFieldTouched(pointer, true);
+            }}
+          >
+            {options.map(([radioValue, label]) => (
+              <Radio key={radioValue} size='sm' value={radioValue}>
+                {label}
+              </Radio>
+            ))}
+          </RadioGroup>
+          {meta.touched && meta.error && (
+            <FormErrorMessage>{meta.error}</FormErrorMessage>
+          )}
+        </FormControl>
       )}
-      <RadioGroup
-        size='sm'
-        gap={4}
-        display='flex'
-        value={value}
-        onChange={(v) => {
-          setValue(v);
-          setTouched(true);
-        }}
-      >
-        {field.enum.map(([label, radioValue]) => (
-          <Radio key={label} size='sm' value={radioValue}>
-            {label}
-          </Radio>
-        ))}
-      </RadioGroup>
-    </FormControl>
+    </FastField>
   );
 }
diff --git a/packages/data-widgets/lib/widgets/select.tsx b/packages/data-widgets/lib/widgets/select.tsx
@@ -27,7 +27,7 @@ export function WidgetSelect(props: WidgetProps) {
         placeholder='Select option'
         size='sm'
       >
-        {field.enum.map(([label, value]) => (
+        {field.enum.map(([value, label]) => (
           <option key={value} value={value}>
             {label}
           </option>

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export function WidgetSelect(props: WidgetProps) {`
`27`	`27`	`placeholder='Select option'`
`28`	`28`	`size='sm'`
`29`	`29`	`>`
`30`		`- {field.enum.map(([label, value]) => (`
	`30`	`+ {field.enum.map(([value, label]) => (`
`31`	`31`	`<option key={value} value={value}>`
`32`	`32`	`{label}`
`33`	`33`	`</option>`