import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes , DISPLAYNAME_PREFIX , Props } from "../../common" ; import { Icon , IconName } from "../icon/icon" ; import { normalizeKeyCombo } from "./hotkeyParser" ; const KeyIcons = { alt : { icon : "key-option" , iconTitle : "Alt/Option key" } , cmd : { icon : "key-command" , iconTitle : "Command key" } , ctrl : { icon : "key-control" , iconTitle : "Control key" } , delete : { icon : "key-delete" , iconTitle : "Delete key" } , down : { icon : "arrow-down" , iconTitle : "Down key" } , enter : { icon : "key-enter" , iconTitle : "Enter key" } , left : { icon : "arrow-left" , iconTitle : "Left key" } , meta : { icon : "key-command" , iconTitle : "Command key" } , right : { icon : "arrow-right" , iconTitle : "Right key" } , shift : { icon : "key-shift" , iconTitle : "Shift key" } , up : { icon : "arrow-up" , iconTitle : "Up key" } , } ; export type KeyComboTagProps = IKeyComboProps ; deprecated export interface IKeyComboProps extends Props { /** The key combo to display, such as `"cmd + s"`. */ combo : string ; default minimal ? : boolean ; } @ polyfill export class KeyCombo extends AbstractPureComponent2 < KeyComboTagProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.KeyCombo` ; public render ( ) { const { className , combo , minimal } = this . props ; const keys = normalizeKeyCombo ( combo ) . map ( key => ( key . length === 1 ? key . toUpperCase ( ) : key ) ) . map ( minimal ? this . renderMinimalKey : this . renderKey ) ; return < span className = { classNames ( Classes . KEY_COMBO , className ) } > { keys } < /span>; } private renderKey = ( key , index ) => { const icon = KeyIcons [ key ] ; const reactKey = `key-${ index }` ; return ( < kbd className = { classNames ( Classes . KEY , { [ Classes . MODIFIER_KEY ] : icon != null } ) } key = { reactKey } > { icon != null && < Icon icon = { icon . icon } title = { icon . iconTitle } / > } { key } < /kbd>); } ; private renderMinimalKey = ( key , index ) => { const icon = KeyIcons [ key ] ; return icon == null ? key : < Icon icon = { icon . icon } title = { icon . iconTitle } key = { `key-${ index }` } />; } ; }