wix-style-react
Version:
236 lines (200 loc) • 9.67 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import CheckboxChecked from 'wix-ui-icons-common/system/CheckboxChecked';
import CheckboxIndeterminate from 'wix-ui-icons-common/system/CheckboxIndeterminate';
import { st, classes } from './Checkbox.st.css';
import Text from '../Text';
import { withFocusable } from "wix-ui-core/dist/es/src/hocs/Focusable/FocusableHOC";
import deprecationLog from '../utils/deprecationLog';
import { generateID } from '../utils/generateId';
import Tooltip from '../Tooltip';
import * as DATA_ATTR from './DataAttr';
import { dataHooks } from './constants';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
/** a simple WixStyle checkbox */
var Checkbox = /*#__PURE__*/function (_React$PureComponent) {
_inherits(Checkbox, _React$PureComponent);
var _super = _createSuper(Checkbox);
function Checkbox() {
var _this;
_classCallCheck(this, Checkbox);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "_id", "".concat(Checkbox.displayName, "-").concat(generateID()));
_defineProperty(_assertThisInitialized(_this), "checkboxRef", /*#__PURE__*/React.createRef());
_defineProperty(_assertThisInitialized(_this), "focus", function () {
_this.checkboxRef.current && _this.checkboxRef.current.focus();
});
_defineProperty(_assertThisInitialized(_this), "_getDataAttributes", function () {
var _ref;
var _this$props = _this.props,
checked = _this$props.checked,
indeterminate = _this$props.indeterminate,
disabled = _this$props.disabled,
hasError = _this$props.hasError;
return _ref = {}, _defineProperty(_ref, DATA_ATTR.DATA_CHECK_TYPE, indeterminate ? DATA_ATTR.CHECK_TYPES.INDETERMINATE : checked ? DATA_ATTR.CHECK_TYPES.CHECKED : DATA_ATTR.CHECK_TYPES.UNCHECKED), _defineProperty(_ref, DATA_ATTR.DATA_HAS_ERROR, hasError && !disabled), _defineProperty(_ref, DATA_ATTR.DATA_DISABLED, disabled), _ref;
});
return _this;
}
_createClass(Checkbox, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
_this$props2$id = _this$props2.id,
id = _this$props2$id === void 0 ? this._id : _this$props2$id,
checked = _this$props2.checked,
indeterminate = _this$props2.indeterminate,
disabled = _this$props2.disabled,
hasError = _this$props2.hasError,
errorMessage = _this$props2.errorMessage,
selectionArea = _this$props2.selectionArea,
vAlign = _this$props2.vAlign,
size = _this$props2.size,
onChange = _this$props2.onChange,
children = _this$props2.children,
dataHook = _this$props2.dataHook,
focusableOnFocus = _this$props2.focusableOnFocus,
focusableOnBlur = _this$props2.focusableOnBlur,
className = _this$props2.className,
tooltipProps = _this$props2.tooltipProps,
tooltipContent = _this$props2.tooltipContent,
selectionAreaSkin = _this$props2.selectionAreaSkin,
selectionAreaPadding = _this$props2.selectionAreaPadding;
if (errorMessage) {
deprecationLog('<Checkbox/> - errorMessage prop is deprecated and will be removed in next major release, please use tooltipContent instead');
}
var isTooltipDisabled = tooltipProps && tooltipProps.disabled || disabled || !tooltipContent && (!hasError || !errorMessage);
return /*#__PURE__*/React.createElement("div", _extends({
"data-hook": dataHook,
className: st(classes.root, {
vAlign: vAlign,
selectionArea: selectionArea,
selectionAreaSkin: selectionAreaSkin,
disabled: disabled,
error: hasError && !disabled,
selection: indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked',
indeterminate: indeterminate
}, className),
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: disabled ? null : 0
}, this._getDataAttributes(), {
role: "checkbox",
"aria-checked": checked,
ref: this.checkboxRef
}), /*#__PURE__*/React.createElement("input", {
"data-hook": dataHooks.input,
type: "checkbox",
id: id,
checked: checked,
disabled: disabled,
onChange: disabled ? null : onChange,
style: {
display: 'none'
}
}), /*#__PURE__*/React.createElement("label", {
htmlFor: id,
"data-hook": dataHooks.label,
className: classes.label
}, /*#__PURE__*/React.createElement("div", {
className: classes.labelInner,
style: {
padding: selectionAreaPadding
}
}, /*#__PURE__*/React.createElement(Tooltip, _extends({
dataHook: dataHooks.boxTooltip,
disabled: isTooltipDisabled,
content: tooltipContent || errorMessage || ' ',
textAlign: "center",
maxWidth: 230,
hideDelay: 150,
zIndex: 10000
}, tooltipProps), /*#__PURE__*/React.createElement("div", {
className: classes.outer
}, /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.box,
className: classes.checkbox
}, /*#__PURE__*/React.createElement("div", {
className: classes.inner,
onClick: function onClick(e) {
return e.stopPropagation();
}
}, indeterminate ? /*#__PURE__*/React.createElement(CheckboxIndeterminate, null) : /*#__PURE__*/React.createElement(CheckboxChecked, null))))), children && /*#__PURE__*/React.createElement(Text, {
size: size,
onClick: function onClick(e) {
return e.stopPropagation();
},
weight: "thin",
dataHook: dataHooks.children,
className: classes.children
}, children))));
}
}]);
return Checkbox;
}(React.PureComponent);
Checkbox.displayName = 'Checkbox';
Checkbox.propTypes = {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook: PropTypes.string,
/** Specifies whether a checkbox is selected */
checked: PropTypes.bool,
/** Renders any component passed within <Checkbox> tags as the label of a checkbox. The default value is a text string. */
children: PropTypes.node,
/** Specifies whether a checkbox is disabled */
disabled: PropTypes.bool,
/** Specifies whether a checkbox has an error */
hasError: PropTypes.bool,
/** Assigns a unique identifier for the checkbox */
id: PropTypes.string,
/** Specifies whether a checkbox is in an indeterminate state */
indeterminate: PropTypes.bool,
/**
* The error message when there's an error
* @deprecated
* */
errorMessage: PropTypes.string,
/** Controls the selection area highlight visibility */
selectionArea: PropTypes.oneOf(['none', 'hover', 'always']),
/** Controls checkbox alignment to the label on the Y axis */
vAlign: PropTypes.oneOf(['center', 'top']),
/** Controls the size of the checkbox label */
size: PropTypes.oneOf(['small', 'medium']),
/** Defines a callback function which is called every time the checkbox state is changed */
onChange: PropTypes.func,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Sets the design of the selection area */
selectionAreaSkin: PropTypes.oneOf(['filled', 'outlined']),
/** Sets the amount of white space around the checkbox label in pixels */
selectionAreaPadding: PropTypes.string,
/** Defines a message to be displayed in a tooltip. Tooltip is displayed on a checkbox hover. */
tooltipContent: PropTypes.node,
/** Allows you to pass all common tooltip props. Check `<Tooltip/>` for the full API. */
tooltipProps: PropTypes.shape(TooltipCommonProps)
};
Checkbox.defaultProps = {
checked: false,
size: 'medium',
selectionArea: 'none',
vAlign: 'center',
onChange: function onChange(e) {
return e.stopPropagation();
},
hasError: false,
disabled: false,
indeterminate: false,
selectionAreaSkin: 'filled'
};
export default withFocusable(Checkbox);