aura-glass/dist/esm/components/speed-dial/SpeedDialAction.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useMemo, useCallback } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import styles from './SpeedDialAction.module.css.js';

// Calculate the position based on direction
const getPosition = (direction, index, totalActions, size) => {
  // Base spacing between buttons
  const spacing = size === 'small' ? 40 : size === 'large' ? 65 : 55;
  const offset = (index + 1) * spacing;
  switch (direction) {
    case 'up':
      return {
        bottom: `${offset}px`
      };
    case 'down':
      return {
        top: `${offset}px`
      };
    case 'left':
      return {
        right: `${offset}px`
      };
    case 'right':
      return {
        left: `${offset}px`
      };
    default:
      return {
        top: `${offset}px`
      };
  }
};
const getTransitionDelay = (index, totalActions, opening) => {
  if (!opening) {
    return `${(totalActions - 1 - index) * 30}ms`;
  }
  return `${index * 30}ms`;
};
const SpeedDialActionComponent = (props, ref) => {
  const {
    className,
    style,
    icon,
    tooltipTitle,
    tooltip,
    disabled = false,
    onClick,
    glass = false,
    index = 0,
    totalActions = 1,
    direction = 'up',
    transition = true,
    showTooltip = true,
    size = 'medium',
    open = false,
    ...rest
  } = props;
  const positionStyle = useMemo(() => getPosition(direction, index, totalActions, size), [direction, index, totalActions, size]);
  const transitionDelay = useMemo(() => transition ? getTransitionDelay(index, totalActions, open) : '0ms', [index, totalActions, open, transition]);
  const handleClick = useCallback(event => {
    event.stopPropagation();
    if (!disabled) {
      onClick?.(event);
    }
  }, [disabled, onClick]);
  const handleKeyDown = useCallback(event => {
    if (disabled) return;
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      onClick?.(event);
    }
  }, [disabled, onClick]);
  const tooltipContent = tooltipTitle ?? tooltip;
  const actionClassName = cn(styles.action, glass ? styles.actionGlass : styles.actionSolid, size === 'small' && styles.sizeSmall, size === 'medium' && styles.sizeMedium, size === 'large' && styles.sizeLarge, !open && direction === 'up' && styles.hiddenUp, !open && direction === 'down' && styles.hiddenDown, !open && direction === 'left' && styles.hiddenLeft, !open && direction === 'right' && styles.hiddenRight, disabled && styles.actionDisabled, !transition && styles.actionNoTransition, className);
  const tooltipClassName = cn(styles.tooltip, direction === 'up' && styles.tooltipUp, direction === 'down' && styles.tooltipDown, direction === 'left' && styles.tooltipLeft, direction === 'right' && styles.tooltipRight, open && showTooltip && tooltipContent && styles.tooltipVisible);
  return jsxs("div", {
    ref: ref,
    className: cn('glass-speed-dial-action', actionClassName),
    role: "button",
    tabIndex: disabled ? -1 : 0,
    "aria-disabled": disabled,
    style: {
      ...positionStyle,
      transitionDelay,
      ...(style ?? {})
    },
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    ...rest,
    children: [icon, tooltipContent && jsx("div", {
      className: tooltipClassName,
      children: tooltipContent
    })]
  });
};
const SpeedDialAction = /*#__PURE__*/forwardRef(SpeedDialActionComponent);
SpeedDialAction.displayName = 'SpeedDialAction';

export { SpeedDialAction as default };
//# sourceMappingURL=SpeedDialAction.js.map