added cancle icon

master
mahdi 3 years ago
parent 4ad4a5bbe9
commit fa096a464c
  1. 18
      src/components/ReactTable4/GlobalFilter.js

@ -5,7 +5,7 @@ import search from "./search-normal.svg";
import settings from "./settings.svg";
export const GlobalFilter = ({ filter, setFilter }) => {
// const [activeSearchBox, setActiveSearchBox] = useState(null);
const [activeSearchBox, setActiveSearchBox] = useState(false);
const [value, setValue] = useState(filter);
@ -14,13 +14,17 @@ export const GlobalFilter = ({ filter, setFilter }) => {
}, 400);
return (
<div
className="flex flex-row-reverse items-center relative ml-2"
// onClick={() => setActiveSearchBox(!activeSearchBox)}
>
<div className="flex flex-row-reverse items-center relative ml-2">
{activeSearchBox && (
<img
src={settings}
alt=""
className="w-4 h-4 absolute left-7 cursor-pointer"
onClick={() => setActiveSearchBox(false)}
/>
)}
<img
src={search}
// src={activeSearchBox ? { search } : { settings }}
alt=""
className="w-4 h-4 absolute left-2 cursor-pointer"
/>
@ -30,6 +34,8 @@ export const GlobalFilter = ({ filter, setFilter }) => {
setValue(e.target.value);
onChange(e.target.value);
}}
onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
type="text"
className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}

Loading…
Cancel
Save