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