Remove field array row issue added

witbybit · Oct 11, 2022 · 6d3f204 · 6d3f204
1 parent 7a104e2
commit 6d3f204
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 8 deletions.
diff --git a/src/stories/Repros.stories.tsx b/src/stories/Repros.stories.tsx
@@ -0,0 +1,10 @@
+import FieldArrayRepro from './repros/FieldArrayRepro';
+import React from 'react';
+
+export default {
+  title: 'Repros',
+};
+
+export function FieldArrayReproStory() {
+  return <FieldArrayRepro />;
+}
diff --git a/src/stories/repros/FieldArrayRepro.tsx b/src/stories/repros/FieldArrayRepro.tsx
@@ -0,0 +1,134 @@
+import { shuffle } from 'lodash';
+import * as React from 'react';
+import { useFieldArray, useForm, withFormProvider } from '../../FormProvider';
+import Button from '../utils/Button';
+import { InputField } from '../utils/Fields';
+import MetaData from '../utils/MetaData';
+
+function FieldArrayRepro() {
+  const [formData, setFormData] = React.useState({});
+
+  function onSubmit(values: any, extra: any) {
+    setFormData({ values, extra, time: new Date().toString() });
+  }
+
+  const { handleSubmit, resetInitialValues, validateFields } = useForm({
+    onSubmit,
+    onError: (error) => setFormData((value) => ({ ...value, error })),
+    initialValues: {
+      groupBy: [
+        {
+          id: 'customerId',
+          label: 'Customer',
+          sort: 'asc',
+        },
+        {
+          id: 'itemId',
+          label: 'Item',
+          sort: 'desc',
+        },
+      ],
+    },
+  });
+
+  const fields = ['id', 'label', 'sort'];
+
+  const {
+    fieldArrayProps,
+    remove,
+    append,
+    error,
+    getFieldArrayValue,
+    setFieldArrayValue,
+  } = useFieldArray({
+    fieldNames: fields,
+    name: 'groupBy',
+  });
+
+  function reorder() {
+    const values = getFieldArrayValue();
+
+    const temp = shuffle(values);
+
+    setFieldArrayValue(temp);
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <InputField name="name" type="text" />
+
+        <div>
+          <table>
+            <tbody>
+              {fieldArrayProps.rowIds.map((r, idx) => {
+                return (
+                  <tr key={r}>
+                    <React.Fragment>
+                      {fields.map((f) => (
+                        <td key={f} className="px-2">
+                          <InputField
+                            ancestors={[{ name: 'groupBy', rowId: r }]}
+                            name={f}
+                            type="text"
+                            validate={(value) =>
+                              !value ? `Value missing` : ''
+                            }
+                          />
+                        </td>
+                      ))}
+                      <td className="px-2">
+                        <div className="flex gap-2">
+                          <Button
+                            small
+                            color="red"
+                            type="button"
+                            onClick={() => remove(idx)}
+                          >
+                            Remove
+                          </Button>
+                        </div>
+                      </td>
+                    </React.Fragment>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          <Button small type="button" onClick={() => append()}>
+            Add Row
+          </Button>
+          {error && <div style={{ color: 'red' }}>{error}</div>}
+        </div>
+
+        <br />
+
+        <div className="flex gap-4">
+          <Button type="submit" primary>
+            Submit
+          </Button>
+          <Button type="button" onClick={() => resetInitialValues()}>
+            Reset
+          </Button>
+          <Button
+            type="button"
+            onClick={() =>
+              validateFields([{ name: 'items', type: 'field-array' }])
+            }
+          >
+            Validate
+          </Button>
+          <Button onClick={reorder} color="green">
+            Reorder
+          </Button>
+        </div>
+      </form>
+
+      <br />
+
+      <MetaData formData={formData} />
+    </div>
+  );
+}
+
+export default withFormProvider(FieldArrayRepro);
diff --git a/src/stories/utils/Button.tsx b/src/stories/utils/Button.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 
 export default function Button(props: any) {
-  const { children, primary, small, ...rest } = props;
+  const { children, primary, small, color = 'blue', ...rest } = props;
   return (
     <button
       {...rest}
       className={`flex justify-center rounded-md shadow-sm text-sm font-medium  ${
         primary
-          ? 'border border-transparent text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500'
-          : 'border border-transparent  text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500'
+          ? `border border-transparent text-white bg-${color}-600 hover:bg-${color}-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-${color}-500`
+          : `border border-transparent  text-${color}-700 bg-${color}-100 hover:bg-${color}-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-${color}-500`
       } ${small ? 'py-1 px-2' : 'py-2 px-4'}`}
     >
       {children}

diff --git a/src/stories/utils/Fields.tsx b/src/stories/utils/Fields.tsx
@@ -92,9 +92,7 @@ export function InputField(props: InputFieldProps) {
         value={field.fieldValue ?? ''}
         onBlur={field.onBlur}
       />
-      {field.error && (
-        <div className="text-red-500 text-sm mt-1">{field.error}</div>
-      )}
+      {field.error && <div className="text-red-500 text-sm">{field.error}</div>}
     </div>
   );
 }
@@ -126,7 +124,7 @@ export function TableField(props: TableFieldProps) {
               <tr key={r}>
                 <React.Fragment>
                   {props.fields.map((f) => (
-                    <td key={f.name}>
+                    <td key={f.name} className="px-2">
                       <InputField
                         ancestors={[{ name: props.name, rowId: r }]}
                         name={f.name}
@@ -135,10 +133,11 @@ export function TableField(props: TableFieldProps) {
                       />
                     </td>
                   ))}
-                  <td>
+                  <td className="px-2">
                     <div className="flex gap-2">
                       <Button
                         small
+                        color="red"
                         type="button"
                         onClick={() => tableField.remove(idx)}
                       >
@@ -147,6 +146,7 @@ export function TableField(props: TableFieldProps) {
                       <Button
                         small
                         type="button"
+                        color="emerald"
                         onClick={() =>
                           tableField.insert(
                             idx + 1,