ant-design/components/rate/index.tsx

64 lines
1.6 KiB
TypeScript
Raw Normal View History

import StarFilled from '@ant-design/icons/StarFilled';
import classNames from 'classnames';
2016-03-30 13:20:03 +08:00
import RcRate from 'rc-rate';
import type { RateRef, RateProps as RcRateProps } from 'rc-rate/lib/Rate';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
2022-05-21 22:14:15 +08:00
import Tooltip from '../tooltip';
import useStyle from './style';
2016-03-30 13:20:03 +08:00
export interface RateProps extends RcRateProps {
rootClassName?: string;
2018-12-28 16:04:05 +08:00
tooltips?: Array<string>;
2016-08-10 09:46:56 +08:00
}
2018-12-28 16:04:05 +08:00
interface RateNodeProps {
index: number;
}
2023-03-07 16:41:43 +08:00
const Rate = React.forwardRef<RateRef, RateProps>((props, ref) => {
const {
prefixCls,
className,
rootClassName,
style,
tooltips,
character = <StarFilled />,
...rest
} = props;
const characterRender = (node: React.ReactElement, { index }: RateNodeProps) => {
if (!tooltips) {
return node;
}
2018-12-28 16:04:05 +08:00
return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
};
const { getPrefixCls, direction, rate } = React.useContext(ConfigContext);
const ratePrefixCls = getPrefixCls('rate', prefixCls);
// Style
const [wrapCSSVar, hashId, cssVarCls] = useStyle(ratePrefixCls);
const mergedStyle: React.CSSProperties = { ...rate?.style, ...style };
return wrapCSSVar(
<RcRate
ref={ref}
character={character}
characterRender={characterRender}
{...rest}
className={classNames(className, rootClassName, hashId, cssVarCls, rate?.className)}
style={mergedStyle}
prefixCls={ratePrefixCls}
direction={direction}
/>,
);
});
if (process.env.NODE_ENV !== 'production') {
Rate.displayName = 'Rate';
}
export default Rate;