Add readOnly prop (#1316)

* Add readOnly prop * Update e2e/integration/DatePicker.spec.ts
mui · Sep 13, 2019 · 0fd3094 · 0fd3094
1 parent c7ec953
commit 0fd3094
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 69 deletions.
diff --git a/docs/pages/regression/Regression.tsx b/docs/pages/regression/Regression.tsx
@@ -0,0 +1,52 @@
+import React, { useState, useContext } from 'react';
+import LeftArrowIcon from '@material-ui/icons/KeyboardArrowLeft';
+import RightArrowIcon from '@material-ui/icons/KeyboardArrowRight';
+import { Grid, Typography } from '@material-ui/core';
+import { MuiPickersContext } from '@material-ui/pickers';
+import { DatePicker, KeyboardDatePicker } from '@material-ui/pickers';
+import { createRegressionDay as createRegressionDayRenderer } from './RegressionDay';
+
+function Regression() {
+  const utils = useContext(MuiPickersContext);
+  const [date, changeDate] = useState<Date | null>(new Date('2019-01-01T00:00:00.000'));
+
+  const sharedProps = {
+    value: date,
+    onChange: changeDate,
+    style: { margin: '0 10px' },
+    format: 'MMMM d',
+    leftArrowIcon: <LeftArrowIcon data-arrow="left" />,
+    rightArrowIcon: <RightArrowIcon data-arrow="right" />,
+    renderDay: createRegressionDayRenderer(utils!),
+    KeyboardButtonProps: {
+      className: 'keyboard-btn',
+    },
+  };
+
+  return (
+    <div style={{ marginTop: 30 }}>
+      <Typography align="center" variant="h5" gutterBottom>
+        This page is using for the automate regression of @material-ui/pickers.
+      </Typography>
+
+      <Typography align="center" variant="h4" component="span" gutterBottom>
+        DatePicker
+      </Typography>
+
+      <Grid container justify="center" wrap="wrap">
+        <DatePicker id="basic-datepicker" {...sharedProps} />
+        <DatePicker id="clearable-datepicker" clearable {...sharedProps} />
+        <KeyboardDatePicker
+          id="keyboard-mask-datepicker"
+          {...sharedProps}
+          onChange={changeDate}
+          format="MM/dd/yyyy"
+        />
+        <DatePicker disabled id="disabled" {...sharedProps} />
+        <DatePicker readOnly id="readonly" {...sharedProps} />
+      </Grid>
+    </div>
+  );
+}
+
+export default Regression;
diff --git a/docs/pages/regression/index.tsx b/docs/pages/regression/index.tsx
@@ -1,51 +1 @@
-import React, { useState, useContext } from 'react';
-import LeftArrowIcon from '@material-ui/icons/KeyboardArrowLeft';
-import RightArrowIcon from '@material-ui/icons/KeyboardArrowRight';
-import { Grid, Typography } from '@material-ui/core';
-import { MuiPickersContext } from '@material-ui/pickers';
-import { DatePicker, KeyboardDatePicker } from '@material-ui/pickers';
-import { createRegressionDay as createRegressionDayRenderer } from './RegressionDay';
-
-function Regression() {
-  const utils = useContext(MuiPickersContext);
-  const [date, changeDate] = useState<Date | null>(new Date('2019-01-01T00:00:00.000'));
-
-  const sharedProps = {
-    value: date,
-    onChange: changeDate,
-    style: { margin: '0 10px' },
-    format: 'MMMM d',
-    leftArrowIcon: <LeftArrowIcon data-arrow="left" />,
-    rightArrowIcon: <RightArrowIcon data-arrow="right" />,
-    renderDay: createRegressionDayRenderer(utils!),
-    KeyboardButtonProps: {
-      className: 'keyboard-btn',
-    },
-  };
-
-  return (
-    <div style={{ marginTop: 30 }}>
-      <Typography align="center" variant="h5" gutterBottom>
-        This page is using for the automate regression of @material-ui/pickers.
-      </Typography>
-
-      <Typography align="center" variant="h4" component="span" gutterBottom>
-        DatePicker
-      </Typography>
-
-      <Grid container justify="center" wrap="wrap">
-        <DatePicker id="basic-datepicker" {...sharedProps} />
-        <DatePicker id="clearable-datepicker" clearable {...sharedProps} />
-        <KeyboardDatePicker
-          id="keyboard-mask-datepicker"
-          {...sharedProps}
-          onChange={changeDate}
-          format="MM/dd/yyyy"
-        />
-        <DatePicker disabled id="disabled" {...sharedProps} />
-      </Grid>
-    </div>
-  );
-}
-
-export default Regression;
+export { default } from './Regression';
diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -2,7 +2,7 @@
   "ModalWrapper": {
     "okLabel": {
       "defaultValue": {
-        "value": "\"OK\""
+        "value": "OK"
       },
       "description": "\"OK\" label message",
       "name": "okLabel",
@@ -17,7 +17,7 @@
     },
     "cancelLabel": {
       "defaultValue": {
-        "value": "\"CANCEL\""
+        "value": "Cancel"
       },
       "description": "\"CANCEL\" label message",
       "name": "cancelLabel",
@@ -32,7 +32,7 @@
     },
     "clearLabel": {
       "defaultValue": {
-        "value": "\"CLEAR\""
+        "value": "Clear"
       },
       "description": "\"CLEAR\" label message",
       "name": "clearLabel",
@@ -47,7 +47,7 @@
     },
     "todayLabel": {
       "defaultValue": {
-        "value": "\"TODAY\""
+        "value": "Today"
       },
       "description": "\"TODAY\" label message",
       "name": "todayLabel",
@@ -206,7 +206,7 @@
     },
     "disabled": {
       "defaultValue": null,
-      "description": "Disable datepicker and text field",
+      "description": "Disable picker and text field",
       "name": "disabled",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -217,6 +217,19 @@
         "name": "boolean"
       }
     },
+    "readOnly": {
+      "defaultValue": null,
+      "description": "Make picker read only",
+      "name": "readOnly",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
     "labelFunc": {
       "defaultValue": null,
       "description": "Dynamic formatter of text field value",
@@ -838,7 +851,7 @@
     },
     "disabled": {
       "defaultValue": null,
-      "description": "Disable datepicker and text field",
+      "description": "Disable picker and text field",
       "name": "disabled",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -864,6 +877,19 @@
         "name": "boolean"
       }
     },
+    "readOnly": {
+      "defaultValue": null,
+      "description": "Make picker read only",
+      "name": "readOnly",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
     "labelFunc": {
       "defaultValue": null,
       "description": "Dynamic formatter of text field value",
@@ -1474,7 +1500,7 @@
     },
     "disabled": {
       "defaultValue": null,
-      "description": "Disable datepicker and text field",
+      "description": "Disable picker and text field",
       "name": "disabled",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1485,6 +1511,19 @@
         "name": "boolean"
       }
     },
+    "readOnly": {
+      "defaultValue": null,
+      "description": "Make picker read only",
+      "name": "readOnly",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
     "labelFunc": {
       "defaultValue": null,
       "description": "Dynamic formatter of text field value",
@@ -1914,7 +1953,7 @@
     },
     "disabled": {
       "defaultValue": null,
-      "description": "Disable datepicker and text field",
+      "description": "Disable picker and text field",
       "name": "disabled",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1938,6 +1977,19 @@
         "name": "() => void"
       }
     },
+    "readOnly": {
+      "defaultValue": null,
+      "description": "Make picker read only",
+      "name": "readOnly",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
     "autoOk": {
       "defaultValue": {
         "value": "false"
@@ -2358,7 +2410,7 @@
     },
     "disabled": {
       "defaultValue": null,
-      "description": "Disable datepicker and text field",
+      "description": "Disable picker and text field",
       "name": "disabled",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -2369,6 +2421,19 @@
         "name": "boolean"
       }
     },
+    "readOnly": {
+      "defaultValue": null,
+      "description": "Make picker read only",
+      "name": "readOnly",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
     "labelFunc": {
       "defaultValue": null,
       "description": "Dynamic formatter of text field value",
@@ -3059,7 +3124,7 @@
     },
     "disabled": {
       "defaultValue": null,
-      "description": "Disable datepicker and text field",
+      "description": "Disable picker and text field",
       "name": "disabled",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -3083,6 +3148,19 @@
         "name": "() => void"
       }
     },
+    "readOnly": {
+      "defaultValue": null,
+      "description": "Make picker read only",
+      "name": "readOnly",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
     "autoOk": {
       "defaultValue": {
         "value": "false"
@@ -3893,7 +3971,9 @@
       }
     },
     "ampm": {
-      "defaultValue": null,
+      "defaultValue": {
+        "value": "true"
+      },
       "description": "12h/24h clock mode",
       "name": "ampm",
       "parent": {
@@ -3906,7 +3986,9 @@
       }
     },
     "minutesStep": {
-      "defaultValue": null,
+      "defaultValue": {
+        "value": "1"
+      },
       "description": "Minutes step",
       "name": "minutesStep",
       "parent": {
@@ -3986,7 +4068,9 @@
       }
     },
     "ampm": {
-      "defaultValue": null,
+      "defaultValue": {
+        "value": "true"
+      },
       "description": "12h/24h clock mode",
       "name": "ampm",
       "parent": {
@@ -3999,7 +4083,9 @@
       }
     },
     "minutesStep": {
-      "defaultValue": null,
+      "defaultValue": {
+        "value": "1"
+      },
       "description": "Minutes step",
       "name": "minutesStep",
       "parent": {

diff --git a/e2e/integration/DatePicker.spec.ts b/e2e/integration/DatePicker.spec.ts
@@ -100,4 +100,11 @@ describe('DatePicker', () => {
 
     cy.get(ids.maskedKeyboard).should('have.value', '03/19/2019');
   });
+
+  it('Should not open disabled and readonly datepickers', () => {
+    ['#disabled', '#readonly'].forEach(id => {
+      cy.get(id).click({ force: true });
+      cy.get('div[role=dialog]').should('not.be.visible');
+    });
+  });
 });
diff --git a/lib/src/_shared/hooks/usePickerState.ts b/lib/src/_shared/hooks/usePickerState.ts
@@ -29,7 +29,7 @@ function useDateValues(props: BasePickerProps, options: StateHookOptions) {
 }
 
 export function usePickerState(props: BasePickerProps, options: StateHookOptions) {
-  const { autoOk, disabled, onAccept, onChange, onError, value, variant } = props;
+  const { autoOk, disabled, readOnly, onAccept, onChange, onError, value, variant } = props;
 
   const utils = useUtils();
   const { isOpen, setIsOpen } = useOpenState(props);
@@ -102,9 +102,9 @@ export function usePickerState(props: BasePickerProps, options: StateHookOptions
     () => ({
       inputValue,
       validationError,
-      openPicker: () => !disabled && setIsOpen(true),
+      openPicker: () => !readOnly && !disabled && setIsOpen(true),
     }),
-    [disabled, inputValue, setIsOpen, validationError]
+    [disabled, inputValue, readOnly, setIsOpen, validationError]
   );
 
   const pickerState = { pickerProps, inputProps, wrapperProps };