@wordpress/block-editor
Version:
83 lines (78 loc) • 2.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useZoomOut = useZoomOut;
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _store = require("../store");
var _lockUnlock = require("../lock-unlock");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
* Concepts:
* - If we most recently changed the zoom level for them (in or out), we always resetZoomLevel() level when unmounting.
* - If the user most recently changed the zoom level (manually toggling), we do nothing when unmounting.
*
* @param {boolean} enabled If we should enter into zoomOut mode or not
*/
function useZoomOut(enabled = true) {
const {
setZoomLevel,
resetZoomLevel
} = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
/**
* We need access to both the value and the function. The value is to trigger a useEffect hook
* and the function is to check zoom out within another hook without triggering a re-render.
*/
const {
isZoomedOut,
isZoomOut
} = (0, _data.useSelect)(select => {
const {
isZoomOut: _isZoomOut
} = (0, _lockUnlock.unlock)(select(_store.store));
return {
isZoomedOut: _isZoomOut(),
isZoomOut: _isZoomOut
};
}, []);
const controlZoomLevelRef = (0, _element.useRef)(false);
const isEnabledRef = (0, _element.useRef)(enabled);
/**
* This hook tracks if the zoom state was changed manually by the user via clicking
* the zoom out button. We only want this to run when isZoomedOut changes, so we use
* a ref to track the enabled state.
*/
(0, _element.useEffect)(() => {
// If the zoom state changed (isZoomOut) and it does not match the requested zoom
// state (zoomOut), then it means the user manually changed the zoom state while
// this hook was mounted, and we should no longer control the zoom state.
if (isZoomedOut !== isEnabledRef.current) {
controlZoomLevelRef.current = false;
}
}, [isZoomedOut]);
(0, _element.useEffect)(() => {
isEnabledRef.current = enabled;
if (enabled !== isZoomOut()) {
controlZoomLevelRef.current = true;
if (enabled) {
setZoomLevel('auto-scaled');
} else {
resetZoomLevel();
}
}
return () => {
// If we are controlling zoom level and are zoomed out, reset the zoom level.
if (controlZoomLevelRef.current && isZoomOut()) {
resetZoomLevel();
}
};
}, [enabled, isZoomOut, resetZoomLevel, setZoomLevel]);
}
//# sourceMappingURL=use-zoom-out.js.map