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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BoxControlVisualizer;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _boxControlVisualizerStyles = require("./styles/box-control-visualizer-styles");

var _utils = require("./utils");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BoxControlVisualizer({
  children,
  showValues = _utils.DEFAULT_VISUALIZER_VALUES,
  values: valuesProp = _utils.DEFAULT_VALUES,
  ...props
}) {
  const isPositionAbsolute = !children;
  return (0, _element.createElement)(_boxControlVisualizerStyles.Container, (0, _extends2.default)({}, props, {
    isPositionAbsolute: isPositionAbsolute,
    "aria-hidden": "true"
  }), (0, _element.createElement)(Sides, {
    showValues: showValues,
    values: valuesProp
  }), children);
}

function Sides({
  showValues = _utils.DEFAULT_VISUALIZER_VALUES,
  values
}) {
  const {
    top,
    right,
    bottom,
    left
  } = values;
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(Top, {
    isVisible: showValues.top,
    value: top
  }), (0, _element.createElement)(Right, {
    isVisible: showValues.right,
    value: right
  }), (0, _element.createElement)(Bottom, {
    isVisible: showValues.bottom,
    value: bottom
  }), (0, _element.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 (0, _element.createElement)(_boxControlVisualizerStyles.TopView, {
    isActive: isActive,
    style: {
      height
    }
  });
}

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

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

function Left({
  isVisible = false,
  value
}) {
  const width = value;
  const animationProps = useSideAnimation(width);
  const isActive = animationProps.isActive || isVisible;
  return (0, _element.createElement)(_boxControlVisualizerStyles.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] = (0, _element.useState)(false);
  const valueRef = (0, _element.useRef)(value);
  const timeoutRef = (0, _element.useRef)();

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

  (0, _element.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