import { Dialogic } from "dialogic" ; import React , { FunctionComponent , useCallback , useRef } from "react" ; type ComponentProps < T = unknown > = T & { show : ( ) => void ; hide : ( ) => void ; } ; export const Instance = < T > ( props ) => { const domElementRef = useRef ( ) ; const { className } = props . dialogicOptions ; const Component = props . dialogicOptions . component as FunctionComponent < ComponentProps < T > > ; if ( ! Component ) { throw new Error ( "Component missing in dialogic options." ) ; } const dispatchTransition = ( dispatchFn ) => { const domElement = domElementRef . current ; if ( domElement === undefined ) { return ; } dispatchFn ( { detail : { identityOptions : props . identityOptions , domElement , } , } ) ; } ; const onMount = ( ) => { dispatchTransition ( props . onMount ) ; } ; const show = ( ) => { dispatchTransition ( props . onShow ) ; } ; const hide = ( ) => { dispatchTransition ( props . onHide ) ; } ; const domElementCb = useCallback ( ( node ) => { if ( node !== null ) { domElementRef . current = node ; onMount ( ) ; } } , [ ] ) ; const passThroughOptions = props . passThroughOptions || ( { } as T ) ; return ( < div ref = { domElementCb } className = { className } > < Component { ... passThroughOptions } show = { show } hide = { hide } / > < /div>); } ;