office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.6 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n ChoiceGroup,\r\n IChoiceGroupOption\r\n} from '../../../../index';\r\n\r\n/**\r\n * Interface for ChoiceGroupBasicExample state.\r\n */\r\nexport interface IChoiceGroupBasicExampleState {\r\n imageKey: string;\r\n}\r\n\r\nexport class ChoiceGroupBasicExample extends React.Component<any, IChoiceGroupBasicExampleState> {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n imageKey: ''\r\n };\r\n\r\n this._onChanged = this._onChanged.bind(this);\r\n this._onImageChoiceGroupChange = this._onImageChoiceGroupChange.bind(this);\r\n }\r\n\r\n public render() {\r\n return (\r\n <div>\r\n <ChoiceGroup\r\n options={ [\r\n {\r\n key: 'A',\r\n text: 'Option A'\r\n },\r\n {\r\n key: 'B',\r\n text: 'Option B',\r\n checked: true\r\n },\r\n {\r\n key: 'C',\r\n text: 'Option C',\r\n disabled: true\r\n },\r\n {\r\n key: 'D',\r\n text: 'Option D',\r\n checked: true,\r\n disabled: true\r\n }\r\n ] }\r\n onChanged={ this._onChanged }\r\n label='Pick one'\r\n required={ true }\r\n />\r\n <ChoiceGroup\r\n label='Pick one image'\r\n options={ [\r\n {\r\n key: 'bar',\r\n checked: this.state.imageKey === 'bar',\r\n imageSrc: 'dist/choicegroup-bar-unselected.png',\r\n selectedImageSrc: 'dist/choicegroup-bar-selected.png',\r\n imageSize: { width: 50, height: 50 },\r\n text: 'Bar chart'\r\n },\r\n {\r\n key: 'pie',\r\n checked: this.state.imageKey === 'pie',\r\n imageSrc: 'dist/choicegroup-pie-unselected.png',\r\n selectedImageSrc: 'dist/choicegroup-pie-selected.png',\r\n imageSize: { width: 50, height: 50 },\r\n text: 'Pie chart'\r\n }\r\n ] }\r\n onChanged={ this._onImageChoiceGroupChange }\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n private _onChanged() {\r\n console.log('The option has been changed.');\r\n }\r\n\r\n private _onImageChoiceGroupChange(option: IChoiceGroupOption, evt?: React.SyntheticEvent<HTMLElement>) {\r\n this.setState({\r\n imageKey: option.key\r\n });\r\n }\r\n}\r\n"; });