66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { UnifiedModal } from '../common/UnifiedModal';
|
|
import { IMAGE_CANVAS_SHORTCUT_SECTIONS } from './ImageCanvasShortcutModel';
|
|
|
|
type ImageCanvasShortcutDialogViewProps = {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export function ImageCanvasShortcutDialogView({
|
|
open,
|
|
onClose,
|
|
}: ImageCanvasShortcutDialogViewProps) {
|
|
return (
|
|
<UnifiedModal
|
|
open={open}
|
|
title="画布快捷键"
|
|
size="lg"
|
|
onClose={onClose}
|
|
panelClassName="image-canvas-editor__shortcut-modal"
|
|
bodyClassName="image-canvas-editor__shortcut-modal-body"
|
|
>
|
|
<div className="image-canvas-editor__shortcut-sections">
|
|
{IMAGE_CANVAS_SHORTCUT_SECTIONS.map((section) => (
|
|
<section
|
|
key={section.title}
|
|
className="image-canvas-editor__shortcut-section"
|
|
aria-labelledby={`image-canvas-shortcut-${section.title}`}
|
|
>
|
|
<h3 id={`image-canvas-shortcut-${section.title}`}>
|
|
{section.title}
|
|
</h3>
|
|
<dl className="image-canvas-editor__shortcut-list">
|
|
{section.items.map((item) => (
|
|
<div
|
|
key={`${section.title}-${item.action}`}
|
|
className="image-canvas-editor__shortcut-row"
|
|
>
|
|
<dt>
|
|
{item.action}
|
|
{item.status === 'new' ? <span>新增</span> : null}
|
|
</dt>
|
|
<dd>
|
|
{item.keys.map((key, index) => (
|
|
<span key={`${item.action}-${key}-${index}`}>
|
|
{index > 0 ? (
|
|
<span
|
|
className="image-canvas-editor__shortcut-plus"
|
|
aria-hidden="true"
|
|
>
|
|
+
|
|
</span>
|
|
) : null}
|
|
<kbd>{key}</kbd>
|
|
</span>
|
|
))}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</UnifiedModal>
|
|
);
|
|
}
|