@tolokoban/ui
Version:
React components with theme
84 lines • 9.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { styleCommon, styleDimension, stylePosition, styleSpace, } from "./../../theme/index.js";
import * as React from "react";
import { useChangeableValue } from "../../hooks/changeable-value.js";
import IconStar from "../icons/IconStar.js";
import Styles from "./Rating.module.css";
import { ViewLabel } from "../Label/index.js";
const DEFAULT_STAR_COLOR = "#faaf00";
export function ViewRating(props) {
const id = React.useId();
const { max = 5, color, colorEdit = color, readOnly = false, fillOpacity = readOnly ? 1 : 0.8, name = `ViewRating-${Math.random()}`, icon = IconStar, } = props;
const [value, setValue] = useChangeableValue(props);
const handleMount = useSlideToSelect(max, setValue);
return (_jsx(ViewLabel, { value: props.label, children: _jsx("span", { ref: handleMount, className: getClassNames(props), tabIndex: 0, style: Object.assign(Object.assign(Object.assign(Object.assign({}, styleCommon(props)), styleDimension(props)), stylePosition(props)), styleSpace(props)), children: range(max).map((star) => {
const starId = `${id}-${star}`;
return (_jsxs(_Fragment, { children: [_jsxs("label", { htmlFor: starId, children: [_jsx("span", { style: { opacity: 0 }, children: icon({
color,
type: "outlined",
}) }), _jsx("span", { className: Styles.absolute, style: {
opacity: fillOpacity,
width: computeStarWidth(star, value),
color: DEFAULT_STAR_COLOR,
}, children: icon({
color: readOnly ? color : colorEdit,
type: "filled",
}) }), _jsx("span", { className: Styles.absolute, style: { color: DEFAULT_STAR_COLOR }, children: icon({
color,
type: "outlined",
}) }), _jsxs("span", { className: Styles.hidden, children: [star, " Star", star > 1 ? "s" : ""] })] }, starId), _jsx("input", { className: Styles.hidden, type: "radio", name: name, value: `${star}`, checked: star > value - 1 && star <= value, onChange: (evt) => {
if (evt.target.checked)
setValue(star);
}, id: starId }, `input/${starId}`)] }));
}) }) }));
}
function getClassNames(props) {
const classNames = [Styles.main];
if (typeof props.className === "string") {
classNames.push(props.className);
}
if (props.readOnly)
classNames.push(Styles.readOnly);
return classNames.join(" ");
}
function range(max) {
const arr = [];
for (let i = 0; i < max; i++)
arr.push(i + 1);
return arr;
}
function computeStarWidth(star, value) {
const base = Math.floor(value);
if (star <= base)
return "100%";
if (star > base + 1)
return "0%";
const percent = 100 * (value - base);
return `${percent.toFixed(0)}%`;
}
function useSlideToSelect(max, setValue) {
const refIsPointerDown = React.useRef(false);
return React.useCallback((elem) => {
if (!elem)
return;
const handlePointerDown = (evt) => {
elem.setPointerCapture(evt.pointerId);
refIsPointerDown.current = true;
};
const handlePointerUp = (evt) => {
elem.releasePointerCapture(evt.pointerId);
refIsPointerDown.current = false;
};
const handlePointerMove = (evt) => {
if (!refIsPointerDown.current)
return;
const { left, width } = elem.getBoundingClientRect();
const index = 1 + Math.floor((max * (evt.clientX - left)) / width);
setValue(index);
};
elem.addEventListener("pointerdown", handlePointerDown);
elem.addEventListener("pointerup", handlePointerUp);
elem.addEventListener("pointermove", handlePointerMove);
}, []);
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmF0aW5nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3ZpZXcvUmF0aW5nL1JhdGluZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFJSCxXQUFXLEVBQ1gsY0FBYyxFQUNkLGFBQWEsRUFDYixVQUFVLEdBQ2IsTUFBTSxTQUFTLENBQUE7QUFFaEIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDakUsT0FBTyxRQUFRLE1BQU0sbUJBQW1CLENBQUE7QUFHeEMsT0FBTyxNQUFNLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFVBQVUsQ0FBQTtBQTJCcEMsTUFBTSxrQkFBa0IsR0FBRyxTQUFTLENBQUE7QUFFcEMsTUFBTSxVQUFVLFVBQVUsQ0FBQyxLQUFzQjtJQUM3QyxNQUFNLEVBQUUsR0FBRyxLQUFLLENBQUMsS0FBSyxFQUFFLENBQUE7SUFDeEIsTUFBTSxFQUNGLEdBQUcsR0FBRyxDQUFDLEVBQ1AsS0FBSyxFQUNMLFNBQVMsR0FBRyxLQUFLLEVBQ2pCLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFdBQVcsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxFQUNoQyxJQUFJLEdBQUcsY0FBYyxJQUFJLENBQUMsTUFBTSxFQUFFLEVBQUUsRUFDcEMsSUFBSSxHQUFHLFFBQVEsR0FDbEIsR0FBRyxLQUFLLENBQUE7SUFDVCxNQUFNLENBQUMsS0FBSyxFQUFFLFFBQVEsQ0FBQyxHQUFHLGtCQUFrQixDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ25ELE1BQU0sV0FBVyxHQUFHLGdCQUFnQixDQUFDLEdBQUcsRUFBRSxRQUFRLENBQUMsQ0FBQTtJQUNuRCxPQUFPLENBQ0gsS0FBQyxTQUFTLElBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxL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