Refactoring date components to use useFocusWithin #3694
Merged
Conversation
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
|
Build successful! 🎉 |
| @@ -64,8 +64,23 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldProps<T>, | |||
| }); | |||
|
|
|||
| let {focusWithinProps} = useFocusWithin({ | |||
| onBlurWithin() { | |||
| ...props, | |||
| onBlurWithin: (e: ReactFocusEvent) => { | |||
There was a problem hiding this comment.
just FocusEvent, see useFocusWithin for types
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
previously approved these changes
Oct 28, 2022
devongovett
reviewed
Oct 28, 2022
| if (props.onFocus) { | ||
| props.onFocus(e); | ||
| } | ||
| }, |
There was a problem hiding this comment.
You probably don't need these wrapper functions. You could do something like this:
onFocusWithin: props.onFocus| if (props.onFocusChange) { | ||
| props.onFocusChange(value); | ||
| } | ||
| } |
There was a problem hiding this comment.
An easier way to do this could be
useFocusWithin({
...props,
isDisabled: state.isOpen,
onBlurWithin: props.onBlur,
// ...
});
|
Build successful! 🎉 |
API Changes@react-stately/datepickerDateFieldState DateFieldState {
calendar: Calendar
clearSegment: (SegmentType) => void
confirmPlaceholder: () => void
dateFormatter: DateFormatter
dateValue: Date
decrement: (SegmentType) => void
decrementPage: (SegmentType) => void
formatValue: (FieldOptions) => string
granularity: Granularity
increment: (SegmentType) => void
incrementPage: (SegmentType) => void
isDisabled: boolean
- isFocused: boolean
isReadOnly: boolean
isRequired: boolean
maxGranularity: 'year' | 'month' | Granularity
segments: Array<DateSegment>
- setFocused: (boolean) => void
setSegment: (SegmentType, number) => void
setValue: (DateValue) => void
validationState: ValidationState
value: DateValue
it changed:
DatePickerState DatePickerState {
close: () => void
dateValue: DateValue
formatValue: (string, FieldOptions) => string
granularity: Granularity
hasTime: boolean
- isFocused: boolean
isOpen: boolean
open: () => void
setDateValue: (CalendarDate) => void
- setFocused: (boolean) => void
setOpen: (boolean) => void
setTimeValue: (TimeValue) => void
setValue: (DateValue) => void
timeValue: TimeValue
validationState: ValidationState
value: DateValue
}
it changed:
DateRangePickerState DateRangePickerState {
close: () => void
dateRange: DateRange
formatValue: (string, FieldOptions) => {
start: string
end: string
}
granularity: Granularity
hasTime: boolean
- isFocused: boolean
isOpen: boolean
open: () => void
setDate: ('start' | 'end', DateValue) => void
setDateRange: (DateRange) => void
setDateTime: ('start' | 'end', DateValue) => void
- setFocused: (boolean) => void
setOpen: (boolean) => void
setTime: ('start' | 'end', TimeValue) => void
setTimeRange: (TimeRange) => void
setValue: (DateRange) => void
toggle: () => void
validationState: ValidationState
value: DateRange
}
it changed:
|
snowystinger
approved these changes
Oct 28, 2022
devongovett
approved these changes
Oct 29, 2022
|
Build successful! 🎉 |
API Changes@react-stately/datepickerDateFieldState DateFieldState {
calendar: Calendar
clearSegment: (SegmentType) => void
confirmPlaceholder: () => void
dateFormatter: DateFormatter
dateValue: Date
decrement: (SegmentType) => void
decrementPage: (SegmentType) => void
formatValue: (FieldOptions) => string
granularity: Granularity
increment: (SegmentType) => void
incrementPage: (SegmentType) => void
isDisabled: boolean
- isFocused: boolean
isReadOnly: boolean
isRequired: boolean
maxGranularity: 'year' | 'month' | Granularity
segments: Array<DateSegment>
- setFocused: (boolean) => void
setSegment: (SegmentType, number) => void
setValue: (DateValue) => void
validationState: ValidationState
value: DateValue
it changed:
DatePickerState DatePickerState {
close: () => void
dateValue: DateValue
formatValue: (string, FieldOptions) => string
granularity: Granularity
hasTime: boolean
- isFocused: boolean
isOpen: boolean
open: () => void
setDateValue: (CalendarDate) => void
- setFocused: (boolean) => void
setOpen: (boolean) => void
setTimeValue: (TimeValue) => void
setValue: (DateValue) => void
timeValue: TimeValue
validationState: ValidationState
value: DateValue
}
it changed:
DateRangePickerState DateRangePickerState {
close: () => void
dateRange: DateRange
formatValue: (string, FieldOptions) => {
start: string
end: string
}
granularity: Granularity
hasTime: boolean
- isFocused: boolean
isOpen: boolean
open: () => void
setDate: ('start' | 'end', DateValue) => void
setDateRange: (DateRange) => void
setDateTime: ('start' | 'end', DateValue) => void
- setFocused: (boolean) => void
setOpen: (boolean) => void
setTime: ('start' | 'end', TimeValue) => void
setTimeRange: (TimeRange) => void
setValue: (DateRange) => void
toggle: () => void
validationState: ValidationState
value: DateRange
}
it changed:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This is followup for #3605
Refactoring date components to use useFocusWithin and remove api changes from react-stately
✅ Pull Request Checklist:
📝 Test Instructions:
goto the "all the events" story in DateField, DatePicker, DateRangePicker, and TimeField, confirm the events exist and are called correctly. see issues #3272 #3346 and PR #3605
🧢 Your Project:
RSP