import React , { ComponentType , useEffect , useState } from 'react' ; import { __IntlProvider as IntlProvider } from '@kbn/i18n-react' ; import { Observable } from 'rxjs' ; import { CoreStart } from 'src/core/public' ; import { text } from '@storybook/addon-knobs' ; import { createKibanaReactContext } from '../../../../../../../../src/plugins/kibana_react/public' ; import { FieldValueSelectionProps } from '../types' ; import { FieldValueSelection } from '../field_value_selection' ; const values = [ { label : 'elastic co frontend' , count : 1 } , { label : 'apm server' , count : 2 } , ] ; const KibanaReactContext = createKibanaReactContext ( { uiSettings : { get : ( ) => { } , get$ : ( ) => new Observable ( ) } , } as unknown as Partial < CoreStart > ) ; export default { title : 'app/Shared/FieldValueSuggestions' , component : FieldValueSelection , decorators : [ ( Story ) => ( < IntlProvider locale = "en" > < KibanaReactContext . Provider > < FieldValueSelection label = "Service name" values = { values } onChange = { ( ) => { } } selectedValue = { [ ] } loading = { false } setQuery = { ( ) => { } } /> < /KibanaReactContext.Provider> < /IntlProvider>), ] , } ; export function ValuesLoaded ( ) { return ( < FieldValueSelection label = "Service name" values = { values } onChange = { ( ) => { } } selectedValue = { [ ] } loading = { false } setQuery = { ( ) => { } } />); } export function LoadingState ( ) { return ( < FieldValueSelection label = "Service name" values = { values } onChange = { ( ) => { } } selectedValue = { [ ] } loading = { true } setQuery = { ( ) => { } } />); } export function EmptyState ( ) { return ( < FieldValueSelection label = "Service name" values = { [ ] } onChange = { ( ) => { } } selectedValue = { [ ] } loading = { false } setQuery = { ( ) => { } } />); } export function SearchState ( args ) { const name = text ( 'Query' , '' ) ; const [ , setQuery ] = useState ( '' ) ; useEffect ( ( ) => { setQuery ( name ) ; } , [ name ] ) ; return ( < FieldValueSelection label = "Service name" values = { values } onChange = { ( ) => { } } selectedValue = { [ ] } loading = { false } setQuery = { setQuery } / > ) ; }