@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Sidebar/Sidebar.tsx

@@ -1,83 +1,85 @@
-import clsx from 'clsx';
-import { FC, Fragment, useEffect, useRef, useState } from 'react';
-import { SidebarItem } from './SidebarItem';
-import { ISidebarItem } from './types/ISidebar';
-import { faAngleLeft } from '../../assets/icons/solid/faAngleLeft';
-import { IconButton } from '../Button/IconButton';
-import { IOrgLogo, orgLogo } from '../../utils/logoUtils';
-
-export interface ISidebarProps {
-  items: ISidebarItem[][];
-  logo?: IOrgLogo;
-  customLogo?: string;
-  appVersion?: string;
-}
-export const Sidebar: FC<ISidebarProps> = ({ items, logo, customLogo, appVersion }) => {
-  const [itemsList, setItemsList] = useState<ISidebarItem[][]>([]);
-  const [collapsed, setCollapsed] = useState(false);
-  const [openedMenu, setOpenedMenu] = useState('');
-
-  const sidebarRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    // Filter out hidden items & items without visible content
-    const newItems = items.map(list =>
-      list.filter(
-        item => !item.hidden && (item.to || item.content?.some(item => !item.hidden))
-      )
-    );
-    setItemsList(newItems);
-  }, [items, setItemsList]);
-
-  return (
-    <div ref={sidebarRef} className={clsx('iui-sidebar', { collapsed })}>
-      {/* ////// TOGGLE ////// */}
-      <IconButton
-        icon={faAngleLeft}
-        className={clsx('iui-collapse-btn', {
-          'fa-flip-horizontal': collapsed,
-          collapsed,
-        })}
-        size="s"
-        onClick={() => setCollapsed(!collapsed)}
-      />
-
-      <div className="iui-sidebar-content">
-        {/* ////// SIDEBAR ITEMS ////// */}
-        <div className="iui-sidebar-items">
-          {itemsList.map((e, i) => (
-            <Fragment key={i}>
-              {i > 0 && !!e.length && <hr />}
-              {e.map(
-                item =>
-                  !item.hidden && (
-                    <SidebarItem
-                      {...item}
-                      key={item.label}
-                      menu={
-                        item.content
-                          ? { content: item.content, openedMenu, setOpenedMenu }
-                          : undefined
-                      }
-                    />
-                  )
-              )}
-            </Fragment>
-          ))}
-        </div>
-      </div>
-      {/* ////// FOOTER ////// */}
-      <div className={clsx('sidebar-footer', { collapsed })}>
-        {(logo ?? customLogo) && (
-          <img
-            className="sidebar-logo"
-            // src={!!organization?.reseller ? orgLogo[organization?.reseller] : logo}
-            src={customLogo || orgLogo[logo || 'INC']}
-            alt="logo"
-          />
-        )}
-        {appVersion && <p>{appVersion}</p>}
-      </div>
-    </div>
-  );
-};
+import type { FC } from 'react';
+import type { IOrgLogo } from '../../utils/logoUtils';
+import type { ISidebarItem } from './types/ISidebar';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { faAngleLeft } from '../../assets/icons/solid/faAngleLeft';
+import { orgLogo } from '../../utils/logoUtils';
+import { IconButton } from '../Button/IconButton';
+import { SidebarItem } from './SidebarItem';
+
+export interface ISidebarProps {
+  items: ISidebarItem[][];
+  logo?: IOrgLogo;
+  customLogo?: string;
+  appVersion?: string;
+}
+export const Sidebar: FC<ISidebarProps> = ({ items, logo, customLogo, appVersion }) => {
+  const [itemsList, setItemsList] = useState<ISidebarItem[][]>([]);
+  const [collapsed, setCollapsed] = useState(false);
+  const [openedMenu, setOpenedMenu] = useState('');
+
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // Filter out hidden items & items without visible content
+    const newItems = items.map(list =>
+      list.filter(
+        item => !item.hidden && (item.to || item.content?.some(item => !item.hidden))
+      )
+    );
+    setItemsList(newItems);
+  }, [items, setItemsList]);
+
+  return (
+    <div ref={sidebarRef} className={clsx('iui-sidebar', { collapsed })}>
+      {/* ////// TOGGLE ////// */}
+      <IconButton
+        icon={faAngleLeft}
+        className={clsx('iui-collapse-btn', {
+          'fa-flip-horizontal': collapsed,
+          collapsed,
+        })}
+        size="s"
+        onClick={() => setCollapsed(!collapsed)}
+      />
+
+      <div className="iui-sidebar-content">
+        {/* ////// SIDEBAR ITEMS ////// */}
+        <div className="iui-sidebar-items">
+          {itemsList.map((e, i) => (
+            <Fragment key={i}>
+              {i > 0 && !!e.length && <hr />}
+              {e.map(
+                item =>
+                  !item.hidden && (
+                    <SidebarItem
+                      {...item}
+                      key={item.label}
+                      menu={
+                        item.content
+                          ? { content: item.content, openedMenu, setOpenedMenu }
+                          : undefined
+                      }
+                    />
+                  )
+              )}
+            </Fragment>
+          ))}
+        </div>
+      </div>
+      {/* ////// FOOTER ////// */}
+      <div className={clsx('sidebar-footer', { collapsed })}>
+        {(logo ?? customLogo) && (
+          <img
+            className="sidebar-logo"
+            // src={!!organization?.reseller ? orgLogo[organization?.reseller] : logo}
+            src={customLogo || orgLogo[logo || 'INC']}
+            alt="logo"
+          />
+        )}
+        {appVersion && <p>{appVersion}</p>}
+      </div>
+    </div>
+  );
+};

package/src/components/Sidebar/SidebarItem.tsx

@@ -1,84 +1,84 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC } from 'react';
-import { Link, useLocation } from 'react-router';
-import { ISidebarItem } from './types/ISidebar';
-import { AddButton } from './AddButton';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-import clsx from 'clsx';
-import { faChevronDown } from '../../assets/icons';
-import { Collapse } from '../Helper/Collapse';
-import { Tooltip } from '../Tooltip/Tooltip';
-
-export const SidebarItem: FC<ISidebarItem> = ({ label, icon, to, badge, menu }) => {
-  const { pathname } = useLocation();
-
-  return (
-    <>
-      <ConditionalWrapper
-        condition={!!to}
-        wrapper={children => <Link to={to!}>{children}</Link>}
-      >
-        <div
-          onClick={
-            menu
-              ? () => menu.setOpenedMenu(label !== menu.openedMenu ? label : '')
-              : undefined
-          }
-          className={clsx('iui-sidebar-item item-only clickable', {
-            active:
-              to === pathname ||
-              (menu?.content.find(e => e.to === pathname) && label !== menu?.openedMenu),
-          })}
-        >
-          <FontAwesomeIcon icon={icon!} className="sidebar-item-icon" />
-          <p className="sidebar-item-label">{label}</p>
-          {!!badge && <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>}
-          {menu && (
-            <FontAwesomeIcon
-              icon={faChevronDown}
-              className={clsx('sidebar-expand-icon', {
-                rotate: label === menu.openedMenu,
-              })}
-            />
-          )}
-        </div>
-      </ConditionalWrapper>
-
-      {menu && (
-        <Collapse isOpen={menu.openedMenu === label}>
-          {menu.content.map(
-            ({ hidden, label, to, primary, badge, addUrl, tooltip }) =>
-              !hidden && (
-                <ConditionalWrapper
-                  key={label}
-                  condition={!!to}
-                  wrapper={children => <Link to={to!}>{children}</Link>}
-                >
-                  <Tooltip
-                    label={tooltip!}
-                    disabled={!tooltip}
-                    position="right"
-                    singleLine
-                  >
-                    <div
-                      className={clsx('iui-sidebar-item sub-item', {
-                        clickable: !!to,
-                        active: to === pathname,
-                        primary,
-                      })}
-                    >
-                      <p className="sidebar-item-label">{label}</p>
-                      {!!badge && (
-                        <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>
-                      )}
-                      {!!addUrl && <AddButton link={addUrl} />}
-                    </div>
-                  </Tooltip>
-                </ConditionalWrapper>
-              )
-          )}
-        </Collapse>
-      )}
-    </>
-  );
-};
+import type { FC } from 'react';
+import type { ISidebarItem } from './types/ISidebar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { Link, useLocation } from 'react-router';
+import { faChevronDown } from '../../assets/icons';
+import { Collapse } from '../Helper/Collapse';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+import { AddButton } from './AddButton';
+
+export const SidebarItem: FC<ISidebarItem> = ({ label, icon, to, badge, menu }) => {
+  const { pathname } = useLocation();
+
+  return (
+    <>
+      <ConditionalWrapper
+        condition={!!to}
+        wrapper={children => <Link to={to!}>{children}</Link>}
+      >
+        <div
+          onClick={
+            menu
+              ? () => menu.setOpenedMenu(label !== menu.openedMenu ? label : '')
+              : undefined
+          }
+          className={clsx('iui-sidebar-item item-only clickable', {
+            active:
+              to === pathname ||
+              (menu?.content.find(e => e.to === pathname) && label !== menu?.openedMenu),
+          })}
+        >
+          <FontAwesomeIcon icon={icon!} className="sidebar-item-icon" />
+          <p className="sidebar-item-label">{label}</p>
+          {!!badge && <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>}
+          {menu && (
+            <FontAwesomeIcon
+              icon={faChevronDown}
+              className={clsx('sidebar-expand-icon', {
+                rotate: label === menu.openedMenu,
+              })}
+            />
+          )}
+        </div>
+      </ConditionalWrapper>
+
+      {menu && (
+        <Collapse isOpen={menu.openedMenu === label}>
+          {menu.content.map(
+            ({ hidden, label, to, primary, badge, addUrl, tooltip }) =>
+              !hidden && (
+                <ConditionalWrapper
+                  key={label}
+                  condition={!!to}
+                  wrapper={children => <Link to={to!}>{children}</Link>}
+                >
+                  <Tooltip
+                    label={tooltip!}
+                    disabled={!tooltip}
+                    position="right"
+                    singleLine
+                  >
+                    <div
+                      className={clsx('iui-sidebar-item sub-item', {
+                        clickable: !!to,
+                        active: to === pathname,
+                        primary,
+                      })}
+                    >
+                      <p className="sidebar-item-label">{label}</p>
+                      {!!badge && (
+                        <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>
+                      )}
+                      {!!addUrl && <AddButton link={addUrl} />}
+                    </div>
+                  </Tooltip>
+                </ConditionalWrapper>
+              )
+          )}
+        </Collapse>
+      )}
+    </>
+  );
+};

package/src/components/Sidebar/types/ISidebar.ts

@@ -1,28 +1,28 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-export interface ISidebarItem {
-  label: string;
-  icon?: IconDefinition;
-  to?: string;
-  content?: ISidebarSubItem[];
-  menu?: {
-    content: ISidebarSubItem[];
-    openedMenu: string;
-    setOpenedMenu: (label: string) => void;
-  };
-  hidden?: boolean;
-  badge?: number;
-  addUrl?: string;
-}
-
-export interface ISidebarSubItem {
-  label: string;
-  to?: string;
-  content?: ISidebarItem[];
-  hidden?: boolean;
-  tooltip?: string;
-  badge?: number;
-  addUrl?: string;
-  primary?: boolean;
-  collapsed?: boolean;
-}
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+export interface ISidebarItem {
+  label: string;
+  icon?: IconDefinition;
+  to?: string;
+  content?: ISidebarSubItem[];
+  menu?: {
+    content: ISidebarSubItem[];
+    openedMenu: string;
+    setOpenedMenu: (label: string) => void;
+  };
+  hidden?: boolean;
+  badge?: number;
+  addUrl?: string;
+}
+
+export interface ISidebarSubItem {
+  label: string;
+  to?: string;
+  content?: ISidebarItem[];
+  hidden?: boolean;
+  tooltip?: string;
+  badge?: number;
+  addUrl?: string;
+  primary?: boolean;
+  collapsed?: boolean;
+}