office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
121 lines • 7.2 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Label", "./ChoiceGroupOption/index", "../../Utilities"], function (require, exports, tslib_1, React, Label_1, index_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var getClassNames = Utilities_1.classNamesFunction();
var ChoiceGroupBase = /** @class */ (function (_super) {
tslib_1.__extends(ChoiceGroupBase, _super);
function ChoiceGroupBase(props) {
var _this = _super.call(this, props) || this;
_this._inputElement = Utilities_1.createRef();
_this.focusedVars = {};
_this.changedVars = {};
_this._onFocus = function (key) {
return _this.focusedVars[key]
? _this.focusedVars[key]
: (_this.focusedVars[key] = function (ev, option) {
_this.setState({
keyFocused: key,
keyChecked: _this.state.keyChecked
});
});
};
_this._onBlur = function (ev, option) {
_this.setState({
keyFocused: undefined,
keyChecked: _this.state.keyChecked
});
};
_this._onChange = function (key) {
return _this.changedVars[key]
? _this.changedVars[key]
: (_this.changedVars[key] = function (evt, option) {
var _a = _this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey, _b = _a.options, options = _b === void 0 ? [] : _b;
// Only manage state in uncontrolled scenarios.
if (selectedKey === undefined) {
_this.setState({
keyChecked: key
});
}
var originalOption = Utilities_1.find(options, function (value) { return value.key === key; });
// TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed.
if (onChange) {
onChange(evt, originalOption);
}
else if (onChanged) {
onChanged(originalOption);
}
});
};
_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;
}
ChoiceGroupBase.prototype.componentWillReceiveProps = function (newProps) {
var newKeyChecked = this._getKeyChecked(newProps);
var oldKeyCheched = this._getKeyChecked(this.props);
if (newKeyChecked !== oldKeyCheched) {
this.setState({
keyChecked: newKeyChecked
});
}
};
ChoiceGroupBase.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, theme = _a.theme, styles = _a.styles, options = _a.options, label = _a.label, required = _a.required, disabled = _a.disabled, name = _a.name;
var _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused;
var classNames = getClassNames(styles, {
theme: theme,
className: className,
optionsContainIconOrImage: options.some(function (option) { return Boolean(option.iconProps || option.imageSrc); })
});
var ariaLabelledBy = label ? this._id + '-label' : this.props['aria-labelledby'];
// In cases where no option is checked, set focusable to first enabled option so that ChoiceGroup remains focusable.
// If no options are enabled, ChoiceGroup is not focusable. If any option is checked, do not set keyDefaultFocusable.
var firstEnabledOption = disabled || options === undefined ? undefined : Utilities_1.find(options, function (option) { return !option.disabled; });
var keyDefaultFocusable = keyChecked === undefined && firstEnabledOption ? firstEnabledOption.key : undefined;
return (
// Need to assign role application on containing div because JAWS doesn't call OnKeyDown without this role
React.createElement("div", { role: "application", className: classNames.applicationRole },
React.createElement("div", tslib_1.__assign({ className: classNames.root, role: "radiogroup" }, ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }),
label && (React.createElement(Label_1.Label, { className: classNames.label, required: required, id: this._id + '-label' }, label)),
React.createElement("div", { className: classNames.flexContainer }, options.map(function (option) {
var innerOptionProps = tslib_1.__assign({}, option, { focused: option.key === keyFocused, checked: option.key === keyChecked, 'data-is-focusable': option.key === keyChecked || option.key === keyDefaultFocusable ? true : false, disabled: option.disabled || disabled, id: _this._id + "-" + option.key, labelId: _this._labelId + "-" + option.key, name: name || _this._id, required: required });
return (React.createElement(index_1.ChoiceGroupOption, tslib_1.__assign({ key: option.key, onBlur: _this._onBlur, onFocus: _this._onFocus(option.key), onChange: _this._onChange(option.key) }, innerOptionProps)));
})))));
};
ChoiceGroupBase.prototype.focus = function () {
if (this._inputElement.current) {
this._inputElement.current.focus();
}
};
ChoiceGroupBase.prototype._getKeyChecked = function (props) {
if (props.selectedKey !== undefined) {
return props.selectedKey;
}
var _a = props.options, options = _a === void 0 ? [] : _a;
var optionsChecked = options.filter(function (option) {
return option.checked;
});
if (optionsChecked.length === 0) {
return undefined;
}
else {
return optionsChecked[0].key;
}
};
ChoiceGroupBase.defaultProps = {
options: []
};
return ChoiceGroupBase;
}(Utilities_1.BaseComponent));
exports.ChoiceGroupBase = ChoiceGroupBase;
});
//# sourceMappingURL=ChoiceGroup.base.js.map