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

Loading…
Cancel
Save