[DateRangePicker] Introduce new component 🎉 (#1602)

* Make value for picker be a generic type

* Spread new props from passing to the dom element

* Split makePickerWith state hoc

* Better type inference for new makePickerWithWrapper

* Refactor and opimize shared prop types inference for pickers

* Rename eome type names and files

* Integrate validation back to usePickerState

* Remove DateRangePicker code

* Remove DateRangePickerUsage from index module

* Fix small linter and ts errors

* Fix build erros

* Run prettier manually

* Display calendars for date range

* [WiP] Work on displaying 2 calendars one by one

* WATER ON MY MAC

* Proper display days with margins with range highlights

* Fix unexpected month switchings

* Implement range preview

* Optimize rerenders of Day and DateRangeDay, closes #1306

* Fix crash and missing rerender

* Optimize rerendering performace of <Day />

* Use popper for date range wrapper

* Proper displaying values in DateRangePIckerInput

* Implement ClickAwayListner for popper wrapper

* Fix slide animation in date range picker

* Reorganize test folders

* Reorganize integration test folder

* Add focus managment logic

* Implement autoscrolling for switching between range start/end

* Improve date range picker with disabling min/max dates

* Update date-io adapter version to 2.5.0

* Do not display range preview on highlighted days

* Better focus and blur handling for popper

* Fix range preview border style

* Fix type erros

* Fix fantom borders appearing

* Better styling for popper and possibility to replace transition

* Fix missing mui globals

* Fix werid memoization issue in Safari

* Implement mobile version of DateRangePicker

* Better displaying in mobile mode

* Make possible to switch view by clicking on month and year header

* Properly spread props to mobile keyboard input view

* Fix ts erros and enable api generation

* Fix example ts-checks

* Fix ts error in ServerRerquest.example.jsx

* Fix error if mouning in open state

* Add props test for DateRangePickers

* Export responsive date range picker by default

* Add missing displayName to the ToolbarButton

* Small enhancmenets

* Fix inclusivity of range for non-datefns livs

* Fix ts error

* Remove fake data from range example

* Use tsx in date range picker examples

* Add `startText` and `endText` props

* Update material-ui and fix createSvgIcon import, closes #1619

* Use new TextField `focused` prop for highlighting

* Close picker after range selected

* Update jss version

* Add more date-range-manager tests

* More examples and possibility to change wrapper mode for static wrapper

* Fix ts wrapper props inferring

* Update lib/src/views/Calendar/CalendarView.tsx

Co-Authored-By: Olivier Tassinari <[email protected]>

* Update docs/pages/demo/daterangepicker/CalendarsDateRangePicker.example.tsx

Co-Authored-By: Olivier Tassinari <[email protected]>

* Update createSvgIcon imports

* Fix ts inferrence for static wrapper props

* Add missing props spreading

* Fix more build errors

* Update lib/src/__tests__/setup.js

Co-Authored-By: Olivier Tassinari <[email protected]>

* Address review

* forwardRef for DateRangePicker

Co-authored-by: Olivier Tassinari <[email protected]>

Author: dmtrKovalenko

docs/_shared/Code.tsx

@@ -42,7 +42,7 @@ interface CodeProps {
   language?: 'jsx' | 'typescript' | 'markup';
 }
 
-const Code: React.SFC<CodeProps> = ({ language = 'jsx', inline, children, withMargin }) => {
+const Code: React.FC<CodeProps> = ({ language = 'typescript', inline, children, withMargin }) => {
   const classes = useStyles();
   const highlightedCode = highlight(children, language);
 

docs/layout/PageWithContext.tsx

@@ -9,9 +9,15 @@ import { PageContext } from '../utils/getPageContext';
 import { LocalizationProvider } from '@material-ui/pickers';
 import { UtilsContext } from '../_shared/UtilsServiceContext';
 import { NotificationManager } from 'utils/NotificationManager';
-import { Theme, createMuiTheme, CssBaseline } from '@material-ui/core';
 import { createUtilsService, UtilsLib, utilsMap } from '../utils/utilsService';
-import { ThemeProvider, jssPreset, StylesProvider } from '@material-ui/core/styles';
+import {
+  Theme,
+  createMuiTheme,
+  CssBaseline,
+  ThemeProvider,
+  jssPreset,
+  StylesProvider,
+} from '@material-ui/core';
 
 export type ThemeType = 'light' | 'dark';
 export type Direction = Theme['direction'];

docs/next.config.js

@@ -42,7 +42,7 @@ module.exports = withBundleAnalyzer(
 
               // Process examples to inject raw code strings
               config.module.rules.push({
-                test: /\.example\.(js|jsx)$/,
+                test: /\.example\.(js|jsx|tsx|ts)$/,
                 include: [path.resolve(__dirname, 'pages')],
                 use: [
                   { loader: 'next-babel-loader' },

docs/package.json

@@ -26,6 +26,7 @@
     "@material-ui/pickers": "^4.0.0-alpha.1",
     "@types/fuzzy-search": "^2.1.0",
     "@types/isomorphic-fetch": "^0.0.35",
+    "@types/jss": "^10.0.0",
     "@types/luxon": "^1.11.0",
     "@types/next": "^8.0.1",
     "@types/prismjs": "^1.9.1",

docs/pages/demo/datepicker/ServerRequest.example.jsx

@@ -30,7 +30,7 @@ function ServerRequest() {
         renderDay={(day, selectedDate, DayComponentProps) => {
           const date = makeJSDateObject(day); // skip this step, it is required to support date libs
           const isSelected =
-            DayComponentProps.isInCurrentMonth && selectedDays.includes(date.getDate());
+            DayComponentProps.inCurrentMonth && selectedDays.includes(date.getDate());
 
           return (
             <Badge overlap="circle" badgeContent={isSelected ? '🌚' : undefined}>

docs/pages/demo/datepicker/StaticDatePicker.example.jsx

@@ -1,5 +1,12 @@
 import React, { useState } from 'react';
+import isWeekend from 'date-fns/isWeekend';
 import { StaticDatePicker } from '@material-ui/pickers';
+import { makeJSDateObject } from '../../../utils/helpers';
+
+function disableWeekends(date) {
+  // TODO: replace with implementation for your date library
+  return isWeekend(makeJSDateObject(date));
+}
 
 const StaticDatePickerExample = () => {
   const [date, handleDateChange] = useState(new Date());
@@ -18,6 +25,7 @@ const StaticDatePickerExample = () => {
         orientation="landscape"
         openTo="date"
         value={date}
+        shouldDisableDate={disableWeekends}
         onChange={date => handleDateChange(date)}
       />
     </>

docs/pages/demo/daterangepicker/BasicDateRangePicker.example.jsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateRangePicker, DateRange } from '@material-ui/pickers';
+
+function BasicDateRangePicker() {
+  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
+
+  return (
+    <DateRangePicker
+      startText="Check-in"
+      endText="Check-out"
+      value={selectedDate}
+      onChange={date => handleDateChange(date)}
+    />
+  );
+}
+
+export default BasicDateRangePicker;

docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { DateRangePicker, DateRange } from '@material-ui/pickers';
+
+function CalendarsDateRangePicker() {
+  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
+
+  return (
+    <Grid container direction="column" alignItems="center">
+      <Typography gutterBottom> 1 calendar </Typography>
+      <DateRangePicker
+        calendars={1}
+        value={selectedDate}
+        onChange={date => handleDateChange(date)}
+      />
+      <Typography gutterBottom> 2 calendars</Typography>
+      <DateRangePicker
+        calendars={2}
+        value={selectedDate}
+        onChange={date => handleDateChange(date)}
+      />
+      <Typography gutterBottom> 3 calendars</Typography>
+      <DateRangePicker
+        calendars={3}
+        value={selectedDate}
+        onChange={date => handleDateChange(date)}
+      />
+    </Grid>
+  );
+}
+
+export default CalendarsDateRangePicker;

docs/pages/demo/daterangepicker/CalendarsDateRangePicker.example.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import addWeeks from 'date-fns/addWeeks';
+import { Dayjs } from 'dayjs';
+import { Moment } from 'moment';
+import { DateTime } from 'luxon';
+import { makeJSDateObject } from '../../../utils/helpers';
+import { DateRangePicker, DateRange } from '@material-ui/pickers';
+
+function getWeeksAfter(date: Moment | DateTime | Dayjs | Date, amount: number) {
+  // TODO: replace with implementation for your date library
+  return date ? addWeeks(makeJSDateObject(date), amount) : undefined;
+}
+
+function MinMaxDateRangePicker() {
+  const [selectedRange, handleDateChange] = React.useState<DateRange>([null, null]);
+
+  return (
+    <DateRangePicker
+      disablePast
+      value={selectedRange}
+      maxDate={getWeeksAfter(selectedRange[0], 4)}
+      onChange={date => handleDateChange(date)}
+    />
+  );
+}
+
+export default MinMaxDateRangePicker;