import React from 'react' ; import styled from 'styled-components' ; import BpfViewer , { formatEvents } from './BpfViewer' ; export default { title : 'Shared/BpfViewer' , } ; export const Vim = ( ) => { const events = useMockedEvents ( import ( './fixtures/vim' ) . then ( vim => vim . default ) ) ; if ( events . length === 0 ) { return null ; } return ( < Box > < Viewer events = { events } / > < /Box>); } ; export const Npm = ( ) => { const events = useMockedEvents ( import ( './fixtures/npm' ) . then ( vim => vim . default ) ) ; if ( events . length === 0 ) { return null ; } return ( < Box > < Viewer events = { events } / > < /Box>); } ; function useMockedEvents ( loader ) { const [ events , setEvents ] = React . useState ( [ ] ) ; loader . then ( data => { setEvents ( data ) ; } ) ; return events . filter ( e => e . event === 'session.exec' ) ; } function Viewer ( { events , mode = 'tree' } ) { const ref = React . useRef ( ) ; React . useEffect ( ( ) => { const content = formatEvents ( events , mode ) . join ( '\n' ) ; ref . current . editor . insert ( content ) ; ref . current . session . foldAll ( ) ; } , [ ] ) ; return < BpfViewer ref = { ref } />; } const Box = styled . div `
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  display: flex;
` ;