@wordpress/block-editor/build/hooks/margin.js

Generic block editor.

"use strict";

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

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

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

var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));

var _blockPopover = _interopRequireDefault(require("../components/block-popover"));

var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function getComputedCSS(element, property) {
  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
}

function MarginVisualizer({
  clientId,
  attributes,
  forceShow
}) {
  const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
  const [style, setStyle] = (0, _element.useState)();
  const margin = attributes?.style?.spacing?.margin;
  (0, _element.useEffect)(() => {
    if (!blockElement) {
      return;
    }

    const top = getComputedCSS(blockElement, 'margin-top');
    const right = getComputedCSS(blockElement, 'margin-right');
    const bottom = getComputedCSS(blockElement, 'margin-bottom');
    const left = getComputedCSS(blockElement, 'margin-left');
    setStyle({
      borderTopWidth: top,
      borderRightWidth: right,
      borderBottomWidth: bottom,
      borderLeftWidth: left,
      top: top ? `-${top}` : 0,
      right: right ? `-${right}` : 0,
      bottom: bottom ? `-${bottom}` : 0,
      left: left ? `-${left}` : 0
    });
  }, [blockElement, margin]);
  const [isActive, setIsActive] = (0, _element.useState)(false);
  const valueRef = (0, _element.useRef)(margin);
  const timeoutRef = (0, _element.useRef)();

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

  (0, _element.useEffect)(() => {
    if (!(0, _isShallowEqual.default)(margin, valueRef.current) && !forceShow) {
      setIsActive(true);
      valueRef.current = margin;
      timeoutRef.current = setTimeout(() => {
        setIsActive(false);
      }, 400);
    }

    return () => {
      setIsActive(false);
      clearTimer();
    };
  }, [margin, forceShow]);

  if (!isActive && !forceShow) {
    return null;
  }

  return (0, _element.createElement)(_blockPopover.default, {
    clientId: clientId,
    __unstableCoverTarget: true,
    __unstableRefreshSize: margin,
    __unstablePopoverSlot: "block-toolbar",
    shift: false
  }, (0, _element.createElement)("div", {
    className: "block-editor__padding-visualizer",
    style: style
  }));
}
//# sourceMappingURL=margin.js.map