master
mahdi andalib 3 years ago
parent f6c6b9c3c8
commit 7dd33d0c36
  1. 13
      src/components/ReactTable5/BasicTable.js
  2. 1
      src/components/ReactTable5/Checkbox.js
  3. 93
      src/components/ReactTable5/GlobalFilter.js
  4. 7
      src/components/ReactTable5/gray-search-icon.svg

@ -10,6 +10,7 @@ import { COLUMNS } from "./COLUMNS";
import grid from "./grid.svg"; import grid from "./grid.svg";
import list from "./list.svg"; import list from "./list.svg";
import graySearchIcon from "./gray-search-icon.svg";
import RenderRowSubComponent from "./RenderRowSubComponent"; import RenderRowSubComponent from "./RenderRowSubComponent";
import EditRow from "./EditRow"; import EditRow from "./EditRow";
@ -188,7 +189,17 @@ const BasicTable = ({ addTab, activeTab }) => {
/> />
</div> </div>
<div className="w-4/12 "> <div className="w-4/12 ">
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> <GlobalFilter
filter={globalFilter}
setFilter={setGlobalFilter}
searchIcon={graySearchIcon}
bgColor={"bg-transparent"}
borderColor={"border-[#EEEEEE]"}
textColor={"text-[#DBDBDB]"}
borderRadius={"rounded"}
focusBorder={"focus:border-gray-200"}
focusRing={"focus:ring-gray-200"}
/>
</div> </div>
</div> </div>
{/* table LIST */} {/* table LIST */}

@ -7,7 +7,6 @@ export function Checkbox({ id, toggelChekedItems, refChekedItems }) {
checked={checked} checked={checked}
onClick={() => toggelChekedItems(id)} onClick={() => toggelChekedItems(id)}
type="checkbox" type="checkbox"
// className={`cursor-pointer ${selectedFilterRow ? "p-72" : "p-5"}`}
className={`cursor-pointer`} className={`cursor-pointer`}
/> />
); );

@ -4,7 +4,17 @@ import { useAsyncDebounce } from "react-table";
import search from "./search-normal.svg"; import search from "./search-normal.svg";
import cancleIcon from "./zarbedar-icon.svg"; import cancleIcon from "./zarbedar-icon.svg";
export const GlobalFilter = ({ filter, setFilter }) => { export const GlobalFilter = ({
filter,
setFilter,
searchIcon,
bgColor,
borderColor,
textColor,
borderRadius,
focusBorder,
focusRing,
}) => {
const [activeSearchBox, setActiveSearchBox] = useState(false); const [activeSearchBox, setActiveSearchBox] = useState(false);
const [value, setValue] = useState(filter); const [value, setValue] = useState(filter);
@ -24,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
/> />
)} )}
<img <img
src={search} src={searchIcon}
alt="" alt=""
className="w-4 h-4 absolute left-2 cursor-pointer" className="w-4 h-4 absolute left-2 cursor-pointer"
/> />
@ -34,70 +44,25 @@ export const GlobalFilter = ({ filter, setFilter }) => {
onFocus={() => setActiveSearchBox(true)} onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)} // onBlur={() => setActiveSearchBox(false)}
type="text" type="text"
className={`w-full text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} className={`w-full text-xs border focus:outline-none focus:ring focus:ring-opacity-20
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} ${bgColor}
${borderColor}
${textColor}
${borderRadius}
${focusBorder}
${focusRing}
`}
/> />
</div> </div>
); );
}; };
{ GlobalFilter.defaultProps = {
/* <input searchIcon: search,
value={value || ""} bgColor: "bg-[#F9FBFF]",
onChange={(e) => { borderColor: "border-[#B5D6FF]",
setValue(e.target.value); textColor: "text-blue-400",
onChange(e.target.value); borderRadius: "rounded",
}} focusBorder: "focus:border-blue-200",
onFocus={() => setActiveSearchBox(true)} focusRing: "focus:ring-blue-200",
// onBlur={() => setActiveSearchBox(false)} };
type="text"
className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/> */
}
// ? اگر میخواستم کاری کنم که وقتی رویه سرچ باکس میزدم ایکن ضربدر هاید میشد و ایکن کنسل میومد باید از این کد استفاده میکردم
// import React, { useState } from "react";
// import { useAsyncDebounce } from "react-table";
// import search from "./search-normal.svg";
// import cancleIcon from "./zarbedar-icon.svg";
// export const GlobalFilter = ({ filter, setFilter }) => {
// const [activeSearchBox, setActiveSearchBox] = useState(false);
// const [value, setValue] = useState(filter);
// const onChange = useAsyncDebounce((value) => {
// setFilter(value || undefined);
// }, 400);
// return (
// <div className="flex flex-row-reverse items-center relative ml-2 ">
// {activeSearchBox === true ? (
// <img
// src={cancleIcon}
// alt=""
// className="w-3 h-3 absolute left-2 cursor-pointer"
// />
// ) : (
// <img
// src={search}
// alt=""
// className="w-4 h-4 absolute left-2 cursor-pointer"
// />
// )}
// <input
// value={filter || ""}
// onChange={(e) => setFilter(e.target.value)}
// onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
// type="text"
// className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
// style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
// />
// {console.log(activeSearchBox)}{" "}
// </div>
// );
// };

@ -0,0 +1,7 @@
<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="26.075" height="26.075" viewBox="0 0 26.075 26.075">
<g id="search-normal">
<path id="Vector" d="M20.642,10.321A10.321,10.321,0,1,1,10.321,0,10.321,10.321,0,0,1,20.642,10.321Z" transform="translate(2.173 2.173)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M2.173,2.173,0,0" transform="translate(21.729 21.729)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H26.075V26.075H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 742 B

Loading…
Cancel
Save