@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
43 lines (42 loc) • 2.44 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_Box = require("../../../core/Box/Box.cjs");
const require_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
const require_Rating_context = require("../Rating.context.cjs");
const require_StarSymbol = require("../StarSymbol/StarSymbol.cjs");
let react_jsx_runtime = require("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 = require_Rating_context.useRatingContext();
const _fullIcon = typeof fullIcon === "function" ? fullIcon(value) : fullIcon;
const _emptyIcon = typeof emptyIcon === "function" ? emptyIcon(value) : emptyIcon;
const { dir } = require_DirectionProvider.useDirection();
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!readOnly && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_Box.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__ */ (0, react_jsx_runtime.jsx)(require_Box.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__ */ (0, react_jsx_runtime.jsx)(require_StarSymbol.StarSymbol, { type: "full" }) : _emptyIcon || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StarSymbol.StarSymbol, { type: "empty" })
})
})] });
}
RatingItem.displayName = "@mantine/core/RatingItem";
//#endregion
exports.RatingItem = RatingItem;
//# sourceMappingURL=RatingItem.cjs.map