Landscape orientation support (mui#1177)

* Fix persian examples * Remove injected css after front-end mount * Determine and apply styles for current orientation * Add tests * Support landscape for TimePicker * Use isomorphic effect for event handler * Fix lint errors * Add new props to the documentation * Fix displaying short weekdays in datepicker toolbar
mnajdova · Jul 15, 2019 · 646db90 · 646db90
1 parent 15a44a0
commit 646db90
Show file tree

Hide file tree

Showing 23 changed files with 302 additions and 74 deletions.
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -18,6 +18,14 @@ class MyApp extends App<{ theme: ThemeType }> {
     return { theme, pageProps };
   }
 
+  componentDidMount() {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles);
+    }
+  }
+
   render() {
     const { Component, pageProps, theme } = this.props;
 

diff --git a/docs/pages/demo/datepicker/StaticDatePicker.example.jsx b/docs/pages/demo/datepicker/StaticDatePicker.example.jsx
@@ -4,10 +4,25 @@ import { DatePicker } from '@material-ui/pickers';
 const StaticDatePicker = () => {
   const [date, changeDate] = useState(new Date());
 
+  // prettier-ignore
   return (
     <>
-      <DatePicker autoOk variant="static" openTo="year" value={date} onChange={changeDate} />
-      <DatePicker autoOk variant="static" openTo="date" value={date} onChange={changeDate} />
+      <DatePicker
+        autoOk
+        variant="static"
+        openTo="year"
+        value={date}
+        onChange={changeDate}
+      />
+
+      <DatePicker
+        autoOk
+        orientation="landscape"
+        variant="static"
+        openTo="date"
+        value={date}
+        onChange={changeDate}
+      />
     </>
   );
 };

diff --git a/docs/pages/demo/timepicker/StaticTimePicker.example.jsx b/docs/pages/demo/timepicker/StaticTimePicker.example.jsx
@@ -4,10 +4,25 @@ import { TimePicker } from '@material-ui/pickers';
 const StaticTimePicker = () => {
   const [date, changeDate] = useState(new Date());
 
+  // prettier-ignore
   return (
     <>
-      <TimePicker autoOk variant="static" openTo="hours" value={date} onChange={changeDate} />
-      <TimePicker autoOk variant="static" openTo="minutes" value={date} onChange={changeDate} />
+      <TimePicker
+        autoOk
+        variant="static"
+        openTo="hours"
+        value={date}
+        onChange={changeDate}
+      />
+
+      <TimePicker
+        autoOk
+        variant="static"
+        orientation="landscape"
+        openTo="minutes"
+        value={date}
+        onChange={changeDate}
+      />
     </>
   );
 };

diff --git a/docs/pages/localization/Hijri.example.jsx b/docs/pages/localization/Hijri.example.jsx
@@ -22,7 +22,6 @@ function HijriExample() {
         labelFunc={date => (date ? date.format('iYYYY/iMM/iDD') : '')}
         value={selectedDate}
         onChange={handleDateChange}
-        animateYearScrolling={false}
         minDate="1937-03-14"
         maxDate="2076-11-26"
       />

diff --git a/docs/pages/localization/Persian.example.jsx b/docs/pages/localization/Persian.example.jsx
@@ -24,7 +24,6 @@ function PersianExample() {
         labelFunc={date => (date ? date.format('jYYYY/jMM/jDD') : '')}
         value={selectedDate}
         onChange={handleDateChange}
-        animateYearScrolling={false}
       />
 
       <TimePicker

diff --git a/docs/pages/localization/calendar-systems.mdx b/docs/pages/localization/calendar-systems.mdx
@@ -1,8 +1,8 @@
 import Ad from '_shared/Ad';
-import Example from '_shared/Example'
-import PageMeta from '_shared/PageMeta'
-import * as PersianExample from './Persian.example.jsx'
-import * as HijriExample from './Hijri.example.jsx'
+import Example from '_shared/Example';
+import PageMeta from '_shared/PageMeta';
+import * as PersianExample from './Persian.example.jsx';
+import * as HijriExample from './Hijri.example.jsx';
 
 <PageMeta title="Additional Calendar Systems - @material-ui/pickers" />
 
@@ -15,21 +15,21 @@ material-ui documentation page before proceeding.
 
 Install the specified npm packages below for Jalaali or Hijri depending on which calendar system you will be using.
 
-#### Persian calendar system
+#### Jalaali calendar system
 
 Install `@date-io/jalaali` package from npm.
 
 ```
 npm install @date-io/jalaali
 ```
 
-##### Example
+#### Example
 
 You can use the examples below. It is recommended that you change the font.
 
 <Example source={PersianExample} />
 
-<hr/>
+<hr />
 
 #### Hijri calendar system
 
@@ -41,21 +41,23 @@ npm install @date-io/hijri moment-hijri
 
 To use it with Arabic locale, make sure to import `moment/locale/ar-sa`
 
-```
+```javascript
 import 'moment/locale/ar-sa';
 ```
 
-By default, the `DatePicker` uses 1900-01-01 for minDate and 2100-01-01 for maxDate. `moment-hijri` only supports dates from 1356-01-01 H (1937-03-14) to 1499-12-29 H (2076-11-26) so you will need to set `minDate` and `maxDate` on your `DatePicker` component otherwise your component will not work properly.
+By default, the `DatePicker` uses `1900-01-01` for minDate and `2100-01-01` for maxDate.
+`moment-hijri` only supports dates from `1356-01-01` H (1937-03-14) to `1499-12-29` H (2076-11-26)
+so you will need to set `minDate` and `maxDate` on your `DatePicker` component otherwise your component will not work properly.
 
-```
+```jsx
 <DatePicker
-    ...
-    minDate="1937-03-14"
-    maxDate="2076-11-26"
+  // your props
+  minDate="1937-03-14"
+  maxDate="2076-11-26"
 />
 ```
 
-##### Example
+#### Example
 
 You can use the examples below. It is recommended that you change the font.
 

diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -277,6 +277,17 @@
       "required": false,
       "type": { "name": "boolean" }
     },
+    "orientation": {
+      "defaultValue": { "value": "\"portrait\"" },
+      "description": "Force rendering in particular orientation",
+      "name": "orientation",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": { "name": "\"portrait\" | \"landscape\"" }
+    },
     "variant": {
       "defaultValue": { "value": "'dialog'" },
       "description": "Displaying variant",
@@ -286,7 +297,7 @@
         "name": "BasePickerProps"
       },
       "required": false,
-      "type": { "name": "\"dialog\" | \"inline\"" }
+      "type": { "name": "\"dialog\" | \"inline\" | \"static\"" }
     },
     "PopoverProps": {
       "defaultValue": null,
@@ -631,7 +642,7 @@
         "name": "BasePickerProps"
       },
       "required": false,
-      "type": { "name": "\"dialog\" | \"inline\"" }
+      "type": { "name": "\"dialog\" | \"inline\" | \"static\"" }
     },
     "onError": {
       "defaultValue": null,
@@ -743,6 +754,17 @@
       "required": false,
       "type": { "name": "boolean" }
     },
+    "orientation": {
+      "defaultValue": { "value": "\"portrait\"" },
+      "description": "Force rendering in particular orientation",
+      "name": "orientation",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": { "name": "\"portrait\" | \"landscape\"" }
+    },
     "PopoverProps": {
       "defaultValue": null,
       "description": "Popover props passed to material-ui Popover (with variant=\"inline\")",
@@ -1253,6 +1275,17 @@
       "required": false,
       "type": { "name": "boolean" }
     },
+    "orientation": {
+      "defaultValue": { "value": "\"portrait\"" },
+      "description": "Force rendering in particular orientation",
+      "name": "orientation",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": { "name": "\"portrait\" | \"landscape\"" }
+    },
     "variant": {
       "defaultValue": { "value": "'dialog'" },
       "description": "Displaying variant",
@@ -1262,7 +1295,7 @@
         "name": "BasePickerProps"
       },
       "required": false,
-      "type": { "name": "\"dialog\" | \"inline\"" }
+      "type": { "name": "\"dialog\" | \"inline\" | \"static\"" }
     },
     "PopoverProps": {
       "defaultValue": null,
@@ -1440,7 +1473,7 @@
         "name": "BasePickerProps"
       },
       "required": false,
-      "type": { "name": "\"dialog\" | \"inline\"" }
+      "type": { "name": "\"dialog\" | \"inline\" | \"static\"" }
     },
     "onError": {
       "defaultValue": null,
@@ -1563,6 +1596,17 @@
       "required": false,
       "type": { "name": "boolean" }
     },
+    "orientation": {
+      "defaultValue": { "value": "\"portrait\"" },
+      "description": "Force rendering in particular orientation",
+      "name": "orientation",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": { "name": "\"portrait\" | \"landscape\"" }
+    },
     "PopoverProps": {
       "defaultValue": null,
       "description": "Popover props passed to material-ui Popover (with variant=\"inline\")",
@@ -1917,6 +1961,17 @@
       "required": false,
       "type": { "name": "boolean" }
     },
+    "orientation": {
+      "defaultValue": { "value": "\"portrait\"" },
+      "description": "Force rendering in particular orientation",
+      "name": "orientation",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": { "name": "\"portrait\" | \"landscape\"" }
+    },
     "variant": {
       "defaultValue": { "value": "'dialog'" },
       "description": "Displaying variant",
@@ -1926,7 +1981,7 @@
         "name": "BasePickerProps"
       },
       "required": false,
-      "type": { "name": "\"dialog\" | \"inline\"" }
+      "type": { "name": "\"dialog\" | \"inline\" | \"static\"" }
     },
     "PopoverProps": {
       "defaultValue": null,
@@ -2315,7 +2370,7 @@
         "name": "BasePickerProps"
       },
       "required": false,
-      "type": { "name": "\"dialog\" | \"inline\"" }
+      "type": { "name": "\"dialog\" | \"inline\" | \"static\"" }
     },
     "onError": {
       "defaultValue": null,
@@ -2438,6 +2493,17 @@
       "required": false,
       "type": { "name": "boolean" }
     },
+    "orientation": {
+      "defaultValue": { "value": "\"portrait\"" },
+      "description": "Force rendering in particular orientation",
+      "name": "orientation",
+      "parent": {
+        "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
+        "name": "BasePickerProps"
+      },
+      "required": false,
+      "type": { "name": "\"portrait\" | \"landscape\"" }
+    },
     "PopoverProps": {
       "defaultValue": null,
       "description": "Popover props passed to material-ui Popover (with variant=\"inline\")",

diff --git a/lib/src/DatePicker/DatePickerToolbar.tsx b/lib/src/DatePicker/DatePickerToolbar.tsx
@@ -9,9 +9,15 @@ import { isYearAndMonthViews, isYearOnlyView } from '../_helpers/date-utils';
 
 export const useStyles = makeStyles(
   {
-    toolbarCenter: {
-      flexDirection: 'row',
-      alignItems: 'center',
+    toolbar: {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+    toolbarLandscape: {
+      padding: 16,
+    },
+    dateLandscape: {
+      marginRight: 16,
     },
   },
   { name: 'MuiPickersDatePickerRoot' }
@@ -21,6 +27,7 @@ export const DatePickerToolbar: React.FC<ToolbarComponentProps> = ({
   date,
   views,
   setOpenView,
+  isLandscape,
   openView,
 }) => {
   const utils = useUtils();
@@ -30,7 +37,13 @@ export const DatePickerToolbar: React.FC<ToolbarComponentProps> = ({
   const isYearAndMonth = React.useMemo(() => isYearAndMonthViews(views as any), [views]);
 
   return (
-    <PickerToolbar className={clsx({ [classes.toolbarCenter]: isYearOnly })}>
+    <PickerToolbar
+      isLandscape={isLandscape}
+      className={clsx({
+        [classes.toolbar]: !isYearOnly,
+        [classes.toolbarLandscape]: isLandscape,
+      })}
+    >
       <ToolbarButton
         variant={isYearOnly ? 'h3' : 'subtitle1'}
         onClick={() => setOpenView('year')}
@@ -41,9 +54,11 @@ export const DatePickerToolbar: React.FC<ToolbarComponentProps> = ({
       {!isYearOnly && !isYearAndMonth && (
         <ToolbarButton
           variant="h4"
-          onClick={() => setOpenView('date')}
           selected={openView === 'date'}
+          onClick={() => setOpenView('date')}
+          align={isLandscape ? 'left' : 'center'}
           label={utils.getDatePickerHeaderText(date)}
+          className={clsx({ [classes.dateLandscape]: isLandscape })}
         />
       )}
 

diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx
@@ -31,13 +31,18 @@ export type KeyboardDateTimePickerProps = WrappedKeyboardPickerProps & DateTimeP
 const defaultProps = {
   ...dateTimePickerDefaultProps,
   wider: true,
+  orientation: 'portrait' as const,
   openTo: 'date' as DateTimePickerView,
   views: ['year', 'date', 'hours', 'minutes'] as DateTimePickerView[],
 };
 
 function useOptions(props: DateTimePickerProps | KeyboardDateTimePickerProps) {
   const utils = useUtils();
 
+  if (props.orientation !== 'portrait') {
+    throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
+  }
+
   return {
     getDefaultFormat: () =>
       pick12hOr24hFormat(props.format, props.ampm, {