fix: remove duplicate dropdown custom renderer (#312)

* fix: remove duplicate dropdown custom renderer * feat: don't set the first item as default for anyOf * chore: set dropdown value if default/const is available * chore: remove const renderer for now * fix: derive state and fix padding token * fix: auto populate the currently selected variant * chore: only set the variant on the first load
opengovsg · Jul 24, 2024 · 7c7c01c · 7c7c01c
1 parent 56ce8f6
commit 7c7c01c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 23 deletions.
diff --git a/...s/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx b/...s/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx
@@ -1,5 +1,5 @@
 import type { CombinatorRendererProps, RankedTester } from "@jsonforms/core"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Box, FormControl } from "@chakra-ui/react"
 import {
   createCombinatorRenderInfos,
@@ -25,6 +25,8 @@ export function JsonFormsAnyOfControl({
   uischema,
   uischemas,
   label,
+  handleChange,
+  indexOfFittingSchema,
 }: CombinatorRendererProps) {
   const anyOfRenderInfos = createCombinatorRenderInfos(
     schema.anyOf ?? [],
@@ -35,25 +37,43 @@ export function JsonFormsAnyOfControl({
     uischemas,
   )
 
-  const variants = anyOfRenderInfos.map((anyOfRenderInfo) => ({
-    label: anyOfRenderInfo.label,
-    value: anyOfRenderInfo.label,
-  }))
+  const options = anyOfRenderInfos.map((anyOfRenderInfo) => {
+    const option = String(anyOfRenderInfo.schema.const || anyOfRenderInfo.label)
 
-  const [variant, setVariant] = useState(anyOfRenderInfos[0]?.label || "")
+    return {
+      label: option.charAt(0).toUpperCase() + option.slice(1),
+      value: option,
+    }
+  })
+
+  const [variant, setVariant] = useState("")
+
+  const onChange = (value: string) => {
+    setVariant(value)
+    handleChange(path, value)
+  }
+
+  useEffect(() => {
+    if (indexOfFittingSchema !== undefined) {
+      setVariant(options[indexOfFittingSchema]?.label || "")
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return (
-    <Box py={2}>
-      <FormControl isRequired>
-        <FormLabel>Variant</FormLabel>
-        <SingleSelect
-          value={variant}
-          name={label}
-          items={variants}
-          isClearable={false}
-          onChange={setVariant}
-        />
-      </FormControl>
+    <>
+      <Box py="0.5rem">
+        <FormControl isRequired>
+          <FormLabel>{label || "Variant"}</FormLabel>
+          <SingleSelect
+            value={variant}
+            name={label}
+            items={options}
+            isClearable={false}
+            onChange={onChange}
+          />
+        </FormControl>
+      </Box>
 
       {anyOfRenderInfos.map(
         (anyOfRenderInfo) =>
@@ -68,7 +88,7 @@ export function JsonFormsAnyOfControl({
             />
           ),
       )}
-    </Box>
+    </>
   )
 }
 

diff --git a/...diting-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx b/...diting-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx
@@ -3,7 +3,7 @@ import type {
   OwnPropsOfEnum,
   RankedTester,
 } from "@jsonforms/core"
-import { useState } from "react"
+import { useEffect } from "react"
 import { Box, FormControl } from "@chakra-ui/react"
 import { isEnumControl, rankWith } from "@jsonforms/core"
 import { withJsonFormsEnumProps } from "@jsonforms/react"
@@ -26,9 +26,16 @@ export function JsonFormsDropdownControl({
   options,
   schema,
 }: ControlProps & OwnPropsOfEnum) {
-  const [dropdownValue, setDropdownValue] = useState(data || "")
+  // Use the default value if it exists
+  useEffect(() => {
+    if (data !== undefined || data !== "") {
+      return
+    }
+    const value = schema.default || schema.const
+    handleChange(path, value)
+  }, [path, schema.default, schema.const, handleChange, data])
 
-  if (!options || (options.length === 1 && !!schema.default)) {
+  if (!options || (options.length === 1 && !!schema.const)) {
     return null
   }
 
@@ -42,12 +49,11 @@ export function JsonFormsDropdownControl({
       <FormControl isRequired={required}>
         <FormLabel description={description}>{label}</FormLabel>
         <SingleSelect
-          value={dropdownValue}
+          value={data}
           name={label}
           items={items}
           isClearable={false}
           onChange={(value) => {
-            setDropdownValue(value)
             handleChange(path, value)
           }}
         />