impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Sidebar/Menus/childMenu.js

@@ -1,88 +0,0 @@
-import React, { useRef, useEffect, useLayoutEffect } from "react";
-import { NavLink, MemoryRouter } from "react-router-dom";
-export const ChildMenu = ({
-  parent,
-  active,
-  menu,
-  showChild,
-  handleRouteChange,
-  isMemoryRouter,
-}) => {
-  const containerRef = useRef(null);
-
-  const updateBeforeHeight = () => {
-    const container = containerRef.current;
-    if (container) {
-      const contentHeight = container.scrollHeight; // Get full scrollable content height
-      container.style.setProperty("--before-height", `${contentHeight}px`); // Set custom CSS variable
-    }
-  };
-
-  useLayoutEffect(() => {
-    // Call the function initially
-    updateBeforeHeight();
-
-    // Update on window resize
-    window.addEventListener("resize", updateBeforeHeight);
-
-    // Cleanup event listener when component unmounts
-    return () => {
-      window.removeEventListener("resize", updateBeforeHeight);
-    };
-  }, []); // Empty dependency array ensures this runs once on mount
-
-  useEffect(() => {
-    // Update height when menu items change
-    updateBeforeHeight();
-  }, [menu]); // Dependency array ensures this runs when menu changes
-
-  return (
-    <div
-      className={`impact-sidebar-routes-list-children ${
-        showChild === parent.value && "child-route-visible"
-      }`}
-      ref={containerRef}
-    >
-      {menu.map((child) => {
-        return isMemoryRouter ? (
-          <MemoryRouter>
-            <NavLink
-              to={child?.openInNewPage ? "#" : child.link}
-              className="impact-sidebar-routes-list-item-link"
-            >
-              <div
-                key={child.value}
-                className={`impact-sidebar-routes-list-item-children ${
-                  child.value === active && "child-route-active"
-                } ${child.isDisabled && "child-route-disabled"}`}
-                onClick={(event) => handleRouteChange(parent, child, event)}
-              >
-                <div className="impact-sidebar-routes-list-item-child-icon">
-                  {child.icon}
-                </div>
-                <div className="impact-sidebar-routes-list-item-child-label">
-                  {child.label}
-                </div>
-              </div>
-            </NavLink>
-          </MemoryRouter>
-        ) : (
-          <div
-            key={child.value}
-            className={`impact-sidebar-routes-list-item-children ${
-              child.value === active && "child-route-active"
-            } ${child.isDisabled && "child-route-disabled"}`}
-            onClick={(event) => handleRouteChange(parent, child, event)}
-          >
-            <div className="impact-sidebar-routes-list-item-child-icon">
-              {child.icon}
-            </div>
-            <div className="impact-sidebar-routes-list-item-child-label">
-              {child.label}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/src/components/Sidebar/Menus/index.js

@@ -1,130 +0,0 @@
-import React, { useState } from "react";
-import { ParentMenu } from "./parentMenu";
-import { ChildMenu } from "./childMenu";
-import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined";
-
-export default function Menus({
-  isOpen,
-  setIsOpen,
-  routes,
-  parentActive,
-  handleParentRouteChange,
-  childActive,
-  handleChildRouteChange,
-  isMemoryRouter,
-  visibleModulesCount = 6,
-}) {
-  const visibleMenu = routes.slice(0, visibleModulesCount);
-  const hiddenMenu = routes.slice(visibleModulesCount);
-  const [showChild, setShowChild] = useState("");
-  const [showHiddenMenu, setShowHiddenMenu] = useState(false);
-
-  return (
-    <div className="impact-sidebar-routes-list">
-      {visibleMenu.map((item) => {
-        return (
-          <React.Fragment>
-            <MenuConfig
-              showItem
-              isOpen={isOpen}
-              setIsOpen={setIsOpen}
-              showChild={showChild}
-              setShowChild={setShowChild}
-              item={item}
-              parentActive={parentActive}
-              childActive={childActive}
-              handleParentRouteChange={handleParentRouteChange}
-              handleChildRouteChange={handleChildRouteChange}
-              isMemoryRouter={isMemoryRouter}
-              key={`menu-config-${item.value}`}
-            />
-          </React.Fragment>
-        );
-      })}
-      {hiddenMenu && hiddenMenu.length > 0 ? (
-        <React.Fragment>
-          <div
-            className={`impact-sidebar-routes-hidden-list-icon ${
-              showHiddenMenu ? "show-hidden-menu-icon" : ""
-            }`}
-            onClick={() => setShowHiddenMenu(!showHiddenMenu)}
-          >
-            <KeyboardArrowDownOutlinedIcon />{" "}
-            <span>View {showHiddenMenu ? "Less" : "More"}</span>
-          </div>
-          {/* <div
-            className={`impact-sidebar-routes-hidden-list ${
-              showHiddenMenu ? "show-hidden-menu" : ""
-            }`}
-          ></div> */}
-          {hiddenMenu.map((item) => {
-            return (
-              <React.Fragment key={item.value}>
-                <MenuConfig
-                  showItem={showHiddenMenu}
-                  isOpen={isOpen}
-                  setIsOpen={setIsOpen}
-                  showChild={showChild}
-                  setShowChild={setShowChild}
-                  item={item}
-                  parentActive={parentActive}
-                  childActive={childActive}
-                  handleParentRouteChange={handleParentRouteChange}
-                  handleChildRouteChange={handleChildRouteChange}
-                  isMemoryRouter={isMemoryRouter}
-                  key={`menu-config-${item.value}`}
-                />
-              </React.Fragment>
-            );
-          })}
-        </React.Fragment>
-      ) : null}
-    </div>
-  );
-}
-
-const MenuConfig = ({
-  showItem,
-  isOpen,
-  setIsOpen,
-  childActive,
-  parentActive,
-  item,
-  showChild,
-  setShowChild,
-  handleParentRouteChange,
-  handleChildRouteChange,
-  isMemoryRouter,
-  key,
-}) => {
-  if (showItem) {
-    return (
-      <React.Fragment>
-        <ParentMenu
-          isOpen={isOpen}
-          setIsOpen={setIsOpen}
-          active={parentActive}
-          item={item}
-          showChild={showChild}
-          setShowChild={setShowChild}
-          handleRouteChange={handleParentRouteChange}
-          isMemoryRouter={isMemoryRouter}
-          key={key}
-        />
-        {item.children && item.children.length > 0 ? (
-          <ChildMenu
-            parent={item}
-            active={childActive}
-            menu={item.children}
-            showChild={showChild}
-            handleRouteChange={handleChildRouteChange}
-            isMemoryRouter={isMemoryRouter}
-            key={key}
-          />
-        ) : null}
-      </React.Fragment>
-    );
-  }
-
-  return null;
-};

package/src/components/Sidebar/Menus/parentMenu.js

@@ -1,173 +0,0 @@
-import React from "react";
-import { Tooltip } from "../../Tooltip";
-import KeyboardArrowRightOutlinedIcon from "@mui/icons-material/KeyboardArrowRightOutlined";
-import { NavLink, MemoryRouter } from "react-router-dom";
-
-export const ParentMenu = ({
-  isOpen,
-  setIsOpen,
-  active,
-  item,
-  showChild,
-  setShowChild,
-  handleRouteChange,
-  isMemoryRouter,
-  key,
-}) => {
-  const handleClickOnRoute = (item, event) => {
-    if (item.children && item.children.length > 0) {
-      if (!isOpen) {
-        setIsOpen(true);
-      }
-      if (item.link) {
-        handleRouteChange(item, event);
-      }
-      if (showChild === item.value) {
-        setShowChild(null);
-      } else {
-        setShowChild(item.value);
-      }
-    } else {
-      handleRouteChange(item, event);
-    }
-  };
-
-  if (isOpen) {
-    return isMemoryRouter ? (
-      <MemoryRouter key={key}>
-        <NavLink
-          to={item?.openInNewPage ? "#" : item.link}
-          className="impact-sidebar-routes-list-item-link"
-        >
-          <div
-            key={item.value}
-            className={`impact-sidebar-routes-list-item ${
-              item.value === active && "route-active"
-            } ${item.isDisabled && "route-disabled"}`}
-            onClick={(event) => handleClickOnRoute(item, event)}
-          >
-            <div className="impact-sidebar-routes-list-item-icon">
-              {item.icon}
-            </div>
-            <div className="impact-sidebar-routes-list-item-label">
-              <span className="impact-sidebar-routes-list-item-label-text">
-                {item.label}
-              </span>
-              {item.children && item.children.length > 0 ? (
-                <div
-                  className={`impact-sidebar-routes-list-item-children-indicator-horizontal ${
-                    isOpen && showChild === item.value && "indicator-turn-up"
-                  }`}
-                  role="button"
-                >
-                  <KeyboardArrowRightOutlinedIcon />
-                </div>
-              ) : null}
-            </div>
-          </div>
-        </NavLink>
-      </MemoryRouter>
-    ) : (
-      <div
-        key={key}
-        className={`impact-sidebar-routes-list-item ${
-          item.value === active && "route-active"
-        } ${item.isDisabled && "route-disabled"}`}
-        onClick={(event) => handleClickOnRoute(item, event)}
-      >
-        <div className="impact-sidebar-routes-list-item-icon">{item.icon}</div>
-        <div className="impact-sidebar-routes-list-item-label">
-          <span className="impact-sidebar-routes-list-item-label-text">
-            {item.label}
-          </span>
-          {item.children && item.children.length > 0 ? (
-            <div
-              className={`impact-sidebar-routes-list-item-children-indicator-horizontal ${
-                isOpen && showChild === item.value && "indicator-turn-up"
-              }`}
-              role="button"
-              //onClick={() => setDisplayChild(!displayChild)}
-            >
-              <KeyboardArrowRightOutlinedIcon />
-            </div>
-          ) : null}
-        </div>
-      </div>
-    );
-  }
-
-  return isMemoryRouter ? (
-    <MemoryRouter key={key}>
-      <Tooltip
-        title={
-          item.tooltip && item.tooltip.length > 0 ? item.tooltip : item.label
-        }
-        orientation="right"
-        variant="tertiary"
-      >
-        <NavLink
-          to={item?.openInNewPage ? "#" : item.link}
-          className="impact-sidebar-routes-list-item-link"
-        >
-          <div
-            key={item.value}
-            className={`impact-sidebar-routes-list-item ${
-              item.value === active && "route-active"
-            } ${item.isDisabled && "route-disabled"}`}
-            onClick={(event) => handleClickOnRoute(item, event)}
-          >
-            <div className="impact-sidebar-routes-list-item-icon">
-              {item.icon}
-            </div>
-            {item.children && item.children.length > 0 ? (
-              <div
-                className={`impact-sidebar-routes-list-item-children-indicator-horizontal ${
-                  isOpen && showChild === item.value && "indicator-turn-up"
-                }`}
-                role="button"
-              >
-                <KeyboardArrowRightOutlinedIcon />
-              </div>
-            ) : null}
-            <div className="impact-sidebar-routes-list-item-label">
-              {item.label}
-            </div>
-          </div>
-        </NavLink>
-      </Tooltip>
-    </MemoryRouter>
-  ) : (
-    <Tooltip
-      title={
-        item.tooltip && item.tooltip.length > 0 ? item.tooltip : item.label
-      }
-      orientation="right"
-      variant="tertiary"
-      key={key}
-    >
-      <div
-        key={item.value}
-        className={`impact-sidebar-routes-list-item ${
-          item.value === active && "route-active"
-        } ${item.isDisabled && "route-disabled"}`}
-        onClick={(event) => handleClickOnRoute(item, event)}
-      >
-        <div className="impact-sidebar-routes-list-item-icon">{item.icon}</div>
-        {item.children && item.children.length > 0 ? (
-          <div
-            className={`impact-sidebar-routes-list-item-children-indicator-horizontal ${
-              isOpen && showChild === item.value && "indicator-turn-up"
-            }`}
-            role="button"
-            //onClick={() => setDisplayChild(!displayChild)}
-          >
-            <KeyboardArrowRightOutlinedIcon />
-          </div>
-        ) : null}
-        <div className="impact-sidebar-routes-list-item-label">
-          {item.label}
-        </div>
-      </div>
-    </Tooltip>
-  );
-};