@wordpress/compose/build/higher-order/with-global-events/index.js

WordPress higher-order components (HOCs).

"use strict";

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

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

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

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

var _lodash = require("lodash");

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

var _createHigherOrderComponent = _interopRequireDefault(require("../../utils/create-higher-order-component"));

var _listener = _interopRequireDefault(require("./listener"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Listener instance responsible for managing document event handling.
 *
 * @type {Listener}
 */
const listener = new _listener.default();
/**
 * Higher-order component creator which, given an object of DOM event types and
 * values corresponding to a callback function name on the component, will
 * create or update a window event handler to invoke the callback when an event
 * occurs. On behalf of the consuming developer, the higher-order component
 * manages unbinding when the component unmounts, and binding at most a single
 * event handler for the entire application.
 *
 * @deprecated
 *
 * @param {Object<string,string>} eventTypesToHandlers Object with keys of DOM
 *                                                     event type, the value a
 *                                                     name of the function on
 *                                                     the original component's
 *                                                     instance which handles
 *                                                     the event.
 *
 * @return {Function} Higher-order component.
 */

function withGlobalEvents(eventTypesToHandlers) {
  (0, _deprecated.default)('wp.compose.withGlobalEvents', {
    since: '5.7',
    alternative: 'useEffect'
  });
  return (0, _createHigherOrderComponent.default)(WrappedComponent => {
    class Wrapper extends _element.Component {
      constructor() {
        super(...arguments);
        this.handleEvent = this.handleEvent.bind(this);
        this.handleRef = this.handleRef.bind(this);
      }

      componentDidMount() {
        (0, _lodash.forEach)(eventTypesToHandlers, (handler, eventType) => {
          listener.add(eventType, this);
        });
      }

      componentWillUnmount() {
        (0, _lodash.forEach)(eventTypesToHandlers, (handler, eventType) => {
          listener.remove(eventType, this);
        });
      }

      handleEvent(event) {
        const handler = eventTypesToHandlers[event.type];

        if (typeof this.wrappedRef[handler] === 'function') {
          this.wrappedRef[handler](event);
        }
      }

      handleRef(el) {
        this.wrappedRef = el; // Any component using `withGlobalEvents` that is not setting a `ref`
        // will cause `this.props.forwardedRef` to be `null`, so we need this
        // check.

        if (this.props.forwardedRef) {
          this.props.forwardedRef(el);
        }
      }

      render() {
        return (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, this.props.ownProps, {
          ref: this.handleRef
        }));
      }

    }

    return (0, _element.forwardRef)((props, ref) => {
      return (0, _element.createElement)(Wrapper, {
        ownProps: props,
        forwardedRef: ref
      });
    });
  }, 'withGlobalEvents');
}
//# sourceMappingURL=index.js.map