97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
|
'use client';
|
|||
|
|
import { useControllableValue } from 'ahooks';
|
|||
|
|
import React, { useState } from 'react';
|
|||
|
|
import { cn } from '@/lib';
|
|||
|
|
import Image from 'next/image';
|
|||
|
|
|
|||
|
|
type RateProps = {
|
|||
|
|
readonly?: boolean;
|
|||
|
|
// 0 - 10
|
|||
|
|
value?: number;
|
|||
|
|
onChange?: (value: number) => void;
|
|||
|
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|||
|
|
export default function Rate(props: RateProps) {
|
|||
|
|
const { readonly = false, ...others } = props;
|
|||
|
|
const [value = 0, onChange] = useControllableValue(props);
|
|||
|
|
const [hoveredValue, setHoveredValue] = useState(0);
|
|||
|
|
|
|||
|
|
const readonlyRender = () => {
|
|||
|
|
// value 范围 0-10，每颗星代表 2 分
|
|||
|
|
const fullCounts = Math.floor(value / 2); // 满星数量
|
|||
|
|
const halfCount = value % 2; // 半星数量（0 或 1）
|
|||
|
|
const emptyCount = 5 - fullCounts - halfCount; // 空星数量
|
|||
|
|
|
|||
|
|
const starDoms = [
|
|||
|
|
// 满星
|
|||
|
|
...Array.from({ length: fullCounts }, (_, i) => (
|
|||
|
|
<Image
|
|||
|
|
key={`full-${i}`}
|
|||
|
|
src={'/component/star_full.svg'}
|
|||
|
|
width={20}
|
|||
|
|
height={20}
|
|||
|
|
alt="full star"
|
|||
|
|
/>
|
|||
|
|
)),
|
|||
|
|
// 半星
|
|||
|
|
...Array.from({ length: halfCount }, (_, i) => (
|
|||
|
|
<Image
|
|||
|
|
key={`half-${i}`}
|
|||
|
|
src={'/component/star_half.svg'}
|
|||
|
|
width={20}
|
|||
|
|
height={20}
|
|||
|
|
alt="half star"
|
|||
|
|
/>
|
|||
|
|
)),
|
|||
|
|
// 空星
|
|||
|
|
];
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{starDoms}
|
|||
|
|
<span className="font-normal" style={{ color: 'rgba(255, 225, 0, 1)' }}>
|
|||
|
|
{value}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const editRender = () => {
|
|||
|
|
const finalValue = hoveredValue || value;
|
|||
|
|
// 将 0-10 的值转换为 0-5 的星级
|
|||
|
|
const starValue = finalValue / 2;
|
|||
|
|
|
|||
|
|
return Array.from({ length: 5 }, (_, index) => {
|
|||
|
|
let src = '/component/star_empty.svg';
|
|||
|
|
// 判断当前星星应该显示什么状态
|
|||
|
|
if (index < Math.floor(starValue)) {
|
|||
|
|
// 满星
|
|||
|
|
src = '/component/star_full.svg';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Image
|
|||
|
|
key={index}
|
|||
|
|
src={src}
|
|||
|
|
width={20}
|
|||
|
|
height={20}
|
|||
|
|
alt="star"
|
|||
|
|
className="cursor-pointer"
|
|||
|
|
onClick={() => onChange?.((index + 1) * 2)}
|
|||
|
|
onMouseEnter={() => setHoveredValue((index + 1) * 2)}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const render = readonly ? readonlyRender : editRender;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
{...others}
|
|||
|
|
onMouseLeave={() => setHoveredValue(0)}
|
|||
|
|
className={cn('flex items-center gap-1', props.className)}
|
|||
|
|
>
|
|||
|
|
{render()}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|