office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
103 lines • 5.62 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, getId, createRef, classNamesFunction, mergeAriaAttributeValues } from '../../Utilities';
import { Icon } from '../../Icon';
import { KeytipData } from '../../KeytipData';
var getClassNames = classNamesFunction();
var CheckboxBase = /** @class */ (function (_super) {
tslib_1.__extends(CheckboxBase, _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 CheckboxBase(props, context) {
var _this = _super.call(this, props, context) || this;
_this._checkBox = createRef();
_this._onFocus = function (ev) {
var inputProps = _this.props.inputProps;
if (inputProps && inputProps.onFocus) {
inputProps.onFocus(ev);
}
};
_this._onBlur = function (ev) {
var inputProps = _this.props.inputProps;
if (inputProps && inputProps.onBlur) {
inputProps.onBlur(ev);
}
};
_this._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 });
}
}
};
_this._onRenderLabel = function (props) {
var label = props.label;
return label ? React.createElement("span", { className: _this._classNames.text }, label) : null;
};
_this._warnMutuallyExclusive({
checked: 'defaultChecked'
});
_this._id = _this.props.id || getId('checkbox-');
_this.state = {
isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
};
return _this;
}
CheckboxBase.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.checked !== undefined) {
this.setState({
isChecked: !!newProps.checked // convert null to false
});
}
};
/**
* Render the Checkbox based on passed props
*/
CheckboxBase.prototype.render = function () {
var _this = this;
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, styles = _a.styles, _b = _a.onRenderLabel, onRenderLabel = _b === void 0 ? this._onRenderLabel : _b, checkmarkIconProps = _a.checkmarkIconProps, ariaPositionInSet = _a.ariaPositionInSet, ariaSetSize = _a.ariaSetSize, keytipProps = _a.keytipProps, title = _a.title;
var isChecked = checked === undefined ? this.state.isChecked : checked;
var isReversed = boxSide !== 'start' ? true : false;
this._classNames = getClassNames(styles, {
theme: theme,
className: className,
disabled: disabled,
checked: isChecked,
reversed: isReversed,
isUsingCustomLabelRender: onRenderLabel !== this._onRenderLabel
});
return (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: disabled }, function (keytipAttributes) { return (React.createElement("button", tslib_1.__assign({}, inputProps, { "data-ktp-execute-target": keytipAttributes['data-ktp-execute-target'] }, checked !== undefined && { checked: checked }, defaultChecked !== undefined && { defaultChecked: defaultChecked }, { disabled: disabled, ref: _this._checkBox, name: name, id: _this._id, role: "checkbox", type: "button", title: title, 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": mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby']), "aria-posinset": ariaPositionInSet, "aria-setsize": ariaSetSize }),
React.createElement("label", { className: _this._classNames.label, htmlFor: _this._id },
React.createElement("div", { className: _this._classNames.checkbox, "data-ktp-target": keytipAttributes['data-ktp-target'] },
React.createElement(Icon, tslib_1.__assign({ iconName: "CheckMark" }, checkmarkIconProps, { className: _this._classNames.checkmark }))),
onRenderLabel(_this.props, _this._onRenderLabel)))); }));
};
Object.defineProperty(CheckboxBase.prototype, "checked", {
get: function () {
return this.state.isChecked;
},
enumerable: true,
configurable: true
});
CheckboxBase.prototype.focus = function () {
if (this._checkBox.current) {
this._checkBox.current.focus();
}
};
CheckboxBase.defaultProps = {
boxSide: 'start'
};
return CheckboxBase;
}(BaseComponent));
export { CheckboxBase };
//# sourceMappingURL=Checkbox.base.js.map