From 251d1db1ed4a71fa156b18c271433479afcc653d Mon Sep 17 00:00:00 2001
From: Yasiu1376 <yasaman1376529@gmail.com>
Date: Tue, 20 Feb 2024 15:37:56 +0330
Subject: [PATCH] FiletrCoumn

---
 package.json                          |  1 +
 src/components/TextFieldWithFnBox.jsx | 45 +++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/components/TextFieldWithFnBox.jsx

diff --git a/package.json b/package.json
index 0eab6d8..a74c3db 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
     "@mui/material-nextjs": "^5.15.6",
+    "formik": "^2.4.5",
     "material-react-table": "^2.11.2",
     "next": "14.1.0",
     "react": "^18",
diff --git a/src/components/TextFieldWithFnBox.jsx b/src/components/TextFieldWithFnBox.jsx
new file mode 100644
index 0000000..c8eff76
--- /dev/null
+++ b/src/components/TextFieldWithFnBox.jsx
@@ -0,0 +1,45 @@
+import {IconButton, Paper, TextField} from '@mui/material';
+import AlignHorizontalCenterIcon from '@mui/icons-material/AlignHorizontalCenter';
+import {useState} from "react";
+// import FilterBox from "@/components/FiterBox";
+
+const TextFieldWithFnBox = ({formik, fieldName , label ,  defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [open, setOpen] = useState(false);
+
+    const handleClick = (event) => {
+        setOpen((prevOpen) => !prevOpen);
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <TextField
+                name={fieldName}
+                label={label}
+                value={formik.values[fieldName]}
+                onChange={formik.handleChange}
+                fullWidth
+                margin="normal"
+                InputProps={{
+                    endAdornment: (
+                        <IconButton onClick={handleClick}>
+                            <AlignHorizontalCenterIcon />
+                        </IconButton>
+                    )
+                }}
+                sx={{
+                    position: 'relative'
+                }}
+            />
+            {/*<FilterBox  anchorEl={anchorEl} open={open}  handleClose={handleClose} columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter}/>*/}
+        </>
+    );
+};
+
+export default TextFieldWithFnBox;