@braineet/ui
Version:
Braineet design system
95 lines (93 loc) • 4.09 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _icon = _interopRequireDefault(require("../icon"));
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-nested-ternary */
var Character = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
var index = _ref.index,
value = _ref.value,
allowHalf = _ref.allowHalf,
focused = _ref.focused,
onHoverProps = _ref.onHover,
onClickProps = _ref.onClick,
rateIconUncheck = _ref.rateIconUncheck,
rateIconChecked = _ref.rateIconChecked,
disabled = _ref.disabled,
readOnly = _ref.readOnly,
count = _ref.count;
var _useState = (0, _react.useState)(false),
justChanged = _useState[0],
setJustChanged = _useState[1];
var onHover = function onHover(e) {
if (onHoverProps) {
onHoverProps(e, index);
}
};
var onClick = function onClick(e) {
setJustChanged(true);
setTimeout(function () {
setJustChanged(false);
}, 200);
if (onClickProps) {
onClickProps(e, index);
}
};
var onKeyDown = function onKeyDown(e) {
if ([' ', 'Enter'].includes(e.key) && onClickProps) {
setJustChanged(true);
setTimeout(function () {
setJustChanged(false);
}, 200);
onClickProps(e, index);
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledCharacter, {
disabled: disabled,
readOnly: readOnly,
ref: ref,
onClick: disabled || readOnly ? null : onClick,
onKeyDown: disabled || readOnly ? null : onKeyDown,
onMouseMove: disabled || readOnly ? null : onHover,
role: disabled || readOnly ? null : 'radio',
"aria-checked": disabled || readOnly ? null : value > index ? 'true' : 'false',
"aria-posinset": disabled || readOnly ? null : index + 1,
"aria-setsize": disabled || readOnly ? null : count,
tabIndex: disabled || readOnly ? null : 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.RadioCharacter, {
style: justChanged ? {
transform: 'scale(1.6)'
} : {
transform: 'scale(1)'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledCharacterNode, {
disabled: disabled,
index: index,
focused: focused,
allowHalf: allowHalf,
value: value,
isFirst: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
name: rateIconChecked === rateIconUncheck || value >= index + 1 - (allowHalf ? 0.5 : 0) ? rateIconChecked : rateIconUncheck
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledCharacterNode, {
disabled: disabled,
index: index,
focused: focused,
allowHalf: allowHalf,
value: value,
isFirst: rateIconUncheck !== rateIconChecked,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
name: rateIconChecked === rateIconUncheck || value >= index + 1 ? rateIconChecked : rateIconUncheck
})
})]
})
});
});
var _default = exports.default = Character;