HZC-6947: nested formik field (#547)

* add kapa btn * handle nested object
hazelcast · May 16, 2024 · f437387 · f437387
1 parent d1cfa9e
commit f437387
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 4 deletions.
diff --git a/.../ui/.loki/reference/chrome_minimal_Components_NumberField_Wrapped_In_Formik.png b/.../ui/.loki/reference/chrome_minimal_Components_NumberField_Wrapped_In_Formik.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png
diff --git a/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png b/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png
diff --git a/packages/ui/__stories__/NumberField.stories.tsx b/packages/ui/__stories__/NumberField.stories.tsx
@@ -110,6 +110,9 @@ WithoutIncAndDecButtons.args = {
 export const WrappedInFormik = () => {
   type Values = {
     ram: number
+    mapStore: {
+      ttl: number
+    }
   }
 
   const validateRAM = (value: number | undefined) => (value == undefined || value < 4 ? 'RAM is too low' : undefined)
@@ -118,6 +121,9 @@ export const WrappedInFormik = () => {
     <Formik<Values>
       initialValues={{
         ram: 0,
+        mapStore: {
+          ttl: 0,
+        },
       }}
       initialErrors={{
         ram: 'Server Error: Invalid RAM amount',
@@ -128,6 +134,14 @@ export const WrappedInFormik = () => {
         <Form>
           Values: {JSON.stringify(values)}
           <NumberFieldFormik<Values> name="ram" label="Name" validate={validateRAM} min={0} max={64} />
+          <NumberFieldFormik<Values>
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            name="mapStore.ttl"
+            label="Nested"
+            min={0}
+            max={64}
+          />
           <button type="submit">Submit</button>
         </Form>
       )}

diff --git a/packages/ui/src/NumberFieldFormik.tsx b/packages/ui/src/NumberFieldFormik.tsx
@@ -11,6 +11,26 @@ export type NumberFieldFormikProps<V extends object> = NumberFieldExtraProps & {
   onChange?: (value?: number) => void
 }
 
+const changeNestedObjectValue = <V extends object>(oldValues: V, name: string, updatedValue: number | undefined) => {
+  const nameProps: string[] = name.split('.')
+  const newValues = {
+    ...oldValues,
+  }
+  nameProps.reduce((nestedValues: object, nextName: string, currentIndex) => {
+    if (currentIndex < nameProps.length - 1) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return (nestedValues[nextName] as object) || {}
+    } else {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      nestedValues[nextName] = updatedValue
+      return nestedValues
+    }
+  }, newValues)
+  return newValues
+}
+
 export const NumberFieldFormik = <V extends object>({ name, validate, onChange, ...props }: NumberFieldFormikProps<V>): ReactElement => {
   const [{ value, onBlur }, meta, { setTouched }] = useField<number | undefined>({
     name,
@@ -28,10 +48,7 @@ export const NumberFieldFormik = <V extends object>({ name, validate, onChange,
     setTouched(true, false)
     // Override default behavior by forcing undefined to be set on the state
     if (value === undefined) {
-      const newValues = {
-        ...formik.values,
-        [name]: undefined,
-      }
+      const newValues = changeNestedObjectValue(formik.values, name, value)
       formik.setValues({
         ...newValues,
       })