Default select implementation in progress

Author: onesine

src/App.js

@@ -11,16 +11,16 @@ const App = () => {
  <span className="ml-2">{children}</span>
  );
 
- const Header = ({children}) => (
- <AccordionHeader className="w-full flex items-center text-gray-600 border-b p-4">
+ const Header = ({children, onClick = null}) => (
+ <AccordionHeader className="w-full flex items-center text-gray-600 border-b p-4" href={"/toto"} as={"a"} onClick={onClick}>
  {children}
  </AccordionHeader>
  );
 
  switch (item.type) {
  case "group":
  return (
- <AccordionItem key={index}>
+ <AccordionItem key={index} isActive={"isActive" in item ? item.isActive : false}>
  <Header>
  {({open}) => (
  <>

src/constants/index.js

@@ -2,10 +2,12 @@ export const menu = [
  {
  type: "group",
  title: "Group 1",
+ isActive: true,
  submenu: [
  {
  type: "group",
  title: "Sub Group 1",
+ isActive: true,
  submenu: [
  {
  type: "image",

src/packages/accordion/AccordionBody.jsx

@@ -1,8 +1,8 @@
-import {useContext, useMemo} from "react";
+import {useContext, useLayoutEffect, useMemo} from "react";
 import {AccordionItemContext} from "./AccordionItemProvider";
 
 const AccordionBody = ({children, as}) => {
- const {hash, transition} = useContext(AccordionItemContext);
+ const {hash, transition, show} = useContext(AccordionItemContext);
 
  const TagName = useMemo(() => {
  if(["div", "ul"].includes(as)) {
@@ -32,7 +32,7 @@ const AccordionBody = ({children, as}) => {
  aria-labelledby={`button-${hash}`}
  style={
  {
- maxHeight: "0px",
+ maxHeight: show ? "none" : "0px",
  transitionProperty: "max-height",
  overflow: "hidden",
  transitionDuration: transitionData.duration,

src/packages/accordion/AccordionHeader.jsx

@@ -1,11 +1,18 @@
-import {useLayoutEffect, useRef, useContext, useMemo} from "react";
+import {useRef, useContext, useMemo, useEffect} from "react";
 import {AccordionItemContext} from "./AccordionItemProvider";
 
-const AccordionHeader = ({children, as = "button", className = ""}) => {
- const {hash, active, toggle, items, alwaysOpen} = useContext(AccordionItemContext);
+const AccordionHeader = ({children, as = "button", className = "", href = "", onClick = null}) => {
+ const {hash, active, toggle, items, alwaysOpen, show, disabledShow} = useContext(AccordionItemContext);
  const ref = useRef();
 
- useLayoutEffect(() => {
+ const TagName = useMemo(() => {
+ if(["button", "div", "li", "ol", "a"].includes(as)) {
+ return as;
+ }
+ return "button";
+ }, [as]);
+
+ useEffect(() => {
  if (ref && ref.current) {
  const toggleButton = (button) => {
  let ariaExpanded = button.getAttribute('aria-expanded');
@@ -43,16 +50,24 @@ const AccordionHeader = ({children, as = "button", className = ""}) => {
  }
  }
 
- const showAccordion = () => {
+ const showAccordion = (e) => {
+ disabledShow();
+ disabledShow();
+
+ // Pervent default
+ if (TagName === "a") {
+ e.preventDefault();
+ }
+
  toggle()
 
  if (!alwaysOpen) {
  // Close content already open
- const buttons = ref.current.parentNode.querySelectorAll(":scope > button[aria-expanded='true']");
+ const buttons = ref.current.parentNode.querySelectorAll(`:scope > ${TagName}[aria-expanded='true']`);
  buttons.forEach(button => {
  if (button && button !== ref.current) {
  const id = button.id.split("-")[1];
- items[id].setActive(false);
+ items[id](false);
  toggleButton(button);
  toggleContent(document.querySelector(`#${button.getAttribute('aria-controls')}`));
  }
@@ -64,29 +79,46 @@ const AccordionHeader = ({children, as = "button", className = ""}) => {
 
  // Toggle Content
  toggleContent(document.querySelector(`#${ref.current.getAttribute('aria-controls')}`));
+
+ if (onClick) {
+ onClick(e);
+ }
  };
 
  ref.current.addEventListener('click', showAccordion);
 
+ if (show) {
+ ref.current.setAttribute("aria-expanded", "true")
+ }
+
  return () => {
- ref.current.removeEventListener('click', showAccordion);
+ if (ref && ref.current) {
+ ref?.current?.removeEventListener('click', showAccordion);
+ }
  };
  }
 
- }, [items, toggle]);
-
- const TagName = useMemo(() => {
- if(["button", "div", "li", "ol"].includes(as)) {
- return as;
- }
- return "button";
- }, [as]);
+ }, [TagName, alwaysOpen, items, onClick, show, disabledShow, toggle]);
+
+ if (TagName === "a") {
+ return (
+ <TagName
+ ref={ref}
+ id={`button-${hash}`}
+ href={href}
+ aria-expanded="false"
+ className={className}
+ aria-controls={`content-${hash}`}
+ >
+ {typeof children === "function" ? children({open: active}) : children}
+ </TagName>
+ );
+ }
 
  return (
  <TagName
  ref={ref}
  id={`button-${hash}`}
- type="button"
  aria-expanded="false"
  className={className}
  aria-controls={`content-${hash}`}

src/packages/accordion/AccordionItem.jsx

@@ -1,13 +1,8 @@
 import {AccordionItemProvider} from "./AccordionItemProvider";
-import {useLayoutEffect} from "react";
-
-const AccordionItem = ({children}) => {
- useLayoutEffect(() => {
-
- }, []);
 
+const AccordionItem = ({children, isActive = false}) => {
  return (
- <AccordionItemProvider>
+ <AccordionItemProvider isActive={isActive}>
  {children}
  </AccordionItemProvider>
  )

src/packages/accordion/AccordionItemProvider.jsx

@@ -1,20 +1,31 @@
-import {createContext, useContext, useEffect, useLayoutEffect, useMemo, useState} from "react";
+import {createContext, useContext, useEffect, useMemo, useState} from "react";
 import {AccordionContext} from "./AccordionProvider";
 
-export const AccordionItemContext = createContext({});
+export const AccordionItemContext = createContext({
+ accordionRef: null,
+ active: false,
+ items: [],
+ hash: "",
+ transition: null,
+ alwaysOpen: false,
+ toggle: () => {},
+ show: false,
+ setShow: () => {}
+});
 
 
-export const AccordionItemProvider = ({children}) => {
+export const AccordionItemProvider = ({children, isActive = false}) => {
  const {accordionRef, items, setItems, transition, alwaysOpen} = useContext(AccordionContext);
- const [active, setActive] = useState(false);
+ const [active, setActive] = useState(isActive);
+ const [show, setShow] = useState(isActive);
 
  const hash = useMemo(() => {
  return Math.random().toString(36).substring(2, 9);
  }, []);
 
  useEffect(() => {
  if (!(hash in items)) {
- setItems({...items, [hash]: {active, setActive}});
+ setItems({...items, [hash]: setActive});
  }
  }, [active, hash, items, setItems]);
 
@@ -26,9 +37,16 @@ export const AccordionItemProvider = ({children}) => {
  items,
  hash,
  transition,
- alwaysOpen
+ alwaysOpen,
+ show,
+ disabledShow: () => {
+ console.log("exec")
+ setShow(false)
+ }
  }
- }, [accordionRef, active, hash, items, transition, alwaysOpen]);
+ }, [accordionRef, active, alwaysOpen, hash, items, show, setShow, transition]);
+
+ console.log(`${hash}:`, isActive)
 
  return (
  <AccordionItemContext.Provider value={value}>