orcs-design-system/es/components/SideNavV2/utils/resizeUtils.js

TeamForm's Design System, aka: ORCS

import { EXPANDED_SIZE } from "../constants/sideNav";

/**
 * Utility functions for handling resize operations in SideNavV2
 *
 * Provides functions for calculating resize dimensions, managing cursor states,
 * and handling both desktop and mobile resize scenarios.
 */

/**
 * Calculates the clamped width for desktop resize operations
 *
 * @param {number} clientX - Mouse X position from event
 * @param {Element} sideNavItems - SideNavItems DOM element
 * @param {Object} currentItem - Current expanded item data
 * @returns {number} Clamped width value within allowed bounds
 */
export const calculateDesktopWidth = (clientX, sideNavItems, currentItem) => {
  if (!sideNavItems || !sideNavItems.getBoundingClientRect) {
    console.warn("calculateDesktopWidth: sideNavItems must be a valid DOM element");
    return EXPANDED_SIZE.normal;
  }
  if (typeof clientX !== "number" || isNaN(clientX)) {
    console.warn("calculateDesktopWidth: clientX must be a valid number");
    return EXPANDED_SIZE.normal;
  }
  const sideNavRect = sideNavItems.getBoundingClientRect();
  const newWidth = clientX - sideNavRect.right;
  const isLarge = currentItem === null || currentItem === void 0 ? void 0 : currentItem.large;
  const minWidth = isLarge ? EXPANDED_SIZE.largeMin : EXPANDED_SIZE.normalMin;
  const maxWidth = isLarge ? EXPANDED_SIZE.largeMax : EXPANDED_SIZE.normalMax;
  return Math.max(minWidth, Math.min(maxWidth, newWidth));
};

/**
 * Calculates the clamped height for mobile resize operations
 *
 * @param {number} clientY - Mouse Y position from event
 * @param {number} resizeStartY - Starting Y position when resize began
 * @param {number} resizeStartHeight - Starting height when resize began
 * @param {Object} currentItem - Current expanded item data
 * @returns {number} Clamped height value within allowed bounds
 */
export const calculateMobileHeight = (clientY, resizeStartY, resizeStartHeight, currentItem) => {
  if (typeof clientY !== "number" || isNaN(clientY)) {
    console.warn("calculateMobileHeight: clientY must be a valid number");
    return resizeStartHeight || EXPANDED_SIZE.normal;
  }
  if (typeof resizeStartY !== "number" || isNaN(resizeStartY)) {
    console.warn("calculateMobileHeight: resizeStartY must be a valid number");
    return resizeStartHeight || EXPANDED_SIZE.normal;
  }
  if (typeof resizeStartHeight !== "number" || isNaN(resizeStartHeight)) {
    console.warn("calculateMobileHeight: resizeStartHeight must be a valid number");
    return EXPANDED_SIZE.normal;
  }
  const deltaY = clientY - resizeStartY;
  const newHeight = resizeStartHeight - deltaY; // Reversed direction

  const isLarge = currentItem === null || currentItem === void 0 ? void 0 : currentItem.large;
  const minHeight = isLarge ? EXPANDED_SIZE.largeMin : EXPANDED_SIZE.normalMin;
  const maxHeight = isLarge ? EXPANDED_SIZE.largeMax : EXPANDED_SIZE.normalMax;
  return Math.max(minHeight, Math.min(maxHeight, newHeight));
};

/**
 * Gets the initial size for an expanded item
 *
 * @param {Object} item - Navigation item data
 * @param {boolean} isSmallScreen - Whether currently on a small screen
 * @returns {number} Initial size (width for desktop, height for mobile)
 */
export const getInitialSize = function (item) {
  let isSmallScreen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  if (!item || typeof item !== "object") {
    console.warn("getInitialSize: item must be a valid object");
    return EXPANDED_SIZE.normal;
  }
  const isLarge = item === null || item === void 0 ? void 0 : item.large;
  const baseSize = isLarge ? EXPANDED_SIZE.large : EXPANDED_SIZE.normal;
  if (isSmallScreen) {
    // For mobile, use the same base size but apply it to height
    return baseSize;
  }

  // For desktop, return width
  return baseSize;
};

/**
 * Applies resize cursor styles to document body
 *
 * @param {boolean} isSmallScreen - Whether currently on a small screen
 */
export const applyResizeCursor = isSmallScreen => {
  if (typeof document === "undefined") {
    return; // Handle SSR
  }
  try {
    document.body.style.cursor = isSmallScreen ? "row-resize" : "col-resize";
    document.body.style.userSelect = "none";
  } catch (error) {
    console.warn("Failed to apply resize cursor styles:", error);
  }
};

/**
 * Removes resize cursor styles from document body
 */
export const removeResizeCursor = () => {
  if (typeof document === "undefined") {
    return; // Handle SSR
  }
  try {
    document.body.style.cursor = "";
    document.body.style.userSelect = "";
  } catch (error) {
    console.warn("Failed to remove resize cursor styles:", error);
  }
};