UNPKG

@wordpress/block-editor

Version:
153 lines (151 loc) 4.7 kB
"use strict"; 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