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

Plugins module for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { map } from 'lodash';
import memoize from 'memize';
/**
 * WordPress dependencies
 */

import { Component } from '@wordpress/element';
import { addAction, removeAction } from '@wordpress/hooks';
/**
 * Internal dependencies
 */

import { PluginContextProvider } from '../plugin-context';
import { getPlugins } from '../../api';
/**
 * 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 Component {
  constructor() {
    super(...arguments);
    this.setPlugins = this.setPlugins.bind(this);
    this.memoizedContext = memoize((name, icon) => {
      return {
        name,
        icon
      };
    });
    this.state = this.getCurrentPluginsState();
  }

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

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

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

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

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

}

export default PluginArea;
//# sourceMappingURL=index.js.map