import * as React from 'react' ; import formatHighlight from 'json-format-highlight' ; import SelectInput , { SelectInputOptionType } from '../input/SelectInput' ; import { Widget , WidgetHeader , WidgetBody } from '../widget' ; import Text from '../Text' ; import Box from '../Box' ; import { EventData } from '../../types' ; import styles from './Widgets.module.scss' ; import { jsonHighlight } from '../../utils/json_color' ; interface Props { events : string [ ] ; onSelect : ( eventsName : string [ ] ) => void ; selected : string [ ] ; data : EventData [ ] ; } const listToEventObject = ( list ) => list . map ( e => ( { label : e , value : e } ) ) . flat ( ) ; const RecentEventWidget = props => { const [ selectedEvents , setSelectedEvents ] = React . useState < SelectInputOptionType [ ] > ( listToEventObject ( props . selected ) ) ; const handleSelect = ( val ) => { setSelectedEvents ( val ) ; props . onSelect ( val . map ( e => e . value ) ) ; } ; const showHighlightJSON = ( data ) : string => formatHighlight ( data , jsonHighlight ) ; return ( < Widget > < WidgetHeader > < div className = { styles [ 'recent-events-heading' ] } > < Text type = { 'h2' } > { 'Recent events' } < /Text> < Text type = { 'h3' } > Subscribed : { selectedEvents . length } < /Text> < /div> < div className = { styles [ 'recent-events-dropdown' ] } > < SelectInput multi options = { listToEventObject ( props . events ) } selected = { selectedEvents } onChange = { val => handleSelect ( val ) } /> < Text type = { 'h3' } > Subscribed : { selectedEvents . length } < /Text> < /div> < /WidgetHeader> < WidgetBody scrollbar size = { 'm' } > { props . data . map ( ( { name , data } , index ) => ( < Box mb = { 4 } key = { index } > < Text type = { 'h3' } className = { styles [ 'recent-events-event-heading' ] } > { name } < /Text> < br / > < pre className = { styles [ 'recent-events-code-block' ] } > < code dangerouslySetInnerHTML = { { __html : showHighlightJSON ( data ) } } / > < /pre> < /Box>))} < /WidgetBody> < /Widget>); } ; export default RecentEventWidget ;