master
mahdi andalib 3 years ago
parent 6083d02584
commit 9076cbd0f7
  1. 29
      src/components/ReactTable3/EditButtons.js
  2. 35
      src/components/ReactTable3/GlobalFilter.js

@ -8,33 +8,24 @@ import plus from './plus.svg';
import { GlobalFilter } from './GlobalFilter'; import { GlobalFilter } from './GlobalFilter';
export function EditButtons({buttons }) { export function EditButtons({buttons }) {
const [openModal, setOpenModal] = useState(false); const [selectedButton, setSelectedButton] = useState(null);
return ( return (
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
{/* serach box */}
{buttons.map((button,index) =>( {buttons.map((button,index) =>(
<div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`} <div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`}
style={{backgroundColor: button.backgroundColor}} style={{backgroundColor: button.backgroundColor}}
onClick={() => setOpenModal(true)} // onClick={() => setOpenModal(true)}
onClick={() => setSelectedButton(selectedButton === button ? null : button)}
> >
<p className={`text-sm ${button.textColor}`}>{button.title}</p> <p className={`text-sm ${button.textColor}`}>{button.title}</p>
<img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} /> <img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} />
</div> </div>
))} ))}
{/* <GlobalFilter filterr={filter} setFilterr={setFilter}/> */}
<div <div
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}
`}
onClick={() => setOpenModal(false)}
> >
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */} {selectedButton?.components}
<div className="absolute "
style={{top: "20%"}}
onClick={(e) => e.stopPropagation()}
> <GlobalFilter />
</div>
</div> </div>
</div> </div>
@ -50,6 +41,9 @@ EditButtons.defaultProps = {
title: null, title: null,
textColor: null, textColor: null,
backgroundColor: "#F3F8FF", backgroundColor: "#F3F8FF",
// components: " tannaz1",
components: <GlobalFilter />,
}, },
{ {
logo: filter, logo: filter,
@ -58,6 +52,7 @@ EditButtons.defaultProps = {
title: null, title: null,
textColor: null, textColor: null,
backgroundColor: "#F3F8FF", backgroundColor: "#F3F8FF",
components: " tannaz1",
}, },
{ {
logo: settings, logo: settings,
@ -66,6 +61,8 @@ EditButtons.defaultProps = {
title: null, title: null,
textColor: null, textColor: null,
backgroundColor: "#F3F8FF", backgroundColor: "#F3F8FF",
components: "mahdi ",
}, },
{ {
logo: arrow, logo: arrow,
@ -74,6 +71,8 @@ EditButtons.defaultProps = {
title: 'عملیات', title: 'عملیات',
textColor: "text-blue-400", textColor: "text-blue-400",
backgroundColor: "#F3F8FF", backgroundColor: "#F3F8FF",
components: "tannaz",
}, },
{ {
logo: plus, logo: plus,
@ -82,6 +81,8 @@ EditButtons.defaultProps = {
title: 'ثبت جدید', title: 'ثبت جدید',
textColor: "text-white", textColor: "text-white",
backgroundColor: "#65A9FF", backgroundColor: "#65A9FF",
components: "mahdi",
}, },
] ]
} }

@ -4,6 +4,7 @@ import { useAsyncDebounce } from 'react-table';
import search from "./search-normal.svg"; import search from "./search-normal.svg";
export const GlobalFilter = ({ filter, setFilter }) => { export const GlobalFilter = ({ filter, setFilter }) => {
const [openModal, setOpenModal] = useState(true);
const [value, setValue] = useState(filter); const [value, setValue] = useState(filter);
@ -12,11 +13,15 @@ export const GlobalFilter = ({ filter, setFilter }) => {
}, 1000) }, 1000)
return ( return (
<div className="flex flex-row-reverse items-center relative w-full"> <div onClick={() => setOpenModal(false)}
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}>
<div className="absolute " style={{top: "10%"}} onClick={(e) => e.stopPropagation()}>
<div className="flex flex-row-reverse items-center relative w-96">
<img <img
src={search} src={search}
alt="" alt=""
className="w-1 h-12 absolute left-3" className="w-6 h-6 absolute left-3"
/> />
<input <input
value={value || ''} value={value || ''}
@ -29,6 +34,32 @@ export const GlobalFilter = ({ filter, setFilter }) => {
className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none" className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none"
/> />
</div> </div>
</div>
</div>
// <div
// className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
// ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
// onClick={() => setOpenModal(false)}>
// <div className="absolute " style={{top: "20%"}} onClick={(e) => e.stopPropagation()}>
// <div className="flex flex-row-reverse items-center relative w-96">
// <img
// src={search}
// alt=""
// className="w-6 h-6 absolute left-3"
// />
// <input
// value={value || ''}
// onChange={(e) => {
// setValue(e.target.value)
// onChange(e.target.value)
// }}
// type="text"
// placeholder="نام کالا را جستجو کنید..."
// className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none"
// />
// </div>
// </div>
// </div>
); );
}; };

Loading…
Cancel
Save