import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes , DISPLAYNAME_PREFIX } from "../../common" ; import { HOTKEYS_HOTKEY_CHILDREN } from "../../common/errors" ; import { isElementOfType , isReactChildrenElementOrElements } from "../../common/utils" ; import { H4 } from "../html/html" ; import { Hotkey , IHotkeyProps } from "./hotkey" ; import { IHotkeysProps } from "./hotkeysTypes" ; @ polyfill export class Hotkeys extends AbstractPureComponent2 < IHotkeysProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.Hotkeys` ; public static defaultProps = { tabIndex : 0 , } ; public render ( ) { if ( ! isReactChildrenElementOrElements ( this . props . children ) ) { return null ; } const hotkeys = React . Children . map ( this . props . children , ( child ) => child . props ) ; hotkeys . sort ( ( a , b ) => { if ( a . global === b . global && a . group && b . group ) { return a . group . localeCompare ( b . group ) ; } return a . global ? - 1 : 1 ; } ) ; let lastGroup ; const elems = [ ] as JSX . Element [ ] ; for ( const hotkey of hotkeys ) { const groupLabel = hotkey . group ; if ( groupLabel !== lastGroup ) { elems . push ( < H4 key = { `group-${ elems . length }` } > { groupLabel } < /H4>); lastGroup = groupLabel ; } elems . push ( < Hotkey key = { elems . length } { ... hotkey } / > ) ; } const rootClasses = classNames ( Classes . HOTKEY_COLUMN , this . props . className ) ; return < div className = { rootClasses } > { elems } < /div>; } protected validateProps ( props ) { if ( ! isReactChildrenElementOrElements ( props . children ) ) { return ; } React . Children . forEach ( props . children , ( child ) => { if ( ! isElementOfType ( child , Hotkey ) ) { throw new Error ( HOTKEYS_HOTKEY_CHILDREN ) ; } } ) ; } }