pixel-react 1.6.6 → 1.6.8

package/src/components/AppHeader/AppHeader.tsx

@@ -1,198 +1,197 @@
-import {
-  appHeaderHiddenMenuItemProps,
-  AppHeaderProps,
-  appHeaderSubMenuItemProps,
-} from './types';
-import Icon from '../Icon';
-import './AppHeader.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import AllProjectsDropdown from '../AllProjectsDropdown';
-import MenuOption from '../MenuOption';
-import Tooltip from '../Tooltip';
-import React, { useState } from 'react';
-
-const AppHeader: React.FC<AppHeaderProps> = ({
-  logoIconName = 'fireflink_icon',
-  leftContent,
-  rightContent,
-  projectsList,
-  appHeaderMenuItems,
-  selectedMenu,
-  selectedSubMenu,
-  selectedQuickMenu,
-  selectedProject = { label: '', value: '', iconName: '' },
-  onMenuClick = () => {},
-  onSubMenuClick = () => {},
-  onQuickMenuClick = () => {},
-  onProjectMenuClick = () => {},
-  onProjectDropdownLabelClick = () => {},
-  onMoreMenuOptionClick = () => {},
-}) => {
-  const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = useState<
-    appHeaderHiddenMenuItemProps[]
-  >([]);
-  const onSubMenuClickHandler = (subMenu: appHeaderSubMenuItemProps) => {
-    setAppHeaderHiddenMenuItems(
-      subMenu.hiddenMenuItems ? subMenu.hiddenMenuItems : []
-    );
-    onSubMenuClick(subMenu);
-  };
-  return (
-    <div className="ff-app-header-main">
-      <div className="ff-app-header">
-        <div className="ff-app-header-left-container">
-          <div className="ff-app-header-logo-icon">
-            <Icon color="" name={logoIconName} height={24} width={21} />
-          </div>
-          {leftContent && (
-            <div className="ff-app-header-left-content">{leftContent}</div>
-          )}
-        </div>
-        {!checkEmpty(appHeaderMenuItems) && (
-          <div className="ff-app-header-nav-bar">
-            {projectsList && !checkEmpty(projectsList) && (
-              <div>
-                {
-                  <AllProjectsDropdown
-                    onClick={onProjectMenuClick}
-                    options={projectsList}
-                    selectedOption={selectedProject}
-                    onMenuClick={onProjectDropdownLabelClick}
-                    selected={selectedMenu === 'Projects'}
-                  />
-                }
-              </div>
-            )}
-            <div className="ff-app-header-nav-bar-items fontSm">
-              {appHeaderMenuItems.map((menuItem) => {
-                return (
-                  <div
-                    className={classNames('ff-app-header-nav-bar-item', {
-                      ['ff-app-header-nav-bar-item--selected']:
-                        menuItem.label === selectedMenu,
-                    })}
-                    key={menuItem.label}
-                  >
-                    <Typography
-                      as="div"
-                      className="ff-app-header-nav-bar-item-label"
-                      lineHeight="18px"
-                      onClick={() => onMenuClick(menuItem)}
-                    >
-                      {menuItem.label}
-                    </Typography>
-                    {menuItem.label === selectedMenu &&
-                      menuItem?.subMenuItems && (
-                        <>
-                          {menuItem.subMenuItems.map((subMenuItem) => {
-                            return (
-                              <div
-                                key={subMenuItem.label}
-                                className="ff-app-header-submenu-container"
-                              >
-                                <Typography
-                                  as="div"
-                                  className={classNames(
-                                    'ff-app-header-nav-bar-submenu-item',
-                                    {
-                                      ['ff-app-header-nav-bar-submenu-item--selected']:
-                                        subMenuItem.label === selectedSubMenu,
-                                    }
-                                  )}
-                                  lineHeight="18px"
-                                  onClick={() =>
-                                    onSubMenuClickHandler(subMenuItem)
-                                  }
-                                >
-                                  {subMenuItem.label}
-                                </Typography>
-                              </div>
-                            );
-                          })}
-                          {menuItem.subMenuItems.map((subMenuItem) => {
-                            return (
-                              <div
-                                key={subMenuItem.label}
-                                className="ff-app-header-submenu-container"
-                              >
-                                {subMenuItem.label === selectedSubMenu &&
-                                  subMenuItem?.quickMenuItems && (
-                                    <div className="ff-app-header-quickmenu-container">
-                                      <div>
-                                        <Icon name="vertical_separator" />
-                                      </div>
-                                      {subMenuItem.quickMenuItems.map(
-                                        (quickMenuItem) => {
-                                          return (
-                                            <>
-                                              <div
-                                                key={quickMenuItem.iconName}
-                                                onClick={() =>
-                                                  onQuickMenuClick(
-                                                    quickMenuItem
-                                                  )
-                                                }
-                                                className={classNames(
-                                                  'ff-app-header-nav-bar-quickmenu-item',
-                                                  {
-                                                    ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                      quickMenuItem.iconName ===
-                                                      selectedQuickMenu,
-                                                  }
-                                                )}
-                                              >
-                                                <Tooltip
-                                                  title={quickMenuItem?.label}
-                                                >
-                                                  <Icon
-                                                    name={
-                                                      quickMenuItem.iconName
-                                                    }
-                                                    height={16}
-                                                    width={16}
-                                                    hoverEffect={true}
-                                                  />
-                                                </Tooltip>
-                                              </div>
-                                            </>
-                                          );
-                                        }
-                                      )}
-                                    </div>
-                                  )}
-                              </div>
-                            );
-                          })}
-                        </>
-                      )}
-                  </div>
-                );
-              })}
-            </div>
-            {appHeaderHiddenMenuItems &&
-              !checkEmpty(appHeaderHiddenMenuItems) && (
-                <div className="more-menu">
-                  <MenuOption
-                    iconName="more"
-                    options={appHeaderHiddenMenuItems}
-                    onOptionClick={onMoreMenuOptionClick}
-                    variant="dark"
-                    dropdownPlacement="down"
-                    zIndex={1001}
-                    tooltipTitle="More"
-                    optionCardVariant="primary"
-                  />
-                </div>
-              )}
-          </div>
-        )}
-        {rightContent && (
-          <div className="ff-app-header-right-content">{rightContent}</div>
-        )}
-      </div>
-    </div>
-  );
-};
-export default AppHeader;
+import { AppHeaderProps } from './types';
+import Icon from '../Icon';
+import './AppHeader.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import AllProjectsDropdown from '../AllProjectsDropdown';
+import MenuOption from '../MenuOption';
+import Tooltip from '../Tooltip';
+import React from 'react';
+
+const AppHeader: React.FC<AppHeaderProps> = ({
+  logoIconName = 'fireflink_icon',
+  width,
+  leftContent,
+  rightContent,
+  projectsList,
+  appHeaderMenuItems,
+  appHeaderHiddenMenuItems,
+  selectedMenu,
+  selectedSubMenu,
+  selectedQuickMenu,
+  selectedProject = { label: '', value: '', iconName: '' },
+  onMenuClick = () => {},
+  onSubMenuClick = () => {},
+  onQuickMenuClick = () => {},
+  onProjectMenuClick = () => {},
+  onProjectDropdownLabelClick = () => {},
+  onMoreMenuOptionClick = () => {},
+}) => {
+  return (
+    <div className="ff-app-header-main">
+      <div className="ff-app-header">
+        <div className="ff-app-header-left-container">
+          <div className="ff-app-header-logo-icon">
+            <Icon color="" name={logoIconName} height={24} width={21} />
+          </div>
+          {leftContent && (
+            <div className="ff-app-header-left-content">{leftContent}</div>
+          )}
+        </div>
+        {!checkEmpty(appHeaderMenuItems) && (
+          <div className="ff-app-header-nav-bar" style={{ width: width }}>
+            {projectsList && !checkEmpty(projectsList) && (
+              <div>
+                {
+                  <AllProjectsDropdown
+                    onClick={onProjectMenuClick}
+                    options={projectsList}
+                    selectedOption={selectedProject}
+                    onMenuClick={onProjectDropdownLabelClick}
+                    selected={selectedMenu === 'Projects'}
+                  />
+                }
+              </div>
+            )}
+            <div className="ff-app-header-nav-bar-items fontSm">
+              {appHeaderMenuItems.map((menuItem) => {
+                return (
+                  !appHeaderHiddenMenuItems?.find(
+                    (menu) => menu.label === menuItem.label
+                  ) && (
+                    <div
+                      className={classNames('ff-app-header-nav-bar-item', {
+                        ['ff-app-header-nav-bar-item--selected']:
+                          menuItem.label === selectedMenu,
+                      })}
+                      key={menuItem.label}
+                    >
+                      <Typography
+                        as="div"
+                        className="ff-app-header-nav-bar-item-label"
+                        lineHeight="18px"
+                        onClick={() => onMenuClick(menuItem)}
+                      >
+                        {menuItem.label}
+                      </Typography>
+                      {menuItem.label === selectedMenu &&
+                        menuItem?.subMenuItems && (
+                          <>
+                            {menuItem.subMenuItems.map((subMenuItem) => {
+                              return (
+                                <div
+                                  key={subMenuItem.label}
+                                  className="ff-app-header-submenu-container"
+                                >
+                                  <Typography
+                                    as="div"
+                                    className={classNames(
+                                      'ff-app-header-nav-bar-submenu-item',
+                                      {
+                                        ['ff-app-header-nav-bar-submenu-item--selected']:
+                                          subMenuItem.label === selectedSubMenu,
+                                      }
+                                    )}
+                                    lineHeight="18px"
+                                    onClick={() => onSubMenuClick(subMenuItem)}
+                                  >
+                                    {subMenuItem.label}
+                                  </Typography>
+                                </div>
+                              );
+                            })}
+                            {menuItem.subMenuItems.map((subMenuItem) => {
+                              return (
+                                <div
+                                  key={subMenuItem.label}
+                                  className="ff-app-header-submenu-container"
+                                >
+                                  {subMenuItem.label === selectedSubMenu &&
+                                    subMenuItem?.quickMenuItems && (
+                                      <div
+                                        // className="ff-app-header-quickmenu-container"
+                                        className={classNames(
+                                          'ff-app-header-quickmenu-container',
+                                          subMenuItem.quickMenuItems?.length
+                                            ? 'visible'
+                                            : ''
+                                        )}
+                                      >
+                                        <div>
+                                          <Icon name="vertical_separator" />
+                                        </div>
+                                        {subMenuItem.quickMenuItems.map(
+                                          (quickMenuItem) => {
+                                            return (
+                                              <>
+                                                <div
+                                                  key={quickMenuItem.iconName}
+                                                  onClick={() =>
+                                                    onQuickMenuClick(
+                                                      quickMenuItem
+                                                    )
+                                                  }
+                                                  className={classNames(
+                                                    'ff-app-header-nav-bar-quickmenu-item',
+                                                    {
+                                                      ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                        quickMenuItem.iconName ===
+                                                        selectedQuickMenu,
+                                                    }
+                                                  )}
+                                                >
+                                                  <Tooltip
+                                                    title={quickMenuItem?.label}
+                                                  >
+                                                    <Icon
+                                                      name={
+                                                        quickMenuItem.iconName
+                                                      }
+                                                      height={16}
+                                                      width={16}
+                                                      hoverEffect={true}
+                                                    />
+                                                  </Tooltip>
+                                                </div>
+                                              </>
+                                            );
+                                          }
+                                        )}
+                                      </div>
+                                    )}
+                                </div>
+                              );
+                            })}
+                          </>
+                        )}
+                    </div>
+                  )
+                );
+              })}
+            </div>
+            {appHeaderHiddenMenuItems &&
+              !checkEmpty(appHeaderHiddenMenuItems) && (
+                <div className="more-menu">
+                  <MenuOption
+                    iconName="more"
+                    options={appHeaderHiddenMenuItems}
+                    onOptionClick={onMoreMenuOptionClick}
+                    variant="dark"
+                    dropdownPlacement="down"
+                    zIndex={1001}
+                    tooltipTitle="More"
+                    optionCardVariant="primary"
+                  />
+                </div>
+              )}
+          </div>
+        )}
+        {rightContent && (
+          <div className="ff-app-header-right-content">{rightContent}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default AppHeader;

package/src/components/AppHeader/index.ts

@@ -1 +1 @@
-export { default } from "./AppHeader";
+export { default } from "./AppHeader";

package/src/components/AppHeader/types.ts

@@ -1,52 +1,54 @@
-import { ReactNode } from 'react';
-import { optionsType } from '../AllProjectsDropdown/types';
-export interface AppHeaderProps {
-  logoIconName: string;
-  leftContent?: ReactNode;
-  rightContent?: ReactNode;
-  projectsList?: optionsType[];
-  appHeaderMenuItems: appHeaderMenuItemProps[];
-  selectedMenu: string;
-  selectedSubMenu?: string;
-  selectedQuickMenu?: string;
-  selectedProject?: optionsType;
-  onMenuClick?: (text: any) => void;
-  onSubMenuClick?: (text: any) => void;
-  onQuickMenuClick?: (text: any) => void;
-  onProjectMenuClick?: (text: any) => void;
-  onProjectDropdownLabelClick?: () => void;
-  onMoreMenuOptionClick?: (text: any) => void;
-}
-export interface appHeaderMenuItemProps {
-  label: string;
-  path?: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-  subMenuItems?: appHeaderSubMenuItemProps[];
-}
-export interface appHeaderSubMenuItemProps {
-  label: string;
-  path?: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-  quickMenuItems?: appHeaderQuickMenuItemProps[];
-  hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
-}
-export interface appHeaderQuickMenuItemProps {
-  label?: string;
-  path?: string;
-  iconName: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-}
-export interface appHeaderHiddenMenuItemProps {
-  label: string;
-  value: string | string[];
-  icon: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-}
+import { ReactNode } from 'react';
+import { optionsType } from '../AllProjectsDropdown/types';
+export interface AppHeaderProps {
+  width?: string;
+  logoIconName: string;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  projectsList?: optionsType[];
+  appHeaderMenuItems: appHeaderMenuItemProps[];
+  appHeaderHiddenMenuItems?: appHeaderHiddenMenuItemProps[];
+  selectedMenu: string;
+  selectedSubMenu?: string;
+  selectedQuickMenu?: string;
+  selectedProject?: optionsType;
+  onMenuClick?: (text: any) => void;
+  onSubMenuClick?: (text: any) => void;
+  onQuickMenuClick?: (text: any) => void;
+  onProjectMenuClick?: (text: any) => void;
+  onProjectDropdownLabelClick?: () => void;
+  onMoreMenuOptionClick?: (text: any) => void;
+}
+export interface appHeaderMenuItemProps {
+  label: string;
+  path?: string;
+  disable?: boolean;
+  disableText?: string;
+  hide?: boolean;
+  subMenuItems?: appHeaderSubMenuItemProps[];
+}
+export interface appHeaderSubMenuItemProps {
+  label: string;
+  path?: string;
+  disable?: boolean;
+  disableText?: string;
+  hide?: boolean;
+  quickMenuItems?: appHeaderQuickMenuItemProps[];
+  hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
+}
+export interface appHeaderQuickMenuItemProps {
+  label?: string;
+  path?: string;
+  iconName: string;
+  disable?: boolean;
+  disableText?: string;
+  hide?: boolean;
+}
+export interface appHeaderHiddenMenuItemProps {
+  label: string;
+  value: string | string[];
+  icon: string;
+  disable?: boolean;
+  disableText?: string;
+  hide?: boolean;
+}