office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.67 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n Dropdown,\r\n IFacepileProps,\r\n Facepile,\r\n OverflowButtonType,\r\n Slider\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 overflowButtonType: OverflowButtonType.downArrow,\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 overflowButtonType: OverflowButtonType;\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 overflowButtonType: OverflowButtonType.none\r\n };\r\n }\r\n\r\n public render() {\r\n let { displayedPersonas, overflowButtonType } = this.state;\r\n facepileProps.maxDisplayablePersonas = displayedPersonas;\r\n facepileProps.overflowButtonType = overflowButtonType;\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((prevState: IFacepileOverflowExampleState) => {\r\n prevState.displayedPersonas = value;\r\n return prevState;\r\n })}\r\n />\r\n <Dropdown\r\n label='Overflow Type:'\r\n selectedKey={this.state.overflowButtonType}\r\n options={\r\n [\r\n { key: OverflowButtonType.none, text: OverflowButtonType[OverflowButtonType.none] },\r\n { key: OverflowButtonType.descriptive, text: OverflowButtonType[OverflowButtonType.descriptive] },\r\n { key: OverflowButtonType.downArrow, text: OverflowButtonType[OverflowButtonType.downArrow] },\r\n { key: OverflowButtonType.more, text: OverflowButtonType[OverflowButtonType.more] },\r\n\r\n ]\r\n }\r\n onChanged={value => this.setState((prevState: IFacepileOverflowExampleState) => {\r\n prevState.overflowButtonType = value.key as OverflowButtonType;\r\n return prevState;\r\n })}\r\n />\r\n </div>\r\n );\r\n }\r\n}"; });