feat: Adiciona FormTable, FormGroupTable, UncontrolledFormTable e UncontrolledFormGroupTable

demo/FormExamples.jsx

@@ -14,6 +14,8 @@ import {
   FormGroupAutocompleteTag,
   Table,
   FormAutocompleteTag,
+  FormGroupTable,
+  Dialog,
   // eslint-disable-next-line import/no-unresolved
 } from '../dist/main';
 
@@ -95,6 +97,14 @@ export function FormExamples() {
           },
         },
       ],
+      formTable2: [
+        {
+          message: 'Must have more than 2 itens',
+          validate(value) {
+            return value?.length > 2;
+          },
+        },
+      ],
     }),
     [changeCustomValidation]
   );
@@ -761,6 +771,12 @@ export function FormExamples() {
         menuClassName="p-4 w-100"
       />
 
+      <h5>FormTable</h5>
+      <div className="row mb-2">
+        <FormGroupTable1 />
+        <FormGroupTable2 />
+      </div>
+
       <ResetForm />
       <ClearForm />
     </Form>
@@ -861,3 +877,82 @@ function FormAutocompleteTagsWithCustomLabel() {
     </div>
   );
 }
+
+function FormGroupTable1() {
+  return (
+    <FormGroupTable
+      name="formTable1"
+      required
+      label="Simple FormTable"
+      afterChange={(...args) => console.log('formTable', args)}
+      tableProps={{
+        actionLabel: 'Actions',
+        columns: [
+          {
+            attribute: 'name',
+            label: 'Name',
+          },
+          {
+            attribute: 'number',
+            label: 'Number',
+          },
+        ],
+      }}
+      getRemoveComponent={(removeItem) => <i className="bi bi-trash-fill" onClick={() => removeItem()}></i>}
+      getAddItemComponent={(addItem) => <AddFormGroupTableItem addItem={addItem} />}
+    />
+  );
+}
+function FormGroupTable2() {
+  return (
+    <FormGroupTable
+      name="formTable2"
+      required
+      label="FormTable with minimum itens validation"
+      tableProps={{
+        actionLabel: 'Actions',
+        columns: [
+          {
+            attribute: 'name',
+            label: 'Name',
+          },
+          {
+            attribute: 'number',
+            label: 'Number',
+          },
+        ],
+      }}
+      getRemoveComponent={(removeItem) => <i className="bi bi-trash-fill" onClick={() => removeItem()}></i>}
+      getAddItemComponent={(addItem) => <AddFormGroupTableItem addItem={addItem} />}
+    />
+  );
+}
+
+function AddFormGroupTableItem({ addItem }) {
+  return (
+    <Dialog
+      title="Add item"
+      body={({ close }) => (
+        <Form
+          initialValues={{}}
+          onSubmit={(data) => {
+            console.info('submit', data);
+            addItem(data);
+            close();
+          }}
+          onCancel={() => {
+            console.warn('cancel');
+            close();
+          }}
+        >
+          <FormGroupInput name="name" label="Name" required />
+          <FormGroupInput name="number" label="Number" type="number" required />
+        </Form>
+      )}
+    >
+      <button type="button" className="btn btn-primary">
+        Add item
+      </button>
+    </Dialog>
+  );
+}

demo/UncontrolledFormExamples.jsx

@@ -14,6 +14,8 @@ import {
   UncontrolledFormGroupAutocomplete,
   UncontrolledFormGroupDropdown,
   UncontrolledFormGroupRadio,
+  UncontrolledFormGroupTable,
+  Dialog,
 } from '../dist/main';
 
 export function UncontrolledFormExamples() {
@@ -84,6 +86,14 @@ export function UncontrolledFormExamples() {
               },
             },
           ],
+          formTable2: [
+            {
+              message: 'Must have more than 2 itens',
+              validate(value) {
+                return value?.length > 2;
+              },
+            },
+          ],
         }}
       >
         <h5>Form configuration:</h5>
@@ -426,6 +436,12 @@ export function UncontrolledFormExamples() {
           <FormTextareaSetValueTeste1 />
           <FormTextareaSetValueTeste2 />
         </div>
+
+        <h5>FormTable</h5>
+        <div className="row mb-2">
+          <FormUncontrolledFormGroupTable1 />
+          <FormUncontrolledFormGroupTable2 />
+        </div>
       </UncontrolledForm>
     </div>
   );
@@ -1095,3 +1111,82 @@ function FormTextareaSetValueTeste2({}) {
     </div>
   );
 }
+
+function FormUncontrolledFormGroupTable1() {
+  return (
+    <UncontrolledFormGroupTable
+      name="formTable1"
+      required
+      label="Simple UncontrolledFormTable"
+      afterChange={(...args) => console.log('formTable', args)}
+      tableProps={{
+        actionLabel: 'Actions',
+        columns: [
+          {
+            attribute: 'name',
+            label: 'Name',
+          },
+          {
+            attribute: 'number',
+            label: 'Number',
+          },
+        ],
+      }}
+      getRemoveComponent={(removeItem) => <i className="bi bi-trash-fill" onClick={() => removeItem()}></i>}
+      getAddItemComponent={(addItem) => <AddFormGroupTableItem addItem={addItem} />}
+    />
+  );
+}
+function FormUncontrolledFormGroupTable2() {
+  return (
+    <UncontrolledFormGroupTable
+      name="formTable2"
+      required
+      label="UncontrolledFormTable with minimum itens validation"
+      tableProps={{
+        actionLabel: 'Actions',
+        columns: [
+          {
+            attribute: 'name',
+            label: 'Name',
+          },
+          {
+            attribute: 'number',
+            label: 'Number',
+          },
+        ],
+      }}
+      getRemoveComponent={(removeItem) => <i className="bi bi-trash-fill" onClick={() => removeItem()}></i>}
+      getAddItemComponent={(addItem) => <AddFormGroupTableItem addItem={addItem} />}
+    />
+  );
+}
+
+function AddFormGroupTableItem({ addItem }) {
+  return (
+    <Dialog
+      title="Add item"
+      body={({ close }) => (
+        <UncontrolledForm
+          initialValues={{}}
+          onSubmit={(data) => {
+            console.info('submit', data);
+            addItem(data);
+            close();
+          }}
+          onCancel={() => {
+            console.warn('cancel');
+            close();
+          }}
+        >
+          <UncontrolledFormGroupInput name="name" label="Name" required />
+          <UncontrolledFormGroupInput name="number" label="Number" type="number" required />
+        </UncontrolledForm>
+      )}
+    >
+      <button type="button" className="btn btn-primary">
+        Add item
+      </button>
+    </Dialog>
+  );
+}