118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
import Period from 'Types/app/period';
|
|
import { Dropdown, Button, Menu, Space, MenuProps } from 'antd';
|
|
import cn from 'classnames';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
import { CUSTOM_RANGE, DATE_RANGE_OPTIONS } from 'App/dateRange';
|
|
|
|
import DateRangePopup from 'Shared/DateRangeDropdown/DateRangePopup';
|
|
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
|
|
|
interface Props {
|
|
period: any;
|
|
onChange: (data: any) => void;
|
|
disableCustom?: boolean;
|
|
right?: boolean;
|
|
timezone?: string;
|
|
isAnt?: boolean;
|
|
small?: boolean;
|
|
useButtonStyle?: boolean; // New prop to control button style
|
|
|
|
[x: string]: any;
|
|
}
|
|
|
|
const SelectDateRange: React.FC<Props> = (props: Props) => {
|
|
const [isCustom, setIsCustom] = React.useState(false);
|
|
const { right = false, period, disableCustom = false, timezone, useButtonStyle = false } = 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
|
|
);
|
|
|
|
const onChange = (e: any) => {
|
|
if (e.key === CUSTOM_RANGE) {
|
|
setTimeout(() => {
|
|
setIsCustom(true);
|
|
}, 1);
|
|
} else {
|
|
props.onChange(Period({ rangeName: e.key }));
|
|
}
|
|
};
|
|
|
|
const onApplyDateRange = (value: any) => {
|
|
const range = Period({
|
|
rangeName: CUSTOM_RANGE,
|
|
start: value.start,
|
|
end: value.end
|
|
});
|
|
props.onChange(range);
|
|
setIsCustom(false);
|
|
};
|
|
|
|
const isCustomRange = period.rangeName === CUSTOM_RANGE;
|
|
const customRange = isCustomRange ? period.rangeFormatted() : '';
|
|
|
|
const menuItems: MenuProps['items'] = options.map((opt) => ({
|
|
key: opt.value,
|
|
label: opt.label,
|
|
className: opt.value === selectedValue?.value ? 'ant-select-item-option-selected' : '',
|
|
}));
|
|
|
|
return (
|
|
<div className={'relative'}>
|
|
<Dropdown menu={{ items: menuItems, onClick: onChange, selectedKeys: [selectedValue?.value!] }} trigger={['click']}>
|
|
{useButtonStyle ? (
|
|
<Button type="text">
|
|
<span>{isCustomRange ? customRange : selectedValue?.label}</span>
|
|
<DownOutlined />
|
|
</Button>
|
|
) : (
|
|
<div className={'cursor-pointer flex items-center gap-2'}>
|
|
<span>{isCustomRange ? customRange : selectedValue?.label}</span>
|
|
<DownOutlined />
|
|
</div>
|
|
)}
|
|
</Dropdown>
|
|
{isCustom && (
|
|
<OutsideClickDetectingDiv
|
|
onClickOutside={(e: any) => {
|
|
if (
|
|
e.target.parentElement.parentElement.classList.contains(
|
|
'rc-time-picker-panel-select'
|
|
) ||
|
|
e.target.parentElement.parentElement.classList[0]?.includes(
|
|
'-menu'
|
|
) ||
|
|
e.target.className.includes('ant-picker')
|
|
) {
|
|
return false;
|
|
}
|
|
setIsCustom(false);
|
|
}}
|
|
>
|
|
<div
|
|
className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
|
|
style={{
|
|
width: '770px',
|
|
fontSize: '14px',
|
|
textAlign: 'left'
|
|
}}
|
|
>
|
|
<DateRangePopup
|
|
timezone={timezone}
|
|
onApply={onApplyDateRange}
|
|
onCancel={() => setIsCustom(false)}
|
|
selectedDateRange={period.range}
|
|
/>
|
|
</div>
|
|
</OutsideClickDetectingDiv>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default observer(SelectDateRange);
|