Persona - onRenderCoin prop#3799
Conversation
| @autobind | ||
| private _onRenderCoin(props: IPersonaProps, size: number): JSX.Element { | ||
| if (props.onRenderCoin) { | ||
| console.log(size); |
There was a problem hiding this comment.
Probably wasn't meant to be included in the commit.
There was a problem hiding this comment.
Yes, I'll clean that up. I was attempting to make a slightly better example to show. If you have any ideas on that let me know.
| if (props.onRenderCoin) { | ||
| console.log(size); | ||
| return( | ||
| <div> |
There was a problem hiding this comment.
Does the Coin need to be wrapped in these divs?
There was a problem hiding this comment.
I think the change I just committed is a bit cleaner. The div can be removed if a null return from _onRenderCoin is allowed which would just print nothing.
| shouldStartVisible={ imageShouldStartVisible } | ||
| onLoadingStateChange={ this._onPhotoLoadingStateChange } | ||
| /> | ||
| { this._onRenderCoin( this.props, size ) } |
There was a problem hiding this comment.
onRenderCoin could be refactored a bit. IRenderFunction should take props and the default render as parameters. See Tooltip's onRenderContent for example
There was a problem hiding this comment.
Ah nice! yeah that's much cleaner thank you so much!
| getNativeProps, | ||
| getRTL | ||
| getRTL, | ||
| IRenderFunction |
There was a problem hiding this comment.
IRenderFunction isn't used
|
Please run |
| .example-label { | ||
| margin: 10px 0; | ||
| } | ||
| .custom-example-coin img { |
There was a problem hiding this comment.
We don't typically use the kebab-case naming convention for our classes, can you change this one and the one above to camelCase?
|
As @jordandrako pointed out, the Screener regressions are on the master branch and are unrelated to this change. |
4 participants
Pull request checklist
$ npm run changeDescription of changes
Added an onRenderCoin prop to Persona to allow for passing in or JSX for expanded functionality. Pretty basic set up right now and I am open to suggestions on how to polish this into a solid feature of this component.
Focus areas to test
Open to suggestions