Bringing the menu options opened on search

This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-01 17:47:27 -03:00
commit da5b15fa68
3 changed files with 7 additions and 2 deletions

View file

@ -5,6 +5,7 @@ import { DisclosureComponentType } from "../../../../types/components";
export default function DisclosureComponent({
button: { title, Icon, buttons = [] },
children,
openDisc,
}: DisclosureComponentType) {
return (
<Disclosure as="div" key={title}>
@ -27,14 +28,14 @@ export default function DisclosureComponent({
<div>
<ChevronRightIcon
className={`${
open ? "rotate-90 transform" : ""
open || openDisc ? "rotate-90 transform" : ""
} h-4 w-4 text-gray-800 dark:text-white`}
/>
</div>
</div>
</Disclosure.Button>
</div>
<Disclosure.Panel as="div" className="-mt-px">
<Disclosure.Panel as="div" className="-mt-px" static={openDisc}>
{children}
</Disclosure.Panel>
</>

View file

@ -15,6 +15,7 @@ import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
export default function ExtraSidebar() {
const { data } = useContext(typesContext);
const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState("");
function onDragStart(
event: React.DragEvent<any>,
@ -58,6 +59,7 @@ export default function ExtraSidebar() {
className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
onChange={(e) => {
handleSearchInput(e.target.value);
setSearch(e.target.value);
}}
/>
<div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
@ -71,6 +73,7 @@ export default function ExtraSidebar() {
.map((d: keyof APIObjectType, i) =>
Object.keys(dataFilter[d]).length > 0 ? (
<DisclosureComponent
openDisc={search.length == 0 ? false : true}
key={i}
button={{
title: nodeNames[d] ?? nodeNames.unknown,

View file

@ -56,6 +56,7 @@ export type FileComponentType = {
export type DisclosureComponentType = {
children: ReactNode;
openDisc: boolean;
button: {
title: string;
Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;