wix-style-react
Version:
267 lines (210 loc) • 12.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _CheckboxChecked = _interopRequireDefault(require("wix-ui-icons-common/system/CheckboxChecked"));
var _CheckboxIndeterminate = _interopRequireDefault(require("wix-ui-icons-common/system/CheckboxIndeterminate"));
var _CheckboxSt = require("./Checkbox.st.css");
var _Text = _interopRequireDefault(require("../Text"));
var _FocusableHOC = require("wix-ui-core/dist/src/hocs/Focusable/FocusableHOC");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _generateId = require("../utils/generateId");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var DATA_ATTR = _interopRequireWildcard(require("./DataAttr"));
var _constants = require("./constants");
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
/** a simple WixStyle checkbox */
var Checkbox = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(Checkbox, _React$PureComponent);
var _super = _createSuper(Checkbox);
function Checkbox() {
var _this;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_id", "".concat(Checkbox.displayName, "-").concat((0, _generateId.generateID)()));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "checkboxRef", /*#__PURE__*/_react["default"].createRef());
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function () {
_this.checkboxRef.current && _this.checkboxRef.current.focus();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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 = {}, (0, _defineProperty2["default"])(_ref, DATA_ATTR.DATA_CHECK_TYPE, indeterminate ? DATA_ATTR.CHECK_TYPES.INDETERMINATE : checked ? DATA_ATTR.CHECK_TYPES.CHECKED : DATA_ATTR.CHECK_TYPES.UNCHECKED), (0, _defineProperty2["default"])(_ref, DATA_ATTR.DATA_HAS_ERROR, hasError && !disabled), (0, _defineProperty2["default"])(_ref, DATA_ATTR.DATA_DISABLED, disabled), _ref;
});
return _this;
}
(0, _createClass2["default"])(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) {
(0, _deprecationLog["default"])('<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["default"].createElement("div", (0, _extends2["default"])({
"data-hook": dataHook,
className: (0, _CheckboxSt.st)(_CheckboxSt.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["default"].createElement("input", {
"data-hook": _constants.dataHooks.input,
type: "checkbox",
id: id,
checked: checked,
disabled: disabled,
onChange: disabled ? null : onChange,
style: {
display: 'none'
}
}), /*#__PURE__*/_react["default"].createElement("label", {
htmlFor: id,
"data-hook": _constants.dataHooks.label,
className: _CheckboxSt.classes.label
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _CheckboxSt.classes.labelInner,
style: {
padding: selectionAreaPadding
}
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
dataHook: _constants.dataHooks.boxTooltip,
disabled: isTooltipDisabled,
content: tooltipContent || errorMessage || ' ',
textAlign: "center",
maxWidth: 230,
hideDelay: 150,
zIndex: 10000
}, tooltipProps), /*#__PURE__*/_react["default"].createElement("div", {
className: _CheckboxSt.classes.outer
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.box,
className: _CheckboxSt.classes.checkbox
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _CheckboxSt.classes.inner,
onClick: function onClick(e) {
return e.stopPropagation();
}
}, indeterminate ? /*#__PURE__*/_react["default"].createElement(_CheckboxIndeterminate["default"], null) : /*#__PURE__*/_react["default"].createElement(_CheckboxChecked["default"], null))))), children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
size: size,
onClick: function onClick(e) {
return e.stopPropagation();
},
weight: "thin",
dataHook: _constants.dataHooks.children,
className: _CheckboxSt.classes.children
}, children))));
}
}]);
return Checkbox;
}(_react["default"].PureComponent);
Checkbox.displayName = 'Checkbox';
Checkbox.propTypes = {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook: _propTypes["default"].string,
/** Specifies whether a checkbox is selected */
checked: _propTypes["default"].bool,
/** Renders any component passed within <Checkbox> tags as the label of a checkbox. The default value is a text string. */
children: _propTypes["default"].node,
/** Specifies whether a checkbox is disabled */
disabled: _propTypes["default"].bool,
/** Specifies whether a checkbox has an error */
hasError: _propTypes["default"].bool,
/** Assigns a unique identifier for the checkbox */
id: _propTypes["default"].string,
/** Specifies whether a checkbox is in an indeterminate state */
indeterminate: _propTypes["default"].bool,
/**
* The error message when there's an error
* @deprecated
* */
errorMessage: _propTypes["default"].string,
/** Controls the selection area highlight visibility */
selectionArea: _propTypes["default"].oneOf(['none', 'hover', 'always']),
/** Controls checkbox alignment to the label on the Y axis */
vAlign: _propTypes["default"].oneOf(['center', 'top']),
/** Controls the size of the checkbox label */
size: _propTypes["default"].oneOf(['small', 'medium']),
/** Defines a callback function which is called every time the checkbox state is changed */
onChange: _propTypes["default"].func,
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes["default"].string,
/** Sets the design of the selection area */
selectionAreaSkin: _propTypes["default"].oneOf(['filled', 'outlined']),
/** Sets the amount of white space around the checkbox label in pixels */
selectionAreaPadding: _propTypes["default"].string,
/** Defines a message to be displayed in a tooltip. Tooltip is displayed on a checkbox hover. */
tooltipContent: _propTypes["default"].node,
/** Allows you to pass all common tooltip props. Check `<Tooltip/>` for the full API. */
tooltipProps: _propTypes["default"].shape(_TooltipCommon.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'
};
var _default = (0, _FocusableHOC.withFocusable)(Checkbox);
exports["default"] = _default;