Merge pull request #10 from eBay/fix-utils-and-examples

Fix utils and examples
eBay · May 22, 2024 · 89f0022 · 89f0022
2 parents b947c82 + 08a4354
commit 89f0022
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 116 deletions.
diff --git a/packages/examples-antd/src/examples/Wizard.tsx b/packages/examples-antd/src/examples/Wizard.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import { Form, Button, Steps } from 'antd';
 import NiceForm from '@ebay/nice-form-react';
-import cloneDeep from 'lodash/cloneDeep';
 import { NiceFormFieldType } from '@ebay/nice-form-react/lib/esm/NiceFormMeta';
 import type { Dayjs } from 'dayjs';
 
@@ -22,60 +21,63 @@ interface WizardMeta {
   steps: Step[];
 }
 
-const wizardMeta: WizardMeta = {
-  steps: [
-    {
-      title: 'Personal Information',
-      formMeta: {
-        columns: 2,
-        fields: [
-          { key: 'name.first', label: 'First Name', initialValue: 'Nate', required: true },
-          { key: 'name.last', label: 'Last Name', initialValue: 'Wang', required: true },
-          { key: 'dob', label: 'Date of Birth', widget: 'date-picker', viewWidget: 'date-view' },
-          {
-            key: 'noAccountInfo',
-            label: 'No Account Info',
-            widget: 'switch',
-            // dynamic: true,
-            tooltip: 'Switch on to remove account step',
-          },
-        ],
+const getInitialMeta = () => {
+  const wizardMeta: WizardMeta = {
+    steps: [
+      {
+        title: 'Personal Information',
+        formMeta: {
+          columns: 2,
+          fields: [
+            { key: 'name.first', label: 'First Name', initialValue: 'Nate', required: true },
+            { key: 'name.last', label: 'Last Name', initialValue: 'Wang', required: true },
+            { key: 'dob', label: 'Date of Birth', widget: 'date-picker', viewWidget: 'date-view' },
+            {
+              key: 'noAccountInfo',
+              label: 'No Account Info',
+              widget: 'switch',
+              // dynamic: true,
+              tooltip: 'Switch on to remove account step',
+            },
+          ],
+        },
       },
-    },
-    {
-      title: 'Account Information',
-      formMeta: {
-        columns: 2,
-        fields: [
-          {
-            key: 'email',
-            label: 'Email',
-            clear: 'right',
-            rules: [{ type: 'email', message: 'Invalid email' }],
-          },
-          {
-            key: 'security',
-            label: 'Security Question',
-            widget: 'select',
-            placeholder: 'Select a question...',
-            options: ["What's your pet's name?", 'Your nick name?'],
-          },
-          { key: 'answer', label: 'Security Answer' },
-        ],
+      {
+        title: 'Account Information',
+        formMeta: {
+          columns: 2,
+          fields: [
+            {
+              key: 'email',
+              label: 'Email',
+              clear: 'right',
+              rules: [{ type: 'email', message: 'Invalid email' }],
+            },
+            {
+              key: 'security',
+              label: 'Security Question',
+              widget: 'select',
+              placeholder: 'Select a question...',
+              options: ["What's your pet's name?", 'Your nick name?'],
+            },
+            { key: 'answer', label: 'Security Answer' },
+          ],
+        },
       },
-    },
-    {
-      title: 'Contact Information',
-      formMeta: {
-        columns: 2,
-        fields: [
-          { key: 'address', label: 'Address', colSpan: 2 },
-          { key: 'city', label: 'City' },
-          { key: 'phone', label: 'phone' },
-        ],
+      {
+        title: 'Contact Information',
+        formMeta: {
+          columns: 2,
+          fields: [
+            { key: 'address', label: 'Address', colSpan: 2 },
+            { key: 'city', label: 'City' },
+            { key: 'phone', label: 'phone' },
+          ],
+        },
       },
-    },
-  ],
+    ],
+  };
+  return wizardMeta;
 };
 
 export default () => {
@@ -87,7 +89,7 @@ export default () => {
   }, [form]);
 
   // Clone the meta for dynamic change
-  const newWizardMeta = cloneDeep(wizardMeta);
+  const newWizardMeta = getInitialMeta();
   if (form.getFieldValue('noAccountInfo')) {
     newWizardMeta.steps.splice(1, 1);
   }

diff --git a/packages/examples-formik/src/examples/Wizard.tsx b/packages/examples-formik/src/examples/Wizard.tsx
@@ -13,10 +13,9 @@ import {
   FormikMuiNiceFormMeta,
   FormikMuiNiceFormField,
 } from '@ebay/nice-form-react/adapters/formikMuiAdapter';
-import cloneDeep from 'lodash/cloneDeep';
 const DateView = ({ value }: { value: Dayjs }) => (value ? value.format('MMM Do YYYY') : 'N/A');
 
-NiceForm.defineWidget('date-view', DateView, ({ field }) => field);
+NiceForm.defineWidget('date-view', DateView);
 
 interface StepItem {
   title: string;
@@ -38,73 +37,75 @@ interface FormValues {
   phone: string;
 }
 
-const wizardMeta = {
-  steps: [
-    {
-      title: 'Personal Information',
-      formMeta: {
-        columns: 2,
-        rowGap: 18,
-        columnGap: 18,
-        fields: [
-          { key: 'name.first', label: 'First Name', initialValue: 'Nate', required: true },
-          { key: 'name.last', label: 'Last Name', initialValue: 'Wang', required: true },
-          { key: 'dob', label: 'Date of Birth', widget: 'date-picker', viewWidget: 'date-view' },
-          {
-            key: 'noAccountInfo',
-            label: 'No Account Info',
-            widget: 'switch',
-            tooltip: 'Switch on to remove account step',
-          },
-        ],
+const getInitialMeta = () =>  {
+  const wizardMeta = {
+    steps: [
+      {
+        title: 'Personal Information',
+        formMeta: {
+          columns: 2,
+          rowGap: 18,
+          columnGap: 18,
+          fields: [
+            { key: 'name.first', label: 'First Name', initialValue: 'Nate', required: true },
+            { key: 'name.last', label: 'Last Name', initialValue: 'Wang', required: true },
+            { key: 'dob', label: 'Date of Birth', widget: 'date-picker', viewWidget: 'date-view' },
+            {
+              key: 'noAccountInfo',
+              label: 'No Account Info',
+              widget: 'switch',
+              tooltip: 'Switch on to remove account step',
+            },
+          ],
+        },
       },
-    },
-    {
-      title: 'Account Information',
-      formMeta: {
-        columns: 2,
-        rowGap: 18,
-        columnGap: 18,
-        fields: [
-          {
-            key: 'email',
-            label: 'Email',
-            clear: 'right',
-            rules: [{ type: 'email', message: 'Invalid email' }],
-          },
-          {
-            key: 'security',
-            label: 'Security Question',
-            widget: 'select',
-            fullWidth: true,
-            placeholder: 'Select a question...',
-            options: ["What's your pet's name?", 'Your nick name?'],
-          },
-          { key: 'answer', label: 'Security Answer' },
-        ],
+      {
+        title: 'Account Information',
+        formMeta: {
+          columns: 2,
+          rowGap: 18,
+          columnGap: 18,
+          fields: [
+            {
+              key: 'email',
+              label: 'Email',
+              clear: 'right',
+              rules: [{ type: 'email', message: 'Invalid email' }],
+            },
+            {
+              key: 'security',
+              label: 'Security Question',
+              widget: 'select',
+              fullWidth: true,
+              placeholder: 'Select a question...',
+              options: ["What's your pet's name?", 'Your nick name?'],
+            },
+            { key: 'answer', label: 'Security Answer' },
+          ],
+        },
       },
-    },
-    {
-      title: 'Contact Information',
-      formMeta: {
-        columns: 2,
-        rowGap: 18,
-        columnGap: 18,
-        fields: [
-          { key: 'address', label: 'Address', colSpan: 2 },
-          { key: 'city', label: 'City' },
-          { key: 'phone', label: 'phone' },
-        ],
+      {
+        title: 'Contact Information',
+        formMeta: {
+          columns: 2,
+          rowGap: 18,
+          columnGap: 18,
+          fields: [
+            { key: 'address', label: 'Address', colSpan: 2 },
+            { key: 'city', label: 'City' },
+            { key: 'phone', label: 'phone' },
+          ],
+        },
       },
-    },
-  ],
+    ] as StepItem[],
+  };
+  return wizardMeta;
 };
 
 const Wizard = () => {
   const [currentStep, setCurrentStep] = useState(0);
-
   // Clone the meta for dynamic change
-  const newWizardMeta = cloneDeep(wizardMeta);
+  const newWizardMeta = getInitialMeta();
 
   // Generate a general review step
   const reviewFields: object[] = [];

diff --git a/packages/nice-form-react/src/NiceForm.tsx b/packages/nice-form-react/src/NiceForm.tsx
@@ -141,7 +141,7 @@ NiceForm.addAdapter = (adapter: NiceFormAdapter) => {
 NiceForm.defineWidget = (
   name: string,
   widget: ReactComponent,
-  metaConverter: FieldMetaConverter,
+  metaConverter?: FieldMetaConverter,
 ) => {
   config.defineWidget(name, widget, metaConverter);
 };

diff --git a/packages/nice-form-react/src/types.ts b/packages/nice-form-react/src/types.ts
@@ -423,7 +423,7 @@ export interface NiceFormConfig {
   defineWidget: (
     name: string,
     widget: ReactComponent,
-    metaConverter: ({ meta, field }: { meta: NiceFormMeta; field: NiceFormField }) => NiceFormField,
+    metaConverter?: ({ meta, field }: { meta: NiceFormMeta; field: NiceFormField }) => NiceFormField,
   ) => void;
 
   /**