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]) => {