@wordpress/compose
Version:
WordPress higher-order components (HOCs).
102 lines (96 loc) • 3.88 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = withGlobalEvents;
var _element = require("@wordpress/element");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _createHigherOrderComponent = require("../../utils/create-higher-order-component");
var _listener = _interopRequireDefault(require("./listener"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Listener instance responsible for managing document event handling.
*/const listener = new _listener.default();
/* eslint-disable jsdoc/no-undefined-types */
/**
* 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 {Record<keyof GlobalEventHandlersEventMap, 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 {any} Higher-order component.
*/
function withGlobalEvents(eventTypesToHandlers) {
(0, _deprecated.default)('wp.compose.withGlobalEvents', {
since: '5.7',
alternative: 'useEffect'
});
// @ts-ignore We don't need to fix the type-related issues because this is deprecated.
return (0, _createHigherOrderComponent.createHigherOrderComponent)(WrappedComponent => {
class Wrapper extends _element.Component {
constructor(/** @type {any} */props) {
super(props);
this.handleEvent = this.handleEvent.bind(this);
this.handleRef = this.handleRef.bind(this);
}
componentDidMount() {
Object.keys(eventTypesToHandlers).forEach(eventType => {
listener.add(eventType, this);
});
}
componentWillUnmount() {
Object.keys(eventTypesToHandlers).forEach(eventType => {
listener.remove(eventType, this);
});
}
handleEvent(/** @type {any} */event) {
const handler = eventTypesToHandlers[(/** @type {keyof GlobalEventHandlersEventMap} */
event.type
/* eslint-enable jsdoc/no-undefined-types */)];
if (typeof this.wrappedRef[handler] === 'function') {
this.wrappedRef[handler](event);
}
}
handleRef(/** @type {any} */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 /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
...this.props.ownProps,
ref: this.handleRef
});
}
}
return (0, _element.forwardRef)((props, ref) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
ownProps: props,
forwardedRef: ref
});
});
}, 'withGlobalEvents');
}
//# sourceMappingURL=index.js.map