office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
100 lines (98 loc) • 4.94 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Icon", "./Checkbox.scss"], function (require, exports, tslib_1, React, Utilities_1, Icon_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Checkbox = (function (_super) {
tslib_1.__extends(Checkbox, _super);
/**
* Initialize a new instance of the TopHeaderV2
* @param props Props for the component
* @param context Context or initial state for the base component.
*/
function Checkbox(props, context) {
var _this = _super.call(this, props, context) || this;
_this._warnMutuallyExclusive({
'checked': 'defaultChecked'
});
_this._id = Utilities_1.getId('checkbox-');
_this.state = {
isFocused: false,
isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
};
return _this;
}
/**
* Render the Checkbox based on passed props
*/
Checkbox.prototype.render = function () {
var _a = this.props, checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, inputProps = _a.inputProps, label = _a.label, name = _a.name, boxSide = _a.boxSide;
var isFocused = this.state.isFocused;
var isChecked = checked === undefined ? this.state.isChecked : checked;
var rootClassName = Utilities_1.css('ms-Checkbox', className, styles.root, (_b = {},
_b['reversed ' + styles.reversed] = boxSide !== 'start',
_b['is-checked ' + styles.isChecked] = isChecked,
_b['is-disabled ' + styles.isDisabled] = disabled,
_b['is-inFocus ' + styles.isInFocus] = isFocused,
_b));
return (React.createElement("div", { className: rootClassName, style: this.props.style },
React.createElement("input", tslib_1.__assign({}, inputProps, (checked !== undefined && { checked: checked }), (defaultChecked !== undefined && { defaultChecked: defaultChecked }), { disabled: disabled, ref: this._resolveRef('_checkBox'), id: this._id, name: name || this._id, className: Utilities_1.css('ms-Checkbox-input', styles.input), type: 'checkbox', onChange: this._onChange, onFocus: this._onFocus, onBlur: this._onBlur, "aria-checked": isChecked })),
React.createElement("label", { className: Utilities_1.css('ms-Checkbox-label', styles.label), htmlFor: this._id },
React.createElement("span", { className: Utilities_1.css('box', styles.box) },
React.createElement("span", { className: Utilities_1.css('checkbox', styles.checkbox) },
React.createElement(Icon_1.Icon, { iconName: 'CheckMark', className: styles.checkmark }))),
label && React.createElement("span", { className: Utilities_1.css('text', styles.text) }, label))));
var _b;
};
Object.defineProperty(Checkbox.prototype, "checked", {
get: function () {
return this._checkBox ? this._checkBox.checked : false;
},
enumerable: true,
configurable: true
});
Checkbox.prototype.focus = function () {
if (this._checkBox) {
this._checkBox.focus();
}
};
Checkbox.prototype._onFocus = function (ev) {
var inputProps = this.props.inputProps;
if (inputProps && inputProps.onFocus) {
inputProps.onFocus(ev);
}
this.setState({ isFocused: true });
};
Checkbox.prototype._onBlur = function (ev) {
var inputProps = this.props.inputProps;
if (inputProps && inputProps.onBlur) {
inputProps.onBlur(ev);
}
this.setState({ isFocused: false });
};
Checkbox.prototype._onChange = function (ev) {
var onChange = this.props.onChange;
var isChecked = ev.target.checked;
if (onChange) {
onChange(ev, isChecked);
}
if (this.props.checked === undefined) {
this.setState({ isChecked: isChecked });
}
};
return Checkbox;
}(Utilities_1.BaseComponent));
Checkbox.defaultProps = {
boxSide: 'start'
};
tslib_1.__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onFocus", null);
tslib_1.__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onBlur", null);
tslib_1.__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onChange", null);
exports.Checkbox = Checkbox;
});
//# sourceMappingURL=Checkbox.js.map