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 | 117x 19x 19x 19x 19x 19x 19x 19x 19x 19x 1x 1x 2x | import { Stack } from "@mui/material";
import UserFilter from "./filter-components/UserFilter";
import CategoryFilter from "./filter-components/CategoryFilter";
import DateSelector from "./filter-components/DateSelector";
import { useFormContext } from "react-hook-form";
import { FilterValuesType } from "./types";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useAppTheme } from "@theme/v2/Provider";
interface IChangelogFiltersProps {
merchantId: number;
}
const ChangelogFilters = ({ merchantId }: IChangelogFiltersProps) => {
const context = useFormContext<FilterValuesType>();
const { isMobileView } = useCustomThemeV2();
const { palette } = useAppTheme();
Iif (!context) return null;
const { watch, setValue } = context;
const users = watch("user") || [];
const categories = watch("category") || [];
const date = watch("date");
return (
<Stack
direction="row"
flexWrap={isMobileView ? "wrap" : "nowrap"}
gap={1}
pl={isMobileView ? "14px" : "8px"}
pr={isMobileView ? "20px" : "12px"}
pt="12px"
mt="12px"
borderTop={`1px solid ${palette.border?.primary}`}
>
<UserFilter
merchantId={merchantId}
selectedUsers={users}
onApply={(value) => setValue("user", value)}
/>
<CategoryFilter
merchantId={merchantId}
selectedCategories={categories}
onApply={(value) => setValue("category", value)}
/>
<DateSelector
selectedDate={date}
onChange={(value) => setValue("date", value)}
/>
</Stack>
);
};
export default ChangelogFilters;
|