office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
118 lines (116 loc) • 6.33 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Label", "../../Utilities", "../../Styling", "./Toggle.styles"], function (require, exports, tslib_1, React, Utilities_1, Label_1, Utilities_2, Styling_1, Toggle_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Toggle = (function (_super) {
tslib_1.__extends(Toggle, _super);
function Toggle(props) {
var _this = _super.call(this) || this;
_this._warnMutuallyExclusive({
checked: 'defaultChecked'
});
_this.state = {
isChecked: !!(props.checked || props.defaultChecked)
};
_this._id = props.id || Utilities_1.getId('Toggle');
return _this;
}
Object.defineProperty(Toggle.prototype, "checked", {
/**
* Gets the current checked state of the toggle.
*/
get: function () {
return this.state.isChecked;
},
enumerable: true,
configurable: true
});
Toggle.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.checked !== undefined) {
this.setState({
isChecked: !!newProps.checked // convert null to false
});
}
};
Toggle.prototype.render = function () {
// This control is using an input element for more universal accessibility support.
// Previously a button and the aria-pressed attribute were used. This technique works well with Narrator + Edge and NVDA + FireFox.
// However, JAWS and VoiceOver did not announce anything when the toggle was checked or unchecked.
// In the future when more screenreaders support aria-pressed it would be a good idea to change this control back to using it as it is
// more semantically correct.
var _this = this;
var _a = this.props, className = _a.className, theme = _a.theme, customStyles = _a.styles, disabled = _a.disabled, label = _a.label, offAriaLabel = _a.offAriaLabel, offText = _a.offText, onAriaLabel = _a.onAriaLabel, onText = _a.onText;
var isChecked = this.state.isChecked;
var stateText = isChecked ? onText : offText;
var ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
var toggleNativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultChecked']);
var classNames = this._getClassNames(Toggle_styles_1.getStyles(theme, customStyles), className, disabled, isChecked);
return (React.createElement("div", { className: classNames.root },
label && (React.createElement(Label_1.Label, { htmlFor: this._id, className: classNames.label }, label)),
React.createElement("div", { className: classNames.container },
React.createElement("button", tslib_1.__assign({}, toggleNativeProps, { type: 'button', className: classNames.pill, ref: function (c) { return _this._toggleButton = c; }, "aria-disabled": disabled, "aria-pressed": isChecked, "aria-label": ariaLabel, id: this._id, onChange: function () { }, disabled: disabled, "data-is-focusable": true, onClick: this._onClick }),
React.createElement("div", { className: classNames.thumb })),
stateText && (React.createElement(Label_1.Label, { className: classNames.text }, stateText)))));
};
Toggle.prototype.focus = function () {
if (this._toggleButton) {
this._toggleButton.focus();
}
};
Toggle.prototype._onClick = function (ev) {
var _a = this.props, checked = _a.checked, onChanged = _a.onChanged, onClick = _a.onClick;
var isChecked = this.state.isChecked;
// Only update the state if the user hasn't provided it.
if (checked === undefined) {
this.setState({
isChecked: !isChecked
});
}
if (onChanged) {
onChanged(!isChecked);
}
if (onClick) {
onClick(ev);
}
};
Toggle.prototype._getClassNames = function (styles, className, disabled, isChecked) {
return {
root: Styling_1.mergeStyles('ms-Toggle', isChecked && 'is-checked', !disabled && 'is-enabled', disabled && 'is-disabled', className, styles.root),
label: Styling_1.mergeStyles('ms-Toggle-label', styles.label),
container: Styling_1.mergeStyles('ms-Toggle-innerContainer', styles.container),
pill: Styling_1.mergeStyles('ms-Toggle-background', styles.pill, !disabled && [
!isChecked && {
':hover': styles.pillHovered,
':hover .ms-Toggle-thumb': styles.thumbHovered
},
isChecked && [
styles.pillChecked,
{
':hover': styles.pillCheckedHovered,
':hover .ms-Toggle-thumb': styles.thumbCheckedHovered
}
]
], disabled && [
!isChecked && styles.pillDisabled,
isChecked && styles.pillCheckedDisabled,
]),
thumb: Styling_1.mergeStyles('ms-Toggle-thumb', styles.thumb, !disabled && isChecked && styles.thumbChecked, disabled && [
!isChecked && styles.thumbDisabled,
isChecked && styles.thumbCheckedDisabled
]),
text: Styling_1.mergeStyles('ms-Toggle-stateText', styles.text),
};
};
return Toggle;
}(Utilities_1.BaseComponent));
tslib_1.__decorate([
Utilities_1.autobind
], Toggle.prototype, "_onClick", null);
tslib_1.__decorate([
Utilities_1.memoize
], Toggle.prototype, "_getClassNames", null);
Toggle = tslib_1.__decorate([
Utilities_2.customizable(['theme'])
], Toggle);
exports.Toggle = Toggle;
});
//# sourceMappingURL=Toggle.js.map