@wordpress/components/build/slot-fill/slot.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"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
class SlotComponent extends _element.Component {
  constructor() {
    super(...arguments);
    this.isUnmounted = false;
    this.bindNode = this.bindNode.bind(this);
  }

  componentDidMount() {
    const {
      registerSlot
    } = this.props;
    registerSlot(this.props.name, this);
  }

  componentWillUnmount() {
    const {
      unregisterSlot
    } = this.props;
    this.isUnmounted = true;
    unregisterSlot(this.props.name, this);
  }

  componentDidUpdate(prevProps) {
    const {
      name,
      unregisterSlot,
      registerSlot
    } = this.props;

    if (prevProps.name !== name) {
      unregisterSlot(prevProps.name);
      registerSlot(name, this);
    }
  }

  bindNode(node) {
    this.node = node;
  }

  forceUpdate() {
    if (this.isUnmounted) {
      return;
    }

    super.forceUpdate();
  }

  render() {
    const {
      children,
      name,
      fillProps = {},
      getFills
    } = this.props;
    const fills = (0, _lodash.map)(getFills(name, this), fill => {
      const fillChildren = (0, _lodash.isFunction)(fill.children) ? fill.children(fillProps) : fill.children;
      return _element.Children.map(fillChildren, (child, childIndex) => {
        if (!child || (0, _lodash.isString)(child)) {
          return child;
        }

        const childKey = child.key || childIndex;
        return (0, _element.cloneElement)(child, {
          key: childKey
        });
      });
    }).filter( // In some cases fills are rendered only when some conditions apply.
    // This ensures that we only use non-empty fills when rendering, i.e.,
    // it allows us to render wrappers only when the fills are actually present.
    (0, _lodash.negate)(_element.isEmptyElement));
    return (0, _element.createElement)(_element.Fragment, null, (0, _lodash.isFunction)(children) ? children(fills) : fills);
  }

}

const Slot = props => (0, _element.createElement)(_context.default.Consumer, null, ({
  registerSlot,
  unregisterSlot,
  getFills
}) => (0, _element.createElement)(SlotComponent, (0, _extends2.default)({}, props, {
  registerSlot: registerSlot,
  unregisterSlot: unregisterSlot,
  getFills: getFills
})));

var _default = Slot;
exports.default = _default;
//# sourceMappingURL=slot.js.map