@availity/mui-controlled-form 0.2.6 → 0.3.1

package/src/lib/UtilComponents.tsx

@@ -0,0 +1,52 @@
+import { FormHTMLAttributes } from "react";
+import { Paper } from "@availity/mui-paper";
+import { Typography } from "@availity/mui-typography";
+import { Grid } from "@availity/mui-layout";
+import { Button } from "@availity/mui-button";
+import { useFormContext, FormProvider, UseFormProps, useForm, SubmitHandler } from "..";
+
+export const SubmittedValues = () => {
+  const {
+    getValues,
+    formState: { isSubmitSuccessful },
+  } = useFormContext();
+
+  return isSubmitSuccessful ? (
+    <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+      <Typography variant="h2">Submitted Values</Typography>
+      <pre data-testid="result">{JSON.stringify(getValues(), null, 2)}</pre>
+    </Paper>
+  ) : null;
+};
+
+export const Actions = () => {
+  const {
+    formState: { isSubmitSuccessful },
+  } = useFormContext();
+  return (
+    <Grid container direction="row" justifyContent="space-between">
+      <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
+    </Grid>
+  );
+};
+
+type TestFormProviderProps = {
+  UseFormOptions?: UseFormProps;
+  /** This function will receive the form data if form validation is successful. */
+  onSubmit?: SubmitHandler<any>;
+} & FormHTMLAttributes<HTMLFormElement>;
+
+/** `FormProvider` and `form`, also adds `Actions` and `SubmittedValues` components */
+export const TestForm = ({UseFormOptions, children, onSubmit = (data) => data, ...rest }: TestFormProviderProps) => {
+  const methods = useForm(UseFormOptions);
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)} noValidate {...rest}>
+        {children}
+        <Actions />
+        <SubmittedValues />
+      </form>
+    </FormProvider>
+  );
+};

package/docs/propDefinitions.tsx

@@ -1,31 +0,0 @@
-export const missingRHFprops = {
-  name: {
-    description: 'Unique name of your input.',
-  },
-  deps: {
-    description: 'Validation will be triggered for the dependent inputs, it only limited to register api not trigger.',
-  },
-  max: {
-    description: 'The maximum value to accept for this input.',
-  },
-  maxLength: {
-    description: 'The maximum length of the value to accept for this input.',
-  },
-  min: {
-    description: 'The minimum value to accept for this input.',
-  },
-  minLength: {
-    description: 'The minimum length of the value to accept for this input.',
-  },
-  pattern: {
-    description: 'The regex pattern for the input.',
-  },
-  shouldUnregister: {
-    description:
-      'Input will be unregistered after unmount and defaultValues will be removed as well. Note: this prop should be avoided when using with useFieldArray as unregister function gets called after input unmount/remount and reorder.',
-  },
-  required: {
-    description:
-      'A Boolean which, if true, indicates that the input must have a value before the form can be submitted. You can assign a string to return an error message in the errors object. Note: This config aligns with web constrained API for required input validation, for object or array type of input use validate function instead.',
-  },
-};