office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
148 lines • 9.36 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Image", "../../Label", "../../Icon", "../../Utilities", "./ChoiceGroup.scss"], function (require, exports, tslib_1, React, Image_1, Label_1, Icon_1, Utilities_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var ChoiceGroup = (function (_super) {
tslib_1.__extends(ChoiceGroup, _super);
function ChoiceGroup(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ 'onChanged': 'onChange' });
_this._warnMutuallyExclusive({
selectedKey: 'defaultSelectedKey'
});
_this.state = {
keyChecked: (props.defaultSelectedKey === undefined) ?
_this._getKeyChecked(props) :
props.defaultSelectedKey,
keyFocused: undefined
};
_this._id = Utilities_1.getId('ChoiceGroup');
_this._labelId = Utilities_1.getId('ChoiceGroupLabel');
return _this;
}
ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) {
var newKeyChecked = this._getKeyChecked(newProps);
var oldKeyCheched = this._getKeyChecked(this.props);
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 _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused;
return (
// Need to assign role application on containing div because JAWS doesn't call OnKeyDown without this role
React.createElement("div", { role: 'application', className: className },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceFieldGroup', styles.root), role: 'radiogroup', "aria-labelledby": (this.props.label ? this._id + '-label' : '') + " " + (this.props['aria-labelledby'] || '') },
this.props.label && (React.createElement(Label_1.Label, { className: className, required: required, id: this._id + '-label' }, label)),
options.map(function (option) {
var _a = option.onRenderField, onRenderField = _a === void 0 ? _this._onRenderField : _a, _b = option.onRenderLabel, onRenderLabel = _b === void 0 ? _this._onRenderLabel : _b;
// Merge internal props into option
Utilities_1.assign(option, {
checked: option.key === keyChecked,
disabled: option.disabled || _this.props.disabled,
id: _this._id + "-" + option.key,
labelId: _this._labelId + "-" + option.key,
onRenderLabel: onRenderLabel
});
return (React.createElement("div", { key: option.key, className: Utilities_1.css('ms-ChoiceField', styles.choiceField, (_c = {},
_c['ms-ChoiceField--image ' + styles.choiceFieldIsImage] = !!option.imageSrc,
_c['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon] = !!option.iconProps,
_c['is-inFocus ' + styles.choiceFieldIsInFocus] = option.key === keyFocused,
_c)) },
React.createElement("input", tslib_1.__assign({ ref: _this._resolveRef('_inputElement'), id: option.id, className: Utilities_1.css('ms-ChoiceField-input', styles.input), type: 'radio', name: _this.props.name || _this._id, disabled: option.disabled || _this.props.disabled, checked: option.key === keyChecked, required: required, onChange: _this._onChange.bind(_this, option), onFocus: _this._onFocus.bind(_this, option), onBlur: _this._onBlur.bind(_this, option), "aria-labelledby": option.id }, Utilities_1.getNativeProps(option, Utilities_1.inputProperties))),
onRenderField(option, _this._onRenderField)));
var _c;
}))));
};
ChoiceGroup.prototype.focus = function () {
if (this._inputElement) {
this._inputElement.focus();
}
};
ChoiceGroup.prototype._onFocus = function (option, ev) {
this.setState({
keyFocused: option.key,
keyChecked: this.state.keyChecked
});
};
ChoiceGroup.prototype._onBlur = function (option, ev) {
this.setState({
keyFocused: undefined,
keyChecked: this.state.keyChecked
});
};
ChoiceGroup.prototype._onRenderField = function (option) {
var onRenderLabel = option.onRenderLabel;
return (React.createElement("label", { htmlFor: option.id, className: Utilities_1.css('ms-ChoiceField-field', styles.field, (_a = {},
_a['ms-ChoiceField-field--image ' + styles.fieldIsImage] = !!option.imageSrc,
_a['ms-ChoiceField--icon ' + styles.fieldIsIcon] = !!option.iconProps,
_a['is-checked ' + styles.fieldIsChecked] = option.checked,
_a['is-disabled ' + styles.fieldIsDisabled] = option.disabled,
_a)) },
option.imageSrc && (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_b = {},
_b['is-hidden ' + styles.imageWrapperIsHidden] = option.checked,
_b)) },
React.createElement(Image_1.Image, { src: option.imageSrc, width: option.imageSize ? option.imageSize.width : undefined, height: option.imageSize ? option.imageSize.height : undefined })),
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_c = {},
_c['is-hidden ' + styles.imageWrapperIsHidden] = !option.checked,
_c)) },
React.createElement(Image_1.Image, { src: option.selectedImageSrc, width: option.imageSize ? option.imageSize.width : undefined, height: option.imageSize ? option.imageSize.height : undefined })))),
option.iconProps
? React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-iconWrapper', styles.iconWrapper) },
React.createElement(Icon_1.Icon, tslib_1.__assign({}, option.iconProps))))
: null,
option.imageSrc || option.iconProps
? (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-labelWrapper', styles.labelWrapper) }, onRenderLabel(option))) : onRenderLabel(option)));
var _a, _b, _c;
};
ChoiceGroup.prototype._onRenderLabel = function (option) {
return (React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text));
};
ChoiceGroup.prototype._onChange = function (option, evt) {
var _a = this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey;
// Only manage state in uncontrolled scenarios.
if (selectedKey === undefined) {
this.setState({
keyChecked: option.key
});
}
// TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed.
if (onChange) {
onChange(evt, option);
}
else 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 (props) {
if (props.selectedKey !== undefined) {
return props.selectedKey;
}
var optionsChecked = props.options.filter(function (option) {
return option.checked;
});
if (optionsChecked.length === 0) {
return undefined;
}
else {
return optionsChecked[0].key;
}
};
ChoiceGroup.defaultProps = {
options: []
};
return ChoiceGroup;
}(Utilities_1.BaseComponent));
exports.ChoiceGroup = ChoiceGroup;
});
//# sourceMappingURL=ChoiceGroup.js.map