[DateRangePicker] Introduce new component 🎉 #1602

dmtrKovalenko · 2020-03-24T17:16:36Z

This PR closes #364

Closes #1306
Closes #1603
Closes #1420 (but needs more documentation)

Description

Introduce new DateRangePicker component. Link to the documentation of deploy preview (https://material-ui-pickers-git-feature-daterangepicker.mui-org.now.sh/demo/daterangepicker)

vercel · 2020-03-24T17:16:41Z

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/mui-org/material-ui-pickers/9s0pua9w5
✅ Preview: https://material-ui-pickers-git-feature-daterangepicker.mui-org.now.sh

cypress · 2020-03-24T17:20:56Z

Test summary

69 • 0 • 1 • 0

Run details


Project	material-ui-pickers
Status	Passed
Commit	`12d5064`
Started	Apr 9, 2020 10:28 AM
Ended	Apr 9, 2020 10:29 AM
Duration	01:14 💡
OS	Linux Debian - 9.11
Browser	Chrome 78

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

oliviertassinari

One step closer to this major component. Two years in the making 06498fc :D.

Here is an early feedback around the ClickAwayListener concern you have raised. I have went a bit offroad, sorry 🙃:

It might be better to work on a fork, I believe the creation of branches can confuse developers that look for older versions. Basically, master, next and v3-x only as branches would reduce noise.
We might want to trap the focus when it lands inside the Popper, <TrapFocus disableEnforceFocus disableAutoFocus />.
dataset I didn't know this property existed, I have learned something. Unfortunately, applying muiPickersInput to the input isn't enough. If you click on the edge of the input, you can witness a quick open (focus) and close (click away) behavior.
I would suggest replacing the usage of ClickAwayListener with a blur based approach. Basically, if the focus leaves the widget, we can close it. This way, we get keyboard + click handled at once. Two birds with one stone. I have used this approach with the Autocomplete.
For the API, what do you think of an Autocomplete like approach?

    <DateRangePicker
        renderInput={(firstInput, secondInput) => (
            <>
                <TextField {...firstInput} />}
                {' to '}
                <TextField {...secondInput} />}
            </>
        )}
    />

It would empower a simpler composition.

Switching months feels a bit slow, I measure 300ms on my high-end laptop. This resonates with a past discussion we had regarding prioritizing an investigation in the runtime performance. It sounds to me like a confirmation that we will need to look into it (later) :).

dmtrKovalenko · 2020-03-25T08:07:08Z

Hahaha september of 2018 XD

Regarding to click away - data attribute is temporary solution, now working on different structure

<TrapFocus>
  <ClickAwayListener>  
    <div>
      <Input1 />
      <Input2 /> 

      <Popper disablePortal> 
           <Calendar />
      </Popper>
    </div> 
  <ClickAwayListener> 
<TrapFocus>

This should fix all the issues

oliviertassinari · 2020-04-06T13:21:30Z

lib/src/DateRangePicker/DateRangePickerInput.tsx

+    <div id={id} className={clsx(classes.rangeInputsContainer, className)} ref={containerRef}>
+      <KeyboardDateInput
+        {...other}


<div id={id} className={clsx(classes.rangeInputsContainer, className)} ref={containerRef} {...other}> <KeyboardDateInput

oliviertassinari

I have made a couple of suggestions. I couldn't deep dive into the code, they are too many changes. Also, the review experience on GitHub is horrible. I'm happy to provide more details on my comment where needed.

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

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

oliviertassinari · 2020-04-06T23:00:53Z

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

+import { Dayjs } from 'dayjs';
+import { Moment } from 'moment';
+import { DateTime } from 'luxon';
+import { makeJSDateObject } from '../../../utils/helpers';


It won't work in people's codebases.

I know, but only one thing we can do without dramatically changes in examples - add warning comment

Actually, it won't be the only issue. Doesn't DateRangePicker has a required context that we should problem?

I think that we will need to have a dedicated story for this. It's important all the demos can be copied and paste without any exceptions. It hasn't always been the case in the core repository, it has been painful for developers.

I mean, this is require to interop with different libraries.
Ideally we need separate demo for each lib (maybe somehow generated as we are doing for formats)

oliviertassinari · 2020-04-06T23:03:20Z

lib/src/DateRangePicker/DateRangePicker.tsx

+    }
+  );
+
+  function RangePickerWithStateAndWrapper({


Should it forward ref here?

lib/src/DateRangePicker/DateRangePickerInput.tsx

lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx

lib/src/__tests__/setup.js

lib/src/_shared/icons/ArrowDropDownIcon.tsx

lib/src/views/Calendar/CalendarView.tsx

Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com>

…le.tsx Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com>

Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com>

DDDDDanica · 2020-04-11T12:42:39Z

lib/src/DateRangePicker/DateRangePickerInput.tsx

+      className={clsx(classes.rangeInputsContainer, className)}
+      ref={mergeRefs([containerRef, forwardedRef])}
+    >
+      <KeyboardDateInput


[Suggestion]: You might want to provide an option to disabled auto fill from browser.

Do you have more details on the potential problem and solution? Thanks.

So in the root input field component, just need to disable autoComplete :P

<InputField autoComplete="off" ... />

:)

You can pass a prop inputProps={{ autoComplete: "off" }} right to the component. But this API will be changed to renderInput={props => <TextField {...props} />}

What should be the default behavior? Displaying the browser's suggestion on top of the popup could be an issue but we won't display the popup by default as in https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html. I was proposing two optional props openOnFocus and openOnClick to have the popup open by default. In such case, should we change the default autocomplete? I'm not sure. We do change is with the Autocomplete component, and had no people complaining, but still?

I'm in favor of keeping the current tradeoff.

The reason behind suggesting it being off is one scenario we encountered before:
When we have both suggested auto fill & calendar deployed(opened), it was not a very good user experience to keep both.
As mentioned, it is an optional change. I'm happy to see how the current API goes and maybe the autoOn is a more favoring solution :P

dmtrKovalenko added 25 commits March 6, 2020 13:00

Make value for picker be a generic type

071c86a

Spread new props from passing to the dom element

6278df7

Split makePickerWith state hoc

70ad657

Better type inference for new makePickerWithWrapper

c3e90c9

Refactor and opimize shared prop types inference for pickers

09e701d

Rename eome type names and files

88489b5

Integrate validation back to usePickerState

c72bc5f

Remove DateRangePicker code

eb95e4d

Remove DateRangePickerUsage from index module

f19294a

Fix small linter and ts errors

a6f90a5

Fix build erros

beb6f39

Run prettier manually

3dc7bba

Display calendars for date range

300bb03

[WiP] Work on displaying 2 calendars one by one

e855363

WATER ON MY MAC

b8bfdff

Proper display days with margins with range highlights

c10707e

Fix unexpected month switchings

6af2269

Implement range preview

b1dd4d6

Optimize rerenders of Day and DateRangeDay, closes #1306

f0960dd

Fix crash and missing rerender

61341c6

Optimize rerendering performace of <Day />

9d02640

Use popper for date range wrapper

71c6754

Proper displaying values in DateRangePIckerInput

3bea358

Merge branch 'next' into feature/DateRangePicker

b7e7a75

Implement ClickAwayListner for popper wrapper

6a606f3

Fix slide animation in date range picker

99978af

oliviertassinari reviewed Mar 24, 2020

View reviewed changes

More examples and possibility to change wrapper mode for static wrapper

9fa0a0a

vercel bot temporarily deployed to Preview April 6, 2020 10:49 Inactive

Merge conflicts

097ec56

vercel bot deployed to Preview April 6, 2020 10:51 View deployment

Fix ts wrapper props inferring

2e13670

vercel bot deployed to Preview April 6, 2020 10:58 View deployment

oliviertassinari reviewed Apr 6, 2020

View reviewed changes

oliviertassinari changed the title ~~🎉 DateRangePicker~~ [DateRangePicker] Introduce new component 🎉 Apr 6, 2020

oliviertassinari added the enhancement New feature or request label Apr 6, 2020

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

573cc57

Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com>

vercel bot deployed to Preview April 7, 2020 12:58 View deployment

Update docs/pages/demo/daterangepicker/CalendarsDateRangePicker.examp…

a9fd7ac

…le.tsx Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com>

vercel bot deployed to Preview April 7, 2020 13:15 View deployment

dmtrKovalenko added 4 commits April 7, 2020 21:18

Update createSvgIcon imports

8865fcf

Fix ts inferrence for static wrapper props

e440de3

Add missing props spreading

e86fb22

Fix more build errors

e7f2f44

vercel bot deployed to Preview April 7, 2020 18:18 View deployment

Update lib/src/__tests__/setup.js

1a35fd3

Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com>

vercel bot deployed to Preview April 9, 2020 09:21 View deployment

dmtrKovalenko added 2 commits April 9, 2020 12:31

Address review

29191fc

Merge conflicts

f2e89b1

vercel bot deployed to Preview April 9, 2020 09:32 View deployment

forwardRef for DateRangePicker

12d5064

vercel bot deployed to Preview April 9, 2020 10:25 View deployment

dmtrKovalenko merged commit 7bed283 into next Apr 9, 2020

dmtrKovalenko deleted the feature/DateRangePicker branch April 9, 2020 10:46

oliviertassinari mentioned this pull request Apr 9, 2020

Allow displaying two months at a time #1455

Closed

DDDDDanica reviewed Apr 11, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DateRangePicker] Introduce new component 🎉 #1602

[DateRangePicker] Introduce new component 🎉 #1602

dmtrKovalenko commented Mar 24, 2020 •

edited

vercel bot commented Mar 24, 2020 •

edited

cypress bot commented Mar 24, 2020 •

edited

oliviertassinari left a comment •

edited

dmtrKovalenko commented Mar 25, 2020 •

edited

oliviertassinari Apr 6, 2020 •

edited

oliviertassinari left a comment

oliviertassinari Apr 6, 2020

dmtrKovalenko Apr 7, 2020

oliviertassinari Apr 8, 2020

dmtrKovalenko Apr 8, 2020

oliviertassinari Apr 6, 2020

DDDDDanica Apr 11, 2020

oliviertassinari Apr 12, 2020

DDDDDanica Apr 14, 2020

dmtrKovalenko Apr 14, 2020

oliviertassinari Apr 14, 2020 •

edited

DDDDDanica Apr 14, 2020

[DateRangePicker] Introduce new component 🎉 #1602

[DateRangePicker] Introduce new component 🎉 #1602

Conversation

dmtrKovalenko commented Mar 24, 2020 • edited

Description

vercel bot commented Mar 24, 2020 • edited

cypress bot commented Mar 24, 2020 • edited

Test summary

Run details

oliviertassinari left a comment • edited

Choose a reason for hiding this comment

dmtrKovalenko commented Mar 25, 2020 • edited

oliviertassinari Apr 6, 2020 • edited

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Apr 14, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dmtrKovalenko commented Mar 24, 2020 •

edited

vercel bot commented Mar 24, 2020 •

edited

cypress bot commented Mar 24, 2020 •

edited

oliviertassinari left a comment •

edited

dmtrKovalenko commented Mar 25, 2020 •

edited

oliviertassinari Apr 6, 2020 •

edited

oliviertassinari Apr 14, 2020 •

edited