MessageList überschreibt MessageBox Felder

[kfritsch]

Why does MessageList overwrite fields like onTitleClick from the props passed to the single MessageBoxes with an according prop from the MessageList even if the prop in the MessageList was not even set? onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))} Even if the prop would have been set in the messagelist, the prop from the individual messagebox should be considered more important.

[abdurrahmanekr]

Nice question. This is the only way to tell which index the message has in the message list. It might seem a little strange that the sequence of arguments is different.

[kfritsch]

Sorry for writing my issue in german, worked on a german project beforehand. I translated it in case there was an misunderstanding. Might be I don't get something here, but what do arbitrary props have to do with any kind of index. If you absolutely need an index, you can just add a special prop which takes care of that. Why should onTitleClick have anything to do with an index?

[abdurrahmanekr]

Actually, I needed the index value when I was creating this project at the beginning. This is how I understood to which message an event occurred in the message list. ex:

<MessageList
    dataSource={myDataSource}
    onTitleClick: (x, i, e) => console.log(myDataSource[i], i)
/>

However, the value of x already gives the message itself. I also used index(i) to access the dom element. It doesn't seem nice to force this structure right now, yes, but it's too late :)

but if there is a structure that makes more sense to you, I'm ready to talk

[kfritsch]

I would say it should actually suffice to move the the {...x} down below the other props

<MessageBox
                                key={i}
                                onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
                                onPhotoError={this.props.onPhotoError && ((e) => this.onPhotoError(x, i, e))}
                                onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
                                onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
                                onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
                                onReplyClick={this.props.onReplyClick && ((e) => this.onReplyClick(x, i, e))}
                                onReplyMessageClick={this.props.onReplyMessageClick && ((e) => this.onReplyMessageClick(x, i, e))}
                                onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
                                onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
                                onMeetingMoreSelect={this.props.onMeetingMoreSelect && ((e) => this.onMeetingMoreSelect(x, i, e))}
                                onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
                                onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))}
                                onMeetingTitleClick={this.props.onMeetingTitleClick}
                                onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick}
                                {...x}
                            />

This way if someone wants to pass specific props to specific message boxes they will overwrite the messagelist equivalent.

[abdurrahmanekr]

Oh yes! I didn't notice that :tada: actually I would appreciate it if you open a PR for it. It would be great if you do the same on other lists (ChatList, MeetingList)