office-ui-fabric-react/lib/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.js

Reusable React components for building experiences for Office 365.

import * as React from 'react';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
var optionRootClass = mergeStyles({
    display: 'flex',
    alignItems: 'baseline'
});
var dropdownStyles = {
    root: {
        marginBottom: 0,
        marginLeft: 5
    }
};
export var ChoiceGroupCustomExample = function () {
    return (React.createElement(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, { 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