@mantine/core/cjs/components/Rating/Rating.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_get_theme_color = require("../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.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_RatingItem = require("./RatingItem/RatingItem.cjs");
const require_Rating_module = require("./Rating.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Rating/Rating.tsx
function roundValueTo(value, to) {
	const rounded = Math.round(value / to) * to;
	const precision = `${to}`.split(".")[1]?.length || 0;
	return Number(rounded.toFixed(precision));
}
const defaultProps = {
	size: "sm",
	getSymbolLabel: (value) => `${value}`,
	count: 5,
	fractions: 1,
	color: "yellow"
};
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { size, color }) => ({ root: {
	"--rating-size": require_get_size.getSize(size, "rating-size"),
	"--rating-color": require_get_theme_color.getThemeColor(color, theme)
} }));
const Rating = require_factory.factory((_props) => {
	const props = require_use_props.useProps("Rating", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, name, id, value, defaultValue, onChange, fractions, count, onMouseEnter, readOnly, allowClear, onMouseMove, onHover, onMouseLeave, onTouchStart, onTouchEnd, size, variant, getSymbolLabel, color, emptySymbol, fullSymbol, highlightSelectedOnly, attributes, ref, ...others } = props;
	const getStyles = require_use_styles.useStyles({
		name: "Rating",
		classes: require_Rating_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const { dir } = require_DirectionProvider.useDirection();
	const _name = (0, _mantine_hooks.useId)(name);
	const _id = (0, _mantine_hooks.useId)(id);
	const rootRef = (0, react.useRef)(null);
	const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
		value,
		defaultValue,
		finalValue: 0,
		onChange
	});
	const [hovered, setHovered] = (0, react.useState)(-1);
	const [isOutside, setOutside] = (0, react.useState)(true);
	const _fractions = Math.floor(fractions);
	const _count = Math.floor(count);
	const decimalUnit = 1 / _fractions;
	const stableValueRounded = roundValueTo(_value, decimalUnit);
	const finalValue = hovered !== -1 ? hovered : stableValueRounded;
	const getRatingFromCoordinates = (x) => {
		if (!rootRef.current) return 0;
		const { left, right, width } = rootRef.current.getBoundingClientRect();
		const symbolWidth = width / _count;
		return (0, _mantine_hooks.clamp)(roundValueTo((dir === "rtl" ? right - x : x - left) / symbolWidth + decimalUnit / 2, decimalUnit), decimalUnit, _count);
	};
	const handleMouseEnter = (event) => {
		onMouseEnter?.(event);
		!readOnly && setOutside(false);
	};
	const handleMouseMove = (event) => {
		onMouseMove?.(event);
		if (readOnly) return;
		const rounded = getRatingFromCoordinates(event.clientX);
		setHovered(rounded);
		rounded !== hovered && onHover?.(rounded);
	};
	const handleMouseLeave = (event) => {
		onMouseLeave?.(event);
		if (readOnly) return;
		setHovered(-1);
		setOutside(true);
		hovered !== -1 && onHover?.(-1);
	};
	const handleTouchStart = (event) => {
		const { touches } = event;
		if (touches.length !== 1) return;
		if (!readOnly) {
			const touch = touches[0];
			setValue(getRatingFromCoordinates(touch.clientX));
		}
		onTouchStart?.(event);
	};
	const handleTouchEnd = (event) => {
		event.preventDefault();
		onTouchEnd?.(event);
	};
	const handleItemBlur = () => isOutside && setHovered(-1);
	const handleInputChange = (event) => {
		if (!readOnly) if (typeof event === "number") setHovered(event);
		else setHovered(parseFloat(event.target.value));
	};
	const handleChange = (event) => {
		if (!readOnly) {
			const newValue = typeof event === "number" ? event : parseFloat(event.target.value);
			if (allowClear && newValue === stableValueRounded) setValue(0);
			else setValue(newValue);
		}
	};
	const items = Array(_count).fill(0).map((_, index) => {
		const integerValue = index + 1;
		const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));
		const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;
		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			"data-active": isGroupActive || void 0,
			...getStyles("symbolGroup"),
			children: fractionItems.map((__, fractionIndex) => {
				const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);
				const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);
				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RatingItem.RatingItem, {
					getSymbolLabel,
					emptyIcon: emptySymbol,
					fullIcon: fullSymbol,
					full: highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue,
					active: symbolValue === finalValue,
					checked: symbolValue === stableValueRounded,
					readOnly,
					fractionValue,
					value: symbolValue,
					name: _name,
					onChange: handleChange,
					onBlur: handleItemBlur,
					onInputChange: handleInputChange,
					id: `${_id}-${index}-${fractionIndex}`
				}, `${integerValue}-${symbolValue}`);
			})
		}, integerValue);
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Rating_context.RatingProvider, {
		value: { getStyles },
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
			ref: (0, _mantine_hooks.useMergedRef)(rootRef, ref),
			...getStyles("root"),
			onMouseMove: handleMouseMove,
			onMouseEnter: handleMouseEnter,
			onMouseLeave: handleMouseLeave,
			onTouchStart: handleTouchStart,
			onTouchEnd: handleTouchEnd,
			variant,
			size,
			id: _id,
			...others,
			children: items
		})
	});
});
Rating.classes = require_Rating_module.default;
Rating.varsResolver = varsResolver;
Rating.displayName = "@mantine/core/Rating";
//#endregion
exports.Rating = Rating;

//# sourceMappingURL=Rating.cjs.map