diff --git a/README.md b/README.md index 9c7a4581..f48e148a 100644 --- a/README.md +++ b/README.md @@ -175,6 +175,7 @@ inputRanges(`DefinedRange`, `DateRangePicker`) | Array | [default i ariaLabels | Object | {} | inserts aria-label to inner elements dayContentRenderer | Function | null | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render. preventScrollToFocusedMonth | Boolean | false | When two or more months are open, prevent the shift of the focused month to the left. +focusNextRangeOnDefinedRangeClick | Boolean | false | When a defined range is clicked, the next range will be focused #### Type DateRange: ```ts diff --git a/src/components/DateRangePicker/index.tsx b/src/components/DateRangePicker/index.tsx index 0eafcd82..633472f3 100644 --- a/src/components/DateRangePicker/index.tsx +++ b/src/components/DateRangePicker/index.tsx @@ -52,9 +52,9 @@ export default function DateRangePicker({ monthDisplayFormat, months, moveRangeOnFirstSelection, - preventScrollToFocusedMonth + preventScrollToFocusedMonth, + focusNextRangeOnDefinedRangeClick }: DateRangePickerProps) { - const refs = React.useRef({ styles: generateStyles([Styles, classNames]) }); @@ -64,7 +64,6 @@ export default function DateRangePicker({ rangePreview: undefined }); - return (
setState((s) => ({ ...s, focusedRange }))} /> setState(s => ({...s, focusedRange}))} + onRangeFocusChange={(focusedRange) => setState((s) => ({ ...s, focusedRange }))} focusedRange={focusedRange || state.focusedRange} weekStartsOn={weekStartsOn} weekdayDisplayFormat={weekdayDisplayFormat} @@ -120,6 +121,5 @@ export default function DateRangePicker({ preventScrollToFocusedMonth={preventScrollToFocusedMonth} />
- ) - + ); } \ No newline at end of file diff --git a/src/components/DefinedRange/index.tsx b/src/components/DefinedRange/index.tsx index 2ed72aa2..bc4a783e 100644 --- a/src/components/DefinedRange/index.tsx +++ b/src/components/DefinedRange/index.tsx @@ -4,6 +4,7 @@ import styles from '../../styles'; import { defaultInputRanges, defaultStaticRanges } from '../../defaultRanges'; import { DateRange } from '../DayCell'; import InputRangeField from '../InputRangeField'; +import { findNextRangeIndex } from '../../utils'; export type DefinedRangeProps = { inputRanges?: {label: string, range: (value: number) => DateRange, getCurrentValue: (range: DateRange) => number | "-" | "∞"}[], @@ -14,9 +15,11 @@ export type DefinedRangeProps = { footerContent?: ReactElement, focusedRange?: number[], rangeColors?: string[], + focusNextRangeOnDefinedRangeClick?: boolean, onPreviewChange?: (value?: DateRange) => void, onChange?: (value: {[x: string]: DateRange}) => void, renderStaticRangeLabel?: (staticRange: DefinedRangeProps["staticRanges"][number]) => ReactElement + onRangeFocusChange?: (range: number[]) => void, }; export default function DefinedRange({ @@ -28,9 +31,11 @@ export default function DefinedRange({ rangeColors = ['#3d91ff', '#3ecf8e', '#fed14c'], ranges = [], focusedRange = [0, 0], + focusNextRangeOnDefinedRangeClick, onChange, onPreviewChange, - renderStaticRangeLabel + renderStaticRangeLabel, + onRangeFocusChange }: DefinedRangeProps) { const [state, setState] = React.useState({rangeOffset: 0, focusedInput: -1}); @@ -59,6 +64,11 @@ export default function DefinedRange({ onChange({ [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range }, }); + + if (focusNextRangeOnDefinedRangeClick) { + const nextFocusRange = [findNextRangeIndex(ranges, focusedRange[0]), 0]; + onRangeFocusChange?.(nextFocusRange); + } } const getRangeOptionValue = (option: DefinedRangeProps['inputRanges'][number]) => {