jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - date range - timepicker closing on time selection

Browse source
This commit is contained in:
Shekar Siri 2022-07-18 12:23:13 +02:00
parent 400fcd435a
commit 47df65fb50
1 changed files with 36 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { DATE_RANGE_OPTIONS, CUSTOM_RANGE } from 'App/dateRange'
import { DATE_RANGE_OPTIONS, CUSTOM_RANGE } from 'App/dateRange';
import Select from 'Shared/Select';
import Period, { LAST_7_DAYS } from 'Types/app/period';
import { components } from 'react-select';
@ -8,7 +8,7 @@ import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import cn from 'classnames';
interface Props {
period: any,
period: any;
onChange: (data: any) => void;
disableCustom?: boolean;
right?: boolean;
@ -17,8 +17,8 @@ interface Props {
function SelectDateRange(props: Props) {
const [isCustom, setIsCustom] = React.useState(false);
const { right = false, period, disableCustom = false, ...rest } = props;
let selectedValue = DATE_RANGE_OPTIONS.find((obj: any) => obj.value === period.rangeName)
const options = DATE_RANGE_OPTIONS.filter((obj: any) => disableCustom ? obj.value !== CUSTOM_RANGE : true);
let selectedValue = DATE_RANGE_OPTIONS.find((obj: any) => obj.value === period.rangeName);
const options = DATE_RANGE_OPTIONS.filter((obj: any) => (disableCustom ? obj.value !== CUSTOM_RANGE : true));
const onChange = (value: any) => {
if (value === CUSTOM_RANGE) {
@ -26,12 +26,12 @@ function SelectDateRange(props: Props) {
} else {
props.onChange(new Period({ rangeName: value }));
}
}
};
const onApplyDateRange = (value: any) => {
props.onChange(new Period({ rangeName: CUSTOM_RANGE, start: value.start, end: value.end }));
setIsCustom(false);
}
};
return (
<div className="relative">
@ -40,39 +40,42 @@ function SelectDateRange(props: Props) {
value={selectedValue}
options={options}
onChange={({ value }: any) => onChange(value.value)}
components={{ SingleValue: ({ children, ...props} : any) => {
return (
<components.SingleValue {...props}>
{period.rangeName === CUSTOM_RANGE ? period.rangeFormatted() : children}
</components.SingleValue>
)
} }}
components={{
SingleValue: ({ children, ...props }: any) => {
return (
<components.SingleValue {...props}>
{period.rangeName === CUSTOM_RANGE ? period.rangeFormatted() : children}
</components.SingleValue>
);
},
}}
period={period}
right={true}
style={{ width: '100%' }}
/>
{
isCustom &&
<OutsideClickDetectingDiv
onClickOutside={() => setIsCustom(false)}
>
<div className={ cn("absolute top-0 mt-10 z-40", { 'right-0' : right })} style={{
width: '770px',
// margin: 'auto 50vh 0',
// transform: 'translateX(-50%)'
}}>
<DateRangePopup
onApply={ onApplyDateRange }
onCancel={ () => setIsCustom(false) }
selectedDateRange={ period.range }
/>
</div>
</OutsideClickDetectingDiv>
}
{isCustom && (
<OutsideClickDetectingDiv
onClickOutside={(e: any) => {
if (e.target.parentElement.parentElement.classList.contains('rc-time-picker-panel-select')) {
return false;
}
setIsCustom(false);
}}
>
<div
className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
style={{
width: '770px',
// margin: 'auto 50vh 0',
// transform: 'translateX(-50%)'
}}
>
<DateRangePopup onApply={onApplyDateRange} onCancel={() => setIsCustom(false)} selectedDateRange={period.range} />
</div>
</OutsideClickDetectingDiv>
)}
</div>
);
}
export default SelectDateRange;