Theme

Filter Sphere provides a set of themes that allowing you to tailor them to your specific preferences or project needs.

Furthermore, you have the option to create your own theme based on the default ones.

Preset Themes

Material UI

The Material UI theme offers a clean and straightforward appearance, leveraging MUI Material UI.

pnpm

pnpm add @fn-sphere/theme-mui-material

npm

npm install @fn-sphere/theme-mui-material

yarn

yarn add @fn-sphere/theme-mui-material

And

ID

​

equals

​

Add RuleAdd Group

// 1. Import the MUI Material theme
import { filterTheme } from "@fn-sphere/theme-mui-material";
import {
  FilterSphereProvider,
  FilterBuilder,
  useFilterSphere,
} from "@fn-sphere/filter";

export default function AdvancedFilter({ schema }) {
  const { predicate, context } = useFilterSphere({ schema });
  return (
    // 2. Set the theme for the Filter Sphere
    <FilterSphereProvider context={context} theme={filterTheme}>
      <FilterBuilder />
    </FilterSphereProvider>
  );
}

Overriding a existing theme

You can override existing theme by replacing them with your own custom components or templates.

Preview

WHERE

​

​

​

​

and

WHERE

​

​

​

​

Add Rule

Add RuleAdd Group

Code

import { filterTheme } from "@fn-sphere/theme-mui-material";
import {
  Button,
  Card,
  CardContent,
  CardActions,
  Typography,
  Box,
} from "@mui/material";
import {
  FilterSphereProvider,
  FilterBuilder,
  useFilterSphere,
  useFilterRule,
  useFilterGroup,
  useView,
  createFilterGroup,
  createSingleFilter,
} from "@fn-sphere/filter";

const customTheme = {
  ...filterTheme,
  templates: {
    ...filterTheme.templates,
    FilterGroup: ({ rule }) => {
      const { FilterGroup: GroupView, SingleFilter: RuleView } =
        useView("templates");
      const {
        ruleState: { isRoot, depth },
        appendChildRule,
        appendChildGroup,
        toggleGroupOp,
      } = useFilterGroup(rule);
      return (
        <Card variant="outlined">
          <CardContent
            sx={{ display: "flex", flexDirection: "column", gap: 1 }}
          >
            {rule.conditions.map((childRule, groupIdx) => {
              return (
                <Box
                  key={childRule.id}
                  sx={{ display: "flex", alignItems: "flex-start", gap: 1 }}
                >
                  {groupIdx === 0 ? (
                    <Typography
                      align="center"
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        minWidth: 64,
                        height: 40,
                      }}
                    >
                      WHERE
                    </Typography>
                  ) : (
                    <Button variant="outlined" onClick={() => toggleGroupOp()}>
                      {rule.op}
                    </Button>
                  )}
                  {childRule.type === "Filter" ? (
                    <RuleView rule={childRule} />
                  ) : (
                    <GroupView rule={childRule} />
                  )}
                </Box>
              );
            })}
          </CardContent>
          <CardActions>
            <Button onClick={() => appendChildRule({})}>Add Rule</Button>
            {depth < 1 && (
              <Button
                onClick={() =>
                  appendChildGroup({
                    op: "and",
                    conditions: [createSingleFilter()],
                  })
                }
              >
                Add Group
              </Button>
            )}
          </CardActions>
        </Card>
      );
    },
  },
};

const presetRule = createFilterGroup({
  op: "and",
  conditions: [
    createSingleFilter(),
    createFilterGroup({
      op: "or",
      conditions: [createSingleFilter()],
    }),
  ],
});

export default function AdvancedFilter({ schema }) {
  const { predicate, context } = useFilterSphere({
    schema,
    defaultRule: presetRule,
  });
  return (
    <FilterSphereProvider context={context} theme={customTheme}>
      <FilterBuilder />
    </FilterSphereProvider>
  );
}

Creating a custom theme

You can modify a component by overriding the specific component in the theme.

And

idnameequalsnot equal>>=<<=Delete

Add RuleAdd Group

import {
  FilterSphereProvider,
  FilterBuilder,
  useFilterSphere,
  useFilterRule,
  createFilterTheme,
} from "@fn-sphere/filter";
import { z } from "zod";

const schema = z.object({
  id: z.number(),
  name: z.string(),
});

const customTheme = createFilterTheme({
  components: {
    Button: (props) => <button style={{ borderRadius: "10px" }} {...props} />,
  },
});

export default function AdvancedFilter() {
  const { predicate, context } = useFilterSphere({ schema });
  return (
    <FilterSphereProvider context={context} theme={customTheme}>
      <FilterBuilder />
    </FilterSphereProvider>
  );
}

Anatomy of the theme

The theme is a set of components and templates that are used to render the Filter Sphere. You can see the constructor of the theme by clicking on the following tabs.

components

ButtonAnd

SelectidnamecheckedcreatedAtstatus

Selectequalsnot equal>>=<<=

Input

ButtonDelete

ButtonAdd Rule

ButtonAdd Group

Components

You can override the components to customize the appearance of the Filter Sphere. The components include: Button, Input, Select and MultipleSelect.

templates

FilterGroup

FilterGroupContainer

And

SingleFilter

SingleFilterContainer

FieldSelectidnamecheckedcreatedAtstatus

FilterSelectequalsnot equal>>=<<=

FilterDataInput

Delete

Add RuleAdd Group

Templates

The templates are the layout of the Filter Sphere. You can override the templates to customize the layout of the Filter Sphere.

• FilterGroup: The FilterGroup template is used to render the group of filters in the Filter Sphere.
  • FilterGroupContainer: Includes the AND and OR buttons and Add Rule and Add Group buttons by default.
• SingleFilter: The SingleFilter template is used to render the single filter in the Filter Sphere.
  • FilterRuleContainer: The container for the rule.
  • FieldSelect: The select field for the rule.
  • FilterSelect: The select filter for the rule.
  • FilterDataInput: The input field for the rule.
• RuleJoiner: Used to render the joiner between the rules, it will render nothing by default.