1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import React, { ReactNode, RefAttributes, ForwardRefExoticComponent } from 'react';

interface ModalProps {
    title: ReactNode;
}

interface ModalStaticProps {
    show(): void;
    hide(): void;
}

const STATIC_PROPS: ModalStaticProps = {
    show: () => { },
    hide: () => { }
}

const withStaticProps = <T,>(
    forwarded: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>>,
    staticProps: T
) => Object.assign(forwarded, staticProps)


const Modal = React.forwardRef<
    HTMLDivElement,
    ModalProps
>(({ title }: ModalProps, ref) => <div ref={ref}>{title}</div>)

const ModalComponent = withStaticProps(Modal, STATIC_PROPS)

function Consumer() {
    return <div onClick={() => ModalComponent.show()} />
}