From 08a4354780a8d36eda6585aca2653b74d2d8105e Mon Sep 17 00:00:00 2001 From: Lin Gao Date: Wed, 22 May 2024 16:31:26 +0800 Subject: [PATCH] Refine getInitialMeta. --- .../examples-antd/src/examples/Wizard.tsx | 107 ++++++++-------- .../examples-formik/src/examples/Wizard.tsx | 121 +++++++++--------- packages/nice-form-react/src/NiceForm.tsx | 2 +- 3 files changed, 116 insertions(+), 114 deletions(-) diff --git a/packages/examples-antd/src/examples/Wizard.tsx b/packages/examples-antd/src/examples/Wizard.tsx index abdc746..bd78f74 100644 --- a/packages/examples-antd/src/examples/Wizard.tsx +++ b/packages/examples-antd/src/examples/Wizard.tsx @@ -21,64 +21,65 @@ 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; }; -const getInitialMeta = () => ({...wizardMeta, steps: wizardMeta.steps.map((s: Step) => s)}); - export default () => { const [form] = Form.useForm(); const updateOnChange = NiceForm.useUpdateOnChange('*'); diff --git a/packages/examples-formik/src/examples/Wizard.tsx b/packages/examples-formik/src/examples/Wizard.tsx index b9cbd20..2c63921 100644 --- a/packages/examples-formik/src/examples/Wizard.tsx +++ b/packages/examples-formik/src/examples/Wizard.tsx @@ -15,7 +15,7 @@ import { } from '@ebay/nice-form-react/adapters/formikMuiAdapter'; 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; @@ -37,70 +37,71 @@ 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 getInitialMeta = () => ({...wizardMeta, steps: wizardMeta.steps.map(((s: StepItem) => s),)}); - const Wizard = () => { const [currentStep, setCurrentStep] = useState(0); // Clone the meta for dynamic change diff --git a/packages/nice-form-react/src/NiceForm.tsx b/packages/nice-form-react/src/NiceForm.tsx index 5dcf6df..debb8d3 100644 --- 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); };