How to use the @react-md/utils.getViewportBounds function in @react-md/utils

To help you get started, we’ve selected a few @react-md/utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mlaursen / react-md / packages / tooltip / src_old / utils.ts View on Github external
const vw = getViewportSize("width");
    if (
      left + offsetWidth + spacing > vw &&
      right - offsetWidth - spacing < 0
    ) {
      return "below";
    }

    const halvedWidth = (tooltip as HTMLSpanElement).offsetWidth / 2;
    left -= halvedWidth;
    right += halvedWidth;
  }

  if (left < getViewportBounds("width", vwMargin)) {
    return "right";
  } else if (right > getViewportBounds("width", vwMargin, false)) {
    return "left";
  }

  return "below";
}
github mlaursen / react-md / packages / tooltip / src_old / utils.ts View on Github external
const { offsetWidth } = tooltip;
    const spacing = unitToNumber(getSpacing(config));
    const vw = getViewportSize("width");
    if (
      left + offsetWidth + spacing > vw &&
      right - offsetWidth - spacing < 0
    ) {
      return "below";
    }

    const halvedWidth = (tooltip as HTMLSpanElement).offsetWidth / 2;
    left -= halvedWidth;
    right += halvedWidth;
  }

  if (left < getViewportBounds("width", vwMargin)) {
    return "right";
  } else if (right > getViewportBounds("width", vwMargin, false)) {
    return "left";
  }

  return "below";
}
github mlaursen / react-md / packages / tooltip / src_old / utils.ts View on Github external
export function determineBestPosition(
  container: Maybe,
  config: DeterminePositionConfig
): TooltipPosition {
  const { id, position, vwMargin, vhMargin } = config;
  if (position !== "auto") {
    return position;
  } else if (!container) {
    return "below";
  }

  const rect = container.getBoundingClientRect();
  if (rect.top > getViewportBounds("height", vhMargin)) {
    return "above";
  }

  let { left, right } = rect;
  const tooltip = document.getElementById(id);
  if (tooltip) {
    const { offsetWidth } = tooltip;
    const spacing = unitToNumber(getSpacing(config));
    const vw = getViewportSize("width");
    if (
      left + offsetWidth + spacing > vw &&
      right - offsetWidth - spacing < 0
    ) {
      return "below";
    }