@wordpress/components/build/slot-fill/fill.js

UI components for WordPress.

"use strict";

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

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

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

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

var _lodash = require("lodash");

var _context = _interopRequireDefault(require("./context"));

var _useSlot = _interopRequireDefault(require("./use-slot"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function FillComponent({
  name,
  children,
  registerFill,
  unregisterFill
}) {
  const slot = (0, _useSlot.default)(name);
  const ref = (0, _element.useRef)({
    name,
    children
  });
  (0, _element.useLayoutEffect)(() => {
    registerFill(name, ref.current);
    return () => unregisterFill(name, ref.current);
  }, []);
  (0, _element.useLayoutEffect)(() => {
    ref.current.children = children;

    if (slot) {
      slot.forceUpdate();
    }
  }, [children]);
  (0, _element.useLayoutEffect)(() => {
    if (name === ref.current.name) {
      // ignore initial effect
      return;
    }

    unregisterFill(ref.current.name, ref.current);
    ref.current.name = name;
    registerFill(name, ref.current);
  }, [name]);

  if (!slot || !slot.node) {
    return null;
  } // If a function is passed as a child, provide it with the fillProps.


  if ((0, _lodash.isFunction)(children)) {
    children = children(slot.props.fillProps);
  }

  return (0, _element.createPortal)(children, slot.node);
}

const Fill = props => (0, _element.createElement)(_context.default.Consumer, null, ({
  registerFill,
  unregisterFill
}) => (0, _element.createElement)(FillComponent, (0, _extends2.default)({}, props, {
  registerFill: registerFill,
  unregisterFill: unregisterFill
})));

var _default = Fill;
exports.default = _default;
//# sourceMappingURL=fill.js.map