office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
134 lines • 6.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Icon_1 = require("../../Icon");
var Utilities_2 = require("../../Utilities");
var Styling_1 = require("../../Styling");
var Checkbox_styles_1 = require("./Checkbox.styles");
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 = {
isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
};
return _this;
}
Checkbox.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.checked !== undefined) {
this.setState({
isChecked: !!newProps.checked // convert null to false
});
}
};
/**
* 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, name = _a.name, boxSide = _a.boxSide, theme = _a.theme, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, customStyles = _a.styles, _b = _a.onRenderLabel, onRenderLabel = _b === void 0 ? this._onRenderLabel : _b;
var isChecked = checked === undefined ? this.state.isChecked : checked;
var isReversed = boxSide !== 'start' ? true : false;
this._classNames = this._getClassNames(Checkbox_styles_1.getStyles(theme, customStyles), className, disabled, isChecked, isReversed);
return (React.createElement("button", tslib_1.__assign({}, inputProps, (checked !== undefined && { checked: checked }), (defaultChecked !== undefined && { defaultChecked: defaultChecked }), { disabled: disabled, ref: this._resolveRef('_checkBox'), name: name, id: this._id, role: 'checkbox', type: 'button', className: this._classNames.root, onClick: this._onClick, onFocus: this._onFocus, onBlur: this._onBlur, "aria-checked": isChecked, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }),
React.createElement("label", { className: this._classNames.label, htmlFor: this._id },
React.createElement("div", { className: this._classNames.checkbox },
React.createElement(Icon_1.Icon, { iconName: 'CheckMark', className: this._classNames.checkmark })),
onRenderLabel(this.props, this._onRenderLabel))));
};
Object.defineProperty(Checkbox.prototype, "checked", {
get: function () {
return this.state.isChecked;
},
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);
}
};
Checkbox.prototype._onBlur = function (ev) {
var inputProps = this.props.inputProps;
if (inputProps && inputProps.onBlur) {
inputProps.onBlur(ev);
}
};
Checkbox.prototype._onClick = function (ev) {
var _a = this.props, disabled = _a.disabled, onChange = _a.onChange;
var isChecked = this.state.isChecked;
ev.preventDefault();
ev.stopPropagation();
if (!disabled) {
if (onChange) {
onChange(ev, !isChecked);
}
if (this.props.checked === undefined) {
this.setState({ isChecked: !isChecked });
}
}
};
Checkbox.prototype._onRenderLabel = function (props) {
var label = props.label;
return label ? (React.createElement("span", { className: this._classNames.text }, label)) : (null);
};
Checkbox.prototype._getClassNames = function (styles, className, disabled, isChecked, isReversed) {
return {
root: Styling_1.mergeStyles('ms-Checkbox', isReversed && 'reversed', isChecked && 'is-checked', !disabled && 'is-enabled', disabled && 'is-disabled', className, styles.root, !disabled && [
!isChecked && {
':hover .ms-Checkbox-checkbox': styles.checkboxHovered
},
isChecked && {
':hover .ms-Checkbox-checkbox': styles.checkboxCheckedHovered
},
{
':hover .ms-Checkbox-text': styles.textHovered
}
]),
label: Styling_1.mergeStyles('ms-Checkbox-label', styles.label, isReversed && styles.labelReversed, disabled && styles.labelDisabled),
checkbox: Styling_1.mergeStyles('ms-Checkbox-checkbox', styles.checkbox, !disabled && isChecked && styles.checkboxChecked, disabled && !isChecked && styles.checkboxDisabled, disabled && isChecked && styles.checkboxCheckedDisabled),
checkmark: Styling_1.mergeStyles(styles.checkmark, !disabled && isChecked && styles.checkmarkChecked, disabled && !isChecked && styles.checkmarkDisabled, disabled && isChecked && styles.checkmarkCheckedDisabled),
text: Styling_1.mergeStyles('ms-Checkbox-text', styles.text, disabled && styles.textDisabled),
};
};
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, "_onClick", null);
tslib_1.__decorate([
Utilities_1.autobind
], Checkbox.prototype, "_onRenderLabel", null);
tslib_1.__decorate([
Utilities_1.memoize
], Checkbox.prototype, "_getClassNames", null);
Checkbox = tslib_1.__decorate([
Utilities_2.customizable(['theme'])
], Checkbox);
return Checkbox;
}(Utilities_1.BaseComponent));
exports.Checkbox = Checkbox;
//# sourceMappingURL=Checkbox.js.map