@wordpress/block-editor
Version:
153 lines (151 loc) • 4.7 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/block-toolbar/utils.js
var utils_exports = {};
__export(utils_exports, {
useShowHoveredOrFocusedGestures: () => useShowHoveredOrFocusedGestures
});
module.exports = __toCommonJS(utils_exports);
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_store = require("../../store/index.cjs");
var { clearTimeout, setTimeout } = window;
var DEBOUNCE_TIMEOUT = 200;
function useDebouncedShowGestures({
ref,
isFocused,
highlightParent,
debounceTimeout = DEBOUNCE_TIMEOUT
}) {
const { getSelectedBlockClientId, getBlockRootClientId } = (0, import_data.useSelect)(import_store.store);
const { toggleBlockHighlight } = (0, import_data.useDispatch)(import_store.store);
const timeoutRef = (0, import_element.useRef)();
const isDistractionFree = (0, import_data.useSelect)(
(select) => select(import_store.store).getSettings().isDistractionFree,
[]
);
const handleOnChange = (nextIsFocused) => {
if (nextIsFocused && isDistractionFree) {
return;
}
const selectedBlockClientId = getSelectedBlockClientId();
const clientId = highlightParent ? getBlockRootClientId(selectedBlockClientId) : selectedBlockClientId;
toggleBlockHighlight(clientId, nextIsFocused);
};
const getIsHovered = () => {
return ref?.current && ref.current.matches(":hover");
};
const shouldHideGestures = () => {
const isHovered = getIsHovered();
return !isFocused && !isHovered;
};
const clearTimeoutRef = () => {
const timeout = timeoutRef.current;
if (timeout && clearTimeout) {
clearTimeout(timeout);
}
};
const debouncedShowGestures = (event) => {
if (event) {
event.stopPropagation();
}
clearTimeoutRef();
handleOnChange(true);
};
const debouncedHideGestures = (event) => {
if (event) {
event.stopPropagation();
}
clearTimeoutRef();
timeoutRef.current = setTimeout(() => {
if (shouldHideGestures()) {
handleOnChange(false);
}
}, debounceTimeout);
};
(0, import_element.useEffect)(
() => () => {
handleOnChange(false);
clearTimeoutRef();
},
[]
);
return {
debouncedShowGestures,
debouncedHideGestures
};
}
function useShowHoveredOrFocusedGestures({
ref,
highlightParent = false,
debounceTimeout = DEBOUNCE_TIMEOUT
}) {
const [isFocused, setIsFocused] = (0, import_element.useState)(false);
const { debouncedShowGestures, debouncedHideGestures } = useDebouncedShowGestures({
ref,
debounceTimeout,
isFocused,
highlightParent
});
const registerRef = (0, import_element.useRef)(false);
const isFocusedWithin = () => {
return ref?.current && ref.current.contains(ref.current.ownerDocument.activeElement);
};
(0, import_element.useEffect)(() => {
const node = ref.current;
const handleOnFocus = () => {
if (isFocusedWithin()) {
setIsFocused(true);
debouncedShowGestures();
}
};
const handleOnBlur = () => {
if (!isFocusedWithin()) {
setIsFocused(false);
debouncedHideGestures();
}
};
if (node && !registerRef.current) {
node.addEventListener("focus", handleOnFocus, true);
node.addEventListener("blur", handleOnBlur, true);
registerRef.current = true;
}
return () => {
if (node) {
node.removeEventListener("focus", handleOnFocus);
node.removeEventListener("blur", handleOnBlur);
}
};
}, [
ref,
registerRef,
setIsFocused,
debouncedShowGestures,
debouncedHideGestures
]);
return {
onMouseMove: debouncedShowGestures,
onMouseLeave: debouncedHideGestures
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useShowHoveredOrFocusedGestures
});
//# sourceMappingURL=utils.cjs.map