Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 21x 21x 21x 21x 21x | import { Popover } from "@mui/material";
import { useCallback } from "react";
import RangePicker from "@components/Analytics/SidePanels/CampaignSidePanel/components/RangePicker";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import SwipeableDrawerMobile from "@components/SwipeableDrawerMobile/SwipeableDrawerMobile";
import { formatForInput } from "@shared/DateRangePicker/utils";
interface Props {
setRangePickerAnchorEl: any;
rangePickerAnchorEl: any;
customInitialRange: { startDate?: number; endDate?: number };
onSelection: ({ start, end }: { start: string; end: string }) => void;
isNewStyle?: boolean;
handleSave?: () => void;
onCloseCallback?: () => void;
ignoreMobileView?: boolean;
useUTCMoment?: boolean;
useTimezone?: boolean;
}
export default function CustomDateRangePicker({
customInitialRange,
onSelection,
setRangePickerAnchorEl,
rangePickerAnchorEl,
ignoreMobileView = false,
isNewStyle = false,
handleSave,
onCloseCallback,
useUTCMoment,
useTimezone,
}: Props) {
const handleSelect = useCallback((startDate: Date, endDate: Date) => {
onSelection({
start: formatForInput({ startDate, endDate }, true).startDate,
end: formatForInput({ startDate, endDate }, true).endDate,
});
}, []);
const handleClose = () => {
setRangePickerAnchorEl(null);
onCloseCallback && onCloseCallback();
};
const { isMobileView } = useCustomTheme();
const rangePicker = (
<RangePicker
onSelectionChange={handleSelect}
initialRange={customInitialRange}
isNewStyle={isNewStyle}
handleClose={handleClose}
handleSave={handleSave}
useUTCMoment={useUTCMoment}
useTimezone={useTimezone}
/>
);
return isMobileView && !ignoreMobileView ? (
<SwipeableDrawerMobile
anchor="bottom"
onOpen={() => undefined}
open={Boolean(rangePickerAnchorEl)}
onClose={handleClose}
sx={{
"& .MuiPaper-root.MuiDrawer-paper": {
background: "#fff",
},
}}
>
{rangePicker}
</SwipeableDrawerMobile>
) : (
<Popover
id="anchorEl"
open={Boolean(rangePickerAnchorEl)}
anchorEl={rangePickerAnchorEl}
onClose={handleClose}
PaperProps={{
style: {
borderRadius: "8px",
boxShadow: "0px 3px 15px 0px #02020226",
width: isNewStyle && isMobileView ? "100%" : undefined,
},
}}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
{rangePicker}
</Popover>
);
}
|