@wix/design-system
Version:
@wix/design-system
326 lines (323 loc) • 12 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = 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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Focusable = require("../common/Focusable");
var _useHover = require("../common/useHover");
var _FacesRatingBarSt = require("./FacesRatingBar.st.css.js");
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", "maxValue"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FacesRatingBar/FacesRatingBar.jsx",
_this2 = void 0;
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var faceIconsMap = {
5: {
1: _FaceIcons.FaceDisapointed,
2: _FaceIcons.FaceFrowning,
3: _FaceIcons.FaceNeutral,
4: _FaceIcons.FaceSmiling,
5: _FaceIcons.FaceGrining
},
4: {
1: _FaceIcons.FaceDisapointed,
2: _FaceIcons.FaceFrowning,
3: _FaceIcons.FaceSmiling,
4: _FaceIcons.FaceGrining
},
3: {
1: _FaceIcons.FaceDisapointed,
2: _FaceIcons.FaceNeutral,
3: _FaceIcons.FaceSmiling
},
2: {
1: _FaceIcons.FaceDisapointed,
2: _FaceIcons.FaceSmiling
}
};
/** A rating component that will enable the user to rate on a 1-5 scale. */
var FacesRatingBar = /*#__PURE__*/function (_React$PureComponent) {
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 = _callSuper(this, FacesRatingBar, [].concat(args));
_this.state = {
faceHoveredIndex: 0
};
_this._onFaceClick = function (index) {
_this.props.onChange(index);
};
_this._onFaceMouseEnter = function (index) {
_this.setState({
faceHoveredIndex: index
});
};
_this._onFaceMouseLeave = function () {
_this.setState({
faceHoveredIndex: 0
});
};
_this._onFaceFocus = function (faceIndex, focusableProps) {
// We would like to change the faces color on focus / hover
_this.setState({
faceHoveredIndex: faceIndex
});
focusableProps.focusableOnFocus();
};
_this._onFaceBlur = function (focusableProps) {
// We would like to change the faces color on focus / hover
_this.setState({
faceHoveredIndex: 0
});
focusableProps.focusableOnBlur();
};
_this._shouldShowDescriptionValues = function () {
var _this$props = _this.props,
readOnly = _this$props.readOnly,
descriptionValues = _this$props.descriptionValues,
maxValue = _this$props.maxValue;
var shouldShowDescriptionValues = false;
// Adding description values is not available in read only mode and it must be an array of strings at size of at least 2.
if (!readOnly && descriptionValues) {
shouldShowDescriptionValues = Array.isArray(descriptionValues) && descriptionValues.length === maxValue;
}
return shouldShowDescriptionValues;
};
return _this;
}
(0, _inherits2["default"])(FacesRatingBar, _React$PureComponent);
return (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,
maxValue = _this$props3.maxValue;
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,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(Faces, {
readOnly: readOnly,
maxValue: maxValue,
selectedIndex: value,
hoveredIndex: faceHoveredIndex,
showDescriptionValues: showDescriptionValues,
descriptionValues: descriptionValues,
onClick: this._onFaceClick,
onMouseEnter: this._onFaceMouseEnter,
onMouseLeave: this._onFaceMouseLeave,
handleFocus: this._onFaceFocus,
handleBlur: this._onFaceBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 9
}
}));
}
}]);
}(_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,
maxValue = _ref.maxValue;
var facesArr = [];
for (var i = 1; i <= maxValue; 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,
maxValue: maxValue
};
var face = readOnly ? /*#__PURE__*/_react["default"].createElement(ReadOnlyModeFace, (0, _extends2["default"])({}, commonProps, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 7
}
})) : /*#__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,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 7
}
}));
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,
maxValue = _ref2.maxValue,
focusableProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
var IconTagName = faceIconsMap[maxValue][faceIndex];
var tooltipContent = showDescriptionValues ? descriptionValues[faceIndex - 1] : '';
var hoverProps = (0, _useHover.createHoverHandlers)({
onHoverStart: function onHoverStart() {
return onMouseEnter(faceIndex);
},
onHoverEnd: function onHoverEnd() {
return onMouseLeave();
}
});
return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
"data-hook": _constants.dataHooks.face,
"data-index": faceIndex,
"data-selected": isSelected,
className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.buttonWrapper),
onClick: function onClick() {
return _onClick(faceIndex);
}
}, hoverProps, {
onFocus: function onFocus() {
return handleFocus(faceIndex, focusableProps);
},
onBlur: function onBlur() {
return handleBlur(focusableProps);
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 5
}
}), /*#__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
}),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
dataHook: _constants.facesData[faceIndex].tooltipDataHook,
content: tooltipContent,
disabled: !showDescriptionValues,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(IconTagName, {
width: 22,
height: 22,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 11
}
}))));
};
var FocusableInteractiveModeFace = (0, _Focusable.withFocusable)(InteractiveModeFace);
var ReadOnlyModeFace = function ReadOnlyModeFace(_ref3) {
var faceIndex = _ref3.faceIndex,
isSelected = _ref3.isSelected,
iconType = _ref3.iconType,
maxValue = _ref3.maxValue;
var IconTagName = faceIconsMap[maxValue][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
}),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 240,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(IconTagName, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 7
}
}));
};
FacesRatingBar.displayName = 'FacesRatingBar';
FacesRatingBar.defaultProps = {
readOnly: false,
onChange: function onChange() {},
maxValue: 5
};
var _default = exports["default"] = FacesRatingBar;