@ssplib/react-components 0.0.295 → 0.0.296

package/components/form/stepper/Stepper.js

@@ -0,0 +1,135 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stepper = void 0;
+const KeyboardArrowLeft_1 = __importDefault(require("@mui/icons-material/KeyboardArrowLeft"));
+const KeyboardArrowRight_1 = __importDefault(require("@mui/icons-material/KeyboardArrowRight"));
+const Save_1 = __importDefault(require("@mui/icons-material/Save"));
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const react_toastify_1 = require("react-toastify");
+const form_1 = require("../../../context/form");
+const getKeys = (values, id) => {
+    if (!values || Object.keys(values).length <= 0)
+        return [];
+    if (!values[id])
+        return [];
+    let keys = Object.keys(values[id]).map((x) => `${id}.${x}`);
+    if (values.files)
+        keys = [...keys, ...Object.keys(values.files).map((x) => `files.${x}`)];
+    return keys;
+};
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function Stepper(_a) {
+    var { debugLog = false, test = false, testConfig = {}, customMarginBottom = 10 } = _a, props = __rest(_a, ["debugLog", "test", "testConfig", "customMarginBottom"]);
+    props.children = Array.isArray(props.children) ? props.children.filter((x, id) => x) : props.children;
+    const length = Array.isArray(props.children) ? props.children.length : 1;
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    // next button ref
+    const nRef = (0, react_1.useRef)(null);
+    const theme = (0, material_1.useTheme)();
+    const [activeStep, setActiveStep] = (0, react_1.useState)(0);
+    const blocks = Array.isArray(props.children) ? props.children : [props.children];
+    const stepperBlocks = blocks.map((x, idx) => {
+        return react_1.default.cloneElement(x, Object.assign(Object.assign({}, x.props), { prefix: idx }));
+    });
+    const maxSteps = length;
+    const handleNext = () => __awaiter(this, void 0, void 0, function* () {
+        if (debugLog)
+            console.log(context.formGetValues());
+        // console.log('valores conferidos', getKeys(context.formGetValues(), activeStep), context.formGetValues(getKeys(context.formGetValues(), activeStep)))
+        const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
+        if (!result) {
+            (0, react_toastify_1.toast)('Formulário incompleto! Verifique os campos marcados e tente novamente.', { type: 'warning', theme: 'light' });
+            return;
+        }
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    });
+    const nextCheck = (e) => __awaiter(this, void 0, void 0, function* () {
+        const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
+        if (!result) {
+            e.preventDefault();
+            (0, react_toastify_1.toast)('Formulário incompleto! Verifique os campos marcados e tente novamente.', { type: 'warning', theme: 'light' });
+            return;
+        }
+    });
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+    const preencher = () => {
+        Object.keys(testConfig).forEach((id, idx) => {
+            const obj = testConfig[Number(id)];
+            Object.keys(obj).forEach((x) => {
+                context.formUnregister(`${id}.${x}`);
+                context.formSetValue(`${id}.${x}`, obj[x]);
+            });
+            if (idx < Object.keys(testConfig).length - 1) {
+                sleep(100).then(() => {
+                    var _a;
+                    const bt = nRef.current;
+                    (_a = nRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                });
+            }
+        });
+    };
+    return (react_1.default.createElement(material_1.Box, null,
+        test && (react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'end' },
+            react_1.default.createElement(material_1.Button, { variant: 'contained', color: 'error', onClick: preencher }, "EXCLUIR BANCO PRODU\u00C7\u00C3O"))),
+        react_1.default.createElement(material_1.Stack, { sx: { padding: 2, marginBottom: customMarginBottom } },
+            react_1.default.createElement(material_1.Box, null, stepperBlocks.map((b, index) => (react_1.default.createElement(material_1.Box, { key: 'formsB' + index, hidden: !(activeStep === index) }, stepperBlocks[index])))),
+            react_1.default.createElement(material_1.MobileStepper, { variant: 'text', steps: maxSteps, 
+                // position='bottom'
+                position: (0, material_1.useMediaQuery)(theme.breakpoints.only('xs')) ? 'bottom' : 'static', activeStep: activeStep, sx: { paddingTop: 2, paddingBottom: 4, paddingX: 0 }, backButton: react_1.default.createElement(material_1.Button, { variant: 'contained', startIcon: react_1.default.createElement(KeyboardArrowLeft_1.default, null), onClick: handleBack, disabled: activeStep === 0, sx: { textTransform: 'none' } }, "Voltar"), nextButton: activeStep < maxSteps - 1 ? (react_1.default.createElement(material_1.Button, { variant: 'contained', endIcon: react_1.default.createElement(KeyboardArrowRight_1.default, null), onClick: handleNext, sx: { textTransform: 'none' }, ref: nRef }, "Pr\u00F3ximo")) : (react_1.default.createElement(material_1.Box, null,
+                    react_1.default.createElement(lab_1.LoadingButton, { variant: 'contained', type: 'submit', loading: context.submiting, loadingPosition: 'start', startIcon: react_1.default.createElement(Save_1.default, null), onClick: (e) => nextCheck(e), sx: { textTransform: 'none', backgroundColor: '#22C55E', '&:hover': { backgroundColor: '#48cf7a' } } },
+                        react_1.default.createElement("span", null, "Salvar")))) }))));
+}
+exports.Stepper = Stepper;
+exports.default = react_1.default.memo(Stepper);

package/components/form/stepper/StepperBlock.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepperBlock = void 0;
+const ContentPasteOutlined_1 = __importDefault(require("@mui/icons-material/ContentPasteOutlined"));
+const material_1 = require("@mui/material");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const react_1 = __importStar(require("react"));
+const Switch_1 = __importDefault(require("../switch/Switch"));
+const form_1 = require("../../../context/form");
+function childrenTree(component, prefix, idx) {
+    if (!component.props)
+        return component;
+    const children = component.props.children;
+    if (!children)
+        return react_1.default.cloneElement(component, Object.assign(Object.assign({}, component.props), { name: `${prefix}.${component.props.name}`, key: component.props.name ? `${prefix}.${component.props.name}` : `noListing-${idx}-${prefix}-${component.props.name}` }));
+    let newChildren;
+    if (Array.isArray(children)) {
+        let c = [];
+        children.forEach((x, cIdx) => {
+            c.push(childrenTree(x, prefix, idx + (cIdx + 1)));
+        });
+        newChildren = c;
+    }
+    //
+    else {
+        newChildren = childrenTree(children, prefix, idx + 1);
+    }
+    const newComponent = react_1.default.cloneElement(component, Object.assign(Object.assign({}, component.props), { children: newChildren, name: `${prefix}.${component.props.name}`, key: component.props.name ? `${prefix}.${component.props.name}` : `noListing-${idx}-${prefix}-${component.props.name}` }));
+    return newComponent;
+}
+function StepperBlock(_a) {
+    var { optional = false, title, prefix = 0, optionalMessage, defaultChecked } = _a, props = __rest(_a, ["optional", "title", "prefix", "optionalMessage", "defaultChecked"]);
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    const switchName = `switch-${prefix}`;
+    const fields = Array.isArray(props.children) ? props.children : [props.children];
+    const cloneChildren = fields.map((x, index) => {
+        return x && childrenTree(x, prefix, index);
+    });
+    return (react_1.default.createElement(material_1.Box, null,
+        react_1.default.createElement(material_1.Grid, { item: true, xs: 12 },
+            react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'space-between' },
+                react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 2 },
+                    react_1.default.createElement(material_1.Box, { sx: { marginTop: 0.6 } },
+                        react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E6F8EB', borderRadius: '100%', height: '35px', width: '35px' }, justifyContent: 'center', alignItems: 'center' },
+                            react_1.default.createElement(ContentPasteOutlined_1.default, { sx: { height: '18px', fill: '#01BA35' } }))),
+                    react_1.default.createElement(Typography_1.default, { variant: 'h6', fontWeight: 600, fontSize: 28, fontFamily: 'Inter', sx: {
+                            color: '#1E293B',
+                            paddingBottom: 4,
+                        } }, title)),
+                react_1.default.createElement(material_1.Box, { hidden: !optional },
+                    react_1.default.createElement(Switch_1.default, { name: switchName, defaultChecked: optional ? defaultChecked : true, overrideNo: props.overrideSwitchNo, overrideYes: props.overrideSwitchYes })))),
+        react_1.default.createElement(material_1.Stack, { spacing: 2 }, !optional ? (react_1.default.createElement(material_1.Grid, { container: true, spacing: 1 }, cloneChildren)) : !context.formWatch(switchName) ? (react_1.default.createElement(material_1.Stack, { justifyContent: 'center', alignItems: 'center' },
+            react_1.default.createElement(Typography_1.default, { fontFamily: 'Inter', fontSize: 22, paddingY: 8, textAlign: 'center' }, optionalMessage ? (optionalMessage) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("b", null, title),
+                " \u00E9 opcional. ",
+                react_1.default.createElement("br", null),
+                "Marque a op\u00E7\u00E3o acima caso haja necessidade."))))) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: 1 }, cloneChildren)))));
+}
+exports.StepperBlock = StepperBlock;
+exports.default = react_1.default.memo(StepperBlock);

package/components/form/switch/Switch.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const form_1 = require("../../../context/form");
+function Switch(_a) {
+    var { defaultChecked = false } = _a, props = __rest(_a, ["defaultChecked"]);
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    (0, react_1.useEffect)(() => {
+        context === null || context === void 0 ? void 0 : context.formSetValue(props.name, defaultChecked);
+    }, []);
+    const yesMessage = (0, react_1.useMemo)(() => props.overrideYes || 'Sim', [props.overrideYes]);
+    const noMessage = (0, react_1.useMemo)(() => props.overrideNo || 'Não', [props.overrideNo]);
+    return (react_1.default.createElement(material_1.Stack, { sx: { alignItems: 'center', justifyContent: 'center' } },
+        props.title && react_1.default.createElement(material_1.InputLabel, null, props.title),
+        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Switch, Object.assign({ defaultChecked: defaultChecked }, context === null || context === void 0 ? void 0 : context.formRegister(props.name))), label: react_1.default.createElement(material_1.Typography, { width: 25, sx: { userSelect: 'none', fontWeight: 600 } }, (context === null || context === void 0 ? void 0 : context.formWatch(props.name)) ? yesMessage : noMessage), sx: { paddingLeft: 1 } })));
+}
+exports.Switch = Switch;
+exports.default = react_1.default.memo(Switch);

package/components/form/switch/ToggleVisibility.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare function ToggleVisibility({ invert, hasCheckValue, ...props }: {
     switchId: string;
     unregisterNameList: string[];

package/components/form/switch/ToggleVisibility.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchWatch = exports.ToggleVisibility = void 0;
+const react_1 = __importStar(require("react"));
+const form_1 = require("../../../context/form");
+// Coloque esse componente dentro de um bloco que é retirado com o valor do input
+function ToggleVisibility(_a) {
+    var { invert = false, hasCheckValue = false } = _a, props = __rest(_a, ["invert", "hasCheckValue"]);
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (hasCheckValue ? invert : context.formWatch(props.switchId) === invert) {
+                props.unregisterNameList.forEach((x) => context.formUnregister(x));
+            }
+        };
+    }, [props.unregisterNameList]);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+}
+exports.ToggleVisibility = ToggleVisibility;
+function SwitchWatch(_a) {
+    var { invert = false, checkValue } = _a, props = __rest(_a, ["invert", "checkValue"]);
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    return (react_1.default.createElement(react_1.default.Fragment, null, (checkValue ? ((context === null || context === void 0 ? void 0 : context.formWatch(props.switchId)) === checkValue) !== invert : (context === null || context === void 0 ? void 0 : context.formWatch(props.switchId)) !== invert) && (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ToggleVisibility, { switchId: props.switchId, unregisterNameList: props.unregisterNameList, hasCheckValue: !!checkValue, invert: checkValue ? ((context === null || context === void 0 ? void 0 : context.formWatch(props.switchId)) === checkValue) !== invert : invert }),
+        props.children))));
+}
+exports.SwitchWatch = SwitchWatch;

package/components/form/table/FilterSection.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterValue } from './types';
 export declare function FilterMenu({ filters, baseFilters, filtrar, reset }: {
     reset: () => void;

package/components/form/table/FilterSection.js

@@ -0,0 +1,217 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterMenu = void 0;
+const icons_material_1 = require("@mui/icons-material");
+const Search_1 = __importDefault(require("@mui/icons-material/Search"));
+const material_1 = require("@mui/material");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const Modal_1 = require("../../modal/Modal");
+function FilterMenu({ filters, baseFilters, filtrar, reset }) {
+    const [data, setData] = (0, react_1.useState)(filters);
+    const [resetFields, setResetFields] = (0, react_1.useState)(false);
+    function addRule(filter) {
+        setData((dt) => {
+            return [...dt, filter];
+        });
+    }
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(material_1.Box, { width: {
+            xs: 'inherit',
+            md: 850,
+        } },
+        react_1.default.createElement(material_1.Menu, { open: open, onClose: handleClose, anchorEl: anchorEl }, baseFilters.map((x) => (react_1.default.createElement(material_1.MenuItem, { onClick: (e) => {
+                addRule(x);
+                setAnchorEl(null);
+            } }, x.label)))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'space-between' },
+            react_1.default.createElement(Typography_1.default, { fontWeight: 700, fontSize: 18 }, "Filtrar"),
+            react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Refresh, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    reset();
+                    Modal_1.MODAL.close();
+                } }, "Limpar")),
+        react_1.default.createElement(material_1.Box, { marginBottom: 1 },
+            react_1.default.createElement(material_1.Alert, { severity: 'warning' }, "Preencha apenas os campos que deseja filtrar.")),
+        react_1.default.createElement(material_1.Stack, null, resetFields ? (data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))) : (react_1.default.createElement(material_1.Box, null, data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', marginTop: 1 },
+            react_1.default.createElement(material_1.Button, { variant: 'contained', color: 'success', startIcon: react_1.default.createElement(Search_1.default, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    filtrar(data);
+                    Modal_1.MODAL.close();
+                } }, "Filtrar"))));
+}
+exports.FilterMenu = FilterMenu;
+function FilterRow({ filterValue, setDt, removeDt, idx, setReset, }) {
+    const [currentOperator, setCurrentOperator] = (0, react_1.useState)(filterValue.operator);
+    const [data, setData] = (0, react_1.useState)(filterValue);
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    (0, react_1.useEffect)(() => {
+        setDt(data);
+    }, [data]);
+    return (react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'end', spacing: 1, width: '100%', bgcolor: idx % 2 === 0 ? '#ededed' : 'inherit', padding: 0.5, borderRadius: 2 },
+        !isSmall && (react_1.default.createElement(Typography_1.default, { width: '100%', alignContent: 'center', fontWeight: 600, color: '#323232' }, filterValue.label)),
+        react_1.default.createElement(material_1.FormControl, { sx: {
+                width: '100%',
+            } },
+            isSmall && react_1.default.createElement(Typography_1.default, null, filterValue.label),
+            react_1.default.createElement(material_1.Select, { onChange: (e) => {
+                    const value = e.target.value;
+                    setData((obj) => (Object.assign(Object.assign({}, obj), { operator: value, value: '' })));
+                    setCurrentOperator(value);
+                }, defaultValue: currentOperator, size: 'small', sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }, filterValue.operators.map((x) => (react_1.default.createElement(material_1.MenuItem, { value: x }, x))))),
+        react_1.default.createElement(FilterField, { filterValue: filterValue, operator: data.operator, onChange: (value, type = 'value') => {
+                setData((obj) => (Object.assign(Object.assign({}, obj), { [type]: value })));
+            } })));
+}
+function FilterField({ filterValue, operator, onChange }) {
+    switch (filterValue.type) {
+        case 'number':
+            return (react_1.default.createElement(TextField_1.default, { type: 'number', size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'string':
+            if (filterValue.useList) {
+                switch (operator) {
+                    case 'tem um dos':
+                        return (react_1.default.createElement(material_1.Autocomplete, { multiple: true, id: 'tags-standard', onChange: (e, value) => {
+                                if (value.length <= 0) {
+                                    onChange('');
+                                    return;
+                                }
+                                onChange(value);
+                            }, options: filterValue.useList, defaultValue: Array.isArray(filterValue.value) ? filterValue.value : [], renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { variant: 'standard', placeholder: 'Escolha os valores', fullWidth: true })), fullWidth: true }));
+                    case 'contem':
+                    case 'igual':
+                        return (react_1.default.createElement(material_1.Box, { width: '100%' },
+                            react_1.default.createElement(material_1.Autocomplete, { options: filterValue.useList, onChange: (e, value) => {
+                                    onChange(value);
+                                }, defaultValue: typeof filterValue.value === 'object' ? filterValue.value : undefined, isOptionEqualToValue: (option, value) => option.label === value.label, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', placeholder: 'Escolha um valor', fullWidth: true, sx: {
+                                        bgcolor: 'white',
+                                    } }))), fullWidth: true })));
+                }
+            }
+            return (react_1.default.createElement(TextField_1.default, { size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'date':
+        case 'dates':
+            switch (operator) {
+                case 'data exata':
+                case 'data fim':
+                case 'data inicio':
+                case 'tem a data':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+                case 'entre':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) }),
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '', 'value2');
+                            }, defaultValue: filterValue.value2 ? (0, dayjs_1.default)(filterValue.value2, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+            }
+            break;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
+}