@wordpress/editor/build/components/zoom-out-toggle/index.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _icons = require("@wordpress/icons");
var _preferences = require("@wordpress/preferences");
var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
var _keycodes = require("@wordpress/keycodes");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const ZoomOutToggle = ({
  disabled
}) => {
  const {
    isZoomOut,
    showIconLabels,
    isDistractionFree
  } = (0, _data.useSelect)(select => ({
    isZoomOut: (0, _lockUnlock.unlock)(select(_blockEditor.store)).isZoomOut(),
    showIconLabels: select(_preferences.store).get('core', 'showIconLabels'),
    isDistractionFree: select(_preferences.store).get('core', 'distractionFree')
  }));
  const {
    resetZoomLevel,
    setZoomLevel
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_blockEditor.store));
  const {
    registerShortcut,
    unregisterShortcut
  } = (0, _data.useDispatch)(_keyboardShortcuts.store);
  (0, _element.useEffect)(() => {
    registerShortcut({
      name: 'core/editor/zoom',
      category: 'global',
      description: (0, _i18n.__)('Enter or exit zoom out.'),
      keyCombination: {
        // `primaryShift+0` (`ctrl+shift+0`) is the shortcut for switching
        // to input mode in Windows, so apply a different key combination.
        modifier: (0, _keycodes.isAppleOS)() ? 'primaryShift' : 'secondary',
        character: '0'
      }
    });
    return () => {
      unregisterShortcut('core/editor/zoom');
    };
  }, [registerShortcut, unregisterShortcut]);
  (0, _keyboardShortcuts.useShortcut)('core/editor/zoom', () => {
    if (isZoomOut) {
      resetZoomLevel();
    } else {
      setZoomLevel('auto-scaled');
    }
  }, {
    isDisabled: isDistractionFree
  });
  const handleZoomOut = () => {
    if (isZoomOut) {
      resetZoomLevel();
    } else {
      setZoomLevel('auto-scaled');
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
    accessibleWhenDisabled: true,
    disabled: disabled,
    onClick: handleZoomOut,
    icon: _icons.square,
    label: (0, _i18n.__)('Zoom Out'),
    isPressed: isZoomOut,
    size: "compact",
    showTooltip: !showIconLabels,
    className: "editor-zoom-out-toggle"
  });
};
var _default = exports.default = ZoomOutToggle;
//# sourceMappingURL=index.js.map