@wordpress/edit-post/build-module/components/keyboard-shortcut-help-modal/index.js

Edit Post module for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { isString } from 'lodash';
/**
 * WordPress dependencies
 */

import { Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useShortcut, store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { withSelect, withDispatch, useSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import { textFormattingShortcuts } from './config';
import Shortcut from './shortcut';
import DynamicShortcut from './dynamic-shortcut';
import { store as editPostStore } from '../../store';
const MODAL_NAME = 'edit-post/keyboard-shortcut-help';

const ShortcutList = ({
  shortcuts
}) =>
/*
 * Disable reason: The `list` ARIA role is redundant but
 * Safari+VoiceOver won't announce the list otherwise.
 */

/* eslint-disable jsx-a11y/no-redundant-roles */
createElement("ul", {
  className: "edit-post-keyboard-shortcut-help-modal__shortcut-list",
  role: "list"
}, shortcuts.map((shortcut, index) => createElement("li", {
  className: "edit-post-keyboard-shortcut-help-modal__shortcut",
  key: index
}, isString(shortcut) ? createElement(DynamicShortcut, {
  name: shortcut
}) : createElement(Shortcut, shortcut))))
/* eslint-enable jsx-a11y/no-redundant-roles */
;

const ShortcutSection = ({
  title,
  shortcuts,
  className
}) => createElement("section", {
  className: classnames('edit-post-keyboard-shortcut-help-modal__section', className)
}, !!title && createElement("h2", {
  className: "edit-post-keyboard-shortcut-help-modal__section-title"
}, title), createElement(ShortcutList, {
  shortcuts: shortcuts
}));

const ShortcutCategorySection = ({
  title,
  categoryName,
  additionalShortcuts = []
}) => {
  const categoryShortcuts = useSelect(select => {
    return select(keyboardShortcutsStore).getCategoryShortcuts(categoryName);
  }, [categoryName]);
  return createElement(ShortcutSection, {
    title: title,
    shortcuts: categoryShortcuts.concat(additionalShortcuts)
  });
};

export function KeyboardShortcutHelpModal({
  isModalActive,
  toggleModal
}) {
  useShortcut('core/edit-post/keyboard-shortcuts', toggleModal, {
    bindGlobal: true
  });

  if (!isModalActive) {
    return null;
  }

  return createElement(Modal, {
    className: "edit-post-keyboard-shortcut-help-modal",
    title: __('Keyboard shortcuts'),
    closeLabel: __('Close'),
    onRequestClose: toggleModal
  }, createElement(ShortcutSection, {
    className: "edit-post-keyboard-shortcut-help-modal__main-shortcuts",
    shortcuts: ['core/edit-post/keyboard-shortcuts']
  }), createElement(ShortcutCategorySection, {
    title: __('Global shortcuts'),
    categoryName: "global"
  }), createElement(ShortcutCategorySection, {
    title: __('Selection shortcuts'),
    categoryName: "selection"
  }), createElement(ShortcutCategorySection, {
    title: __('Block shortcuts'),
    categoryName: "block",
    additionalShortcuts: [{
      keyCombination: {
        character: '/'
      },
      description: __('Change the block type after adding a new paragraph.'),

      /* translators: The forward-slash character. e.g. '/'. */
      ariaLabel: __('Forward-slash')
    }]
  }), createElement(ShortcutSection, {
    title: __('Text formatting'),
    shortcuts: textFormattingShortcuts
  }));
}
export default compose([withSelect(select => ({
  isModalActive: select(editPostStore).isModalActive(MODAL_NAME)
})), withDispatch((dispatch, {
  isModalActive
}) => {
  const {
    openModal,
    closeModal
  } = dispatch(editPostStore);
  return {
    toggleModal: () => isModalActive ? closeModal() : openModal(MODAL_NAME)
  };
})])(KeyboardShortcutHelpModal);
//# sourceMappingURL=index.js.map