Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Persona - onRenderCoin prop #3799

Merged
merged 9 commits into from
Jan 26, 2018
Merged

Persona - onRenderCoin prop #3799

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9936cf4
onRenderCoin prop that controls the image coin - with example
Jan 24, 2018
ae70398
onRenderCoin prop examples
Jan 25, 2018
9c8081d
cleaned up a console log
Jan 25, 2018
d1f84be
remove excess div by allowing null return in _onRenderCoin
Jan 25, 2018
8191668
updated example of custem element coin image
Jan 25, 2018
dc6e620
updated scss for better looking custom example
Jan 25, 2018
9f69787
refactored onRenderCoin implementation
Jan 25, 2018
2b1dc7c
change request plus css class standards fix
Jan 26, 2018
8416d7c
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
Jan 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ export class Persona extends BaseComponent<IPersonaProps, {}> {
imageShouldFadeIn,
imageShouldStartVisible,
showSecondaryText,
onPhotoLoadingStateChange
onPhotoLoadingStateChange,
onRenderCoin
} = this.props;

let personaCoinProps = {
Expand All @@ -72,7 +73,8 @@ export class Persona extends BaseComponent<IPersonaProps, {}> {
imageShouldFadeIn,
imageShouldStartVisible,
size,
onPhotoLoadingStateChange
onPhotoLoadingStateChange,
onRenderCoin
};

let divProps = getNativeProps(this.props, divProperties);
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ export interface IPersonaProps extends React.HTMLAttributes<Persona> {
*/
size?: PersonaSize;

/**
* Optional custom renderer for the coin
*/
onRenderCoin?: IRenderFunction<IPersonaProps>;

/**
* If true, adds the css class 'is-fadeIn' to the image.
*/
Expand Down
53 changes: 41 additions & 12 deletions packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
divProperties,
getInitials,
getNativeProps,
getRTL
getRTL,
IRenderFunction
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IRenderFunction isn't used

} from '../../Utilities';
import { Image, ImageFit, ImageLoadState } from '../../Image';
import { PersonaPresence } from './PersonaPresence';
Expand Down Expand Up @@ -114,17 +115,7 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
</div>
)
}
<Image
className={ css('ms-Persona-image', styles.image) }
imageFit={ ImageFit.cover }
src={ imageUrl }
width={ coinSize || SIZE_TO_PIXELS[size] }
height={ coinSize || SIZE_TO_PIXELS[size] }
alt={ imageAlt }
shouldFadeIn={ imageShouldFadeIn }
shouldStartVisible={ imageShouldStartVisible }
onLoadingStateChange={ this._onPhotoLoadingStateChange }
/>
{ this._onRenderCoin( this.props, size ) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onRenderCoin could be refactored a bit. IRenderFunction should take props and the default render as parameters. See Tooltip's onRenderContent for example

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah nice! yeah that's much cleaner thank you so much!

<PersonaPresence { ...this.props } />
</div>
) :
Expand All @@ -143,6 +134,44 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
);
}

@autobind
private _onRenderCoin(props: IPersonaProps, size: number): JSX.Element {
if (props.onRenderCoin) {
console.log(size);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably wasn't meant to be included in the commit.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

return(
<div>
Copy link
Contributor

@mikewheaton mikewheaton Jan 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the Coin need to be wrapped in these divs?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

{ props.onRenderCoin(this.props) }
</div>
);
}

let {
coinProps,
coinSize,
imageUrl,
imageAlt,
initialsColor,
primaryText,
imageShouldFadeIn,
onRenderInitials = this._onRenderInitials,
imageShouldStartVisible
} = this.props;

return(
<Image
className={ css('ms-Persona-image', styles.image) }
imageFit={ ImageFit.cover }
src={ imageUrl }
width={ coinSize || SIZE_TO_PIXELS[size] }
height={ coinSize || SIZE_TO_PIXELS[size] }
alt={ imageAlt }
shouldFadeIn={ imageShouldFadeIn }
shouldStartVisible={ imageShouldStartVisible }
onLoadingStateChange={ this._onPhotoLoadingStateChange }
/>
);
}

@autobind
private _onRenderInitials(props: IPersonaProps): JSX.Element {
let {
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import { PersonaInitialsExample } from './examples/Persona.Initials.Example';
import { PersonaBasicExample } from './examples/Persona.Basic.Example';
import { PersonaAlternateExample } from './examples/Persona.Alternate.Example';
import { PersonaCustomRenderExample } from './examples/Persona.CustomRender.Example';
import { PersonaCustomCoinRenderExample } from './examples/Persona.CustomCoinRender.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { PersonaStatus } from './Persona.checklist';

const PersonaInitialsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx') as string;
const PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx') as string;
const PersonaAlternateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx') as string;
const PersonaCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx') as string;
const PersonaCustomCoinRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx') as string;

export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
public render() {
Expand All @@ -37,6 +39,9 @@ export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
<ExampleCard title='Rendering custom persona text' code={ PersonaCustomRenderExampleCode }>
<PersonaCustomRenderExample />
</ExampleCard>
<ExampleCard title='Rendering custom coin' code={ PersonaCustomCoinRenderExampleCode }>
<PersonaCustomCoinRenderExample />
</ExampleCard>
</div>
}
propertiesTables={
Expand Down
57 changes: 57 additions & 0 deletions ...fice-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from 'react';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import {
IPersonaProps,
Persona,
PersonaSize,
PersonaPresence
} from 'office-ui-fabric-react/lib/Persona';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { TestImages } from '../../../common/TestImages';
import './PersonaExample.scss';
import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
const exampleStyles: any = exampleStylesImport;

const examplePersona = {
imageUrl: TestImages.personaMale,
imageInitials: 'TR',
primaryText: 'Ted Randall',
secondaryText: 'Project Manager',
optionalText: 'Available at 4:00pm'
};

export class PersonaCustomCoinRenderExample extends React.Component {

public render() {
return (
<div className='ms-PersonaExample'>
<div className={ exampleStyles.exampleLabel }>Custom functional element as image</div>
<Persona
{ ...examplePersona }
size={ PersonaSize.size72 }
presence={ PersonaPresence.online }
onRenderCoin={ this._onRenderCoin }
/>
</div>
);
}

@autobind
private _onRenderSecondaryText(props: IPersonaProps): JSX.Element {
return (
<div>
<Icon iconName={ 'Suitcase' } className={ 'ms-JobIconExample' } />
{ props.secondaryText }
</div>
);
}

@autobind
private _onRenderCoin(props: IPersonaProps): JSX.Element {
return (
<div className='custom-example-coin'>
<img src={ props.imageUrl } alt='' width='72' height='72' />
</div>
);
}
}