# Rate 评分控件

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/rate/freepass)
- 平台：PC
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s16
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Rate]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react';
import { Rate, Button, Icon, RateOptionProps } from '@weapp/ui';

export interface RateNodeProps {
  index: number;
}

class RateDemo extends React.Component {

  state = {
    allowHalf: true,
    allowClear: true
  }

  handleChange = (value: number) => {
    // console.log('handleChange', value)
  }

  handleClick = (value: number) => {
    console.log('handleClick', value)
  }
  onKeyPress = (value: number, e: React.KeyboardEvent<HTMLUListElement>) => {
    console.log('onKeyPress', value, e)
  }
  onKeyDown = (value: number, e: React.KeyboardEvent<HTMLUListElement>) => {
    console.log('onKeyDown', value, e)
  }
  onKeyUp = (value: number, e: React.KeyboardEvent<HTMLUListElement>) => {
    console.log('onKeyUp', value, e)
  }

  onHoverChange = (value: number | undefined) => {
    console.log('onHoverChange', value)
  }

  btnClick = (value: string) => {
    return () => {
      value === 'allowHalf' &&
        this.setState({
          allowHalf: !this.state.allowHalf
        });

      value === 'allowClear' &&
        this.setState({
          allowClear: !this.state.allowClear
        });
    }
  }
  customIcons = {
    1: <Icon name={"Icon-add-to01"} />,
    2: <Icon name={"Icon-add-to02"} />,
    3: <Icon name={"Icon-add-to03"} />,
    4: <Icon name={"Icon-correct01"} />,
    5: <Icon name={"Icon-correct02"} />,
  };

  renderCustomIcon = (props: RateOptionProps) => {
    // console.log(props)
    type num = 1 | 2 | 3 | 4 | 5;
    let index: num = (props.index + 1) as num;
    return this.customIcons[index]
  }

  onFocus = (value: number) => {
    console.log('onFocus', value)
  }

  onBlur = (value: number) => {
    console.log('onBlur', value)
  }

  render() {
    const { allowHalf, allowClear } = this.state;
    let tooltips = allowHalf ? ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5'] : ['1', '2', '3', '4', '5']
    return (
      <div>
        <h4>基础用法</h4>
        <Rate
         
          onClick={this.handleClick}
          onKeyPress={this.onKeyPress}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.onKeyUp}
        />
        <h4>支持半星</h4>
        <Rate
          allowHalf
          className={`allowHalfDemo`}
          optionClassName={`optionClassName`}
          onClick={this.handleClick}
          onKeyPress={this.onKeyPress}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.onKeyUp}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onHoverChange={this.onHoverChange}
          onChange={this.handleChange}
        />
        <h4>替换字符</h4>
        <Rate character={'好'} />
        <h4>替换图标</h4>
        <Rate character={<Icon name={'Icon-Cloud-clothing'} />} />
        <h4>受控</h4>
        <Rate value={3} />
        <h4>默认值</h4>
        <Rate defaultValue={4} />
        <h4>自定义每一个字符</h4>
        <Rate defaultValue={5} character={this.renderCustomIcon} />
        <h4>toolTips</h4>
        <Rate
          defaultValue={5}
          onChange={this.handleChange}
          onHoverChange={this.onHoverChange}
          autoFocus={true}
          direction={'ltr'}
          allowHalf={allowHalf}
          allowClear={allowClear}
          character={'A'}
          tooltips={tooltips}
          charColor={`blue`}
        />
        <h4>禁用</h4>
        <Rate
          value={3.5}
          allowHalf
          disabled
          onClick={this.handleClick}
          onKeyPress={this.onKeyPress}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.onKeyUp}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onHoverChange={this.onHoverChange}
          onChange={this.handleChange}
        />
        <h4>只读</h4>
        <Rate
          value={4}
          readOnly
          onClick={this.handleClick}
          onKeyPress={this.onKeyPress}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.onKeyUp}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onHoverChange={this.onHoverChange}
          onChange={this.handleChange}
        />
        <h4>只读（过滤掉未选中的rate）</h4>
        <Rate
          value={4}
          readOnly
          readOnlyFilterEmptyRate
          onClick={this.handleClick}
          onKeyPress={this.onKeyPress}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.onKeyUp}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onHoverChange={this.onHoverChange}
          onChange={this.handleChange}
        />
        <br />
        <Button onClick={this.btnClick('allowHalf')} >{allowHalf ? '允许半选' : '不允许半选'}</Button>
        <Button onClick={this.btnClick('allowClear')} >{allowClear ? '允许点击删除' : '不允许点击删除'}</Button>
      </div>
    );
  }
}

export default RateDemo;
```

### 受控和非受控

直接引入组件进行使用

```jsx
import React from 'react';
import { Rate } from '@weapp/ui';

export interface RateNodeProps {
  index: number;
}

class RateDemo2 extends React.Component {

  state = {
    rateValue: 1
  }

  handleClick = (value: number) => {
    const temp = value + 1;
    this.setState({ rateValue: temp });
  }

  render() {
    const { rateValue } = this.state;
    return (
      <div>
        <h4>非受控</h4>
        <div>
          <Rate />
        </div>
        <br />
        <br />
        <h4>受控</h4>
        <Rate onClick={this.handleClick} value={rateValue} />
      </div>
    );
  }
}

export default RateDemo2;
```

### 只读模式

只读模式

```jsx
import React from 'react';
import { Rate } from '@weapp/ui';

export interface RateNodeProps {
  index: number;
}

class RateDemo extends React.Component {
  render() {
    return (
      <div>
        <h4>只读</h4>
        <Rate
          value={4}
          readOnly
        />
        <br />
        <h4>只读模式不过滤掉未选中的rate</h4>
        <Rate
          value={4}
          readOnly
          readOnlyFilterEmptyRate={false}
        />
        <br />
        <h4>只读半星</h4>
        <Rate
          value={4.5}
          allowHalf
          readOnly
        />
      </div>
    );
  }
}

export default RateDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 当前数(受控值) | number | 否 |  |
| defaultValue | 当前数(默认值) | number | 否 |  |
| count | 总数 | number | 否 |  |
| allowHalf | 是否允许半选 | boolean | 否 | false |
| allowClear | 是否允许再次点击后清除 | boolean | 否 | false |
| character | 自定义字符 | React.ReactNode | 否 |  |
| tooltips | 提示信息 | string[] | 否 |  |
| direction | 方向 | string | 否 | `ltr` \| `rtl` |
| onChange | 选择时的回调 | (value: number) => void, |  |  |
| onClick | 点击事件回调 | (value: number,e:React.MouseEvent) => void, | 否 |  |
| onBlur | 失去焦点时的回调 | (value: number, e: React.FocusEvent) => void, | 否 |  |
| onFocus | 获取焦点时的回调 | (value: number, e: React.FocusEvent) => void, | 否 |  |
| onHoverChange | 鼠标经过时数值变化的回调 | (value: number \| undefined) => void, | 否 |  |
| onKeyDown | onKeyDown 事件回调 | (value: number, e: React.KeyboardEvent) => void; | 否 |  |
| onKeyPress | onKeyPress 事件回调 | (value: number, e: React.KeyboardEvent) => void; | 否 |  |
| onKeyUp | onKeyUp 事件回调 | (value: number, e: React.KeyboardEvent) => void; | 否 |  |
| charColor | 自定义字符颜色 | string | 否 |  |
| readOnlyFilterEmptyRate | 只读模式是否过滤掉未选中的rate | boolean | 否 | true |
