import { BracesPlugin , QueryField , SlatePrism , TypeaheadInput } from '@grafana/ui' ; import React from 'react' ; import { onSuggest } from 'suggestions' ; interface Props { query : string ; onBlur : ( ) => void ; onChange : ( v : string ) => void ; onData : ( ) => Promise < any > ; } /**
 * JsonPathQueryField is an editor for JSON Path.
 */ export const JsonPathQueryField = ( { query , onBlur , onChange , onData } ) => { /**
     * The QueryField supports Slate plugins, so let's add a few useful ones.
     */ const plugins = [ BracesPlugin ( ) , SlatePrism ( { onlyIn : ( node ) => node . type === 'code_block' , getSyntax : ( ) => 'js' , } ) , ] ; const cleanText = ( s ) => s . replace ( /[{}[\]="(),!~+\-*/^%\|\$@\.]/g , '' ) . trim ( ) ; const onTypeahead = ( input ) => onSuggest ( input , onData ) ; return ( < QueryField additionalPlugins = { plugins } query = { query } cleanText = { cleanText } onTypeahead = { onTypeahead } onRunQuery = { onBlur } onChange = { onChange } portalOrigin = "jsonapi" placeholder = "$.items[*].name" / > ) ; } ;