office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
122 lines • 6.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Label_1 = require("../../Label");
var ChoiceGroupOption_1 = require("./ChoiceGroupOption");
var Utilities_1 = require("../../Utilities");
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, options = _a.options;
// Only manage state in uncontrolled scenarios.
if (selectedKey === undefined) {
_this.setState({
keyChecked: key
});
}
var originalOption = options.find(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'];
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, disabled: option.disabled || disabled, id: _this._id + "-" + option.key, labelId: _this._labelId + "-" + option.key, name: name || _this._id, required: required });
return (React.createElement(ChoiceGroupOption_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 optionsChecked = props.options.filter(function (option) {
return option.checked;
});
if (optionsChecked.length === 0) {
return undefined;
}
else {
return optionsChecked[0].key;
}
};
ChoiceGroupBase.defaultProps = {
options: []
};
ChoiceGroupBase = tslib_1.__decorate([
Utilities_1.customizable('ChoiceGroup', ['theme'])
], ChoiceGroupBase);
return ChoiceGroupBase;
}(Utilities_1.BaseComponent));
exports.ChoiceGroupBase = ChoiceGroupBase;
//# sourceMappingURL=ChoiceGroup.base.js.map