Merge pull request #20 from allure-framework/toogle-behaviour-fix

fix: fix onClick Toggle behaviour
allure-framework · Dec 17, 2024 · c60db38 · c60db38
2 parents d56cb97 + b5616e0
commit c60db38
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 21 deletions.
diff --git a/packages/web-awesome/src/components/app/ReportBody/SortBy.tsx b/packages/web-awesome/src/components/app/ReportBody/SortBy.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ComponentChildren } from "preact";
+import type { ComponentChildren } from "preact";
 import lineChevronDownIcon from "@/assets/svg/line-arrows-chevron-down.svg";
 import sortAscIcon from "@/assets/svg/line-arrows-sort-line-asc.svg";
 import sortDescIcon from "@/assets/svg/line-arrows-sort-line-desc.svg";
@@ -92,7 +92,7 @@ export const SortBy = () => {
                 <Menu.Item
                   closeMenuOnClick={false}
                   onClick={onClick}
-                  leadingIcon={direction == "asc" ? sortAscIcon.id : sortDescIcon.id}
+                  leadingIcon={direction === "asc" ? sortAscIcon.id : sortDescIcon.id}
                   rightSlot={
                     <BtnWrapper>
                       <DropdownButton

diff --git a/packages/web-awesome/src/components/commons/Menu/index.tsx b/packages/web-awesome/src/components/commons/Menu/index.tsx
@@ -1,12 +1,29 @@
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { clsx } from "clsx";
 import type { ComponentChildren, VNode } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { createContext } from "preact";
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import check from "@/assets/svg/line-general-check.svg";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import { Text } from "@/components/commons/Typography";
 import * as styles from "./styles.scss";
 
+type MenuContextT = {
+  setIsOpened: (isOpened: boolean) => void;
+};
+
+const MenuContext = createContext<MenuContextT | null>(null);
+
+export const useMenuContext = () => {
+  const context = useContext(MenuContext);
+
+  if (!context) {
+    throw new Error("useMenuContext must be used within a Menu");
+  }
+
+  return context;
+};
+
 export const Menu = (props: {
   children: ComponentChildren;
   isInitialOpened?: boolean;
@@ -96,20 +113,26 @@ export const Menu = (props: {
   }, [menuRef.current, triggerRef.current]);
 
   return (
-    <>
-      {typeof menuTrigger === "function" && (
-        <MenuTriggerWrapper ref={triggerRef}>
-          {menuTrigger({
-            isOpened,
-            onClick: handleTriggerClick,
-            setIsOpened,
-          })}
-        </MenuTriggerWrapper>
-      )}
-      <div ref={menuRef}>
-        {isOpened && <aside className={clsx(styles.menu, styles[`size-${size}`])}>{children}</aside>}
-      </div>
-    </>
+    <MenuContext.Provider
+      value={{
+        setIsOpened,
+      }}
+    >
+      <>
+        {typeof menuTrigger === "function" && (
+          <MenuTriggerWrapper ref={triggerRef}>
+            {menuTrigger({
+              isOpened,
+              onClick: handleTriggerClick,
+              setIsOpened,
+            })}
+          </MenuTriggerWrapper>
+        )}
+        <div ref={menuRef}>
+          {isOpened && <aside className={clsx(styles.menu, styles[`size-${size}`])}>{children}</aside>}
+        </div>
+      </>
+    </MenuContext.Provider>
   );
 };
 
@@ -128,13 +151,15 @@ type ItemProps = {
 };
 
 Menu.Item = (props: ItemProps) => {
+  const { setIsOpened } = useMenuContext();
   const { children, onClick, leadingIcon, rightSlot, ariaLabel, closeMenuOnClick = true } = props;
   const isInteractive = typeof onClick === "function";
   const hasLeadingIcon = typeof leadingIcon === "string";
 
   const handleItemClick = (e: MouseEvent) => {
     if (isInteractive && closeMenuOnClick) {
       e.stopPropagation();
+      setIsOpened(false);
     }
 
     if (isInteractive) {

diff --git a/packages/web-awesome/src/components/commons/Toggle/index.tsx b/packages/web-awesome/src/components/commons/Toggle/index.tsx
@@ -23,7 +23,7 @@ export const Toggle = (props: Props) => {
       type="checkbox"
       checked={value}
       aria-label={label}
-      onChange={handleChange}
+      onToggle={handleChange}
     />
   );
 };
diff --git a/packages/web-awesome/src/utils/capitalize.ts b/packages/web-awesome/src/utils/capitalize.ts
@@ -1,4 +1,6 @@
-export function capitalize(str: string) {
-  if (!str) return;
+export const capitalize = (str: string) => {
+  if (!str) {
+    return;
+  }
   return str.charAt(0).toLocaleUpperCase() + str.slice(1);
-}
+};