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 | import * as React from "react";
// @mui
import Box from "@mui/material/Box";
// components
import FilterMenu from "./FilterMenu";
import FilterButton from "./FilterButton";
import { Select } from "@common/Select";
import { Button } from "@common/Button";
import { Text } from "@common/Text";
// types
import { Options } from "types/data.types";
// redux
import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
import { useAppDispatch } from "@redux/hooks";
// localization
import { useTranslation } from "react-i18next";
import { namespaces } from "localization/resources/i18n.constants";
export default function FilterWithOption({
title,
options,
apply,
disable,
}: {
title: string;
options: Options[];
apply: ActionCreatorWithPayload<any, string>;
disable: ActionCreatorWithPayload<any, string>;
}) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [filterValues, setFilterValues] = React.useState<string[]>([]);
const [formValues, setFormValues] = React.useState<{ option: string }>({
option: options[0].value,
});
const open = Boolean(anchorEl);
const dispatch = useAppDispatch();
const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target;
setFormValues({
option: value as string,
});
};
const { t } = useTranslation(namespaces.common);
const handleOpenMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget.parentElement);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleDisableFilter = () => {
setAnchorEl(null);
setFilterValues([]);
dispatch(
disable({
type: t("filters.reccurence", { ns: namespaces.common }),
}),
);
};
const handleSubmit = () => {
setFilterValues(Object.values(formValues));
setAnchorEl(null);
if (
formValues.option ===
t("filters.reccuring_OneTime", { ns: namespaces.common })
) {
dispatch(
disable({ type: t("filters.reccurence", { ns: namespaces.common }) }),
);
}
dispatch(
apply({
type: "reccurence",
value: formValues.option,
}),
);
};
return (
<>
<FilterButton
title={title}
onClick={handleOpenMenu}
active={filterValues.length > 0}
onDisableFilter={handleDisableFilter}
>
{filterValues}
</FilterButton>
<FilterMenu anchorEl={anchorEl} open={open} onClose={handleClose}>
<Box component="form" mb={2}>
<Text
variant="headline"
sx={{
marginBottom: 2,
fontWeight: 350,
color: "#575353",
span: { textTransform: "capitalize" },
}}
>
Filter by <span>{title}</span>
</Text>
<Select
name="modifier"
options={options}
value={formValues.option}
fullWidth
size="small"
onChange={handleOptionChange}
/>
</Box>
<Button size="small" variant="primary" fullWidth onClick={handleSubmit}>
{t("filters.apply", { ns: namespaces.common })}
</Button>
</FilterMenu>
</>
);
}
|