@wordpress/plugins/build/components/plugin-area/index.js

Plugins module 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 _lodash = require("lodash");

var _memize = _interopRequireDefault(require("memize"));

var _hooks = require("@wordpress/hooks");

var _pluginContext = require("../plugin-context");

var _api = require("../../api");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * A component that renders all plugin fills in a hidden div.
 *
 * @example
 * ```js
 * // Using ES5 syntax
 * var el = wp.element.createElement;
 * var PluginArea = wp.plugins.PluginArea;
 *
 * function Layout() {
 * 	return el(
 * 		'div',
 * 		{ scope: 'my-page' },
 * 		'Content of the page',
 * 		PluginArea
 * 	);
 * }
 * ```
 *
 * @example
 * ```js
 * // Using ESNext syntax
 * import { PluginArea } from '@wordpress/plugins';
 *
 * const Layout = () => (
 * 	<div>
 * 		Content of the page
 * 		<PluginArea scope="my-page" />
 * 	</div>
 * );
 * ```
 *
 * @return {WPComponent} The component to be rendered.
 */
class PluginArea extends _element.Component {
  constructor() {
    super(...arguments);
    this.setPlugins = this.setPlugins.bind(this);
    this.memoizedContext = (0, _memize.default)((name, icon) => {
      return {
        name,
        icon
      };
    });
    this.state = this.getCurrentPluginsState();
  }

  getCurrentPluginsState() {
    return {
      plugins: (0, _lodash.map)((0, _api.getPlugins)(this.props.scope), ({
        icon,
        name,
        render
      }) => {
        return {
          Plugin: render,
          context: this.memoizedContext(name, icon)
        };
      })
    };
  }

  componentDidMount() {
    (0, _hooks.addAction)('plugins.pluginRegistered', 'core/plugins/plugin-area/plugins-registered', this.setPlugins);
    (0, _hooks.addAction)('plugins.pluginUnregistered', 'core/plugins/plugin-area/plugins-unregistered', this.setPlugins);
  }

  componentWillUnmount() {
    (0, _hooks.removeAction)('plugins.pluginRegistered', 'core/plugins/plugin-area/plugins-registered');
    (0, _hooks.removeAction)('plugins.pluginUnregistered', 'core/plugins/plugin-area/plugins-unregistered');
  }

  setPlugins() {
    this.setState(this.getCurrentPluginsState);
  }

  render() {
    return (0, _element.createElement)("div", {
      style: {
        display: 'none'
      }
    }, (0, _lodash.map)(this.state.plugins, ({
      context,
      Plugin
    }) => (0, _element.createElement)(_pluginContext.PluginContextProvider, {
      key: context.name,
      value: context
    }, (0, _element.createElement)(Plugin, null))));
  }

}

var _default = PluginArea;
exports.default = _default;
//# sourceMappingURL=index.js.map