Exporting DND component all other HOC props are lost

[jesper-bylund]

Describe the bug
When exporting a draggable component all other HOC props are removed, like auth etc.

To Reproduce
Create a typescript react project.
Add mapstatetoprops/mapdispatchtoprops
Add react DND
tada, no props are added and everything breaks at compile.

Expected behavior
Does not interfere with other props.

Screenshots

Here's the exporting issue code block:

const withAuthorized = withAuthorization(InputCard)
const withStylesAttached = withStyles(styles)(withAuthorized);
const connected = connect(mapStateToProps, mapDispatchToProps)(withStylesAttached)
const dndConnect = DragSource(
  DNDTypes.INPUT,
  { beginDrag: (props: Props) => { props.id }, },
  (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
  }),
)(connected)
export default withRouter(dndConnect)

[darthtrevino]

Just to be clear this is a typings issue and not a runtime issue right?

[darthtrevino]

When we define the output type of the HOCs and we base their return type on the input type (e.g. YourComponent & ReactComponentClass), then the React-DnD-injected props will be included in the resultant type, which would result in a lot of "missing props" errors in typescript (e.g. why don't you have the connectDragSource prop defined in client code?) . At one point I experimented with making the DnD-injected props optional props on the client side interfaces (e.g. connectDragSource?: ConnectDragSource), but that made the actual rendering code in TS worse by introducing conditionals and null checks.

What we have now is a bit of a compromise, and I realize the typings aren't perfect. I favored client-ergonomics over type purity.

I have not run across a satisfying solution to that problem, but PRs are welcome.

[jesper-bylund]

Yes, this is a typings issue. It does not compile though:

I have the following interface and render return, as you can see the DND props are NOT missing. But all other props are.

interface Props extends GlobalStateProps, IDispatchProps, DragSourceConnector, DragSourceMonitor, AuthorizedProps, WithStyles<typeof styles>, RouteComponentProps<any> {
    item: DemoInput,
    id?: string,
    actions?: boolean,
    connectDragSource: ConnectDragSource,
    connectDragPreview: ConnectDragPreview,
    isDragging: () => boolean,
}

return connectDragSource(content);