import classNames from "classnames" ; import * as React from "react" ; import { DISPLAYNAME_PREFIX , InputGroupProps2 , InputGroup , OverlayProps , Overlay } from "@blueprintjs/core" ; import { Classes , IListItemsProps } from "../../common" ; import { IQueryListRendererProps , QueryList } from "../query-list/queryList" ; export type OmnibarProps < T > = IOmnibarProps < T > ; deprecated export interface IOmnibarProps < T > extends IListItemsProps < T > { /**
     * Props to spread to the query `InputGroup`. Use `query` and
     * `onQueryChange` instead of `inputProps.value` and `inputProps.onChange`
     * to control this input.
     */ inputProps ? : InputGroupProps2 ; /**
     * Toggles the visibility of the omnibar.
     * This prop is required because the component is controlled.
     */ isOpen : boolean ; /**
     * A callback that is invoked when user interaction causes the omnibar to
     * close, such as clicking on the overlay or pressing the `esc` key (if
     * enabled). Receives the event from the user's interaction, if there was an
     * event (generally either a mouse or key event).
     *
     * Note that due to controlled usage, this component will not actually close
     * itself until the `isOpen` prop becomes `false`.
     * .
     */ onClose ? : ( event ? : React . SyntheticEvent < HTMLElement > ) => void ; /** Props to spread to `Overlay`. */ overlayProps ? : Partial < OverlayProps > ; } export class Omnibar < T > extends React . PureComponent < OmnibarProps < T > > { public static displayName = `${ DISPLAYNAME_PREFIX }.Omnibar` ; public static ofType < U > ( ) { return Omnibar as new ( props ) => Omnibar < U > ; } private TypedQueryList = QueryList . ofType < T > ( ) ; public render ( ) { const { isOpen , inputProps , overlayProps , ... restProps } = this . props ; const initialContent = "initialContent" in this . props ? this . props . initialContent : null ; return < this . TypedQueryList { ... restProps } initialContent = { initialContent } renderer = { this . renderQueryList } / > ; } private renderQueryList = ( listProps ) => { const { inputProps = { } , isOpen , overlayProps = { } } = this . props ; const { handleKeyDown , handleKeyUp } = listProps ; const handlers = isOpen ? { onKeyDown : handleKeyDown , onKeyUp : handleKeyUp } : { } ; return ( < Overlay hasBackdrop = { true } { ... overlayProps } isOpen = { isOpen } className = { classNames ( Classes . OMNIBAR_OVERLAY , overlayProps . className ) } onClose = { this . handleOverlayClose } > < div className = { classNames ( Classes . OMNIBAR , listProps . className ) } { ... handlers } > < InputGroup autoFocus = { true } large = { true } leftIcon = "search" placeholder = "Search..." { ... inputProps } onChange = { listProps . handleQueryChange } value = { listProps . query } / > { listProps . itemList } < /div> < /Overlay>); } ; private handleOverlayClose = ( event ) => { this . props . overlayProps ?. onClose ?. ( event ) ; this . props . onClose ?. ( event ) ; } ; }