weseek__growi/apps/app/src/client/components/ShortcutsModal.tsx

import React from 'react';

import { useTranslation } from 'next-i18next';
import { Modal, ModalHeader, ModalBody } from 'reactstrap';

import { useShortcutsModal } from '~/stores/modal';

import styles from './ShortcutsModal.module.scss';


const ShortcutsModal = (): JSX.Element => {
  const { t } = useTranslation();

  const { data: status, close } = useShortcutsModal();

  const bodyContent = () => {
    if (status == null || !status.isOpened) {
      return <></>;
    }

    // add classes to cmd-key by OS
    const platform = window.navigator.platform.toLowerCase();
    const isMac = (platform.indexOf('mac') > -1);
    const additionalClassByOs = isMac ? 'mac' : 'win';

    return (
      <div className="container">
        <div className="row">
          <div className="col-lg-6">
            <h6>
              <strong>{t('modal_shortcuts.global.title')}</strong>
            </h6>

            <ul className="list-unstyled m-0">
              {/* Open/Close shortcut help */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">
                  <span
                    className="text-nowrap"
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Open/Close shortcut help') }}
                  />
                </div>
                <div className="d-flex align-items-center">
                  <span className={`key cmd-key ${additionalClassByOs}`}></span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">/</span>
                </div>
              </li>
              {/* Create Page */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.global.Create Page')}</div>
                <div>
                  <span className="key">C</span>
                </div>
              </li>
              {/* Edit Page */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.global.Edit Page')}</div>
                <div>
                  <span className="key">E</span>
                </div>
              </li>
              {/* Search */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.global.Search')}</div>
                <div>
                  <span className="key">/</span>
                </div>
              </li>
              {/* Show Contributors */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">
                  <span
                    className="text-nowrap"
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Show Contributors') }}
                  />
                </div>
                <div className="text-start">
                  <a href={t('modal_shortcuts.global.konami_code_url')} target="_blank" rel="noreferrer">
                    <span className="text-secondary small">
                      {t('modal_shortcuts.global.Konami Code')}
                    </span>
                  </a>
                  <div className="d-flex gap-2 flex-column align-items-start mt-1">
                    <div className="d-flex gap-1">
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_upward</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_upward</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_downward</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_downward</span>
                    </div>
                    <div className="d-flex gap-1">
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_back</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_forward</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_back</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_forward</span>
                    </div>
                    <div className="d-flex gap-1">
                      <span className="key">B</span>
                      <span className="key">A</span>
                    </div>
                  </div>
                </div>
              </li>
              {/* Mirror Mode */}
              <li className="d-flex align-items-center p-3">
                <div className="flex-grow-1">{t('modal_shortcuts.global.MirrorMode')}</div>
                <div className="text-start">
                  <a href={t('modal_shortcuts.global.konami_code_url')} target="_blank" rel="noreferrer">
                    <span className="text-secondary small">
                      {t('modal_shortcuts.global.Konami Code')}
                    </span>
                  </a>
                  <div className="d-flex gap-2 flex-column align-items-start mt-1">
                    <div className="d-flex gap-1">
                      <span className="key">X</span>
                      <span className="key">X</span>
                      <span className="key">B</span>
                      <span className="key">B</span>
                    </div>
                    <div className="d-flex gap-1">
                      <span className="key">A</span>
                      <span className="key">Y</span>
                      <span className="key">A</span>
                      <span className="key">Y</span>
                    </div>
                    <div className="d-flex gap-1">
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_downward</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_back</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div className="col-lg-6">
            <h6>
              <strong>{t('modal_shortcuts.editor.title')}</strong>
            </h6>
            <ul className="list-unstyled m-0">
              {/* Search in Editor */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.editor.Search in Editor')}</div>
                <div className="text-nowrap">
                  <span className={`key cmd-key ${additionalClassByOs}`}></span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">F</span>
                </div>
              </li>
              {/* Save Page */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">
                  {t('modal_shortcuts.editor.Save Page')}
                  <span className="small text-secondary ms-1">{t('modal_shortcuts.editor.Only Editor')}</span>
                </div>
                <div className="text-nowrap">
                  <span className={`key cmd-key ${additionalClassByOs}`}></span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">S</span>
                </div>
              </li>
              {/* Indent */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.editor.Indent')}</div>
                <div>
                  <span className="key">Tab</span>
                </div>
              </li>
              {/* Outdent */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.editor.Outdent')}</div>
                <div className="text-nowrap gap-1">
                  <span className="key">Shift</span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">Tab</span>
                </div>
              </li>
              {/* Delete Line */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.editor.Delete Line')}</div>
                <div className="text-nowrap">
                  <span className={`key cmd-key ${additionalClassByOs}`}></span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">Shift</span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">K</span>
                </div>
              </li>
              {/* Insert Line */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">
                  <span
                  // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.editor.Insert Line') }}
                  />
                  <br />
                  <span className="small text-secondary ms-1">{t('modal_shortcuts.editor.Post Comment')}</span>
                </div>
                <div className="text-nowrap">
                  <span className={`key cmd-key ${additionalClassByOs}`}></span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">Enter</span>
                </div>
              </li>
              {/* Move Line */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.editor.Move Line')}</div>
                <div className="text-nowrap">
                  <span className={`key alt-key ${additionalClassByOs}`}></span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key material-symbols-outlined fs-5 px-0">arrow_downward</span>
                  <span className="text-secondary mx-2">or</span>
                  <span className="key material-symbols-outlined fs-5 px-0">arrow_upward</span>
                </div>
              </li>
              {/* Copy Line */}
              <li className="d-flex align-items-center p-3 border-bottom">
                <div className="flex-grow-1">{t('modal_shortcuts.editor.Copy Line')}</div>
                <div className="text-nowrap">
                  <div className="text-start">
                    <div>
                      <span className={`key alt-key ${additionalClassByOs}`}></span>
                      <span className="text-secondary mx-2">+</span>
                      <span className="key">Shift</span>
                      <span className="text-secondary ms-2">+</span>
                    </div>
                    <div className="mt-1">
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_downward</span>
                      <span className="text-secondary mx-2">or</span>
                      <span className="key material-symbols-outlined fs-5 px-0">arrow_upward</span>
                    </div>
                  </div>
                </div>
              </li>
              {/* Toggle Line */}
              <li className="d-flex align-items-center p-3">
                <div className="flex-grow-1">{t('modal_shortcuts.editor.Toggle Line')}</div>
                <div className="text-nowrap">
                  <span className={`key cmd-key ${additionalClassByOs}`}></span>
                  <span className="text-secondary mx-2">+</span>
                  <span className="key">/</span>
                </div>
              </li>
            </ul>
          </div>
          {/* TODO: Add docs link button https://redmine.weseek.co.jp/issues/161862 */}
        </div>
      </div>
    );
  };

  return (
    <>
      { status != null && (
        <Modal id="shortcuts-modal" size="lg" isOpen={status.isOpened} toggle={close} className={`shortcuts-modal ${styles['shortcuts-modal']}`}>
          <ModalHeader tag="h4" toggle={close} className="px-4">
            {t('Shortcuts')}
          </ModalHeader>
          <ModalBody className="p-md-4">
            {bodyContent()}
          </ModalBody>
        </Modal>
      ) }
    </>
  );
};

export default ShortcutsModal;