From 3d38c2dea20ad63671b5eaa48d02cb4d01d3e1fe Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Fri, 12 Jan 2024 12:00:20 +0100 Subject: [PATCH] refactor filterBarPopoverFilter --- packages/admin/admin/src/index.ts | 7 +- .../FilterBarPopoverFilter.styles.tsx | 44 ----- .../FilterBarPopoverFilter.tsx | 157 ++++++++++++++---- 3 files changed, 131 insertions(+), 77 deletions(-) delete mode 100644 packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index adaffd7cd7..143d901738 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -155,8 +155,11 @@ export { FilterBarButton, FilterBarButtonProps } from "./table/filterbar/filterB export { FilterBarButtonClassKey } from "./table/filterbar/filterBarButton/FilterBarButton.styles"; export { FilterBarMoreFilters, FilterBarMoreFiltersProps } from "./table/filterbar/filterBarMoreFilters/FilterBarMoreFilters"; export { FilterBarMoveFilersClassKey } from "./table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.styles"; -export { FilterBarPopoverFilter, FilterBarPopoverFilterProps } from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter"; -export { FilterBarPopoverFilterClassKey } from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles"; +export { + FilterBarPopoverFilter, + FilterBarPopoverFilterClassKey, + FilterBarPopoverFilterProps, +} from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter"; export { TableLocalChangesToolbar } from "./table/LocalChangesToolbar"; export { TablePagination } from "./table/Pagination"; export { createOffsetLimitPagingAction } from "./table/paging/createOffsetLimitPagingAction"; diff --git a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx deleted file mode 100644 index 969a843493..0000000000 --- a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Theme } from "@mui/material"; -import { createStyles } from "@mui/styles"; - -import { FilterBarPopoverFilterProps } from "./FilterBarPopoverFilter"; - -/** - * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. - */ -export type FilterBarPopoverFilterClassKey = "root" | "fieldBarWrapper" | "popoverContentContainer" | "paper" | "buttonsContainer"; - -export const styles = ({ palette }: Theme) => { - return createStyles({ - root: { - backgroundColor: palette.common.white, - position: "relative", - marginBottom: "10px", - borderRadius: "2px", - marginRight: "6px", - }, - fieldBarWrapper: { - position: "relative", - }, - popoverContentContainer: { - minWidth: 300, - "& [class*='CometAdminFormFieldContainer-root']": { - boxSizing: "border-box", - padding: "20px", - marginBottom: 0, - }, - }, - buttonsContainer: { - borderTop: `1px solid ${palette.grey[100]}`, - justifyContent: "space-between", - boxSizing: "border-box", - padding: "10px 15px", - display: "flex", - height: 60, - }, - paper: { - marginLeft: -1, //due to border of popover, but now overrideable with styling if needed - marginTop: 2, //due to boxShadow of popover to not overlap border of clickable fieldBar - }, - }); -}; diff --git a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx index 8ce34b8185..9355fc2c42 100644 --- a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx +++ b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx @@ -1,6 +1,7 @@ import { Check, Reset } from "@comet/admin-icons"; import { Button, ButtonProps, ComponentsOverrides, Popover, Theme } from "@mui/material"; -import { WithStyles, withStyles } from "@mui/styles"; +import { css, styled, useThemeProps } from "@mui/material/styles"; +import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps"; import * as React from "react"; import { Form, useForm } from "react-final-form"; import { FormattedMessage } from "react-intl"; @@ -9,30 +10,128 @@ import { messages } from "../../../messages"; import { dirtyFieldsCount } from "../dirtyFieldsCount"; import { FilterBarActiveFilterBadgeProps } from "../filterBarActiveFilterBadge/FilterBarActiveFilterBadge"; import { FilterBarButton, FilterBarButtonProps } from "../filterBarButton/FilterBarButton"; -import { FilterBarPopoverFilterClassKey, styles } from "./FilterBarPopoverFilter.styles"; -/** - * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. - */ -export interface FilterBarPopoverFilterProps { +export type FilterBarPopoverFilterClassKey = + | "root" + | "fieldBarWrapper" + | "popoverContentContainer" + | "paper" + | "buttonsContainer" + | "contentContainer"; + +const Root = styled("div", { + name: "CometAdminFilterBarPopoverFilter", + slot: "root", + overridesResolver(_, styles) { + return [styles.root]; + }, +})( + ({ theme }) => css` + background-color: ${theme.palette.common.white}; + position: relative; + margin-bottom: 10px; + border-radius: 2px; + margin-right: 6px; + `, +); + +const FieldBarWrapper = styled("div", { + name: "CometAdminFilterBarPopoverFilter", + slot: "fieldBarWrapper", + overridesResolver(_, styles) { + return [styles.fieldBarWrapper]; + }, +})( + css` + position: relative; + `, +); + +const PopoverContentContainer = styled("div", { + name: "CometAdminFilterBarPopoverFilter", + slot: "popoverContentContainer", + overridesResolver(_, styles) { + return [styles.popoverContentContainer]; + }, +})( + css` + min-width: 300; + `, +); + +const StyledPopover = styled(Popover, { + name: "CometAdminFilterBarPopoverFilter", + slot: "paper", + overridesResolver(_, styles) { + return [styles.tabs]; + }, +})(css` + margin-left: -1; + margin-top: 2; +`); + +const ContentContainer = styled("div", { + name: "CometAdminFilterBarPopoverFilter", + slot: "contentContainer", + overridesResolver(_, styles) { + return [styles.contentContainer]; + }, +})( + css` + box-sizing: border-box; + padding: 20px; + margin-bottom: 0; + `, +); + +const ButtonsContainer = styled("div", { + name: "CometAdminFilterBarPopoverFilter", + slot: "buttonsContainer", + overridesResolver(_, styles) { + return [styles.buttonsContainer]; + }, +})( + ({ theme }) => css` + border-top: 1px solid ${theme.palette.grey[100]}; + justify-content: space-between; + box-sizing: border-box; + padding: 10px 15px; + display: flex; + height: 60; + `, +); + +export interface FilterBarPopoverFilterProps + extends ThemedComponentBaseProps<{ + root: "div"; + fieldBarWrapper: "div"; + popoverContentContainer: "div"; + paper: typeof Popover; + buttonsContainer: "div"; + contentContainer: "div"; + }> { label: string; dirtyFieldsBadge?: React.ComponentType; calcNumberDirtyFields?: (values: Record, registeredFields: string[]) => number; submitButtonProps?: Partial; resetButtonProps?: Partial; filterBarButtonProps?: Partial; + children: any; } -function PopoverFilter({ - children, - label, - dirtyFieldsBadge, - calcNumberDirtyFields = dirtyFieldsCount, - submitButtonProps, - resetButtonProps, - filterBarButtonProps, - classes, -}: React.PropsWithChildren & WithStyles) { +export function FilterBarPopoverFilter(inProps: FilterBarPopoverFilterProps) { + const { + children, + label, + dirtyFieldsBadge, + calcNumberDirtyFields = dirtyFieldsCount, + submitButtonProps, + resetButtonProps, + filterBarButtonProps, + slotProps, + ...restProps + } = useThemeProps({ props: inProps, name: "CometAdminFilterBarPopoverFilter" }); + const outerForm = useForm(); const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); @@ -42,7 +141,7 @@ function PopoverFilter({ }; return ( -
+
{ for (const name in values) { @@ -54,7 +153,7 @@ function PopoverFilter({ {({ form, values, handleSubmit, dirtyFields }) => { const countValue = calcNumberDirtyFields(values, form.getRegisteredFields()); return ( -
+ {label} - { @@ -76,15 +175,12 @@ function PopoverFilter({ horizontal: "left", }} PaperProps={{ square: true, elevation: 1 }} - classes={{ - paper: classes.paper, - }} elevation={2} keepMounted > -
- {children} -
+ + {children} + -
-
- -
+ + + + ); }}
-
+ ); } /** * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. */ -export const FilterBarPopoverFilter = withStyles(styles, { name: "CometAdminFilterBarPopoverFilter" })(PopoverFilter); declare module "@mui/material/styles" { interface ComponentNameToClassKey {