Support TextFieldComponent prop (mui#1087)

mnajdova · Jun 4, 2019 · 6e43811 · 6e43811
1 parent 8ac97be
commit 6e43811
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -306,6 +306,17 @@
       "required": false,
       "type": { "name": "\"standard\" | \"outlined\" | \"filled\"" }
     },
+    "TextFieldComponent": {
+      "defaultValue": null,
+      "description": "Override input component",
+      "name": "TextFieldComponent",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx",
+        "name": "PureDateInputProps"
+      },
+      "required": false,
+      "type": { "name": "ComponentType<TextFieldProps>" }
+    },
     "views": {
       "defaultValue": null,
       "description": "Array of views to show",
@@ -757,6 +768,17 @@
       "required": false,
       "type": { "name": "\"standard\" | \"outlined\" | \"filled\"" }
     },
+    "TextFieldComponent": {
+      "defaultValue": null,
+      "description": "Override input component",
+      "name": "TextFieldComponent",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/_shared/KeyboardDateInput.tsx",
+        "name": "KeyboardDateInputProps"
+      },
+      "required": false,
+      "type": { "name": "ComponentType<TextFieldProps>" }
+    },
     "keyboardIcon": {
       "defaultValue": null,
       "description": "Icon displaying for open picker button",
@@ -1241,6 +1263,17 @@
       "required": false,
       "type": { "name": "\"standard\" | \"outlined\" | \"filled\"" }
     },
+    "TextFieldComponent": {
+      "defaultValue": null,
+      "description": "Override input component",
+      "name": "TextFieldComponent",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx",
+        "name": "PureDateInputProps"
+      },
+      "required": false,
+      "type": { "name": "ComponentType<TextFieldProps>" }
+    },
     "views": {
       "defaultValue": null,
       "description": "Array of views to show",
@@ -1536,6 +1569,17 @@
       "required": false,
       "type": { "name": "\"standard\" | \"outlined\" | \"filled\"" }
     },
+    "TextFieldComponent": {
+      "defaultValue": null,
+      "description": "Override input component",
+      "name": "TextFieldComponent",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/_shared/KeyboardDateInput.tsx",
+        "name": "KeyboardDateInputProps"
+      },
+      "required": false,
+      "type": { "name": "ComponentType<TextFieldProps>" }
+    },
     "keyboardIcon": {
       "defaultValue": null,
       "description": "Icon displaying for open picker button",
@@ -1864,6 +1908,17 @@
       "required": false,
       "type": { "name": "\"standard\" | \"outlined\" | \"filled\"" }
     },
+    "TextFieldComponent": {
+      "defaultValue": null,
+      "description": "Override input component",
+      "name": "TextFieldComponent",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx",
+        "name": "PureDateInputProps"
+      },
+      "required": false,
+      "type": { "name": "ComponentType<TextFieldProps>" }
+    },
     "views": {
       "defaultValue": null,
       "description": "Array of views to show",
@@ -2370,6 +2425,17 @@
       "required": false,
       "type": { "name": "\"standard\" | \"outlined\" | \"filled\"" }
     },
+    "TextFieldComponent": {
+      "defaultValue": null,
+      "description": "Override input component",
+      "name": "TextFieldComponent",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/_shared/KeyboardDateInput.tsx",
+        "name": "KeyboardDateInputProps"
+      },
+      "required": false,
+      "type": { "name": "ComponentType<TextFieldProps>" }
+    },
     "keyboardIcon": {
       "defaultValue": null,
       "description": "Icon displaying for open picker button",

diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx
@@ -16,6 +16,8 @@ export interface KeyboardDateInputProps
   validationError?: React.ReactNode;
   inputValue: string;
   InputProps?: TextFieldProps['InputProps'];
+  /** Override input component */
+  TextFieldComponent?: React.ComponentType<TextFieldProps>;
   /** Icon displaying for open picker button */
   keyboardIcon?: React.ReactNode;
   /** Pass material-ui text field variant down, bypass internal variant prop */
@@ -61,6 +63,7 @@ const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps> = ({
   format,
   keyboardIcon,
   disabled,
+  TextFieldComponent = TextField,
   ...other
 }) => {
   const inputMask = mask || makeMaskFromFormat(format, maskChar);
@@ -76,7 +79,7 @@ const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps> = ({
   return (
     <Rifm value={inputValue} onChange={onChange} refuse={refuse} format={formatter}>
       {({ onChange, value }) => (
-        <TextField
+        <TextFieldComponent
           disabled={disabled}
           error={Boolean(validationError)}
           helperText={validationError}

diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx
@@ -6,6 +6,8 @@ export interface PureDateInputProps
   extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
   /** Pass material-ui text field variant down, bypass internal variant prop */
   inputVariant?: TextFieldProps['variant'];
+  /** Override input component */
+  TextFieldComponent?: React.ComponentType<TextFieldProps>;
   InputProps?: TextFieldProps['InputProps'];
   inputValue: string;
   validationError?: React.ReactNode;
@@ -16,6 +18,7 @@ export const PureDateInput: React.FC<PureDateInputProps> = ({
   inputVariant,
   validationError,
   InputProps,
+  TextFieldComponent = TextField,
   ...other
 }) => {
   const PureDateInputProps = React.useMemo(
@@ -27,7 +30,7 @@ export const PureDateInput: React.FC<PureDateInputProps> = ({
   );
 
   return (
-    <TextField
+    <TextFieldComponent
       error={Boolean(validationError)}
       helperText={validationError}
       {...other}

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "release": "yarn workspace @material-ui/pickers release && yarn workspace docs deploy",
     "e2e:open": "cypress open",
     "e2e:run": "cypress run",
+    "docgen": "node docs/scripts/docgen.js",
     "lint": "eslint './**/*.ts*' './**/*.js' './**/*.jsx'"
   },
   "repository": {