@braineet/ui
Version:
Braineet design system
89 lines (88 loc) • 3 kB
JavaScript
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-nested-ternary */
import React, { useState } from 'react';
import Icon from '../icon';
import { StyledCharacter, RadioCharacter, StyledCharacterNode } from './styles';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Character = /*#__PURE__*/React.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 = 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__*/_jsx(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__*/_jsxs(RadioCharacter, {
style: justChanged ? {
transform: 'scale(1.6)'
} : {
transform: 'scale(1)'
},
children: [/*#__PURE__*/_jsx(StyledCharacterNode, {
disabled: disabled,
index: index,
focused: focused,
allowHalf: allowHalf,
value: value,
isFirst: true,
children: /*#__PURE__*/_jsx(Icon, {
name: rateIconChecked === rateIconUncheck || value >= index + 1 - (allowHalf ? 0.5 : 0) ? rateIconChecked : rateIconUncheck
})
}), /*#__PURE__*/_jsx(StyledCharacterNode, {
disabled: disabled,
index: index,
focused: focused,
allowHalf: allowHalf,
value: value,
isFirst: rateIconUncheck !== rateIconChecked,
children: /*#__PURE__*/_jsx(Icon, {
name: rateIconChecked === rateIconUncheck || value >= index + 1 ? rateIconChecked : rateIconUncheck
})
})]
})
});
});
export default Character;