@mrii/react-table-builder/dist/components/custom/custom-grid-filter-button/index.mjs.map

library to easily build tables using MUI grid

{"version":3,"file":"index.mjs","sources":["../../../../src/components/custom/custom-grid-filter-button/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport type { ButtonProps, MenuProps } from '@mui/material';\nimport { Button, Tooltip, Box, Menu, MenuItem, Badge } from '@mui/material';\nimport { styled, alpha } from '@mui/material/styles';\nimport { CheckBox, CheckBoxOutlineBlank, FilterList } from '@mui/icons-material';\nimport { forwardRef, memo, useCallback, useMemo, useRef } from 'react';\nimport {\n  useGridSelector,\n  gridColumnLookupSelector,\n  useGridApiContext,\n} from '@mui/x-data-grid';\n\nimport { useTableBuilderFilters, useTableBuilderColumns, useTranslation } from '$context';\nimport { allowedFilterTypes } from '$types';\nimport { mergeRefs } from '$utils';\n\nconst filterInitialValue = {\n  date: [null, null],\n};\n\nconst StyledMenu = styled((props: MenuProps) => (\n  <Menu\n    anchorOrigin={{\n      vertical: 'bottom',\n      horizontal: 'left',\n    }}\n    transformOrigin={{\n      vertical: 'top',\n      horizontal: 'left',\n    }}\n    {...props}\n  />\n))(({ theme }) => ({\n  '& .MuiPaper-root': {\n    minWidth: 180,\n    color: 'text.secondary',\n    '& .MuiMenuItem-root': {\n      '& .MuiSvgIcon-root': {\n        fontSize: 18,\n        color: 'text.secondary',\n        marginRight: theme.spacing(1.5),\n      },\n      '&:active': {\n        backgroundColor: alpha(\n          theme.palette.primary.main,\n          theme.palette.action.selectedOpacity\n        ),\n      },\n    },\n  },\n}));\n\nexport const CustomGridToolbarFilterButton = memo(\n  forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n    const apiRef = useGridApiContext();\n    const anchor = useRef<HTMLButtonElement>(null);\n    const columns = useTableBuilderColumns(s => s.columns);\n    const [filters, panel, setPanel, addFilter, deleteFilter] = useTableBuilderFilters(\n      s => [s.filters, s.panel, s.setPanel, s.addFilter, s.deleteFilter]\n    );\n    const t = useTranslation(s => s.getFieldLabel);\n\n    const lookup = useGridSelector(apiRef, gridColumnLookupSelector);\n\n    const toggleFiltersPanel = useCallback(() => setPanel(v => !v), [setPanel]);\n\n    const tooltipContentNode = useMemo(() => {\n      if (filters.length === 0)\n        return apiRef?.current.getLocaleText(\n          'toolbarFiltersTooltipShow'\n        ) as React.ReactElement;\n\n      return (\n        <div>\n          {apiRef?.current.getLocaleText('toolbarFiltersTooltipActive')(filters.length)}\n          <Box\n            component='ul'\n            sx={{\n              margin: theme => theme.spacing(1, 1, 0.5),\n              padding: theme => theme.spacing(0, 1),\n            }}\n          >\n            {filters.map(\n              el =>\n                lookup[el.field] && (\n                  <li key={el.field}>\n                    {`${lookup[el.field].headerName || el.field}\n                ${el.value}`}\n                  </li>\n                )\n            )}\n          </Box>\n        </div>\n      );\n    }, [filters, apiRef, lookup]);\n\n    const refs = useMemo(() => mergeRefs(ref, anchor), [ref]);\n    const items = useMemo(\n      () =>\n        columns\n          .filter(el => el.filterable && allowedFilterTypes.includes(el.type as any))\n          .map(el => {\n            const active = filters.findIndex(e => e.field === el.field) !== -1;\n            return (\n              <MenuItem\n                key={el.field}\n                onClick={() => {\n                  active\n                    ? deleteFilter(el.field)\n                    : addFilter({\n                        field: el.field,\n                        column: el,\n                        value: filterInitialValue[el.type as 'date'] ?? '',\n                      });\n                }}\n              >\n                {active ? <CheckBox /> : <CheckBoxOutlineBlank />}\n                {t(el.field, true)}\n              </MenuItem>\n            );\n          }),\n      [addFilter, columns, deleteFilter, filters, t]\n    );\n\n    return (\n      <>\n        <Tooltip title={tooltipContentNode} enterDelay={1000}>\n          <Button\n            ref={refs}\n            size='small'\n            color='primary'\n            {...props}\n            onClick={toggleFiltersPanel}\n            startIcon={\n              <Badge badgeContent={filters.length} color='primary'>\n                <FilterList />\n              </Badge>\n            }\n          >\n            {apiRef?.current.getLocaleText('toolbarFilters')}\n          </Button>\n        </Tooltip>\n        <StyledMenu anchorEl={anchor.current} open={panel} onClose={toggleFiltersPanel}>\n          {items}\n        </StyledMenu>\n      </>\n    );\n  })\n);\n"],"names":["filterInitialValue","date","StyledMenu","styled","props","_jsx","Menu","anchorOrigin","vertical","horizontal","transformOrigin","theme","minWidth","color","fontSize","marginRight","spacing","backgroundColor","alpha","palette","primary","main","action","selectedOpacity","CustomGridToolbarFilterButton","memo","forwardRef","ref","apiRef","useGridApiContext","anchor","useRef","columns","useTableBuilderColumns","s","filters","panel","setPanel","addFilter","deleteFilter","useTableBuilderFilters","t","useTranslation","getFieldLabel","lookup","useGridSelector","gridColumnLookupSelector","toggleFiltersPanel","useCallback","v","tooltipContentNode","useMemo","length","current","getLocaleText","_jsxs","div","Box","component","sx","margin","padding","map","el","field","li","headerName","value","refs","mergeRefs","items","filter","filterable","allowedFilterTypes","includes","type","active","findIndex","e","MenuItem","onClick","column","CheckBox","CheckBoxOutlineBlank","_Fragment","Tooltip","title","enterDelay","Button","size","startIcon","Badge","badgeContent","FilterList","anchorEl","open","onClose"],"mappings":"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"}