import React from 'react' ; export type ReactifyProps = { id ? : string ; className ? : string ; } ; export type LifeCycleCallbacks = { componentWillUnmount ? : ( ) => void ; } ; export interface RenderFuncType < Props > { ( container , props ) : void ; displayName ? : string ; defaultProps ? : Partial < Props & ReactifyProps > ; propTypes ? : React . WeakValidationMap < Props & ReactifyProps > ; } export default function reactify < Props extends object > ( renderFn , callbacks ? ) { class ReactifiedComponent extends React . Component < Props & ReactifyProps > { container ? : HTMLDivElement ; constructor ( props ) { super ( props ) ; this . setContainerRef = this . setContainerRef . bind ( this ) ; } componentDidMount ( ) { this . execute ( ) ; } componentDidUpdate ( ) { this . execute ( ) ; } componentWillUnmount ( ) { this . container = undefined ; if ( callbacks ?. componentWillUnmount ) { callbacks . componentWillUnmount . bind ( this ) ( ) ; } } setContainerRef ( ref ) { this . container = ref ; } execute ( ) { if ( this . container ) { renderFn ( this . container , this . props ) ; } } render ( ) { const { id , className } = this . props ; return < div ref = { this . setContainerRef } id = { id } className = { className } / > ; } } const ReactifiedClass = ReactifiedComponent ; if ( renderFn . displayName ) { ReactifiedClass . displayName = renderFn . displayName ; } if ( renderFn . propTypes ) { ReactifiedClass . propTypes = { ... ReactifiedClass . propTypes , ... renderFn . propTypes , } ; } if ( renderFn . defaultProps ) { ReactifiedClass . defaultProps = renderFn . defaultProps ; } return ReactifiedComponent ; }