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

library to easily build tables using MUI grid

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var material = require('@mui/material');
var styles = require('@mui/material/styles');
var iconsMaterial = require('@mui/icons-material');
var react = require('react');
var xDataGrid = require('@mui/x-data-grid');
var provider$1 = require('../../../context/filter/provider.js');
var provider$2 = require('../../../context/translation/provider.js');
var index = require('../../../utils/merge-refs/index.js');
var index$1 = require('../../../types/column-type-union/index.js');
var provider = require('../../../context/table-builder/provider.js');

const filterInitialValue = {
    date: [
        null,
        null
    ]
};
const StyledMenu = styles.styled((props)=>/*#__PURE__*/ jsxRuntime.jsx(material.Menu, {
        anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'left'
        },
        transformOrigin: {
            vertical: 'top',
            horizontal: 'left'
        },
        ...props
    }))(({ theme  })=>({
        '& .MuiPaper-root': {
            minWidth: 180,
            color: 'text.secondary',
            '& .MuiMenuItem-root': {
                '& .MuiSvgIcon-root': {
                    fontSize: 18,
                    color: 'text.secondary',
                    marginRight: theme.spacing(1.5)
                },
                '&:active': {
                    backgroundColor: styles.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
                }
            }
        }
    }));
const CustomGridToolbarFilterButton = /*#__PURE__*/ react.memo(/*#__PURE__*/ react.forwardRef((props, ref)=>{
    const apiRef = xDataGrid.useGridApiContext();
    const anchor = react.useRef(null);
    const columns = provider.useTableBuilderColumns((s)=>s.columns);
    const [filters, panel, setPanel, addFilter, deleteFilter] = provider$1.useTableBuilderFilters((s)=>[
            s.filters,
            s.panel,
            s.setPanel,
            s.addFilter,
            s.deleteFilter
        ]);
    const t = provider$2.useTranslation((s)=>s.getFieldLabel);
    const lookup = xDataGrid.useGridSelector(apiRef, xDataGrid.gridColumnLookupSelector);
    const toggleFiltersPanel = react.useCallback(()=>setPanel((v)=>!v), [
        setPanel
    ]);
    const tooltipContentNode = react.useMemo(()=>{
        if (filters.length === 0) return apiRef?.current.getLocaleText('toolbarFiltersTooltipShow');
        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
            children: [
                apiRef?.current.getLocaleText('toolbarFiltersTooltipActive')(filters.length),
                /*#__PURE__*/ jsxRuntime.jsx(material.Box, {
                    component: "ul",
                    sx: {
                        margin: (theme)=>theme.spacing(1, 1, 0.5),
                        padding: (theme)=>theme.spacing(0, 1)
                    },
                    children: filters.map((el)=>lookup[el.field] && /*#__PURE__*/ jsxRuntime.jsx("li", {
                            children: `${lookup[el.field].headerName || el.field}
                ${el.value}`
                        }, el.field))
                })
            ]
        });
    }, [
        filters,
        apiRef,
        lookup
    ]);
    const refs = react.useMemo(()=>index.mergeRefs(ref, anchor), [
        ref
    ]);
    const items = react.useMemo(()=>columns.filter((el)=>el.filterable && index$1.allowedFilterTypes.includes(el.type)).map((el)=>{
            const active = filters.findIndex((e)=>e.field === el.field) !== -1;
            return /*#__PURE__*/ jsxRuntime.jsxs(material.MenuItem, {
                onClick: ()=>{
                    active ? deleteFilter(el.field) : addFilter({
                        field: el.field,
                        column: el,
                        value: filterInitialValue[el.type] ?? ''
                    });
                },
                children: [
                    active ? /*#__PURE__*/ jsxRuntime.jsx(iconsMaterial.CheckBox, {}) : /*#__PURE__*/ jsxRuntime.jsx(iconsMaterial.CheckBoxOutlineBlank, {}),
                    t(el.field, true)
                ]
            }, el.field);
        }), [
        addFilter,
        columns,
        deleteFilter,
        filters,
        t
    ]);
    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
        children: [
            /*#__PURE__*/ jsxRuntime.jsx(material.Tooltip, {
                title: tooltipContentNode,
                enterDelay: 1000,
                children: /*#__PURE__*/ jsxRuntime.jsx(material.Button, {
                    ref: refs,
                    size: "small",
                    color: "primary",
                    ...props,
                    onClick: toggleFiltersPanel,
                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(material.Badge, {
                        badgeContent: filters.length,
                        color: "primary",
                        children: /*#__PURE__*/ jsxRuntime.jsx(iconsMaterial.FilterList, {})
                    }),
                    children: apiRef?.current.getLocaleText('toolbarFilters')
                })
            }),
            /*#__PURE__*/ jsxRuntime.jsx(StyledMenu, {
                anchorEl: anchor.current,
                open: panel,
                onClose: toggleFiltersPanel,
                children: items
            })
        ]
    });
}));

exports.CustomGridToolbarFilterButton = CustomGridToolbarFilterButton;
//# sourceMappingURL=index.js.map