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

UI components for WordPress.

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

/**
 * WordPress dependencies
 */
import { Children, Component, cloneElement, isEmptyElement } from '@wordpress/element';
/**
 * Internal dependencies
 */

import SlotFillContext from './context';
/**
 * Whether the argument is a function.
 *
 * @param {*} maybeFunc The argument to check.
 * @return {boolean} True if the argument is a function, false otherwise.
 */

function isFunction(maybeFunc) {
  return typeof maybeFunc === 'function';
}

class SlotComponent extends Component {
  constructor() {
    super(...arguments);
    this.isUnmounted = false;
  }

  componentDidMount() {
    const {
      registerSlot
    } = this.props;
    this.isUnmounted = false;
    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);
    }
  }

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

    super.forceUpdate();
  }

  render() {
    var _getFills;

    const {
      children,
      name,
      fillProps = {},
      getFills
    } = this.props;
    const fills = ((_getFills = getFills(name, this)) !== null && _getFills !== void 0 ? _getFills : []).map(fill => {
      const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;
      return Children.map(fillChildren, (child, childIndex) => {
        if (!child || typeof child === 'string') {
          return child;
        }

        const childKey = child.key || childIndex;
        return 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.
    element => !isEmptyElement(element));
    return createElement(Fragment, null, isFunction(children) ? children(fills) : fills);
  }

}

const Slot = props => createElement(SlotFillContext.Consumer, null, _ref => {
  let {
    registerSlot,
    unregisterSlot,
    getFills
  } = _ref;
  return createElement(SlotComponent, _extends({}, props, {
    registerSlot: registerSlot,
    unregisterSlot: unregisterSlot,
    getFills: getFills
  }));
});

export default Slot;
//# sourceMappingURL=slot.js.map