Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 2x 2x 2x 3x 3x 3x 3x 3x 3x 3x 3x | import { BodyDiv } from "../bodyDiv/BodyDiv"
import { sortBy } from "../../clientUtils/Util"
import { observer } from "mobx-react"
import React from "react"
declare type keyboardCombo = string
export interface Command {
combo: keyboardCombo
fn: () => void
title?: string
category?: string
}
const CommandPaletteClassName = "CommandPalette"
@observer
export class CommandPalette extends React.Component<{
commands: Command[]
display: "none" | "block"
}> {
static togglePalette(): void {
const element = document.getElementsByClassName(
CommandPaletteClassName
)[0] as HTMLElement
if (element)
element.style.display =
element.style.display === "none" ? "block" : "none"
}
render(): JSX.Element {
const style: any = {
display: this.props.display,
}
let lastCat = ""
const commands = this.props.commands.filter(
(command) => command.title && command.category
)
const sortedCommands = sortBy(commands, "category").map(
(command, index) => {
let cat = undefined
if (command.category !== lastCat) {
lastCat = command.category!
cat = <div className="commandCategory">{lastCat}</div>
}
return (
<div key={`command${index}`}>
{cat}
<div className="commandOption">
<span className="commandCombo">
{command.combo}
</span>
<a onClick={(): void => command.fn()}>
{command.title}
</a>
</div>
</div>
)
}
)
return (
<BodyDiv>
<div className={CommandPaletteClassName} style={style}>
<div className="paletteTitle">Keyboard Shortcuts</div>
{sortedCommands}
</div>
</BodyDiv>
)
}
}
|