@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
42 lines (41 loc) • 2.07 kB
JavaScript
"use client";
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";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Rating/RatingItem/RatingItem.tsx
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__ */ jsxs(Fragment, { children: [!readOnly && /* @__PURE__ */ jsx("input", {
...ctx.getStyles("input"),
onKeyDown: (event) => (event.key === " " || event.key === "Enter") && onChange(value),
id,
type: "radio",
"data-active": active || void 0,
"aria-label": getSymbolLabel?.(value),
value,
onBlur,
onChange: onInputChange,
...others
}), /* @__PURE__ */ jsx(Box, {
component: readOnly ? "div" : "label",
...ctx.getStyles("label"),
"data-read-only": readOnly || void 0,
htmlFor: id,
onClick: readOnly ? void 0 : () => onChange(value),
__vars: { "--rating-item-z-index": (fractionValue === 1 ? void 0 : active ? 2 : 0)?.toString() },
children: /* @__PURE__ */ jsx(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}% )` },
children: full ? _fullIcon || /* @__PURE__ */ jsx(StarSymbol, { type: "full" }) : _emptyIcon || /* @__PURE__ */ jsx(StarSymbol, { type: "empty" })
})
})] });
}
RatingItem.displayName = "@mantine/core/RatingItem";
//#endregion
export { RatingItem };
//# sourceMappingURL=RatingItem.mjs.map