import React from 'react' ; import { I18nProvider } from '@osd/i18n/react' ; import { DocViewRenderTab } from './doc_viewer_render_tab' ; import { DocViewerError } from './doc_viewer_render_error' ; import { DocViewRenderFn , DocViewRenderProps } from '../../doc_views/doc_views_types' ; interface Props { component ? : React . ComponentType < DocViewRenderProps > ; id : number ; render ? : DocViewRenderFn ; renderProps : DocViewRenderProps ; title : string ; } interface State { error : Error | string ; hasError : boolean ; } /**
 * Renders the tab content of a doc view.
 * Displays an error message when it encounters exceptions, thanks to
 * Error Boundaries.
 */ export class DocViewerTab extends React . Component < Props , State > { state = { hasError : false , error : '' , } ; static getDerivedStateFromError ( error ) { return { hasError : true , error } ; } shouldComponentUpdate ( nextProps , nextState ) { return ( nextProps . renderProps . hit . _id !== this . props . renderProps . hit . _id || nextProps . id !== this . props . id || nextState . hasError ) ; } render ( ) { const { component , render , renderProps , title } = this . props ; const { hasError , error } = this . state ; if ( hasError && error ) { return < DocViewerError error = { error } />; } else if ( ! render && ! component ) { return ( < DocViewerError error = { `Invalid plugin ${ title }, there is neither a (react) component nor a render function provided` } />); } if ( render ) { return < DocViewRenderTab render = { render } renderProps = { renderProps } / > ; } const Component = component as any ; return ( < I18nProvider > < Component { ... renderProps } / > < /I18nProvider>); } }