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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 2x 14x 14x 14x 14x 14x | import { ModalActions, ModalTitle } from "@common/Modal/ModalFactory/atoms";
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import ModalFactory from "@common/Modal/ModalFactory/ModalFactory";
import NiceModal from "@ebay/nice-modal-react";
import { Box } from "@mui/material";
import { palette } from "@palette";
import ModalContent from "./ModalContent";
import { FormProvider } from "react-hook-form";
import useFilterSections from "./hooks/useFilterSections";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
interface ITableFilterModal {
tab: "portfolio" | "underwriting" | "risk";
}
const TableFilterModal = NiceModal.create(({ tab }: ITableFilterModal) => {
const { isMobileView } = useCustomTheme();
const { open, onClose, SlideProps } = useNiceModal();
const {
sections,
methods,
onSubmit,
handleReset,
areFiltersSelected,
clearAllEnabled,
} = useFilterSections({
type: "merchant",
tab,
onClose,
});
const actions = {
primaryAction: {
label: "Apply filters",
disabled: !areFiltersSelected,
sx: {
fontSize: "18px",
lineHeight: "18px",
padding: "12px 24px",
},
},
secondaryAction: {
label: "Clear all filters",
onClick: () => {
handleReset();
},
sx: {
fontSize: "18px",
lineHeight: "18px",
padding: "12px 24px",
color: palette.filled.red,
},
hidden: !clearAllEnabled,
},
};
return (
<ModalFactory
variant="sidepanel"
modalProps={{
open,
onClose: onClose,
SlideProps,
SidePanelProps: {
width: "500px",
},
}}
>
<FormProvider {...methods}>
<Box
width="100%"
height="100%"
display="flex"
sx={{
padding: "16px",
gap: "24px",
flexDirection: "column",
justifyContent: "space-between",
overflow: "hidden",
...(isMobileView && {
paddingX: "8px",
paddingY: 0,
gap: "16px",
}),
}}
component="form"
onSubmit={methods.handleSubmit(onSubmit)}
>
<ModalTitle
title="Filter by"
textStyles={{
title: {
fontSize: "18px",
lineHeight: "21.6px",
letterSpacing: "-0.18px",
},
}}
closeButtonSize={24}
onClose={onClose}
/>
<ModalContent sections={sections} />
<ModalActions
animationDelay={250}
{...actions}
{...(isMobileView && {
containerProps: {
sx: {
flexDirection: "column-reverse",
gap: "8px",
padding: "8px",
},
},
})}
/>
</Box>
</FormProvider>
</ModalFactory>
);
});
export default TableFilterModal;
|