import React , { ComponentType } from 'react' ; export interface ClickEvent { id ? : string ; } export interface WithClickIdOption { event : string [ ] ; } export type WithClickIdProps < TProps , TOption extends keyof TProps > = { [ T in keyof TProps ] : T extends TOption ? ( e : ClickEvent ) => void : TProps [ T ] ; } ; const withClickId = < T extends { } > ( option ) => ( BaseComponent ) : ComponentType < T > => { const handler = option . event . reduce ( ( previous , current ) => { previous [ current ] = ( props ) => ( event ) => { if ( props [ current ] ) { event . preventDefault ( ) ; props [ current ] ( { id : event . currentTarget . id } ) ; } } ; return previous ; } , { } ) ; return ( props ) => { const handlerWithProps = { } ; for ( const property in handler ) { if ( handler . hasOwnProperty ( property ) ) { handlerWithProps [ property ] = handler [ property ] ( props ) ; } } const newProps = { ... props , ... handlerWithProps , } ; return < BaseComponent { ... newProps } / > ; } ; } ; export default withClickId ;