Skip to content

Instantly share code, notes, and snippets.

@benmvp
Last active August 29, 2017 06:20
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benmvp/69799153880d42d2ef2bb9f1ff9012b8 to your computer and use it in GitHub Desktop.
Save benmvp/69799153880d42d2ef2bb9f1ff9012b8 to your computer and use it in GitHub Desktop.
Need Dynamic HOC Flow help
const myHOC = <Props: {}>(
Component: React.ComponentType<{}>
): React.ComponentType<Props> (
(props: Props) = {
let handlers = genDynamicAdditionalProps(props.eventName)
// The keys in `additionalProps` are dependent upon `props.eventName` value
// The values in `additionalProps` are all functions
let propsToPassThru = {...props}
delete propsToPassThru[props.eventName]
// Also removing `props.eventName` from `props`!
return (
<Component
{...propsToPassThru}
{...handlers}
/>
)
}
)
@benmvp
Copy link
Author

benmvp commented Aug 29, 2017

I'm trying to make line 2 something more specific than just {}. Been following the Injecting Props With a Higher-Order Component example, but my HOC adds in dynamic props that are based on the value of a prop. Therefore the keys of handlers are not statically known.

Is this even possible?

@asolove
Copy link

asolove commented Aug 29, 2017

Is it possible to enumerate the set of possible cases (event name and what types it maps to)? Like if there are three possible cases with types, we can express that. If it's truly arbitrary, theres not much more we can say statically.

@benmvp
Copy link
Author

benmvp commented Aug 29, 2017

Yeah.... eventName can basically be any DOM event (when Component is a DOM element) or literally any function prop (when Component is a React Component). So it seems like I've hit the max of static typing. I do know eventName is a string, but that's about it.

I was assuming it wasn't possible to statically type, but I wanted to make sure there wasn't any fancy syntax since I do in theory know that the initial props include eventName, but exclude handlers and the resultant props exclude eventName, but include handlers.

Thanks for the help!

@asolove
Copy link

asolove commented Aug 29, 2017

Hmm, it’s hard to say without know the details of why the code is this way and what the other constraints are. It seems like something must be knowable statically, since whoever wrote the inner component’s code had to develop an idea of which props to expect in which cases and whoever uses the wrapped component must have an idea of which props other than th event name they need to pass in.

So anyways, if you want to go into more detail on why this exists I’m happy to try to help. Or if you’re happy to drop it, then so am I. Best of luck with your project either way!

@benmvp
Copy link
Author

benmvp commented Aug 29, 2017

Sorry, I missed your post! I would love to figure out a way to make it work if you're up for it. It'll certainly help me learn more Flow along the way.

So what I put in the gist is stripped down version of the full code, which is part of benmvp/react-composite-events#9. Essentially there's a function that takes a configuration of options that ends up returning the HOC above. So props.eventName in the example above ends up being props[eventPropName], making it even more dynamic.

In case you're curious what this is all about, here are the docs for the utility function: https://github.com/benmvp/react-composite-events/blob/master/src/compose.md

Thanks for the help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment