refactor filterBarPopoverFilter

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";

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,132 @@ 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: 300px;
+    `,
+);
+
+const StyledPopover = styled(Popover, {
+    name: "CometAdminFilterBarPopoverFilter",
+    slot: "paper",
+    overridesResolver(_, styles) {
+        return [styles.tabs];
+    },
+})(css`
+    margin-left: -1px;
+    margin-top: 2px;
+`);
+
+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: 60px;
+    `,
+);
+
+export interface FilterBarPopoverFilterProps
+    extends ThemedComponentBaseProps<{
+        root: "div";
+        fieldBarWrapper: "div";
+        popoverContentContainer: "div";
+        paper: typeof Popover;
+        buttonsContainer: "div";
+        contentContainer: "div";
+    }> {
     label: string;
     dirtyFieldsBadge?: React.ComponentType<FilterBarActiveFilterBadgeProps>;
     calcNumberDirtyFields?: (values: Record<string, any>, registeredFields: string[]) => number;
     submitButtonProps?: Partial<ButtonProps>;
     resetButtonProps?: Partial<ButtonProps>;
     filterBarButtonProps?: Partial<FilterBarButtonProps>;
+    children: any;
 }
 
-function PopoverFilter({
-    children,
-    label,
-    dirtyFieldsBadge,
-    calcNumberDirtyFields = dirtyFieldsCount,
-    submitButtonProps,
-    resetButtonProps,
-    filterBarButtonProps,
-    classes,
-}: React.PropsWithChildren<FilterBarPopoverFilterProps> & WithStyles<typeof styles>) {
+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<HTMLButtonElement | null>(null);
     const open = Boolean(anchorEl);
@@ -42,7 +145,7 @@ function PopoverFilter({
     };
 
     return (
-        <div className={classes.root}>
+        <Root {...slotProps?.root} {...restProps}>
             <Form
                 onSubmit={(values) => {
                     for (const name in values) {
@@ -54,7 +157,7 @@ function PopoverFilter({
                 {({ form, values, handleSubmit, dirtyFields }) => {
                     const countValue = calcNumberDirtyFields(values, form.getRegisteredFields());
                     return (
-                        <div className={classes.fieldBarWrapper}>
+                        <FieldBarWrapper {...slotProps?.fieldBarWrapper}>
                             <FilterBarButton
                                 openPopover={open}
                                 numberDirtyFields={countValue}
@@ -64,7 +167,7 @@ function PopoverFilter({
                             >
                                 {label}
                             </FilterBarButton>
-                            <Popover
+                            <StyledPopover
                                 open={open}
                                 anchorEl={anchorEl}
                                 onClose={() => {
@@ -76,15 +179,12 @@ function PopoverFilter({
                                     horizontal: "left",
                                 }}
                                 PaperProps={{ square: true, elevation: 1 }}
-                                classes={{
-                                    paper: classes.paper,
-                                }}
                                 elevation={2}
                                 keepMounted
                             >
-                                <div className={classes.popoverContentContainer}>
-                                    {children}
-                                    <div className={classes.buttonsContainer}>
+                                <PopoverContentContainer {...slotProps?.popoverContentContainer}>
+                                    <ContentContainer {...slotProps?.contentContainer}>{children}</ContentContainer>
+                                    <ButtonsContainer {...slotProps?.buttonsContainer}>
                                         <Button
                                             type="reset"
                                             variant="text"
@@ -116,21 +216,20 @@ function PopoverFilter({
                                         >
                                             <FormattedMessage {...messages.apply} />
                                         </Button>
-                                    </div>
-                                </div>
-                            </Popover>
-                        </div>
+                                    </ButtonsContainer>
+                                </PopoverContentContainer>
+                            </StyledPopover>
+                        </FieldBarWrapper>
                     );
                 }}
             </Form>
-        </div>
+        </Root>
     );
 }
 
 /**
  * @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 {