@wordpress/block-editor
Version:
66 lines (62 loc) • 1.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BlockSelectionClearer;
exports.useBlockSelectionClearer = useBlockSelectionClearer;
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Pass the returned ref callback to an element that should clear block
* selection. Selection will only be cleared if the element is clicked directly,
* not if a child element is clicked.
*
* @return {import('react').RefCallback} Ref callback.
*/
function useBlockSelectionClearer() {
const {
getSettings,
hasSelectedBlock,
hasMultiSelection
} = (0, _data.useSelect)(_store.store);
const {
clearSelectedBlock
} = (0, _data.useDispatch)(_store.store);
const {
clearBlockSelection: isEnabled
} = getSettings();
return (0, _compose.useRefEffect)(node => {
if (!isEnabled) {
return;
}
function onMouseDown(event) {
if (!hasSelectedBlock() && !hasMultiSelection()) {
return;
}
// Only handle clicks on the element, not the children.
if (event.target !== node) {
return;
}
clearSelectedBlock();
}
node.addEventListener('mousedown', onMouseDown);
return () => {
node.removeEventListener('mousedown', onMouseDown);
};
}, [hasSelectedBlock, hasMultiSelection, clearSelectedBlock, isEnabled]);
}
function BlockSelectionClearer(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: useBlockSelectionClearer(),
...props
});
}
//# sourceMappingURL=index.js.map