@wix/design-system
Version:
@wix/design-system
153 lines (152 loc) • 6.13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _StarsRatingBarSt = require("./StarsRatingBar.st.css.js");
var _constants = require("../constants");
var _Text = _interopRequireDefault(require("../../Text"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _utils = require("../../providers/useCollapse/utils");
var _StarsRatingBar = _interopRequireDefault(require("../StarsRatingBar.semanticClassNames"));
var _common = require("../utils/common");
var _visuallyHiddenSt = require("../../common/styles/visuallyHidden.st.css.js");
var _Focusable = require("../../common/Focusable");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/StarsRatingBar/components/InteractiveStarsRatingBar.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var renderCaption = (_ref, value) => {
var {
descriptionValues
} = _ref;
if (!Array.isArray(descriptionValues) || descriptionValues.length !== 5 || !value) {
return null;
}
return /*#__PURE__*/_react.default.createElement("div", {
className: _StarsRatingBarSt.classes.rateCaption,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants.dataHooks.ratingCaption,
"aria-hidden": true,
ellipsis: true,
size: "small",
weight: "normal",
secondary: true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 7
}
}, descriptionValues[value - 1]));
};
var InteractiveStarsRatingBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
var _ref2;
var {
dataHook,
className,
value,
onChange,
focusableOnFocus,
focusableOnBlur
} = props;
var name = (0, _utils.useUniqueId)(props.name);
var [hoveredValue, setHoveredValue] = (0, _react.useState)(null);
var visualValue = (_ref2 = hoveredValue !== null && hoveredValue !== void 0 ? hoveredValue : value) !== null && _ref2 !== void 0 ? _ref2 : 0;
var valueToPassReference = value > 0 ? value : 1; // if value is 0, we pass the reference to the first star
var sizePx = (0, _common.getStarSizePx)(props);
var handleChange = event => {
onChange == null || onChange(parseInt(event.currentTarget.value));
};
var createPointerEventHandler = value => event => {
if (event.pointerType === 'touch') {
// Ignoring the touch hover, because it is sticky and results in bad UX.
return;
}
switch (event.type) {
case 'pointerenter':
setHoveredValue(value);
break;
case 'pointerleave':
case 'pointercancel':
setHoveredValue(null);
break;
default:
break;
}
};
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.root, className),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
role: "radiogroup",
className: _StarsRatingBarSt.classes.starsContainer,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 7
}
}, _constants.starValues.map(starValue => {
var filled = visualValue >= starValue;
var checked = value === starValue;
var Icon = filled ? _wixUiIconsCommon.StarFilled : _wixUiIconsCommon.Star;
var handlePointerEvent = createPointerEventHandler(starValue);
return /*#__PURE__*/_react.default.createElement("label", {
key: starValue,
"data-hook": filled ? _constants.dataHooks.filledStar : _constants.dataHooks.emptyStar,
"data-index": starValue,
className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.starContainer, _StarsRatingBar.default.buttonInteractive),
onPointerEnter: handlePointerEvent,
onPointerLeave: handlePointerEvent,
onPointerCancel: handlePointerEvent,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "radio",
name: name,
value: starValue,
checked: checked,
"aria-label": (0, _common.getRatingLabel)(props, starValue),
className: _visuallyHiddenSt.classes.visuallyHidden,
onChange: handleChange,
ref: valueToPassReference === starValue ? ref : undefined,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 15
}
}), /*#__PURE__*/_react.default.createElement(Icon, {
"aria-hidden": true,
className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.star, {
filled
}, filled ? _StarsRatingBar.default.filledIcon : _StarsRatingBar.default.emptyIcon),
size: sizePx,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 15
}
}));
})), renderCaption(props, visualValue));
});
var _default = exports.default = (0, _Focusable.withFocusable)(InteractiveStarsRatingBar);
//# sourceMappingURL=InteractiveStarsRatingBar.js.map