[DateRangePicker] renderInput for date range (mui#1719)

* Move masked input logic to the hook * Implement renderInput for DateRangePicker * Better type inference for generic `renderInput` prop * More precise type checking for mobile keyboard input views props * Update DateRange.spec.ts * Fix bugs found by tests * Update tests to use new KeyboardButtonProps prop * Fix not closing date range picker * [DateRangePicker] Properly attach onFocus/onClick for mobile and desktop mode
mnajdova · May 1, 2020 · 23ada5c · 23ada5c
1 parent 360ad0a
commit 23ada5c
Show file tree

Hide file tree

Showing 26 changed files with 439 additions and 317 deletions.
diff --git a/docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx b/docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextField } from '@material-ui/core';
-import { DateRangePicker, DateRange } from '@material-ui/pickers';
+import { DateRangePicker, DateRange, DateRangeDelimiter } from '@material-ui/pickers';
 
 function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
@@ -11,7 +11,13 @@ function BasicDateRangePicker() {
  endText="Check-out"
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
  );
 }

diff --git a/docs/pages/demo/daterangepicker/CalendarsDateRangePicker.example.tsx b/docs/pages/demo/daterangepicker/CalendarsDateRangePicker.example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Grid from '@material-ui/core/Grid';
 import { Typography, TextField } from '@material-ui/core';
-import { DateRangePicker, DateRange } from '@material-ui/pickers';
+import { DateRangePicker, DateRangeDelimiter, DateRange } from '@material-ui/pickers';
 
 function CalendarsDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
@@ -13,21 +13,41 @@ function CalendarsDateRangePicker() {
  calendars={1}
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
+
  <Typography gutterBottom> 2 calendars</Typography>
  <DateRangePicker
  calendars={2}
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
+
  <Typography gutterBottom> 3 calendars</Typography>
  <DateRangePicker
  calendars={3}
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
  </Grid>
  );

diff --git a/docs/pages/demo/daterangepicker/MinMaxDateRangePicker.example.tsx b/docs/pages/demo/daterangepicker/MinMaxDateRangePicker.example.tsx
@@ -5,7 +5,7 @@ import { Moment } from 'moment';
 import { DateTime } from 'luxon';
 import { TextField } from '@material-ui/core';
 import { makeJSDateObject } from '../../../utils/helpers';
-import { DateRangePicker, DateRange } from '@material-ui/pickers';
+import { DateRangePicker, DateRangeDelimiter, DateRange } from '@material-ui/pickers';
 
 function getWeeksAfter(date: Moment | DateTime | Dayjs | Date, amount: number) {
  // TODO: replace with implementation for your date library
@@ -21,7 +21,13 @@ function MinMaxDateRangePicker() {
  value={selectedRange}
  maxDate={getWeeksAfter(selectedRange[0], 4)}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
  );
 }

diff --git a/docs/pages/demo/daterangepicker/ResponsiveDateRangePicker.example.tsx b/docs/pages/demo/daterangepicker/ResponsiveDateRangePicker.example.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { TextField } from '@material-ui/core';
-import { MobileDateRangePicker, DesktopDateRangePicker, DateRange } from '@material-ui/pickers';
+import {
+ MobileDateRangePicker,
+ DateRangeDelimiter,
+ DesktopDateRangePicker,
+ DateRange,
+} from '@material-ui/pickers';
 
 function ResponsiveDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
@@ -11,14 +16,26 @@ function ResponsiveDateRangePicker() {
  startText="Mobile start"
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
 
  <DesktopDateRangePicker
  startText="Desktop start"
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
  </>
  );

diff --git a/docs/pages/demo/daterangepicker/StaticDateRangePicker.example.tsx b/docs/pages/demo/daterangepicker/StaticDateRangePicker.example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextField } from '@material-ui/core';
-import { StaticDateRangePicker, DateRange } from '@material-ui/pickers';
+import { StaticDateRangePicker, DateRangeDelimiter, DateRange } from '@material-ui/pickers';
 
 function StaticDateRangePickerExample() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
@@ -11,14 +11,26 @@ function StaticDateRangePickerExample() {
  displayStaticWrapperAs="desktop"
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
 
  <StaticDateRangePicker
  displayStaticWrapperAs="mobile"
  value={selectedDate}
  onChange={date => handleDateChange(date)}
- renderInput={props => <TextField {...props} />}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} />
+ </>
+ )}
  />
  </>
  );

diff --git a/docs/pages/regression/Regression.tsx b/docs/pages/regression/Regression.tsx
@@ -3,8 +3,8 @@ import LeftArrowIcon from '@material-ui/icons/KeyboardArrowLeft';
 import RightArrowIcon from '@material-ui/icons/KeyboardArrowRight';
 import { Grid, Typography } from '@material-ui/core';
 import { TextField, TextFieldProps } from '@material-ui/core';
-import { MuiPickersContext, DateRangePicker } from '@material-ui/pickers';
 import { createRegressionDay as createRegressionDayRenderer } from './RegressionDay';
+import { MuiPickersContext, DateRangePicker, DateRangeDelimiter } from '@material-ui/pickers';
 import {
  DateRange,
  MobileDatePicker,
@@ -29,9 +29,6 @@ function Regression() {
  leftArrowIcon: <LeftArrowIcon data-arrow="left" />,
  rightArrowIcon: <RightArrowIcon data-arrow="right" />,
  renderDay: createRegressionDayRenderer(utils!),
- KeyboardButtonProps: {
- className: 'keyboard-btn',
- },
  };
 
  return (
@@ -99,9 +96,15 @@ function Regression() {
  </Typography>
 
  <DateRangePicker
- {...makeRenderInputProp({ inputProps: { 'data-mui-test': 'desktop-range-picker' } })}
  value={range}
  onChange={changeRange}
+ renderInput={(startProps, endProps) => (
+ <>
+ <TextField {...startProps} inputProps={{ 'data-mui-test': 'desktop-range-picker' }} />
+ <DateRangeDelimiter> to </DateRangeDelimiter>
+ <TextField {...endProps} inputProps={{ 'data-mui-test': 'desktop-range-picker-end' }} />
+ </>
+ )}
  />
  </div>
  );