rate support 'tooltips'

close #13973

components/rate/demo/text.md

@@ -16,6 +16,8 @@ Add copywriting in rate components.
 ````jsx
 import { Rate } from 'antd';
 
+const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
+
 class Rater extends React.Component {
   state = {
     value: 3,
@@ -29,8 +31,8 @@ class Rater extends React.Component {
     const { value } = this.state;
     return (
       <span>
-        <Rate onChange={this.handleChange} value={value} />
-        {value && <span className="ant-rate-text">{value} stars</span>}
+        <Rate tooltips={desc} onChange={this.handleChange} value={value} />
+        {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
       </span>
     );
   }

components/rate/index.en-US.md

@@ -24,6 +24,7 @@ Rate component.
 | defaultValue | default value | number | 0 |
 | disabled | read only, unable to interact | boolean | false |
 | style | custom style object of rate | object | - |
+| tooltips | Customize tooltip by each character | string\[] | - |
 | value | current value | number | - |
 | onBlur | callback when component lose focus | Function() | - |
 | onChange | callback when select value | Function(value: number) | - |

components/rate/index.tsx

 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import RcRate from 'rc-rate';
+import omit from 'omit.js';
 import Icon from '../icon';
+import Tooltip from '../tooltip';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface RateProps {
@@ -12,6 +14,7 @@ export interface RateProps {
   allowHalf?: boolean;
   allowClear?: boolean;
   disabled?: boolean;
+  tooltips?: Array<string>;
   onChange?: (value: number) => any;
   onHoverChange?: (value: number) => any;
   character?: React.ReactNode;
@@ -19,6 +22,10 @@ export interface RateProps {
   style?: React.CSSProperties;
 }
 
+interface RateNodeProps {
+  index: number;
+}
+
 export default class Rate extends React.Component<RateProps, any> {
   static propTypes = {
     prefixCls: PropTypes.string,
@@ -43,13 +50,27 @@ export default class Rate extends React.Component<RateProps, any> {
     this.rcRate = node;
   };
 
-  renderRate = ({ getPrefixCls }: ConfigConsumerProps) => (
-    <RcRate
-      ref={this.saveRate}
-      {...this.props}
-      prefixCls={getPrefixCls('rate', this.props.prefixCls)}
-    />
-  );
+  characterRender = (node: React.ReactNode, { index }: RateNodeProps) => {
+    const { tooltips } = this.props;
+    if (!tooltips) return node;
+
+    return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
+  };
+
+  renderRate = ({ getPrefixCls }: ConfigConsumerProps) => {
+    const { prefixCls, ...restProps } = this.props;
+
+    const rateProps = omit(restProps, ['tooltips']);
+
+    return (
+      <RcRate
+        ref={this.saveRate}
+        characterRender={this.characterRender}
+        {...rateProps}
+        prefixCls={getPrefixCls('rate', prefixCls)}
+      />
+    );
+  };
 
   render() {
     return <ConfigConsumer>{this.renderRate}</ConfigConsumer>;

components/rate/index.zh-CN.md

@@ -25,6 +25,7 @@ title: Rate
 | defaultValue | 默认值 | number | 0 |
 | disabled | 只读，无法进行交互 | boolean | false |
 | style | 自定义样式对象 | object | - |
+| tooltips | 自定义每项的提示信息 | string\[] | - |
 | value | 当前数，受控值 | number | - |
 | onBlur | 失去焦点时的回调 | Function() | - |
 | onChange | 选择时的回调 | Function(value: number) | - |

components/rate/style/index.less

@@ -31,8 +31,15 @@
     color: inherit;
     cursor: pointer;
 
-    &:focus {
-      outline: 0;
+    > div {
+      &:focus {
+        outline: 0;
+      }
+
+      &:hover,
+      &:focus {
+        transform: scale(1.1);
+      }
     }
 
     &-first,
@@ -45,11 +52,6 @@
       }
     }
 
-    &:hover,
-    &:focus {
-      transform: scale(1.1);
-    }
-
     &-first {
       position: absolute;
       left: 0;

package.json

@@ -69,7 +69,7 @@
     "rc-notification": "~3.3.0",
     "rc-pagination": "~1.17.7",
     "rc-progress": "~2.2.6",
-    "rc-rate": "~2.4.2",
+    "rc-rate": "~2.5.0",
     "rc-select": "^8.6.7",
     "rc-slider": "~8.6.3",
     "rc-steps": "~3.3.0",