pixel-react 1.5.3 → 1.5.4

package/src/components/MiniModal/MiniModal.tsx

@@ -1,290 +1,290 @@
-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,
-    },
-    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(cancelButtonProps?.onClick);
-    handleEnter(proceedButtonProps?.onClick);
-    useClickOutside(modalRef, cancelButtonProps.onClick);
-
-    // 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,
-    } = modalProperties || {};
-
-    const { width: wrapperWidth = 35, zIndex: wrapperZIndex = 101 } =
-      wrapperProperties || {};
-
-    if (isWrapped && isPopOver) {
-      return null;
-    }
-
-    return createPortal(
-      <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()}`}
-          />
-        )}
-        {isWrapped && (
-          <div
-            className={'wrapped-div'}
-            style={{
-              left: `${calculatedAnchorRefLeft}px`,
-              width: `${wrapperWidth}px`,
-              zIndex: `${wrapperZIndex}`,
-            }}
-          ></div>
-        )}
-        <div
-          className={classNames('mini-edit-modal', {
-            'mini-edit-modal-wrapper-shadow': !!isWrapped,
-            'mini-edit-modal-arrow-shadow': !!isPopOver,
-          })}
-          style={{
-            minWidth: isWrapped ? '358px' : '',
-            width: `${modalWidth}px`,
-            height: `${modalHeight}px`,
-            borderRadius: `${modalBorderRadius}px`,
-            zIndex: `${modalZIndex}`,
-          }}
-        >
-          {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,
+    },
+    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(cancelButtonProps?.onClick);
+    handleEnter(proceedButtonProps?.onClick);
+    useClickOutside(modalRef, cancelButtonProps.onClick);
+
+    // 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,
+    } = modalProperties || {};
+
+    const { width: wrapperWidth = 35, zIndex: wrapperZIndex = 101 } =
+      wrapperProperties || {};
+
+    if (isWrapped && isPopOver) {
+      return null;
+    }
+
+    return createPortal(
+      <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()}`}
+          />
+        )}
+        {isWrapped && (
+          <div
+            className={'wrapped-div'}
+            style={{
+              left: `${calculatedAnchorRefLeft}px`,
+              width: `${wrapperWidth}px`,
+              zIndex: `${wrapperZIndex}`,
+            }}
+          ></div>
+        )}
+        <div
+          className={classNames('mini-edit-modal', {
+            'mini-edit-modal-wrapper-shadow': !!isWrapped,
+            'mini-edit-modal-arrow-shadow': !!isPopOver,
+          })}
+          style={{
+            minWidth: isWrapped ? '358px' : '',
+            width: `${modalWidth}px`,
+            height: `${modalHeight}px`,
+            borderRadius: `${modalBorderRadius}px`,
+            zIndex: `${modalZIndex}`,
+          }}
+        >
+          {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;

package/src/components/MiniModal/index.ts

@@ -1 +1 @@
-export { default } from './MiniModal';
+export { default } from './MiniModal';