office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.42 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n Slider,\r\n IFacepileProps,\r\n Facepile\r\n} from '../../../../index';\r\nimport { facepilePersonas } from './FacepileExampleData';\r\nimport './Facepile.Examples.scss';\r\n\r\nconst facepileProps: IFacepileProps = {\r\n personas: facepilePersonas,\r\n maxDisplayablePersonas: 5,\r\n overflowButtonProps: {\r\n onClick: (ev: React.MouseEvent<HTMLButtonElement>) =>\r\n alert('overflow icon clicked')\r\n }\r\n};\r\n\r\nexport interface IFacepileOverflowExampleState {\r\n displayedPersonas: any;\r\n}\r\n\r\nexport class FacepileOverflowExample extends React.Component<any, IFacepileOverflowExampleState> {\r\n public constructor() {\r\n super();\r\n\r\n this.state = {\r\n displayedPersonas: 5\r\n };\r\n }\r\n\r\n public render() {\r\n let { displayedPersonas } = this.state;\r\n facepileProps.maxDisplayablePersonas = displayedPersonas;\r\n\r\n return (\r\n <div className={'ms-FacepileExample'}>\r\n <Facepile {...facepileProps} />\r\n <Slider\r\n label='Number of Personas Shown:'\r\n min={0}\r\n max={6}\r\n step={1}\r\n showValue={true}\r\n value={this.state.displayedPersonas}\r\n onChange={value => this.setState({ displayedPersonas: value })}\r\n />\r\n </div>\r\n );\r\n }\r\n}"; });