wix-style-react
Version:
wix-style-react
325 lines (322 loc) • 10.2 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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Focusable = require("../common/Focusable");
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", "maxValue"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FacesRatingBar/FacesRatingBar.js";
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. */
class FacesRatingBar extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {
faceHoveredIndex: 0
};
this._onFaceClick = index => {
this.props.onChange(index);
};
this._onFaceMouseEnter = index => {
this.setState({
faceHoveredIndex: index
});
};
this._onFaceMouseLeave = () => {
this.setState({
faceHoveredIndex: 0
});
};
this._onFaceFocus = (faceIndex, focusableProps) => {
// We would like to change the faces color on focus / hover
this.setState({
faceHoveredIndex: faceIndex
});
focusableProps.focusableOnFocus();
};
this._onFaceBlur = focusableProps => {
// We would like to change the faces color on focus / hover
this.setState({
faceHoveredIndex: 0
});
focusableProps.focusableOnBlur();
};
this._shouldShowDescriptionValues = () => {
var {
readOnly,
descriptionValues,
maxValue
} = this.props;
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;
};
}
componentDidMount() {
var {
readOnly,
value
} = this.props;
if (readOnly && value === 0) {
throw new Error('In readOnly mode the value couldn’t be 0. Please enter a value between 1 to 5.');
}
}
render() {
var {
dataHook,
readOnly,
value,
descriptionValues,
maxValue
} = this.props;
var {
faceHoveredIndex
} = this.state;
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
}
}));
}
}
var Faces = _ref => {
var {
readOnly,
selectedIndex,
hoveredIndex,
showDescriptionValues,
descriptionValues,
onClick,
onMouseEnter,
onMouseLeave,
handleFocus,
handleBlur,
maxValue
} = _ref;
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,
iconType,
maxValue
};
var face = readOnly ? /*#__PURE__*/_react.default.createElement(ReadOnlyModeFace, (0, _extends2.default)({}, commonProps, {
__self: void 0,
__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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 7
}
}));
facesArr.push(face);
}
return facesArr;
};
var InteractiveModeFace = _ref2 => {
var {
faceIndex,
isSelected,
iconType,
isHovered,
showDescriptionValues,
descriptionValues,
onClick: _onClick,
onMouseEnter: _onMouseEnter,
onMouseLeave,
handleFocus,
handleBlur,
maxValue
} = _ref2,
focusableProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
var IconTagName = faceIconsMap[maxValue][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: () => _onClick(faceIndex),
onMouseEnter: () => _onMouseEnter(faceIndex),
onMouseLeave: onMouseLeave,
onFocus: () => handleFocus(faceIndex, focusableProps),
onBlur: () => handleBlur(focusableProps),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 197,
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
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 208,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
dataHook: _constants.facesData[faceIndex].tooltipDataHook,
content: tooltipContent,
disabled: !showDescriptionValues,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(IconTagName, {
width: 22,
height: 22,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 11
}
}))));
};
var FocusableInteractiveModeFace = (0, _Focusable.withFocusable)(InteractiveModeFace);
var ReadOnlyModeFace = _ref3 => {
var {
faceIndex,
isSelected,
iconType,
maxValue
} = _ref3;
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
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(IconTagName, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 7
}
}));
};
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 length must match the maxValue prop number (5 by default). */
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,
/** Specifies the maximum rate value. */
maxValue: _propTypes.default.oneOf([2, 3, 4, 5]),
/** 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: () => {},
maxValue: 5
};
var _default = exports.default = FacesRatingBar;
//# sourceMappingURL=FacesRatingBar.js.map