@wordpress/components/build-module/box-control/visualizer.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useRef, useEffect, useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { Container, TopView, RightView, BottomView, LeftView } from './styles/box-control-visualizer-styles';
import { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES } from './utils';
export default function BoxControlVisualizer({
  children,
  showValues = DEFAULT_VISUALIZER_VALUES,
  values: valuesProp = DEFAULT_VALUES,
  ...props
}) {
  const isPositionAbsolute = !children;
  return createElement(Container, _extends({}, props, {
    isPositionAbsolute: isPositionAbsolute,
    "aria-hidden": "true"
  }), createElement(Sides, {
    showValues: showValues,
    values: valuesProp
  }), children);
}

function Sides({
  showValues = DEFAULT_VISUALIZER_VALUES,
  values
}) {
  const {
    top,
    right,
    bottom,
    left
  } = values;
  return createElement(Fragment, null, createElement(Top, {
    isVisible: showValues.top,
    value: top
  }), createElement(Right, {
    isVisible: showValues.right,
    value: right
  }), createElement(Bottom, {
    isVisible: showValues.bottom,
    value: bottom
  }), createElement(Left, {
    isVisible: showValues.left,
    value: left
  }));
}

function Top({
  isVisible = false,
  value
}) {
  const height = value;
  const animationProps = useSideAnimation(height);
  const isActive = animationProps.isActive || isVisible;
  return createElement(TopView, {
    isActive: isActive,
    style: {
      height
    }
  });
}

function Right({
  isVisible = false,
  value
}) {
  const width = value;
  const animationProps = useSideAnimation(width);
  const isActive = animationProps.isActive || isVisible;
  return createElement(RightView, {
    isActive: isActive,
    style: {
      width
    }
  });
}

function Bottom({
  isVisible = false,
  value
}) {
  const height = value;
  const animationProps = useSideAnimation(height);
  const isActive = animationProps.isActive || isVisible;
  return createElement(BottomView, {
    isActive: isActive,
    style: {
      height
    }
  });
}

function Left({
  isVisible = false,
  value
}) {
  const width = value;
  const animationProps = useSideAnimation(width);
  const isActive = animationProps.isActive || isVisible;
  return createElement(LeftView, {
    isActive: isActive,
    style: {
      width
    }
  });
}
/**
 * Custom hook that renders the "flash" animation whenever the value changes.
 *
 * @param {string} value Value of (box) side.
 */


function useSideAnimation(value) {
  const [isActive, setIsActive] = useState(false);
  const valueRef = useRef(value);
  const timeoutRef = useRef();

  const clearTimer = () => {
    if (timeoutRef.current) {
      window.clearTimeout(timeoutRef.current);
    }
  };

  useEffect(() => {
    if (value !== valueRef.current) {
      setIsActive(true);
      valueRef.current = value;
      clearTimer();
      timeoutRef.current = setTimeout(() => {
        setIsActive(false);
      }, 400);
    }

    return () => clearTimer();
  }, [value]);
  return {
    isActive
  };
}
//# sourceMappingURL=visualizer.js.map