@wordpress/components
Version:
UI components for WordPress.
64 lines (60 loc) • 1.89 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _view = require("../../view");
var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Slot(props, forwardedRef) {
const {
name,
fillProps = {},
as,
// `children` is not allowed. However, if it is passed,
// it will be displayed as is, so remove `children`.
// @ts-ignore
children,
...restProps
} = props;
const {
registerSlot,
unregisterSlot,
...registry
} = (0, _element.useContext)(_slotFillContext.default);
const ref = (0, _element.useRef)(null);
(0, _element.useLayoutEffect)(() => {
registerSlot(name, ref, fillProps);
return () => {
unregisterSlot(name, ref);
};
// We don't want to unregister and register the slot whenever
// `fillProps` change, which would cause the fill to be re-mounted. Instead,
// we can just update the slot (see hook below).
// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
}, [registerSlot, unregisterSlot, name]);
// fillProps may be an update that interacts with the layout, so we
// useLayoutEffect.
(0, _element.useLayoutEffect)(() => {
registry.updateSlot(name, fillProps);
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
as: as,
ref: (0, _compose.useMergeRefs)([forwardedRef, ref]),
...restProps
});
}
var _default = exports.default = (0, _element.forwardRef)(Slot);
//# sourceMappingURL=slot.js.map