fix(Form): optimize field creation

Author: tenphi

.changeset/quick-badgers-guess.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Do not create field instance for non-exist fields in Form. Use default values from Form when creating new fields.

src/components/fields/TextInputMapper/TextInputMapper.stories.tsx

@@ -28,6 +28,22 @@ const Template: StoryFn<CubeTextInputMapperProps> = ({ ...props }) => (
 );
 
 const FormTemplate: StoryFn<CubeTextInputMapperProps> = ({ ...props }) => (
+  <Form
+    defaultValues={{ field: { name: 'value' } }}
+    labelPosition="top"
+    onSubmit={(data) => console.log('! onSubmit', data)}
+  >
+    <TextInputMapper
+      name="field"
+      label="Field Mapper"
+      {...props}
+      onChange={(value) => console.log('! onChange', value)}
+    />
+    <Submit>Submit</Submit>
+  </Form>
+);
+
+const FormTemplateSync: StoryFn<CubeTextInputMapperProps> = ({ ...props }) => (
   <Form
     defaultValues={{ field: { name: 'value' } }}
     labelPosition="top"
@@ -66,3 +82,6 @@ WithValueAndNewMapping.play = async ({ canvasElement }) => {
 
 export const WithinForm = FormTemplate.bind({});
 WithinForm.args = {};
+
+export const WithinFormInputSync = FormTemplateSync.bind({});
+WithinFormInputSync.args = {};

src/components/form/Form/use-form.tsx

@@ -34,7 +34,7 @@ export class CubeFormInstance<
   TFormData extends CubeFormData<T> = CubeFormData<T>,
 > {
   public forceReRender: () => void = () => {};
-  private initialFields: PartialString<T> = {};
+  private defaultValues: PartialString<T> = {};
   private fields: TFormData = {} as TFormData;
   public ref = {};
   public isSubmitting = false;
@@ -70,17 +70,17 @@ export class CubeFormInstance<
     newData: PartialString<T>,
     touched?: boolean,
     skipRender?: boolean,
-    createFields = false,
     inputOnly = false,
   ) => {
     let flag = false;
 
+    newData = { ...newData, ...dotize.convert(newData) };
+
     Object.keys(newData).forEach((name: keyof T & string) => {
       let field = this.fields[name];
 
-      if (!field && createFields) {
-        this.createField(name, skipRender);
-        field = this.fields[name];
+      if (!field) {
+        return;
       }
 
       if (!field || isEqual(field.value, newData[name])) {
@@ -205,35 +205,35 @@ export class CubeFormInstance<
   }
 
   setInitialFieldsValue(values: PartialString<T>): void {
-    this.initialFields = { ...values, ...dotize.convert(values) };
+    this.defaultValues = { ...values, ...dotize.convert(values) };
   }
 
   updateInitialFieldsValue(values: FieldTypes): void {
-    this.initialFields = {
-      ...this.initialFields,
+    this.defaultValues = {
+      ...this.defaultValues,
       ...values,
       ...dotize.convert(values),
     };
   }
 
   resetFields(names?: (keyof T & string)[], skipRender?: boolean): void {
     const fieldsValue = this.getFieldsValue();
-    const fieldNames = Object.keys({ ...fieldsValue, ...this.initialFields });
+    const fieldNames = Object.keys({ ...fieldsValue, ...this.defaultValues });
     const filteredFieldNames = names
       ? fieldNames.filter((name) => names.includes(name))
       : fieldNames;
 
     const values = filteredFieldNames.reduce((map, name) => {
-      if (name in this.initialFields) {
-        map[name] = this.initialFields[name];
+      if (name in this.defaultValues) {
+        map[name] = this.defaultValues[name];
       } else {
         map[name] = undefined;
       }
 
       return map;
     }, {});
 
-    this.setFieldsValue(values, false, skipRender, true);
+    this.setFieldsValue(values, false, skipRender);
   }
 
   async validateField<Name extends keyof T & string>(name: Name): Promise<any> {
@@ -404,6 +404,7 @@ export class CubeFormInstance<
       touched: false,
       errors: [],
       validationId: 0,
+      value: this.defaultValues[name],
       ...data,
       // it should be impossible to define or override status value
       status: data?.errors?.length ? 'invalid' : undefined,