| import Loadable from 'react-loadable'; |
| |
| export type LoadableRendererProps = { |
| onRenderFailure?: Function; |
| onRenderSuccess?: Function; |
| }; |
| |
| const defaultProps = { |
| onRenderFailure() {}, |
| onRenderSuccess() {}, |
| }; |
| |
| export interface LoadableRenderer<Props> |
| extends React.ComponentClass<Props & LoadableRendererProps>, |
| Loadable.LoadableComponent {} |
| |
| export default function createLoadableRenderer<Props, Exports>( |
| options: Loadable.OptionsWithMap<Props, Exports>, |
| ): LoadableRenderer<Props> { |
| const LoadableRenderer = Loadable.Map(options) as LoadableRenderer<Props>; |
| |
| // Extends the behavior of LoadableComponent to provide post-render listeners |
| class CustomLoadableRenderer extends LoadableRenderer { |
| static defaultProps: object; |
| |
| componentDidMount() { |
| this.afterRender(); |
| } |
| |
| componentDidUpdate() { |
| this.afterRender(); |
| } |
| |
| afterRender() { |
| const { loaded, loading, error } = this.state; |
| const { onRenderFailure, onRenderSuccess } = this.props; |
| if (!loading) { |
| if (error) { |
| (onRenderFailure as Function)(error); |
| } else if (loaded && Object.keys(loaded).length > 0) { |
| (onRenderSuccess as Function)(); |
| } |
| } |
| } |
| } |
| |
| CustomLoadableRenderer.defaultProps = defaultProps; |
| CustomLoadableRenderer.preload = LoadableRenderer.preload; |
| |
| return CustomLoadableRenderer; |
| } |