wix-style-react
Version:
302 lines (253 loc) • 12 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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 _FocusableHOC = require("wix-ui-core/dist/src/hocs/Focusable/FocusableHOC");
var _FacesRatingBarSt = require("./FacesRatingBar.st.css");
var _constants = require("./constants");
var _Box = _interopRequireDefault(require("../Box/Box"));
var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
var _FaceIcons = require("./icons/FaceIcons");
var _excluded = ["faceIndex", "isSelected", "iconType", "isHovered", "showDescriptionValues", "descriptionValues", "onClick", "onMouseEnter", "onMouseLeave", "handleFocus", "handleBlur"];
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; } }
var faceIconsMap = {
1: _FaceIcons.FaceDisapointed,
2: _FaceIcons.FaceFrowning,
3: _FaceIcons.FaceNeutral,
4: _FaceIcons.FaceSmiling,
5: _FaceIcons.FaceGrining
};
/** A rating component that will enable the user to rate on a 1-5 scale. */
var FacesRatingBar = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(FacesRatingBar, _React$PureComponent);
var _super = _createSuper(FacesRatingBar);
function FacesRatingBar() {
var _this;
(0, _classCallCheck2["default"])(this, FacesRatingBar);
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), "state", {
faceHoveredIndex: 0
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onFaceClick", function (index) {
_this.props.onChange(index);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onFaceMouseEnter", function (index) {
_this.setState({
faceHoveredIndex: index
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onFaceMouseLeave", function () {
_this.setState({
faceHoveredIndex: 0
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onFaceFocus", function (faceIndex, focusableProps) {
// We would like to change the faces color on focus / hover
_this.setState({
faceHoveredIndex: faceIndex
});
focusableProps.focusableOnFocus();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onFaceBlur", function (focusableProps) {
// We would like to change the faces color on focus / hover
_this.setState({
faceHoveredIndex: 0
});
focusableProps.focusableOnBlur();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_shouldShowDescriptionValues", function () {
var _this$props = _this.props,
readOnly = _this$props.readOnly,
descriptionValues = _this$props.descriptionValues;
var shouldShowDescriptionValues = false; // Adding description values is not available in read only mode and it must be an array of strings at size 5.
if (!readOnly && descriptionValues) {
shouldShowDescriptionValues = Array.isArray(descriptionValues) && descriptionValues.length === 5;
}
return shouldShowDescriptionValues;
});
return _this;
}
(0, _createClass2["default"])(FacesRatingBar, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this$props2 = this.props,
readOnly = _this$props2.readOnly,
value = _this$props2.value;
if (readOnly && value === 0) {
throw new Error('In readOnly mode the value couldn’t be 0. Please enter a value between 1 to 5.');
}
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
dataHook = _this$props3.dataHook,
readOnly = _this$props3.readOnly,
value = _this$props3.value,
descriptionValues = _this$props3.descriptionValues;
var faceHoveredIndex = this.state.faceHoveredIndex;
var showDescriptionValues = this._shouldShowDescriptionValues();
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.root, {}, this.props),
dataHook: dataHook
}, /*#__PURE__*/_react["default"].createElement(Faces, {
readOnly: readOnly,
selectedIndex: value,
hoveredIndex: faceHoveredIndex,
showDescriptionValues: showDescriptionValues,
descriptionValues: descriptionValues,
onClick: this._onFaceClick,
onMouseEnter: this._onFaceMouseEnter,
onMouseLeave: this._onFaceMouseLeave,
handleFocus: this._onFaceFocus,
handleBlur: this._onFaceBlur
}));
}
}]);
return FacesRatingBar;
}(_react["default"].PureComponent);
var Faces = function Faces(_ref) {
var readOnly = _ref.readOnly,
selectedIndex = _ref.selectedIndex,
hoveredIndex = _ref.hoveredIndex,
showDescriptionValues = _ref.showDescriptionValues,
descriptionValues = _ref.descriptionValues,
onClick = _ref.onClick,
onMouseEnter = _ref.onMouseEnter,
onMouseLeave = _ref.onMouseLeave,
handleFocus = _ref.handleFocus,
handleBlur = _ref.handleBlur;
var facesArr = [];
for (var i = 1; i <= 5; i++) {
var isSelected = selectedIndex === i;
var isHovered = hoveredIndex === i;
var iconType = _constants.facesData[i].name;
var commonProps = {
key: i,
faceIndex: i,
isSelected: isSelected,
iconType: iconType
};
var face = readOnly ? /*#__PURE__*/_react["default"].createElement(ReadOnlyModeFace, commonProps) : /*#__PURE__*/_react["default"].createElement(FocusableInteractiveModeFace, (0, _extends2["default"])({}, commonProps, {
isHovered: isHovered,
showDescriptionValues: showDescriptionValues,
descriptionValues: descriptionValues,
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
handleFocus: handleFocus,
handleBlur: handleBlur
}));
facesArr.push(face);
}
return facesArr;
};
var InteractiveModeFace = function InteractiveModeFace(_ref2) {
var faceIndex = _ref2.faceIndex,
isSelected = _ref2.isSelected,
iconType = _ref2.iconType,
isHovered = _ref2.isHovered,
showDescriptionValues = _ref2.showDescriptionValues,
descriptionValues = _ref2.descriptionValues,
_onClick = _ref2.onClick,
_onMouseEnter = _ref2.onMouseEnter,
onMouseLeave = _ref2.onMouseLeave,
handleFocus = _ref2.handleFocus,
handleBlur = _ref2.handleBlur,
focusableProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
var IconTagName = faceIconsMap[faceIndex];
var tooltipContent = showDescriptionValues ? descriptionValues[faceIndex - 1] : '';
return /*#__PURE__*/_react["default"].createElement("button", {
"data-hook": _constants.dataHooks.face,
"data-index": faceIndex,
"data-selected": isSelected,
className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.buttonWrapper),
onClick: function onClick() {
return _onClick(faceIndex);
},
onMouseEnter: function onMouseEnter() {
return _onMouseEnter(faceIndex);
},
onMouseLeave: onMouseLeave,
onFocus: function onFocus() {
return handleFocus(faceIndex, focusableProps);
},
onBlur: function onBlur() {
return handleBlur(focusableProps);
}
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.face,
"data-selected": isSelected,
className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.faceContainer, {
type: 'interactive',
hovered: isHovered,
selected: isSelected,
iconType: iconType
})
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
dataHook: _constants.facesData[faceIndex].tooltipDataHook,
content: tooltipContent,
disabled: !showDescriptionValues
}, /*#__PURE__*/_react["default"].createElement(IconTagName, {
width: 22,
height: 22
}))));
};
var FocusableInteractiveModeFace = (0, _FocusableHOC.withFocusable)(InteractiveModeFace);
var ReadOnlyModeFace = function ReadOnlyModeFace(_ref3) {
var faceIndex = _ref3.faceIndex,
isSelected = _ref3.isSelected,
iconType = _ref3.iconType;
var IconTagName = faceIconsMap[faceIndex];
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.face,
"data-selected": isSelected,
className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.faceContainer, {
type: 'readOnly',
selected: isSelected,
iconType: iconType
})
}, /*#__PURE__*/_react["default"].createElement(IconTagName, null));
};
FacesRatingBar.displayName = 'FacesRatingBar';
FacesRatingBar.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** Allows you to apply a CSS class to the component’s root element */
className: _propTypes["default"].string,
/** Specifies whether the rating bar is in read only mode */
readOnly: _propTypes["default"].bool,
/** Specifies the rate value descriptions’ texts. The array must contain all 5 strings to display the descriptions labels. */
descriptionValues: _propTypes["default"].arrayOf(_propTypes["default"].string),
/** Specifies the selected rate. `0` indicates undefined rating. `readOnly` mode value cannot be `0`. */
value: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5]).isRequired,
/** Defines a handler that is called whenever a rating changes.
* ##### Signature:
* function(rating: number) => void
* * `rating`: 1 | 2 | 3 | 4 | 5
*/
onChange: _propTypes["default"].func
};
FacesRatingBar.defaultProps = {
readOnly: false,
onChange: function onChange() {}
};
var _default = FacesRatingBar;
exports["default"] = _default;