Adds DateRangePickerInputController
component
#180
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
to: @moonboots @ljharb @lencioni @airbnb/webinfra
This is the counterpart to #167.
I will update the PR description there with this same information, but the general idea is that I want to change the structure of the
DateRangePicker
(and eventually theSingleDatePicker
as well) to this:The motivation behind this is to increase the compose-ability of the library. We have seen a lot of instances where a user might want to swap out the input styles, or might want the
DayPicker
with all of the styles and rules that we default to in range, but different visibility rules.As a result, the following will become true:
DateRangePicker
strictly controls the interactions between the inputs and the picker, ie when to show and hide the picker according to a default standard of rulesDateRangePickerInputController
controls any date verification, focus change, and keyboard input logic as related to the inputs.DateRangePickerInput
renders the inputs to the page with the appropriate styles and has styles applied if you were to pass in a different focus state as a prop. It also has callback for user interaction, but ultimately is a fully controlled component.DayPickerWithModifiers
contains state for hovering as well as logic for what to do when you click on a start date after an end date, and other date selection scenarios. It contains amodifiers
object that applies styles accordingly. Most importantly, it does not contain callbacks for user interactions on theCalendarDay
objects.DayPicker
is a vanilla version of the calendar that renders it to the page, but has no styles or callbacks or state hooked up. It takes in all of these as props and allow you to roll your own implementation basically.One advantage of this set-up is that it allows us to do the following if you want:
Basically, if you want to add any sort of panel or more information to the
DayPicker
you can. You can create your own customshow/hide
logic, insert your own inputs easily, always show theDayPicker
if you want and so on.