@wordpress/block-editor
Version:
8 lines (7 loc) • 3.55 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/hooks/use-zoom-out.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.\n * Concepts:\n * - If we most recently changed the zoom level for them (in or out), we always resetZoomLevel() level when unmounting.\n * - If the user most recently changed the zoom level (manually toggling), we do nothing when unmounting.\n *\n * @param {boolean} enabled If we should enter into zoomOut mode or not\n */\nexport function useZoomOut( enabled = true ) {\n\tconst { setZoomLevel, resetZoomLevel } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\n\t/**\n\t * We need access to both the value and the function. The value is to trigger a useEffect hook\n\t * and the function is to check zoom out within another hook without triggering a re-render.\n\t */\n\tconst { isZoomedOut, isZoomOut } = useSelect( ( select ) => {\n\t\tconst { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );\n\t\treturn {\n\t\t\tisZoomedOut: _isZoomOut(),\n\t\t\tisZoomOut: _isZoomOut,\n\t\t};\n\t}, [] );\n\n\tconst controlZoomLevelRef = useRef( false );\n\tconst isEnabledRef = useRef( enabled );\n\n\t/**\n\t * This hook tracks if the zoom state was changed manually by the user via clicking\n\t * the zoom out button. We only want this to run when isZoomedOut changes, so we use\n\t * a ref to track the enabled state.\n\t */\n\tuseEffect( () => {\n\t\t// If the zoom state changed (isZoomOut) and it does not match the requested zoom\n\t\t// state (zoomOut), then it means the user manually changed the zoom state while\n\t\t// this hook was mounted, and we should no longer control the zoom state.\n\t\tif ( isZoomedOut !== isEnabledRef.current ) {\n\t\t\tcontrolZoomLevelRef.current = false;\n\t\t}\n\t}, [ isZoomedOut ] );\n\n\tuseEffect( () => {\n\t\tisEnabledRef.current = enabled;\n\n\t\tif ( enabled !== isZoomOut() ) {\n\t\t\tcontrolZoomLevelRef.current = true;\n\n\t\t\tif ( enabled ) {\n\t\t\t\tsetZoomLevel( 'auto-scaled' );\n\t\t\t} else {\n\t\t\t\tresetZoomLevel();\n\t\t\t}\n\t\t}\n\n\t\treturn () => {\n\t\t\t// If we are controlling zoom level and are zoomed out, reset the zoom level.\n\t\t\tif ( controlZoomLevelRef.current && isZoomOut() ) {\n\t\t\t\tresetZoomLevel();\n\t\t\t}\n\t\t};\n\t}, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] );\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuC;AACvC,qBAAkC;AAKlC,mBAA0C;AAC1C,yBAAuB;AAUhB,SAAS,WAAY,UAAU,MAAO;AAC5C,QAAM,EAAE,cAAc,eAAe,QAAI;AAAA,QACxC,yBAAa,aAAAA,KAAiB;AAAA,EAC/B;AAMA,QAAM,EAAE,aAAa,UAAU,QAAI,uBAAW,CAAE,WAAY;AAC3D,UAAM,EAAE,WAAW,WAAW,QAAI,2BAAQ,OAAQ,aAAAA,KAAiB,CAAE;AACrE,WAAO;AAAA,MACN,aAAa,WAAW;AAAA,MACxB,WAAW;AAAA,IACZ;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,0BAAsB,uBAAQ,KAAM;AAC1C,QAAM,mBAAe,uBAAQ,OAAQ;AAOrC,gCAAW,MAAM;AAIhB,QAAK,gBAAgB,aAAa,SAAU;AAC3C,0BAAoB,UAAU;AAAA,IAC/B;AAAA,EACD,GAAG,CAAE,WAAY,CAAE;AAEnB,gCAAW,MAAM;AAChB,iBAAa,UAAU;AAEvB,QAAK,YAAY,UAAU,GAAI;AAC9B,0BAAoB,UAAU;AAE9B,UAAK,SAAU;AACd,qBAAc,aAAc;AAAA,MAC7B,OAAO;AACN,uBAAe;AAAA,MAChB;AAAA,IACD;AAEA,WAAO,MAAM;AAEZ,UAAK,oBAAoB,WAAW,UAAU,GAAI;AACjD,uBAAe;AAAA,MAChB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,SAAS,WAAW,gBAAgB,YAAa,CAAE;AACzD;",
"names": ["blockEditorStore"]
}