office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
82 lines (81 loc) • 5.41 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../Image', '../../utilities/css', '../../utilities/object', './ChoiceGroup.scss'], function (require, exports, React, Image_1, css_1, object_1) {
"use strict";
var ChoiceGroup = (function (_super) {
__extends(ChoiceGroup, _super);
function ChoiceGroup(props) {
_super.call(this);
this.state = {
keyChecked: this._getKeyChecked(props.options)
};
this._id = object_1.getId('ChoiceGroup');
this._descriptionId = object_1.getId('ChoiceGroupDescription');
}
ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) {
var newKeyChecked = this._getKeyChecked(newProps.options);
var oldKeyCheched = this._getKeyChecked(this.props.options);
if (newKeyChecked !== oldKeyCheched) {
this.setState({
keyChecked: newKeyChecked
});
}
};
ChoiceGroup.prototype.render = function () {
var _this = this;
var _a = this.props, label = _a.label, options = _a.options, className = _a.className, required = _a.required;
var keyChecked = this.state.keyChecked;
var titleClassName = css_1.css('ms-Label', className, {
'is-required': required
});
return (
// Need to assign role application on containing div because JAWS doesnt call OnKeyDown without this role
React.createElement("div", {role: 'application', className: className}, React.createElement("div", {className: 'ms-ChoiceFieldGroup', role: 'radiogroup', "aria-labelledby": this.props.label ? this._id + '-label' : ''}, React.createElement("div", {className: 'ms-ChoiceFieldGroup-title'}, this.props.label ? React.createElement("label", {className: titleClassName, id: this._id + '-label'}, label) : null), options.map(function (option) { return (React.createElement("div", {key: option.key, className: css_1.css('ms-ChoiceField', { 'ms-ChoiceField--image': !!option.imageSrc })}, React.createElement("input", {ref: function (c) { return _this._inputElement = c; }, id: _this._id + "-" + option.key, className: 'ms-ChoiceField-input', type: 'radio', name: _this._id, disabled: option.isDisabled, checked: option.key === keyChecked, "aria-checked": option.key === keyChecked, onChange: _this._handleInputChange.bind(_this, option), "aria-describedby": _this._descriptionId + "-" + option.key}), _this._renderField(option))); }))));
};
ChoiceGroup.prototype.focus = function () {
if (this._inputElement) {
this._inputElement.focus();
}
};
ChoiceGroup.prototype._renderField = function (option) {
var keyChecked = this.state.keyChecked;
return (React.createElement("label", {htmlFor: this._id + '-' + option.key, className: option.imageSrc ? 'ms-ChoiceField-field--image' : 'ms-ChoiceField-field'}, option.imageSrc
? React.createElement("div", {className: 'ms-ChoiceField-innerField'}, React.createElement("div", {className: css_1.css('ms-ChoiceField-imageWrapper', { 'is-hidden': option.key === keyChecked })}, React.createElement(Image_1.Image, {src: option.imageSrc, width: option.imageSize.width, height: option.imageSize.height})), React.createElement("div", {className: css_1.css('ms-ChoiceField-imageWrapper', { 'is-hidden': option.key !== keyChecked })}, React.createElement(Image_1.Image, {src: option.selectedImageSrc, width: option.imageSize.width, height: option.imageSize.height})))
: null, option.imageSrc
? React.createElement("div", {className: 'ms-ChoiceField-labelWrapper'}, React.createElement("i", {className: 'ms-ChoiceField-icon ms-Icon ms-Icon--check'}), React.createElement("span", {id: this._descriptionId + "-" + option.key, className: 'ms-Label'}, option.text))
: React.createElement("span", {id: this._descriptionId + "-" + option.key, className: 'ms-Label'}, option.text)));
};
ChoiceGroup.prototype._handleInputChange = function (option, evt) {
var onChanged = this.props.onChanged;
this.setState({
keyChecked: option.key
});
if (onChanged) {
onChanged(option);
}
};
/**
* If all the isChecked property of options are falsy values, return undefined;
* Else return the key of the first option with the truthy isChecked property.
*/
ChoiceGroup.prototype._getKeyChecked = function (options) {
var optionsChecked = options.filter(function (option) {
return option.isChecked;
});
if (optionsChecked.length === 0) {
return undefined;
}
else {
return optionsChecked[0].key;
}
};
ChoiceGroup.defaultProps = {
options: []
};
return ChoiceGroup;
}(React.Component));
exports.ChoiceGroup = ChoiceGroup;
});