76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
|
import { useState, useEffect } from "react";
|
||
|
|
import { Tab } from "@headlessui/react";
|
||
|
|
|
||
|
|
function classNames(...classes) {
|
||
|
|
return classes.filter(Boolean).join(" ");
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function VTab(props) {
|
||
|
|
let [categories, setCategories] = useState([]);
|
||
|
|
let [children, setChildren] = useState([]);
|
||
|
|
let [selectedOne, setSelectedOne] = useState(0);
|
||
|
|
useEffect(() => {
|
||
|
|
if (props.ops.length > 0) {
|
||
|
|
setCategories(props.ops);
|
||
|
|
setSelectedOne(0)
|
||
|
|
}
|
||
|
|
}, [props.ops]);
|
||
|
|
const getSelectedIndex = () => {
|
||
|
|
return selectedOne;
|
||
|
|
};
|
||
|
|
useEffect(() => {
|
||
|
|
setChildren(props.children);
|
||
|
|
}, [props.children]);
|
||
|
|
useEffect(() => {
|
||
|
|
// if(props.selectedtypecode!=="1001")
|
||
|
|
// {
|
||
|
|
// setCategories(props.ops.filter(x=>x.code==="-2"));
|
||
|
|
// }
|
||
|
|
// else{
|
||
|
|
// setCategories(props.ops);
|
||
|
|
// }
|
||
|
|
setSelectedOne(0)
|
||
|
|
}, [props.selectedtypecode]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classNames("w-full sm:px-0", props.className)}>
|
||
|
|
<Tab.Group
|
||
|
|
onChange={(idx) => {
|
||
|
|
props.tabchanged(categories[idx]);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Tab.List className="flex space-x-5 z-10 " >
|
||
|
|
{categories
|
||
|
|
.sort((a, b) => (a.sort > b.sort ? 1 : -1))
|
||
|
|
.map((category,idx) => (
|
||
|
|
<Tab
|
||
|
|
key={idx}
|
||
|
|
className={({ selected }) =>
|
||
|
|
classNames(
|
||
|
|
" flex-none mx-3 p-4 py-2.5 text-sm font-medium leading-5 text-[#0185FF]",
|
||
|
|
" focus:outline-none focus:ring-none",
|
||
|
|
selected
|
||
|
|
? "bg-white border-b-2 border-[#0185FF]"
|
||
|
|
: " hover:text-[#0185FF]/[0.6]"
|
||
|
|
)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{/* {category.sort} */}
|
||
|
|
{category.name}
|
||
|
|
</Tab>
|
||
|
|
))}
|
||
|
|
</Tab.List>
|
||
|
|
<Tab.Panels className="-mt-0.5 h-full overflow-y-auto border-t-2 ">
|
||
|
|
{categories
|
||
|
|
.sort((a, b) => (a.sort > b.sort ? 1 : -1))
|
||
|
|
.map((x) => (
|
||
|
|
<Tab.Panel className={classNames("bg-white p-3")}>
|
||
|
|
{children}
|
||
|
|
</Tab.Panel>
|
||
|
|
))}
|
||
|
|
</Tab.Panels>
|
||
|
|
</Tab.Group>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|