-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Initial setup for DatePicker * Render initial elements * Add DatePicker utils and constants, set default value * Handle calendar toggle * Build Calendar UI, handle toggle * Implement select date handler, focus on selected day, add tests * Add date validation * Handle min, max dates * Update status text on toggle of calendar * Added month/year navigation * Handle external input, pass selectedDate prop to calendar * Working on MonthPicker * Add month selection * Working on YearPicker * Add year chunk navigation * Handle date range styling * Use const instead of enum * Manage focus in navigation * Clean up, add TODOs * Upgrade to React 17 - Keep React 16 peerDependency for now * Update storybook (for React 17 compatibility) * Update Storybook names, add focusOut handler * Handle Day keyboard events * Add month picker keyboard navigation * Add year picker keyboard navigation * Handle escape key * Implement tab navigation * Add mousemove handler to date picker * Add remaining mousemove events * handle keydown/keyup on calendar element * Pass in input props, add label intrinsic props to Label, use storybook actions * Fix status text behavior * Status text is sr only * Fix tests * Add the DatePicker export * Move deps to dev or peer * Use prepare script * Comment out internal component stories * Clean up, eslint fixes/annotations * Add some additional edge test cases * handle some events (: * Update storybook addons in dependabot config * Clean up DatePicker stories * Use readOnly attr on internal input Co-authored-by: Brandon Lenz <brandon@truss.works>
- Loading branch information
1 parent
db3798d
commit ea996c8
Showing
29 changed files
with
5,021 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React from 'react' | ||
|
|
||
| import { Calendar } from './Calendar' | ||
| import { FocusMode } from './DatePicker' | ||
| import { parseDateString } from './utils' | ||
|
|
||
| /* | ||
| // THIS STORY FOR INTERNAL DEVELOPMENT ONLY | ||
| export default { | ||
| title: 'Components/Form controls/Date picker/Calendar', | ||
| component: Calendar, | ||
| argTypes: { | ||
| handleSelectDate: { action: 'select date' }, | ||
| setStatuses: { action: 'set statuses' }, | ||
| }, | ||
| } | ||
| */ | ||
|
|
||
| const defaultProps = { | ||
| minDate: new Date('0000-01-01'), | ||
| focusMode: FocusMode.None, | ||
| } | ||
|
|
||
| export const defaultCalendar = (argTypes): React.ReactElement => ( | ||
| <Calendar | ||
| {...defaultProps} | ||
| handleSelectDate={argTypes.handleSelectDate} | ||
| setStatuses={argTypes.setStatuses} | ||
| /> | ||
| ) | ||
|
|
||
| export const givenDate = (argTypes): React.ReactElement => ( | ||
| <Calendar | ||
| {...defaultProps} | ||
| handleSelectDate={argTypes.handleSelectDate} | ||
| setStatuses={argTypes.setStatuses} | ||
| date={new Date('July 4, 2019')} | ||
| /> | ||
| ) | ||
|
|
||
| export const selectedDate = (argTypes): React.ReactElement => ( | ||
| <Calendar | ||
| {...defaultProps} | ||
| handleSelectDate={argTypes.handleSelectDate} | ||
| setStatuses={argTypes.setStatuses} | ||
| selectedDate={new Date('January 20, 2021')} | ||
| /> | ||
| ) | ||
|
|
||
| export const minAndMax = (argTypes): React.ReactElement => ( | ||
| <Calendar | ||
| {...defaultProps} | ||
| handleSelectDate={argTypes.handleSelectDate} | ||
| setStatuses={argTypes.setStatuses} | ||
| date={new Date('January 15 2021')} | ||
| minDate={parseDateString('2021-01-10')} | ||
| maxDate={parseDateString('2021-01-20')} | ||
| /> | ||
| ) | ||
|
|
||
| export const rangeDate = (argTypes): React.ReactElement => ( | ||
| <Calendar | ||
| {...defaultProps} | ||
| handleSelectDate={argTypes.handleSelectDate} | ||
| setStatuses={argTypes.setStatuses} | ||
| selectedDate={parseDateString('2021-01-20')} | ||
| rangeDate={parseDateString('2021-01-08')} | ||
| /> | ||
| ) |
Oops, something went wrong.