@availity/mui-controlled-form 0.1.0

package/src/lib/TextField.tsx

@@ -0,0 +1,67 @@
+import { TextField, TextFieldProps } from '@availity/mui-textfield';
+import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+
+export type ControlledTextFieldProps = Omit<TextFieldProps, 'required'> & {
+  name: string;
+} & RegisterOptions<FieldValues, string>;
+
+export const ControlledTextField = ({
+  name,
+  helperText,
+  required,
+  maxLength,
+  minLength,
+  max,
+  min,
+  pattern,
+  validate,
+  setValueAs,
+  disabled,
+  onChange,
+  onBlur,
+  value,
+  shouldUnregister,
+  deps,
+  ...rest
+}: ControlledTextFieldProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const errorMessage = errors[name]?.message;
+
+  return (
+    <TextField
+      {...rest}
+      {...register(name, {
+        required,
+        maxLength,
+        minLength,
+        max,
+        min,
+        pattern,
+        validate,
+        setValueAs,
+        disabled,
+        onChange,
+        onBlur,
+        value,
+        shouldUnregister,
+        deps,
+      })}
+      error={!!errors[name]}
+      helperText={
+        errorMessage && typeof errorMessage === 'string' ? (
+          <>
+            {errorMessage}
+            <br />
+            {helperText}
+          </>
+        ) : (
+          helperText
+        )
+      }
+    />
+  );
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}