office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 3.22 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n Checkbox,\r\n Dropdown,\r\n Facepile,\r\n IFacepilePersona,\r\n IFacepileProps,\r\n Slider\r\n} from '../../../../index';\r\nimport { facepilePersonas } from './FacepileExampleData';\r\nimport './Facepile.Examples.scss';\r\n\r\nexport enum ExtraDataType {\r\n none = 0,\r\n name,\r\n stats\r\n}\r\n\r\nexport interface IFacepileBasicExampleState {\r\n numberOfFaces: any;\r\n imagesFadeIn: boolean;\r\n extraDataType: ExtraDataType;\r\n}\r\n\r\nexport class FacepileBasicExample extends React.Component<any, IFacepileBasicExampleState> {\r\n public constructor() {\r\n super();\r\n\r\n this.state = {\r\n numberOfFaces: 3,\r\n imagesFadeIn: true,\r\n extraDataType: ExtraDataType.none\r\n };\r\n }\r\n\r\n public render() {\r\n let { extraDataType, numberOfFaces } = this.state;\r\n let facepileProps: IFacepileProps = {\r\n personas: facepilePersonas.slice(0, numberOfFaces),\r\n getPersonaProps: (persona: IFacepilePersona) => {\r\n if (extraDataType === ExtraDataType.name) {\r\n return {\r\n imageShouldFadeIn: this.state.imagesFadeIn,\r\n hidePersonaDetails: false\r\n };\r\n } else if (extraDataType === ExtraDataType.stats) {\r\n return {\r\n imageShouldFadeIn: this.state.imagesFadeIn,\r\n hidePersonaDetails: false,\r\n primaryText: `[${persona.data}]`\r\n };\r\n }\r\n return {\r\n imageShouldFadeIn: this.state.imagesFadeIn,\r\n };\r\n }\r\n };\r\n\r\n return (\r\n <div className={ 'ms-FacepileExample' }>\r\n <Facepile {...facepileProps} />\r\n <Slider\r\n label='Number of Personas:'\r\n min={ 1 }\r\n max={ 5 }\r\n step={ 1 }\r\n showValue={ true }\r\n value={ numberOfFaces }\r\n onChange={ value => this.setState((prevState: IFacepileBasicExampleState) => {\r\n prevState.numberOfFaces = value;\r\n return prevState;\r\n }) }\r\n />\r\n <Checkbox\r\n label='Fade In'\r\n checked={ this.state.imagesFadeIn }\r\n onChange={ (ev, checked) => {\r\n this.setState((prevState: IFacepileBasicExampleState) => {\r\n prevState.imagesFadeIn = checked;\r\n return prevState;\r\n });\r\n } } />\r\n\r\n <Dropdown\r\n label='Additional Data:'\r\n selectedKey={ this.state.extraDataType }\r\n options={\r\n [\r\n { key: ExtraDataType.none, text: ExtraDataType[ExtraDataType.none] },\r\n { key: ExtraDataType.name, text: ExtraDataType[ExtraDataType.name] },\r\n { key: ExtraDataType.stats, text: ExtraDataType[ExtraDataType.stats] }\r\n ]\r\n }\r\n onChanged={ value => this.setState((prevState: IFacepileBasicExampleState) => {\r\n prevState.extraDataType = value.key as ExtraDataType;\r\n return prevState;\r\n }) }\r\n />\r\n </div>\r\n );\r\n }\r\n}"; });