master
mahdi andalib 3 years ago
parent 5b96ce80c0
commit dce41aeeb6
  1. 4
      src/components/ReactTable4/BasicTable.js
  2. 6
      src/components/ReactTable4/ColumnSearch.js
  3. 6
      src/components/ReactTable4/GlobalFilter.js
  4. 2
      src/components/ReactTable4/SliderColumnFilter.js
  5. 27
      src/components/ReactTable4/index.js
  6. 12
      src/components/ReactTable4/zarbedar-icon.svg

@ -133,12 +133,12 @@ const BasicTable = ({ settingsIcon }) => {
{/* <button onClick={changeOrder}> Change Column Order </button> */} {/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">
{/* right box */} {/* right box */}
<div className="w-8/12"> <div className="" style={{ width: "70%" }}>
<Tabbar /> <Tabbar />
</div> </div>
{/* left box */} {/* left box */}
<div <div
className="rounded-md p-2 flex flex-row items-center" className="rounded-md p-2 flex flex-row items-center justify-end"
style={{ backgroundColor: "#F1F6FF" }} style={{ backgroundColor: "#F1F6FF" }}
> >
{/* search box */} {/* search box */}

@ -1,7 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import search from "./search-normal.svg"; import search from "./search-normal.svg";
import settings from "./settings.svg"; import cancleIcon from "./zarbedar-icon.svg";
export const ColumnSearch = ({ column }) => { export const ColumnSearch = ({ column }) => {
const { filterValue, setFilter } = column; const { filterValue, setFilter } = column;
@ -12,9 +12,9 @@ export const ColumnSearch = ({ column }) => {
<div className="flex flex-row items-center relative"> <div className="flex flex-row items-center relative">
{activeSearchBox && ( {activeSearchBox && (
<img <img
src={settings} src={cancleIcon}
alt="" alt=""
className="w-4 h-4 absolute left-16 cursor-pointer" className="w-2 h-2 absolute left-16 cursor-pointer"
onClick={() => setActiveSearchBox(false)} onClick={() => setActiveSearchBox(false)}
/> />
)} )}

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { useAsyncDebounce } from "react-table"; import { useAsyncDebounce } from "react-table";
import search from "./search-normal.svg"; import search from "./search-normal.svg";
import settings from "./settings.svg"; import cancleIcon from "./zarbedar-icon.svg";
export const GlobalFilter = ({ filter, setFilter }) => { export const GlobalFilter = ({ filter, setFilter }) => {
const [activeSearchBox, setActiveSearchBox] = useState(false); const [activeSearchBox, setActiveSearchBox] = useState(false);
@ -17,9 +17,9 @@ export const GlobalFilter = ({ filter, setFilter }) => {
<div className="flex flex-row-reverse items-center relative ml-2 "> <div className="flex flex-row-reverse items-center relative ml-2 ">
{activeSearchBox && ( {activeSearchBox && (
<img <img
src={settings} src={cancleIcon}
alt="" alt=""
className="w-4 h-4 absolute left-7 cursor-pointer" className="w-3 h-3 absolute left-7 cursor-pointer"
onClick={() => setActiveSearchBox(false)} onClick={() => setActiveSearchBox(false)}
/> />
)} )}

@ -27,7 +27,7 @@ export const SliderColumnFilter = ({
setFilter(parseInt(e.target.value, 10)); setFilter(parseInt(e.target.value, 10));
}} }}
/> />
<div className="p-1 rounded bg-blue-300"> <div className="p-1 rounded bg-blue-300 bg-opacity-20">
<img <img
src={cancleIcon} src={cancleIcon}
onClick={() => setFilter(undefined)} onClick={() => setFilter(undefined)}

@ -2,6 +2,8 @@ import React, { useRef } from "react";
import BasicTable from "./BasicTable"; import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll"; // import useDraggableScroll from "use-draggable-scroll";
import cancleIcon from "./zarbedar-icon.svg";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
return ( return (
<div className="my-10 w-11/12 mx-auto"> <div className="my-10 w-11/12 mx-auto">
@ -90,7 +92,7 @@ export function Tabbar({}) {
]; ];
return ( return (
<ul <ul
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch" className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
onMouseDown={(e) => { onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar"); const slider = window.document.querySelector(".tabbar");
window.isDown = true; window.isDown = true;
@ -113,19 +115,16 @@ export function Tabbar({}) {
}} }}
> >
{tabs.map((el) => ( {tabs.map((el) => (
<li className="mr-2 "> <li
<span onClick={(e) => {
onClick={(e) => { if (window.isDown) return e.preventDefault();
if (window.isDown) return e.preventDefault(); }}
///do here aria-current="page"
}} className="flex flex-row items-center text-sm text-center active px-2 py-1 rounded-sm mx-1"
aria-current="page" style={{ backgroundColor: "#F1F6FF" }}
className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500" >
> <span className="">{el}</span>
<span className="p-2"> <img src={cancleIcon} className="w-2 h-2 mx-2" />
{el} <span className="p-2">x</span>
</span>
</span>
</li> </li>
))} ))}
</ul> </ul>

@ -1,10 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.118" height="18.118" viewBox="0 0 18.118 18.118"> <svg xmlns="http://www.w3.org/2000/svg" width="5.397" height="5.397" viewBox="0 0 5.397 5.397">
<g id="Group_1" data-name="Group 1" transform="translate(-244.586 -251.497)"> <g id="Group_1887" data-name="Group 1887" transform="translate(0.707 0.707)">
<g id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close"> <path id="Vector" d="M3.943,3.943,0,0" transform="translate(0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<g id="clipboard-close"> <path id="Vector-2" data-name="Vector" d="M3.943,0,0,3.943" transform="translate(0 0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector" d="M15.136,15.136,0,0" transform="translate(246.153 252.911)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M15.136,0,0,15.136" transform="translate(246 253.064)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 713 B

After

Width:  |  Height:  |  Size: 545 B

Loading…
Cancel
Save