pixel-react 1.6.5 → 1.6.6

package/src/components/MenuOption/MenuOption.tsx

@@ -1,219 +1,219 @@
-import { useState, useRef, useContext, useEffect } from 'react';
-import './MenuOption.scss';
-import Icon from '../Icon';
-import classNames from 'classnames';
-import Tooltip from '../Tooltip';
-import {
-  OptionCardProps,
-  OptionProps,
-  MenuOptionProps,
-  OptionClick,
-} from './types';
-import Typography from '../Typography';
-import { createPortal } from 'react-dom';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider';
-import useClickOutside from '../../hooks/useClickOutside';
-
-const Option = ({ option, onClick }: OptionProps) => (
-  <div
-    className={classNames('ff-options', {
-      'ff-disable-option': option.disable,
-    })}
-    onClick={() => !option.disable && onClick(option)}
-  >
-    {option.icon && (
-      <Icon
-        name={option.icon}
-        color={option.iconColor}
-        height={16}
-        width={16}
-      />
-    )}
-    <Typography
-      as="label"
-      lineHeight='18px'
-      color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
-    >
-      {option.label}
-    </Typography>
-  </div>
-);
-
-const OptionCard = ({
-  options,
-  onClick,
-  menuPosition,
-  menuRef,
-  closeDropdown,
-  zIndex,
-  dropdownPlacement,
-  variant,
-}: OptionCardProps) => {
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-  const [optionsHeight, setOptionsHeight] = useState(0);
-  const [optionsWidth, setOptionsWidth] = useState(0);
-  const optionCardRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (optionCardRef?.current) {
-      const rect = optionCardRef?.current?.getBoundingClientRect();
-      setOptionsHeight(rect?.height);
-      setOptionsWidth(rect?.width);
-    }
-  }, []);
-
-  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
-
-  const style = (() => {
-    switch (dropdownPlacement) {
-      case 'top':
-        return {
-          top: menuPosition.top - optionsHeight - 7,
-          left: menuPosition.left - 4,
-        };
-      case 'down':
-        return {
-          top: menuPosition.top + 18,
-          left: menuPosition.left - 4,
-        };
-      case 'left':
-        return {
-          top: menuPosition.top - 4,
-          left: menuPosition.left - optionsWidth - 7,
-        };
-      case 'right':
-        return {
-          top: menuPosition.top - 4,
-          left: menuPosition.left + 20,
-        };
-      default:
-        return {
-          top: menuPosition.bottom,
-          left: menuPosition.rightSpaceAvailable + 12,
-        };
-    }
-  })();
-
-  return createPortal(
-    <div
-      className={classNames(
-        'ff-option-card',
-        [{ 'ff-option-card--primary': variant === 'primary' }],
-        currentTheme
-      )}
-      style={{ ...style, zIndex }}
-      ref={optionCardRef}
-    >
-      {options.map((opt) => (
-        <Option key={opt.label} option={opt} onClick={onClick} />
-      ))}
-    </div>,
-    document.body
-  );
-};
-
-const MenuOption = ({
-  labelName,
-  iconName,
-  tooltipTitle,
-  tooltipPlacement = 'bottom',
-  options = [],
-  onClick = () => {},
-  onOptionClick = () => {},
-  iconButtonSize = 20,
-  iconButtonBorderRadius = 7,
-  iconSize = 16,
-  variant = 'light',
-  zIndex = 99,
-  dropdownPlacement = 'down',
-  optionCardVariant
-}: MenuOptionProps) => {
-  const [isClicked, setIsClicked] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-    height: 0,
-    right: 0,
-    rightSpaceAvailable: 0,
-    bottomSpaceAvailable: 0,
-  });
-
-  const closeDropDown = () => setIsClicked(false);
-
-  const onIconClickHandler = () => {
-    onClick();
-    calculateDims();
-    setIsClicked((prev) => !prev);
-  };
-
-  const handleOptionClick = (option: OptionClick) => {
-    onOptionClick(option);
-    closeDropDown();
-  };
-
-  const calculateDims = () => {
-    if (menuRef?.current) {
-      const rect = menuRef.current.getBoundingClientRect();
-
-      setMenuPosition({
-        top: rect.top,
-        left: rect.left,
-        height: rect.height,
-        right: rect.right,
-        rightSpaceAvailable: document.body.clientWidth - rect.right,
-        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
-      });
-    }
-  };
-
-  return (
-    <div className="ff-menu-option-container" ref={menuRef}>
-      <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
-        <div className="ff-icon-label">
-          <div
-            className={classNames('ff-menuicon-container', {
-              'ff-menuicon-container-clicked': isClicked,
-              dark: variant === 'dark',
-            })}
-            onClick={onIconClickHandler}
-            style={{
-              width: `${iconButtonSize}px`,
-              height: `${iconButtonSize}px`,
-              borderRadius: `${iconButtonBorderRadius}px`,
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Icon
-              height={iconSize}
-              width={iconSize}
-              name={iconName}
-              color={
-                isClicked === (variant === 'dark')
-                  ? 'var(--menu-option-icon-clicked)'
-                  : 'var(--menu-option-icon-color)'
-              }
-            />
-          </div>
-          {labelName && <Typography as="label">{labelName}</Typography>}
-        </div>
-      </Tooltip>
-      {isClicked && (
-        <OptionCard
-          options={options}
-          onClick={handleOptionClick}
-          menuPosition={menuPosition}
-          menuRef={menuRef}
-          closeDropdown={closeDropDown}
-          zIndex={zIndex}
-          dropdownPlacement={dropdownPlacement}
-          variant={optionCardVariant}
-        />
-      )}
-    </div>
-  );
-};
-
-export default MenuOption;
+import { useState, useRef, useContext, useEffect } from 'react';
+import './MenuOption.scss';
+import Icon from '../Icon';
+import classNames from 'classnames';
+import Tooltip from '../Tooltip';
+import {
+  OptionCardProps,
+  OptionProps,
+  MenuOptionProps,
+  OptionClick,
+} from './types';
+import Typography from '../Typography';
+import { createPortal } from 'react-dom';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import useClickOutside from '../../hooks/useClickOutside';
+
+const Option = ({ option, onClick }: OptionProps) => (
+  <div
+    className={classNames('ff-options', {
+      'ff-disable-option': option.disable,
+    })}
+    onClick={() => !option.disable && onClick(option)}
+  >
+    {option.icon && (
+      <Icon
+        name={option.icon}
+        color={option.iconColor}
+        height={16}
+        width={16}
+      />
+    )}
+    <Typography
+      as="label"
+      lineHeight='18px'
+      color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
+    >
+      {option.label}
+    </Typography>
+  </div>
+);
+
+const OptionCard = ({
+  options,
+  onClick,
+  menuPosition,
+  menuRef,
+  closeDropdown,
+  zIndex,
+  dropdownPlacement,
+  variant,
+}: OptionCardProps) => {
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  const [optionsHeight, setOptionsHeight] = useState(0);
+  const [optionsWidth, setOptionsWidth] = useState(0);
+  const optionCardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (optionCardRef?.current) {
+      const rect = optionCardRef?.current?.getBoundingClientRect();
+      setOptionsHeight(rect?.height);
+      setOptionsWidth(rect?.width);
+    }
+  }, []);
+
+  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
+
+  const style = (() => {
+    switch (dropdownPlacement) {
+      case 'top':
+        return {
+          top: menuPosition.top - optionsHeight - 7,
+          left: menuPosition.left - 4,
+        };
+      case 'down':
+        return {
+          top: menuPosition.top + 18,
+          left: menuPosition.left - 4,
+        };
+      case 'left':
+        return {
+          top: menuPosition.top - 4,
+          left: menuPosition.left - optionsWidth - 7,
+        };
+      case 'right':
+        return {
+          top: menuPosition.top - 4,
+          left: menuPosition.left + 20,
+        };
+      default:
+        return {
+          top: menuPosition.bottom,
+          left: menuPosition.rightSpaceAvailable + 12,
+        };
+    }
+  })();
+
+  return createPortal(
+    <div
+      className={classNames(
+        'ff-option-card',
+        [{ 'ff-option-card--primary': variant === 'primary' }],
+        currentTheme
+      )}
+      style={{ ...style, zIndex }}
+      ref={optionCardRef}
+    >
+      {options.map((opt) => (
+        <Option key={opt.label} option={opt} onClick={onClick} />
+      ))}
+    </div>,
+    document.body
+  );
+};
+
+const MenuOption = ({
+  labelName,
+  iconName,
+  tooltipTitle,
+  tooltipPlacement = 'bottom',
+  options = [],
+  onClick = () => {},
+  onOptionClick = () => {},
+  iconButtonSize = 20,
+  iconButtonBorderRadius = 7,
+  iconSize = 16,
+  variant = 'light',
+  zIndex = 99,
+  dropdownPlacement = 'down',
+  optionCardVariant
+}: MenuOptionProps) => {
+  const [isClicked, setIsClicked] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    height: 0,
+    right: 0,
+    rightSpaceAvailable: 0,
+    bottomSpaceAvailable: 0,
+  });
+
+  const closeDropDown = () => setIsClicked(false);
+
+  const onIconClickHandler = () => {
+    onClick();
+    calculateDims();
+    setIsClicked((prev) => !prev);
+  };
+
+  const handleOptionClick = (option: OptionClick) => {
+    onOptionClick(option);
+    closeDropDown();
+  };
+
+  const calculateDims = () => {
+    if (menuRef?.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+
+      setMenuPosition({
+        top: rect.top,
+        left: rect.left,
+        height: rect.height,
+        right: rect.right,
+        rightSpaceAvailable: document.body.clientWidth - rect.right,
+        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
+      });
+    }
+  };
+
+  return (
+    <div className="ff-menu-option-container" ref={menuRef}>
+      <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
+        <div className="ff-icon-label">
+          <div
+            className={classNames('ff-menuicon-container', {
+              'ff-menuicon-container-clicked': isClicked,
+              dark: variant === 'dark',
+            })}
+            onClick={onIconClickHandler}
+            style={{
+              width: `${iconButtonSize}px`,
+              height: `${iconButtonSize}px`,
+              borderRadius: `${iconButtonBorderRadius}px`,
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Icon
+              height={iconSize}
+              width={iconSize}
+              name={iconName}
+              color={
+                isClicked === (variant === 'dark')
+                  ? 'var(--menu-option-icon-clicked)'
+                  : 'var(--menu-option-icon-color)'
+              }
+            />
+          </div>
+          {labelName && <Typography as="label">{labelName}</Typography>}
+        </div>
+      </Tooltip>
+      {isClicked && (
+        <OptionCard
+          options={options}
+          onClick={handleOptionClick}
+          menuPosition={menuPosition}
+          menuRef={menuRef}
+          closeDropdown={closeDropDown}
+          zIndex={zIndex}
+          dropdownPlacement={dropdownPlacement}
+          variant={optionCardVariant}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MenuOption;