diff --git a/src/components/ReactTable5/BasicTable.js b/src/components/ReactTable5/BasicTable.js index 0010d41..b77d181 100644 --- a/src/components/ReactTable5/BasicTable.js +++ b/src/components/ReactTable5/BasicTable.js @@ -10,6 +10,7 @@ import { COLUMNS } from "./COLUMNS"; import grid from "./grid.svg"; import list from "./list.svg"; +import graySearchIcon from "./gray-search-icon.svg"; import RenderRowSubComponent from "./RenderRowSubComponent"; import EditRow from "./EditRow"; @@ -188,7 +189,17 @@ const BasicTable = ({ addTab, activeTab }) => { />
- +
{/* table LIST */} diff --git a/src/components/ReactTable5/Checkbox.js b/src/components/ReactTable5/Checkbox.js index 75f2a25..65daa82 100644 --- a/src/components/ReactTable5/Checkbox.js +++ b/src/components/ReactTable5/Checkbox.js @@ -7,7 +7,6 @@ export function Checkbox({ id, toggelChekedItems, refChekedItems }) { checked={checked} onClick={() => toggelChekedItems(id)} type="checkbox" - // className={`cursor-pointer ${selectedFilterRow ? "p-72" : "p-5"}`} className={`cursor-pointer`} /> ); diff --git a/src/components/ReactTable5/GlobalFilter.js b/src/components/ReactTable5/GlobalFilter.js index a6309e2..9b9dff8 100644 --- a/src/components/ReactTable5/GlobalFilter.js +++ b/src/components/ReactTable5/GlobalFilter.js @@ -4,7 +4,17 @@ import { useAsyncDebounce } from "react-table"; import search from "./search-normal.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 [value, setValue] = useState(filter); @@ -24,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => { /> )} @@ -34,70 +44,25 @@ export const GlobalFilter = ({ filter, setFilter }) => { onFocus={() => setActiveSearchBox(true)} // onBlur={() => setActiveSearchBox(false)} 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`} - style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} + className={`w-full text-xs border focus:outline-none focus:ring focus:ring-opacity-20 + ${bgColor} + ${borderColor} + ${textColor} + ${borderRadius} + ${focusBorder} + ${focusRing} + `} /> ); }; -{ - /* { - 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" }} - /> */ -} - -// ? اگر میخواستم کاری کنم که وقتی رویه سرچ باکس میزدم ایکن ضربدر هاید میشد و ایکن کنسل میومد باید از این کد استفاده میکردم - -// 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 ( -//
-// {activeSearchBox === true ? ( -// -// ) : ( -// -// )} -// 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)}{" "} -//
-// ); -// }; +GlobalFilter.defaultProps = { + searchIcon: search, + bgColor: "bg-[#F9FBFF]", + borderColor: "border-[#B5D6FF]", + textColor: "text-blue-400", + borderRadius: "rounded", + focusBorder: "focus:border-blue-200", + focusRing: "focus:ring-blue-200", +}; diff --git a/src/components/ReactTable5/gray-search-icon.svg b/src/components/ReactTable5/gray-search-icon.svg new file mode 100644 index 0000000..c239010 --- /dev/null +++ b/src/components/ReactTable5/gray-search-icon.svg @@ -0,0 +1,7 @@ + + + + + + +