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

@ -8,34 +8,25 @@ import plus from './plus.svg';
import { GlobalFilter } from './GlobalFilter';
export function EditButtons({buttons }) {
const [openModal, setOpenModal] = useState(false);
const [selectedButton, setSelectedButton] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
{/* serach box */}
{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`}
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>
<img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} />
</div>
))}
{/* <GlobalFilter filterr={filter} setFilterr={setFilter}/> */}
<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} /> */}
<div className="absolute "
style={{top: "20%"}}
onClick={(e) => e.stopPropagation()}
> <GlobalFilter />
</div>
<div
>
{selectedButton?.components}
</div>
</div>
);
@ -50,6 +41,9 @@ EditButtons.defaultProps = {
title: null,
textColor: null,
backgroundColor: "#F3F8FF",
// components: " tannaz1",
components: <GlobalFilter />,
},
{
logo: filter,
@ -58,6 +52,7 @@ EditButtons.defaultProps = {
title: null,
textColor: null,
backgroundColor: "#F3F8FF",
components: " tannaz1",
},
{
logo: settings,
@ -66,6 +61,8 @@ EditButtons.defaultProps = {
title: null,
textColor: null,
backgroundColor: "#F3F8FF",
components: "mahdi ",
},
{
logo: arrow,
@ -74,6 +71,8 @@ EditButtons.defaultProps = {
title: 'عملیات',
textColor: "text-blue-400",
backgroundColor: "#F3F8FF",
components: "tannaz",
},
{
logo: plus,
@ -82,6 +81,8 @@ EditButtons.defaultProps = {
title: 'ثبت جدید',
textColor: "text-white",
backgroundColor: "#65A9FF",
components: "mahdi",
},
]
}

@ -4,6 +4,7 @@ import { useAsyncDebounce } from 'react-table';
import search from "./search-normal.svg";
export const GlobalFilter = ({ filter, setFilter }) => {
const [openModal, setOpenModal] = useState(true);
const [value, setValue] = useState(filter);
@ -12,23 +13,53 @@ export const GlobalFilter = ({ filter, setFilter }) => {
}, 1000)
return (
<div className="flex flex-row-reverse items-center relative w-full">
<img
src={search}
alt=""
className="w-1 h-12 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 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
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>
// <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