@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
77 lines (74 loc) • 2.48 kB
JavaScript
'use client';
import React from 'react';
import 'clsx';
import '@mantine/hooks';
import '../../../core/MantineProvider/Mantine.context.mjs';
import '../../../core/MantineProvider/default-theme.mjs';
import '../../../core/MantineProvider/MantineProvider.mjs';
import '../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs';
import { Box } from '../../../core/Box/Box.mjs';
import { useDirection } from '../../../core/DirectionProvider/DirectionProvider.mjs';
import { useRatingContext } from '../Rating.context.mjs';
import { StarSymbol } from '../StarSymbol/StarSymbol.mjs';
function RatingItem({
getSymbolLabel,
emptyIcon,
fullIcon,
full,
active,
value,
readOnly,
fractionValue,
color,
id,
onBlur,
onChange,
onInputChange,
style,
...others
}) {
const ctx = useRatingContext();
const _fullIcon = typeof fullIcon === "function" ? fullIcon(value) : fullIcon;
const _emptyIcon = typeof emptyIcon === "function" ? emptyIcon(value) : emptyIcon;
const { dir } = useDirection();
return /* @__PURE__ */ React.createElement(React.Fragment, null, !readOnly && /* @__PURE__ */ React.createElement(
"input",
{
...ctx.getStyles("input"),
onKeyDown: (event) => event.key === " " && onChange(value),
id,
type: "radio",
"data-active": active || void 0,
"aria-label": getSymbolLabel?.(value),
value,
onBlur,
onChange: onInputChange,
...others
}
), /* @__PURE__ */ React.createElement(
Box,
{
component: readOnly ? "div" : "label",
...ctx.getStyles("label"),
"data-read-only": readOnly || void 0,
htmlFor: id,
onClick: () => onChange(value),
__vars: {
"--rating-item-z-index": (fractionValue === 1 ? void 0 : active ? 2 : 0)?.toString()
}
},
/* @__PURE__ */ React.createElement(
Box,
{
...ctx.getStyles("symbolBody"),
__vars: {
"--rating-symbol-clip-path": fractionValue === 1 ? void 0 : dir === "ltr" ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)` : `inset(0 0 0 ${active ? 100 - fractionValue * 100 : 100}% )`
}
},
full ? _fullIcon || /* @__PURE__ */ React.createElement(StarSymbol, { type: "full" }) : _emptyIcon || /* @__PURE__ */ React.createElement(StarSymbol, { type: "empty" })
)
));
}
RatingItem.displayName = "@mantine/core/RatingItem";
export { RatingItem };
//# sourceMappingURL=RatingItem.mjs.map