pixel-react 1.6.3 → 1.6.6

package/src/components/MiniModal/MiniModal.tsx

@@ -1,326 +1,344 @@
-import { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
-import { createPortal } from 'react-dom';
-import { MiniEditModalProps, Rect, AvailableSpace } from './types.js';
-import Button from '../Button/Button.js';
-import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
-import useClickOutside from '../../hooks/useClickOutside';
-import classNames from 'classnames';
-import './MiniModal.scss';
-import Typography from '../Typography';
-
-const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
-  (
-    {
-      anchorRef,
-      headerProps,
-      childContent,
-      cancelButtonProps = () => {},
-      proceedButtonProps = () => {},
-      footerContent,
-      isWrapped = false,
-      isAnimated = false,
-      isPopOver = false,
-      modalPosition = 'bottom',
-      leftTopArrow = false,
-      firstAnchorRef,
-      anchorRefLeftNum,
-      modalProperties,
-      anchorLeftDistanceForWrapper = 170,
-      extraTopSpace,
-      extraRightSpace,
-      extraLeftSpace,
-      isIconModel,
-      wrapperProperties,
-      arrowZIndex,
-      overlay,
-      outSideClick,
-    },
-    ref
-  ) => {
-    const [modalPositionState, setModalPositionState] = useState({
-      top: 0,
-      left: 0,
-    });
-    const [isVisible, setIsVisible] = useState(false);
-    const modalRef = useRef<HTMLDivElement>(null);
-
-    // Function to calculate available space
-    const getAvailableSpace = (rect: Rect): AvailableSpace => {
-      const { top, left, bottom, right } = rect;
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      return {
-        spaceTop: top,
-        spaceLeft: left,
-        spaceRight: viewportWidth - right,
-        spaceBottom: viewportHeight - bottom,
-      };
-    };
-
-    // Helper function to get the anchor element
-    const getAnchorElement = () => {
-      if (typeof anchorRef === 'string') {
-        return document.getElementById(anchorRef);
-      }
-      return anchorRef?.current || null;
-    };
-
-    const anchorElement = getAnchorElement();
-    const anchorRect = anchorElement?.getBoundingClientRect();
-
-    if (!isWrapped && anchorRect) {
-      const availableSpace = getAvailableSpace(anchorRect);
-      switch (modalPosition) {
-        case 'top':
-          if (availableSpace.spaceTop < (modalProperties?.height ?? 150)) {
-            modalPosition = 'bottom';
-          }
-          break;
-        case 'left':
-          if (availableSpace.spaceLeft < (modalProperties?.width ?? 480)) {
-            modalPosition = 'right';
-          }
-          break;
-        case 'right':
-          if (availableSpace.spaceRight < (modalProperties?.width ?? 480)) {
-            modalPosition = 'left';
-          }
-          break;
-        case 'bottom':
-          if (availableSpace.spaceBottom < (modalProperties?.height ?? 150)) {
-            modalPosition = 'top';
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    // Specify for the wrapper div left position
-    const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
-      if (anchorRefLeftNum) {
-        return anchorRefLeftNum;
-      }
-      return 0;
-    };
-
-    // Specify for the arrow position in left or top
-    const getArrowClassName = () => {
-      if (leftTopArrow && modalPosition === 'right') {
-        return 'left-top-arrow';
-      }
-      return modalPosition === 'right' ? 'left-middle-arrow' : '';
-    };
-    const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
-
-    // Specify specific wrapper modal position
-    const firstAnchor =
-      firstAnchorRef?.current &&
-      firstAnchorRef?.current?.getBoundingClientRect().left -
-        anchorLeftDistanceForWrapper;
-
-    // Specifying the modal top
-    const calculateModalTop = () => {
-      const safeHeight = modalProperties?.height ?? 0;
-      if (modalPosition === 'bottom') {
-        return isWrapped
-          ? modalPositionState.top + (extraTopSpace?.wrappedModal ?? 5)
-          : modalPositionState.top + (extraTopSpace?.normalModal ?? 10);
-      } else if (modalPosition === 'right') {
-        return leftTopArrow
-          ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
-          : modalPositionState?.top -
-              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
-      } else if (modalPosition === 'top') {
-        return (
-          modalPositionState.top -
-          (safeHeight + (extraTopSpace?.normalModal ?? 10))
-        );
-      }
-      return modalPositionState.top - safeHeight / 1.5;
-    };
-    const calculatedModalTop = calculateModalTop();
-
-    // Specifying the modal left
-    const calculateModalLeft = () => {
-      if (modalPosition === 'right') {
-        return (
-          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
-        );
-      } else if (firstAnchorRef) {
-        return firstAnchor;
-      } else if (modalPosition === 'left') {
-        return modalPositionState.left - (modalProperties?.width ?? 404) - 15;
-      } else {
-        return modalPositionState.left - (extraLeftSpace?.normal ?? 30);
-      }
-    };
-    const calculatedModalLeft = calculateModalLeft();
-
-    // Handle escape and enter functionality
-    const handleEsc = useEscapeKey('Escape');
-    const handleEnter = useEscapeKey('Enter');
-    handleEsc(outSideClick);
-    handleEnter(proceedButtonProps?.onClick);
-    useClickOutside(modalRef, outSideClick);
-
-    // Calculate the modal position
-    const calculatePosition = useCallback(() => {
-      const anchorRect = anchorElement?.getBoundingClientRect();
-      if (anchorRect) {
-        const { bottom, left } = anchorRect;
-        const { scrollX, scrollY } = window;
-        let topPosition = bottom + scrollY;
-        let leftPosition = left + scrollX;
-
-        setModalPositionState({
-          top: topPosition,
-          left: leftPosition,
-        });
-      }
-    }, [anchorElement]);
-
-    useEffect(() => {
-      const timeoutId = setTimeout(() => {
-        setIsVisible(true);
-        calculatePosition();
-      }, 100);
-      window.addEventListener('resize', calculatePosition);
-      window.addEventListener('scroll', calculatePosition);
-
-      return () => {
-        window.removeEventListener('resize', calculatePosition);
-        clearTimeout(timeoutId);
-        window.removeEventListener('scroll', calculatePosition);
-      };
-    }, [calculatePosition]);
-
-    const {
-      width: modalWidth,
-      height: modalHeight,
-      borderRadius: modalBorderRadius = 4,
-      zIndex: modalZIndex = 99,
-      boxShadow: modalBoxShadow,
-    } = modalProperties || {};
-
-    const {
-      width: wrapperWidth = 35,
-      zIndex: wrapperZIndex = 101,
-      boxShadow: wrapperBoxShadow,
-    } = wrapperProperties || {};
-    const { isOverlay, backgroundColorOverlay, zIndexOverlay } = overlay || {};
-
-    if (isWrapped && isPopOver) {
-      return null;
-    }
-
-    return createPortal(
-      <>
-        {isOverlay && (
-          <div
-            className={classNames('ff-mini-modal-overlay')}
-            style={{
-              zIndex: zIndexOverlay ?? 98,
-              backgroundColor: backgroundColorOverlay ?? 'transparent',
-            }}
-            onClick={cancelButtonProps?.onClick}
-          ></div>
-        )}
-        <div
-          ref={ref || modalRef}
-          className={classNames('ff-mini-edit-modal-container', {
-            modalVisible: isVisible,
-            animatedModal: isAnimated,
-          })}
-          style={{
-            top: `${calculatedModalTop}px`,
-            left: `${calculatedModalLeft}px`,
-          }}
-        >
-          {isPopOver && (
-            <div
-              className={`popover-arrow popover-arrow-${
-                modalPosition === 'right'
-                  ? 'left'
-                  : modalPosition === 'top'
-                  ? 'bottom'
-                  : modalPosition === 'left'
-                  ? 'right'
-                  : 'top'
-              } ${getArrowClassName()}`}
-              style={{
-                zIndex: `${arrowZIndex}`,
-              }}
-            />
-          )}
-          {isWrapped && (
-            <div
-              className={'wrapped-div'}
-              style={{
-                left: `${calculatedAnchorRefLeft}px`,
-                width: `${wrapperWidth}px`,
-                zIndex: `${wrapperZIndex}`,
-                boxShadow:
-                  wrapperBoxShadow ??
-                  `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`,
-              }}
-            ></div>
-          )}
-          <div
-            className={classNames('mini-edit-modal', {
-              'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
-              'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow,
-            })}
-            style={{
-              minWidth: isWrapped ? '358px' : '',
-              width: `${modalWidth}px`,
-              height: `${modalHeight}px`,
-              borderRadius: `${modalBorderRadius}px`,
-              zIndex: `${modalZIndex}`,
-              boxShadow: `${
-                modalBoxShadow ??
-                '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
-              }`,
-            }}
-          >
-            {headerProps ? (
-              <Typography as="div">{headerProps}</Typography>
-            ) : isIconModel ? (
-              <></>
-            ) : (
-              <Typography as="header">
-                <Typography as="h2">Header text</Typography>
-                <hr />
-              </Typography>
-            )}
-            <div>{childContent}</div>
-            {footerContent ? (
-              <Typography as="footer">{footerContent}</Typography>
-            ) : isIconModel ? (
-              <></>
-            ) : (
-              <footer className="modal-footer">
-                <Button
-                  variant="primary"
-                  className="btn-cancel"
-                  onClick={cancelButtonProps?.onClick}
-                  label={cancelButtonProps?.text}
-                />
-                <Button
-                  variant="secondary"
-                  className="btn-proceed"
-                  label={proceedButtonProps?.text}
-                  onClick={proceedButtonProps?.onClick}
-                />
-              </footer>
-            )}
-          </div>
-        </div>
-      </>,
-      document.body
-    );
-  }
-);
-
-export default MiniModal;
+import { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { createPortal } from 'react-dom';
+import { MiniEditModalProps, Rect, AvailableSpace } from './types.js';
+import Button from '../Button/Button.js';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
+import useClickOutside from '../../hooks/useClickOutside';
+import classNames from 'classnames';
+import './MiniModal.scss';
+import Typography from '../Typography';
+
+const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
+  (
+    {
+      anchorRef,
+      headerProps,
+      childContent,
+      cancelButtonProps = () => {},
+      proceedButtonProps = () => {},
+      footerContent,
+      isWrapped = false,
+      isAnimated = false,
+      isPopOver = false,
+      modalPosition = 'bottom',
+      leftTopArrow = false,
+      firstAnchorRef,
+      anchorRefLeftNum,
+      modalProperties,
+      anchorLeftDistanceForWrapper = 170,
+      extraTopSpace,
+      extraRightSpace,
+      extraLeftSpace,
+      isIconModel,
+      wrapperProperties,
+      arrowProperties,
+      arrowZIndex,
+      overlay,
+      outSideClick,
+    },
+    ref
+  ) => {
+    const [modalPositionState, setModalPositionState] = useState({
+      top: 0,
+      left: 0,
+    });
+    const [isVisible, setIsVisible] = useState(false);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const {
+      width: modalWidth,
+      height: modalHeight,
+      borderRadius: modalBorderRadius = 4,
+      zIndex: modalZIndex = 99,
+      boxShadow: modalBoxShadow,
+      left: modalLeft,
+      top: modalTop,
+    } = modalProperties || {};
+
+    const {
+      left: popOverLeft,
+      top: popOverTop,
+      size: popOverSize = 10,
+    } = arrowProperties || {};
+    // Function to calculate available space
+    const getAvailableSpace = (rect: Rect): AvailableSpace => {
+      const { top, left, bottom, right } = rect;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      return {
+        spaceTop: top,
+        spaceLeft: left,
+        spaceRight: viewportWidth - right,
+        spaceBottom: viewportHeight - bottom,
+      };
+    };
+
+    // Helper function to get the anchor element
+    const getAnchorElement = () => {
+      if (typeof anchorRef === 'string') {
+        return document.getElementById(anchorRef);
+      }
+      return anchorRef?.current || null;
+    };
+
+    const anchorElement = getAnchorElement();
+    const anchorRect = anchorElement?.getBoundingClientRect();
+
+    if (!isWrapped && anchorRect) {
+      const availableSpace = getAvailableSpace(anchorRect);
+      switch (modalPosition) {
+        case 'top':
+          if (availableSpace.spaceTop < (modalProperties?.height ?? 150)) {
+            modalPosition = 'bottom';
+          }
+          break;
+        case 'left':
+          if (availableSpace.spaceLeft < (modalProperties?.width ?? 480)) {
+            modalPosition = 'right';
+          }
+          break;
+        case 'right':
+          if (availableSpace.spaceRight < (modalProperties?.width ?? 480)) {
+            modalPosition = 'left';
+          }
+          break;
+        case 'bottom':
+          if (availableSpace.spaceBottom < (modalProperties?.height ?? 150)) {
+            modalPosition = 'top';
+          }
+          break;
+        default:
+          break;
+      }
+    }
+
+    // Specify for the wrapper div left position
+    const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
+      if (anchorRefLeftNum) {
+        return anchorRefLeftNum;
+      }
+      return 0;
+    };
+
+    // Specify for the arrow position in left or top
+    const getArrowClassName = () => {
+      if (leftTopArrow && modalPosition === 'right') {
+        return 'left-top-arrow';
+      }
+      return modalPosition === 'right' ? 'left-middle-arrow' : '';
+    };
+    const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
+
+    // Specify specific wrapper modal position
+    const firstAnchor =
+      firstAnchorRef?.current &&
+      firstAnchorRef?.current?.getBoundingClientRect().left -
+        anchorLeftDistanceForWrapper;
+
+    // Specifying the modal top
+    const calculateModalTop = () => {
+      const safeHeight = modalProperties?.height ?? 0;
+      if (modalPosition === 'bottom') {
+        return isWrapped
+          ? modalPositionState.top + (extraTopSpace?.wrappedModal ?? 5)
+          : modalPositionState.top + (extraTopSpace?.normalModal ?? 10);
+      } else if (modalPosition === 'right') {
+        return leftTopArrow
+          ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
+          : modalPositionState?.top -
+              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
+      } else if (modalPosition === 'top') {
+        return (
+          modalPositionState.top -
+          (safeHeight + (extraTopSpace?.normalModal ?? 10))
+        );
+      }
+      return modalPositionState.top - safeHeight / 1.5;
+    };
+    const calculatedModalTop = calculateModalTop();
+
+    // Specifying the modal left
+    const calculateModalLeft = () => {
+      if (modalPosition === 'right') {
+        return (
+          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
+        );
+      } else if (firstAnchorRef) {
+        return firstAnchor;
+      } else if (modalPosition === 'left') {
+        return modalPositionState.left - (modalProperties?.width ?? 404) - 15;
+      } else {
+        return modalPositionState.left - (extraLeftSpace?.normal ?? 30);
+      }
+    };
+    const calculatedModalLeft = calculateModalLeft();
+
+    // Handle escape and enter functionality
+    const handleEsc = useEscapeKey('Escape');
+    const handleEnter = useEscapeKey('Enter');
+    handleEsc(outSideClick);
+    handleEnter(proceedButtonProps?.onClick);
+    useClickOutside(modalRef, outSideClick);
+
+    // Calculate the modal position
+    const calculatePosition = useCallback(() => {
+      const anchorRect = anchorElement?.getBoundingClientRect();
+      if (anchorRect) {
+        const { bottom, left } = anchorRect;
+        const { scrollX, scrollY } = window;
+        let topPosition = bottom + scrollY;
+        let leftPosition = left + scrollX;
+
+        setModalPositionState({
+          top: topPosition,
+          left: leftPosition,
+        });
+      }
+    }, [anchorElement]);
+
+    useEffect(() => {
+      const timeoutId = setTimeout(() => {
+        setIsVisible(true);
+        calculatePosition();
+      }, 100);
+      window.addEventListener('resize', calculatePosition);
+      window.addEventListener('scroll', calculatePosition);
+
+      return () => {
+        window.removeEventListener('resize', calculatePosition);
+        clearTimeout(timeoutId);
+        window.removeEventListener('scroll', calculatePosition);
+      };
+    }, [calculatePosition]);
+
+    const {
+      width: wrapperWidth = 35,
+      zIndex: wrapperZIndex = 101,
+      boxShadow: wrapperBoxShadow,
+    } = wrapperProperties || {};
+    const { isOverlay, backgroundColorOverlay, zIndexOverlay } = overlay || {};
+
+    if (isWrapped && isPopOver) {
+      return null;
+    }
+
+    return createPortal(
+      <>
+        {isOverlay && (
+          <div
+            className={classNames('ff-mini-modal-overlay')}
+            style={{
+              zIndex: zIndexOverlay ?? 98,
+              backgroundColor: backgroundColorOverlay ?? 'transparent',
+            }}
+            onClick={cancelButtonProps?.onClick}
+          ></div>
+        )}
+        <div
+          ref={ref || modalRef}
+          className={classNames('ff-mini-edit-modal-container', {
+            modalVisible: isVisible,
+            animatedModal: isAnimated,
+          })}
+          style={{
+            top: `${modalTop ?? calculatedModalTop}px`,
+            left: `${modalLeft ?? calculatedModalLeft}px`,
+          }}
+        >
+          {isPopOver && (
+            <div
+              className={`popover-arrow popover-arrow-${
+                modalPosition === 'right'
+                  ? 'left'
+                  : modalPosition === 'top'
+                  ? 'bottom'
+                  : modalPosition === 'left'
+                  ? 'right'
+                  : 'top'
+              } ${getArrowClassName()}`}
+              style={{
+                zIndex: `${arrowZIndex}`,
+                top: `${popOverTop && popOverTop}px`,
+                left: `${popOverLeft && popOverLeft}px`,
+                borderWidth: `${
+                  modalPosition === 'right'
+                    ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
+                    : modalPosition === 'top'
+                    ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
+                    : modalPosition === 'left'
+                    ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
+                    : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
+                }`,
+              }}
+            />
+          )}
+          {isWrapped && (
+            <div
+              className={'wrapped-div'}
+              style={{
+                left: `${calculatedAnchorRefLeft}px`,
+                width: `${wrapperWidth}px`,
+                zIndex: `${wrapperZIndex}`,
+                boxShadow:
+                  wrapperBoxShadow ??
+                  `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`,
+              }}
+            ></div>
+          )}
+          <div
+            className={classNames('mini-edit-modal', {
+              'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
+              'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow,
+            })}
+            style={{
+              minWidth: isWrapped ? '358px' : '',
+              width: `${modalWidth}px`,
+              height: `${modalHeight}px`,
+              borderRadius: `${modalBorderRadius}px`,
+              zIndex: `${modalZIndex}`,
+              boxShadow: `${
+                modalBoxShadow ??
+                '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
+              }`,
+            }}
+          >
+            {headerProps ? (
+              <Typography as="div">{headerProps}</Typography>
+            ) : isIconModel ? (
+              <></>
+            ) : (
+              <Typography as="header">
+                <Typography as="h2">Header text</Typography>
+                <hr />
+              </Typography>
+            )}
+            <div>{childContent}</div>
+            {footerContent ? (
+              <Typography as="footer">{footerContent}</Typography>
+            ) : isIconModel ? (
+              <></>
+            ) : (
+              <footer className="modal-footer">
+                <Button
+                  variant="primary"
+                  className="btn-cancel"
+                  onClick={cancelButtonProps?.onClick}
+                  label={cancelButtonProps?.text}
+                />
+                <Button
+                  variant="secondary"
+                  className="btn-proceed"
+                  label={proceedButtonProps?.text}
+                  onClick={proceedButtonProps?.onClick}
+                />
+              </footer>
+            )}
+          </div>
+        </div>
+      </>,
+      document.body
+    );
+  }
+);
+
+export default MiniModal;