parent
00fe98b11d
commit
a7afd97618
6 changed files with 142 additions and 99 deletions
@ -1,36 +1,16 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import search from "./search-normal.svg"; |
||||
import cancleIcon from "./zarbedar-icon.svg"; |
||||
|
||||
export const ColumnSearch = ({ column }) => { |
||||
const { filterValue, setFilter } = column; |
||||
const [activeSearchBox, setActiveSearchBox] = useState(false); |
||||
|
||||
return ( |
||||
<div className="flex flex-row items-center"> |
||||
<div className="flex flex-row items-center relative"> |
||||
{activeSearchBox && ( |
||||
<img |
||||
src={cancleIcon} |
||||
alt="" |
||||
className="w-2 h-2 absolute left-16 cursor-pointer" |
||||
onClick={() => setActiveSearchBox(false)} |
||||
/> |
||||
)} |
||||
<img |
||||
src={search} |
||||
alt="" |
||||
className="w-4 h-4 absolute left-11 cursor-pointer" |
||||
/> |
||||
<input |
||||
value={filterValue || ""} |
||||
onChange={(e) => setFilter(e.target.value)} |
||||
onFocus={() => setActiveSearchBox(true)} |
||||
className={`w-9/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} |
||||
className={`text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} |
||||
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
@ -0,0 +1,66 @@ |
||||
import React from "react"; |
||||
import "./index.scss"; |
||||
|
||||
import cancleIcon from "./zarbedar-icon.svg"; |
||||
|
||||
const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => { |
||||
return ( |
||||
<ul |
||||
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch" |
||||
onMouseDown={(e) => { |
||||
const slider = window.document.querySelector(".tabbar"); |
||||
window.isDown = true; |
||||
window.startX = e.pageX - slider.offsetLeft; |
||||
window.scrollLeft = slider.scrollLeft; |
||||
}} |
||||
onMouseLeave={(e) => { |
||||
window.isDown = false; |
||||
}} |
||||
onMouseUp={(e) => { |
||||
window.isDown = false; |
||||
}} |
||||
onMouseMove={(e) => { |
||||
const slider = window.document.querySelector(".tabbar"); |
||||
if (!window.isDown) return; |
||||
e.preventDefault(); |
||||
const x = e.pageX - slider.offsetLeft; |
||||
const walk = (x - window.startX) * 1; |
||||
slider.scrollLeft = window.scrollLeft - walk; |
||||
}} |
||||
> |
||||
{tabs.map((el, index) => ( |
||||
<li |
||||
key={index} |
||||
onClick={(e) => { |
||||
if (window.isDown) return e.preventDefault(); |
||||
}} |
||||
aria-current="page" |
||||
className="flex flex-row items-center text-sm text-center active rounded-sm px-4" |
||||
style={{ |
||||
backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", |
||||
color: activeTab === el.id ? "#fff" : "#000", |
||||
}} |
||||
> |
||||
<div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}> |
||||
{el.name} |
||||
</div> |
||||
{el.id ? ( |
||||
<img |
||||
src={cancleIcon} |
||||
className="w-2 mr-3" |
||||
alt="" |
||||
onClick={(e) => { |
||||
e.preventDefault(); |
||||
delTab(el.id); |
||||
}} |
||||
/> |
||||
) : null} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
); |
||||
}; |
||||
|
||||
window.isDown = false; |
||||
|
||||
export default Tabbar; |
||||
Loading…
Reference in new issue