mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Extended DateRangeSelector to allow updating its value via props after rendering

Browse source
This commit is contained in:
Alejandro Celaya 2021-12-22 20:14:26 +01:00
parent 7adb40489d
commit 401418c049
2 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/utils/dates/DateRangeSelector.tsx
View file

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { DropdownItem } from 'reactstrap'; import { DropdownItem } from 'reactstrap';
import { DropdownBtn } from '../DropdownBtn'; import { DropdownBtn } from '../DropdownBtn';
import { useEffectExceptFirstTime } from '../helpers/hooks';
import { import {
DateInterval, DateInterval,
DateRange, DateRange,
@ -17,10 +18,11 @@ export interface DateRangeSelectorProps {
disabled?: boolean; disabled?: boolean;
onDatesChange: (dateRange: DateRange) => void; onDatesChange: (dateRange: DateRange) => void;
defaultText: string; defaultText: string;
updatable?: boolean;
} }
export const DateRangeSelector = ( export const DateRangeSelector = (
{ onDatesChange, initialDateRange, defaultText, disabled }: DateRangeSelectorProps, { onDatesChange, initialDateRange, defaultText, disabled, updatable = false }: DateRangeSelectorProps,
) => { ) => {
const initialIntervalIsRange = rangeIsInterval(initialDateRange); const initialIntervalIsRange = rangeIsInterval(initialDateRange);
const [ activeInterval, setActiveInterval ] = useState(initialIntervalIsRange ? initialDateRange : undefined); const [ activeInterval, setActiveInterval ] = useState(initialIntervalIsRange ? initialDateRange : undefined);
@ -37,6 +39,14 @@ export const DateRangeSelector = (
onDatesChange(intervalToDateRange(dateInterval)); onDatesChange(intervalToDateRange(dateInterval));
}; };
updatable && useEffectExceptFirstTime(() => {
if (rangeIsInterval(initialDateRange)) {
updateInterval(initialDateRange);
} else if (initialDateRange) {
updateDateRange(initialDateRange);
}
}, [ initialDateRange ]);
return ( return (
<DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}> <DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
<DateIntervalDropdownItems allText={defaultText} active={activeInterval} onChange={updateInterval} /> <DateIntervalDropdownItems allText={defaultText} active={activeInterval} onChange={updateInterval} />

2
test/utils/dates/DateRangeSelector.test.tsx
View file

@ -44,7 +44,7 @@ describe('<DateRangeSelector />', () => {
[ 'last7Days' as DateInterval, 1 ], [ 'last7Days' as DateInterval, 1 ],
[ 'last30Days' as DateInterval, 1 ], [ 'last30Days' as DateInterval, 1 ],
[ 'last90Days' as DateInterval, 1 ], [ 'last90Days' as DateInterval, 1 ],
[ 'last180days' as DateInterval, 1 ], [ 'last180Days' as DateInterval, 1 ],
[ 'last365Days' as DateInterval, 1 ], [ 'last365Days' as DateInterval, 1 ],
[{ startDate: new Date() }, 0 ], [{ startDate: new Date() }, 0 ],
])('sets proper element as active based on provided date range', (initialDateRange, expectedActiveIntervalItems) => { ])('sets proper element as active based on provided date range', (initialDateRange, expectedActiveIntervalItems) => {