How to use the @react-md/utils.findSizingContainer 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 / MagicTooltipProvider.tsx View on Github external
private init = (id: string) => {
    const container: null | HTMLElement = document.querySelector(`[aria-describedby="${id}"]`);
    if (!container) {
      // tslint:disable-next-line:no-console
      console.error(
        'A tooltip\'s container must have the attribute `aria-describedby="TOOLTIP_ID"` for accessibility ' +
          `but none were found for a tooltip with id: \`${id}\`. This tooltip will be unable to be shown ` +
          "until this is fixed."
      );
      return;
    }

    if (!this.containers.find(({ container: c }) => c === container)) {
      const sizingContainer = findSizingContainer(container) as HTMLElement;
      sizingContainer.addEventListener("mouseenter", this.handleMouseEnter);

      this.containers.push({ container, sizingContainer });
    }
  };
github mlaursen / react-md / packages / states / src / ripples / utils.ts View on Github external
export function createRippleState(
  event: RippleEvent
): RippleState {
  const element =
    findSizingContainer(event.currentTarget) || event.currentTarget;
  const { offsetWidth, offsetHeight } = element;
  const type = getType(event);
  const { x, y } = getOrigin(event, element);

  const radius = getRadius(x, y, offsetWidth, offsetHeight);
  const size = radius * 2;
  return {
    startTime: Date.now(),
    style: {
      left: x - radius,
      top: y - radius,
      height: size,
      width: size,
    },
    type,
    holding: type !== "programmatic",