office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
52 lines • 1.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ChoiceGroup_1 = require("office-ui-fabric-react/lib/ChoiceGroup");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
var Styling_1 = require("office-ui-fabric-react/lib/Styling");
var optionRootClass = Styling_1.mergeStyles({
display: 'flex',
alignItems: 'baseline'
});
var dropdownStyles = {
root: {
marginBottom: 0,
marginLeft: 5
}
};
exports.ChoiceGroupCustomExample = function () {
return (React.createElement(ChoiceGroup_1.ChoiceGroup, { defaultSelectedKey: "B", options: [
{
key: 'A',
text: 'Mark displayed items as read after',
ariaLabel: 'Mark displayed items as read after - Press tab for further action',
onRenderField: function (props, render) {
return (React.createElement("div", { className: optionRootClass },
render(props),
React.createElement(Dropdown_1.Dropdown, { defaultSelectedKey: "A", styles: dropdownStyles, options: [{ key: 'A', text: '5 seconds' }, { key: 'B', text: '10 seconds' }, { key: 'C', text: '20 seconds' }], disabled: props ? !props.checked : false, ariaLabel: "Select a time span" })));
}
},
{
key: 'B',
text: 'Option B',
styles: {
root: {
border: '1px solid green'
}
}
},
{
key: 'C',
text: 'Option C',
disabled: true
},
{
key: 'D',
text: 'Option D'
}
], onChange: _onChange, label: "Pick one" }));
};
function _onChange(ev, option) {
console.dir(option);
}
//# sourceMappingURL=ChoiceGroup.Custom.Example.js.map