This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+11
View File
@@ -0,0 +1,11 @@
import * as React from 'react';
import type { RateRef, RateProps as RcRateProps } from '@rc-component/rate/lib/Rate';
import type { SizeType } from '../config-provider/SizeContext';
import type { TooltipProps } from '../tooltip';
export interface RateProps extends RcRateProps {
rootClassName?: string;
tooltips?: (TooltipProps | string)[];
size?: SizeType;
}
declare const Rate: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>>;
export default Rate;
+77
View File
@@ -0,0 +1,77 @@
"use client";
import * as React from 'react';
import StarFilled from "@ant-design/icons/es/icons/StarFilled";
import RcRate from '@rc-component/rate';
import { clsx } from 'clsx';
import { isPlainObject } from '../_util/is';
import { useComponentConfig } from '../config-provider/context';
import DisabledContext from '../config-provider/DisabledContext';
import useSize from '../config-provider/hooks/useSize';
import Tooltip from '../tooltip';
import useStyle from './style';
const Rate = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
prefixCls,
className,
rootClassName,
style,
tooltips,
character = /*#__PURE__*/React.createElement(StarFilled, null),
disabled: customDisabled,
size,
...rest
} = props;
const characterRender = (node, {
index
}) => {
if (!tooltips) {
return node;
}
const tooltipsItem = tooltips[index];
if (isPlainObject(tooltipsItem)) {
return /*#__PURE__*/React.createElement(Tooltip, {
...tooltipsItem
}, node);
}
return /*#__PURE__*/React.createElement(Tooltip, {
title: tooltipsItem
}, node);
};
const {
getPrefixCls,
direction,
className: contextClassName,
style: contextStyle
} = useComponentConfig('rate');
const ratePrefixCls = getPrefixCls('rate', prefixCls);
// Style
const [hashId, cssVarCls] = useStyle(ratePrefixCls);
const mergedStyle = {
...contextStyle,
...style
};
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;
// ===================== Size =====================
const mergedSize = useSize(ctx => size ?? ctx);
return /*#__PURE__*/React.createElement(RcRate, {
ref: ref,
character: character,
characterRender: characterRender,
disabled: mergedDisabled,
...rest,
className: clsx({
[`${ratePrefixCls}-large`]: mergedSize === 'large',
[`${ratePrefixCls}-small`]: mergedSize === 'small'
}, className, rootClassName, hashId, cssVarCls, contextClassName),
style: mergedStyle,
prefixCls: ratePrefixCls,
direction: direction
});
});
if (process.env.NODE_ENV !== 'production') {
Rate.displayName = 'Rate';
}
export default Rate;
+37
View File
@@ -0,0 +1,37 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { GetDefaultToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 星星颜色
* @descEN Star color
*/
starColor: string;
/**
* @desc 星星尺寸
* @descEN Star size
*/
starSize: number;
/**
* @desc 小星星尺寸
* @descEN Small star size
*/
starSizeSM: number;
/**
* @desc 大星星尺寸
* @descEN Large star size
*/
starSizeLG: number;
/**
* @desc 星星悬浮时的缩放
* @descEN Scale of star when hover
*/
starHoverScale: CSSObject['transform'];
/**
* @desc 星星背景色
* @descEN Star background color
*/
starBg: string;
}
export declare const prepareComponentToken: GetDefaultToken<'Rate'>;
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+105
View File
@@ -0,0 +1,105 @@
import { unit } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import { genStyleHooks, mergeToken } from '../../theme/internal';
const genRateStarStyle = token => {
const {
componentCls
} = token;
return {
[`${componentCls}-star`]: {
position: 'relative',
display: 'inline-block',
color: 'inherit',
cursor: 'pointer',
'&:not(:last-child)': {
marginInlineEnd: token.marginXS
},
'> div': {
transition: `all ${token.motionDurationMid}, outline 0s`,
'&:hover': {
transform: token.starHoverScale
},
'&:focus': {
outline: 0
},
'&:focus-visible': {
outline: `${unit(token.lineWidth)} dashed ${token.starColor}`,
transform: token.starHoverScale
}
},
'&-first, &-second': {
color: token.starBg,
transition: `all ${token.motionDurationMid}`,
userSelect: 'none'
},
'&-first': {
position: 'absolute',
top: 0,
insetInlineStart: 0,
width: '50%',
height: '100%',
overflow: 'hidden',
opacity: 0
},
[`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
opacity: 1
},
[`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
color: 'inherit'
}
}
};
};
const genRateRtlStyle = token => ({
[`&-rtl${token.componentCls}`]: {
direction: 'rtl'
}
});
const genRateStyle = token => {
const {
componentCls
} = token;
return {
[componentCls]: {
...resetComponent(token),
display: 'inline-block',
margin: 0,
padding: 0,
color: token.starColor,
fontSize: token.starSize,
lineHeight: 1,
listStyle: 'none',
outline: 'none',
'&-small': {
fontSize: token.starSizeSM
},
'&-large': {
fontSize: token.starSizeLG
},
// disable styles
[`&-disabled${componentCls} ${componentCls}-star`]: {
cursor: 'default',
'> div:hover': {
transform: 'scale(1)'
}
},
// star styles
...genRateStarStyle(token),
// rtl styles
...genRateRtlStyle(token)
}
};
};
// ============================== Export ==============================
export const prepareComponentToken = token => ({
starColor: token.yellow6,
starSize: token.controlHeight * 0.625,
starSizeSM: token.controlHeightSM * 0.625,
starSizeLG: token.controlHeightLG * 0.625,
starHoverScale: 'scale(1.1)',
starBg: token.colorFillContent
});
export default genStyleHooks('Rate', token => {
const rateToken = mergeToken(token, {});
return genRateStyle(rateToken);
}, prepareComponentToken);