import React from 'react' ; import ReactDOM from 'react-dom' ; import { KBN_FIELD_TYPES } from '@kbn/field-types' ; import { AppMountParameters , AppNavLinkStatus , CoreSetup , CoreStart , Plugin , } from '../../../src/core/public' ; import { DeveloperExamplesSetup } from '../../developer_examples/public' ; import { App } from './app' ; import { FieldFormatsSetup , FieldFormatsStart } from '../../../src/plugins/field_formats/public' ; import { registerExampleFormat } from './examples/2_creating_custom_formatter' ; import { IndexPatternFieldEditorStart , IndexPatternFieldEditorSetup , } from '../../../src/plugins/data_view_field_editor/public' ; import { DataPublicPluginStart } from '../../../src/plugins/data/public' ; import { registerExampleFormatEditor } from './examples/3_creating_custom_format_editor' ; import img from './formats.png' ; interface SetupDeps { developerExamples : DeveloperExamplesSetup ; fieldFormats : FieldFormatsSetup ; dataViewFieldEditor : IndexPatternFieldEditorSetup ; } interface StartDeps { fieldFormats : FieldFormatsStart ; dataViewFieldEditor : IndexPatternFieldEditorStart ; data : DataPublicPluginStart ; } export class FieldFormatsExamplePlugin implements Plugin < void , void , SetupDeps , StartDeps > { public setup ( core , deps ) { registerExampleFormat ( deps . fieldFormats ) ; registerExampleFormatEditor ( deps . dataViewFieldEditor ) ; const openDateViewNumberFieldEditor = async ( ) => { const [ , plugins ] = await core . getStartServices ( ) ; const dataView = await plugins . data . dataViews . getDefault ( ) ; if ( ! dataView ) { alert ( 'Create at least one data view to continue with this example' ) ; return ; } const numberField = dataView . fields . getAll ( ) . find ( ( f ) => ! f . name . startsWith ( '_' ) && f . type === KBN_FIELD_TYPES . NUMBER && ! f . scripted ) ; if ( ! numberField ) { alert ( 'Default data view needs at least a single field of type `number` to continue with this example' ) ; return ; } plugins . dataViewFieldEditor . openEditor ( { ctx : { dataView , } , fieldName : numberField . name , } ) ; } ; core . application . register ( { id : 'fieldFormatsExample' , title : 'Field formats example' , navLinkStatus : AppNavLinkStatus . hidden , async mount ( { element } ) { const [ , plugins ] = await core . getStartServices ( ) ; ReactDOM . render ( < App deps = { { fieldFormats : plugins . fieldFormats , openDateViewNumberFieldEditor } } / > , element ) ; return ( ) => ReactDOM . unmountComponentAtNode ( element ) ; } , } ) ; deps . developerExamples . register ( { appId : 'fieldFormatsExample' , title : 'Field formats example' , description : `Learn how to use an existing field formats or how to create a custom one` , image : img , } ) ; } public start ( core ) { return { } ; } public stop ( ) { } }