pixel-react 1.7.1 → 1.7.3

package/src/components/AppHeader/AppHeader.tsx

@@ -1,197 +1,197 @@
-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;
+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,54 +1,54 @@
-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;
-}
+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;
+}

package/src/components/AttachImage/AttachImage.scss

@@ -1,76 +1,76 @@
-.ff-attach-image-container {
-  position: relative;
-  display: inline-block;
-
-  .ff-image-wrapper {
-    position: relative;
-    width: 79px;
-    height: 75px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .ff-hover-icons {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      opacity: 0;
-      background-color: rgba(0, 0, 0, 0.7);
-      transition: opacity 0.4s ease;
-
-      .ff-top-icons {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        display: flex;
-        gap: 4px;
-
-        .ff-icon-container {
-          width: 8px;
-          height: 8px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-          border-radius: 4px;
-          background-color: transparent;
-          transition: background-color 0.3s ease;
-        }
-      }
-
-      .ff-expand-icon-container {
-        width: 24px;
-        height: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 4px;
-        background-color: transparent;
-        transition: background-color 0.3s ease;
-      }
-    }
-
-    &:hover .ff-hover-icons {
-      opacity: 1;
-    }
-
-    &:hover .ff-icon-container,
-    &:hover .ff-top-icons .ff-icon-container {
-      border-radius: 4px;
-      background-color: var(--ff-icon-hover-bg-color);
-    }
-
-    &:hover .ff-expand-icon-container {
-      background-color: var(--ff-icon-hover-bg-color);
-    }
-  }
-}
+.ff-attach-image-container {
+  position: relative;
+  display: inline-block;
+
+  .ff-image-wrapper {
+    position: relative;
+    width: 79px;
+    height: 75px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .ff-hover-icons {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      background-color: rgba(0, 0, 0, 0.7);
+      transition: opacity 0.4s ease;
+
+      .ff-top-icons {
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        display: flex;
+        gap: 4px;
+
+        .ff-icon-container {
+          width: 8px;
+          height: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+          background-color: transparent;
+          transition: background-color 0.3s ease;
+        }
+      }
+
+      .ff-expand-icon-container {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+        background-color: transparent;
+        transition: background-color 0.3s ease;
+      }
+    }
+
+    &:hover .ff-hover-icons {
+      opacity: 1;
+    }
+
+    &:hover .ff-icon-container,
+    &:hover .ff-top-icons .ff-icon-container {
+      border-radius: 4px;
+      background-color: var(--ff-icon-hover-bg-color);
+    }
+
+    &:hover .ff-expand-icon-container {
+      background-color: var(--ff-icon-hover-bg-color);
+    }
+  }
+}