Skip to content

Commit

Permalink
refactor(Rating): convert to TypeScript, impove docs and tests, close #…
Browse files Browse the repository at this point in the history 
…4603
  • Loading branch information
@YSMJ1994 @eternalsky
YSMJ1994 authored and eternalsky committed Jul 16, 2024
1 parent 6748da8 commit d7ff133
Show file tree
Hide file tree
Showing 13 changed files with 363 additions and 630 deletions.
2 changes: 1 addition & 1 deletion components/rating/__docs__/adaptor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default {
},
],
}),
adaptor: ({ type, size, value, ...others }) => {
adaptor: ({ type, size, value, ...others }: any) => {
return <Rating {...others} showGrade={type === 'level'} value={value} size={size} />;
},
};
2 changes: 1 addition & 1 deletion components/rating/__docs__/demo/accessibility/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Rating } from '@alifd/next';

const starMap = {
const starMap: Record<string, string> = {
1: 'Bad',
2: 'OK',
3: 'Good',
Expand Down
2 changes: 1 addition & 1 deletion components/rating/__docs__/demo/grade/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Rating } from '@alifd/next';

const starMap = {
const starMap: Record<string, string> = {
1: 'Bad',
2: 'OK',
3: 'Good',
Expand Down
5 changes: 1 addition & 4 deletions components/rating/__docs__/demo/render-preview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ import ReactDOM from 'react-dom';
import { Rating, Button } from '@alifd/next';

class Preview extends React.Component {
constructor(props) {
super(props);
this.state = { isPreview: false };
}
state = { isPreview: false };

render() {
return (
Expand Down
37 changes: 20 additions & 17 deletions components/rating/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,28 @@ Rating component is usually used for customer feedback.

### Rating

| Param | Descripiton | Type | Default Value |
| ------------ | -------------------------------------------------------------------------------------------------- | -------- | --------- |
| defaultValue | default value | Number | 0 |
| size | size<br><br>**options**:<br>'small', 'medium', 'large' | Enum | 'medium' |
| value | value | Number | - |
| count | full mark of rating | Number | 5 |
| showGrade | display grade or not | Boolean | false |
| allowHalf | allow half start or not | Boolean | false |
| allowClear | Whether to allow clear when click again | Boolean | false |
| onChange | callback function on click star<br><br>**signatures**:<br>Function(value: String) => void<br>**params**:<br>_value_: {String} score | Function | func.noop |
| onHoverChange | callback function on hover star<br><br>**signatures**:<br>Function(value: String) => void<br>**params**:<br>_value_: {String} score | Function | func.noop |
| disabled | disabled rate or not | Boolean | false |
| readAs | custom display of grade<br><br>**signatures**:<br>Function() => void | Function | val => val |
| Param | Description | Type | Default Value | Required |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------- | -------- |
| defaultValue | Default value | number | - | |
| value | Value（controlled mode） | number | - | |
| size | Size | 'small' \| 'medium' \| 'large' | 'medium' | |
| count | Full mark of rating | number | 5 | |
| showGrade | Display grade or not | boolean | false | |
| allowHalf | Allow half star or not | boolean | - | |
| allowClear | Whether to allow clear when click again | boolean | false | |
| onChange | Callback function on click star | (value: number) => void | - | |
| onHoverChange | Callback function on hover star | (value?: number) => void | - | |
| disabled | Disabled or not | boolean | false | |
| isPreview | Is preview mode or not | boolean | false | |
| renderPreview | Render method when is preview mode.（Required when isPreview=true）<br/><br/>**signature**:<br/>**params**:<br/>_value_: Score<br/>_props_: The props of rating<br/>**return**:<br/>The render content when preview | (value: number, props: RatingProps) => React.ReactNode | - | |
| readAs | Custom display of grade<br/><br/>**signature**:<br/>**params**:<br/>_val_: Score value<br/>**return**:<br/>Score label | (val: number) => React.ReactNode | - | |
| type | - | string | - | |

## ARIA and KeyBoard

| KeyBoard | Descripiton |
| :---------- | :------------------------------ |
| Up Arrow | increase star rating |
| Down Arrow | decrease star rating |
| KeyBoard | Descripiton |
| :---------- | :------------------- |
| Up Arrow | increase star rating |
| Down Arrow | decrease star rating |
| Right Arrow | increase star rating |
| Left Arrow | decrease star rating |
36 changes: 18 additions & 18 deletions components/rating/__docs__/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,27 @@

### Rating

| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ---------------------------------------------------------------------------------------------------------- | -------- | ---------- |
| defaultValue | 默认值 | Number | 0 |
| size | 尺寸<br/><br/>**可选值**:<br/>'small', 'medium', 'large' | Enum | 'medium' |
| value | 值 | Number | - |
| count | 评分的总数 | Number | 5 |
| showGrade | 是否显示 grade | Boolean | false |
| allowHalf | 是否允许半星评分 | Boolean | false |
| allowClear | 是否允许再次点击后清除 | Boolean | false |
| onChange | 用户点击评分时触发的回调<br/><br/>**签名**:<br/>Function(value: Number) => void<br/>**参数**:<br/>_value_: {Number} 评分值 | Function | func.noop |
| onHoverChange | 用户hover评分时触发的回调<br/><br/>**签名**:<br/>Function(value: Number) => void<br/>**参数**:<br/>_value_: {Number} 评分值 | Function | func.noop |
| disabled | 是否禁用 | Boolean | false |
| readAs | 评分文案生成方法，传入id支持无障碍时，读屏软件可读<br/><br/>**签名**:<br/>Function() => void | Function | val => val |
| isPreview | 是否为预览态 | Boolean | false |
| renderPreview | 预览态模式下渲染的内容<br/><br/>**签名**:<br/>Function(value: number) => void<br/>**参数**:<br/>_value_: {number} 评分值 | Function | - |
| readOnly | 是否为只读态，效果上同 disabeld | Boolean | false |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------- | -------- |
| defaultValue | 默认值 | number | - | |
| value | 值（受控模式） | number | - | |
| size | 尺寸 | 'small' \| 'medium' \| 'large' | 'medium' | |
| count | 评分的总数 | number | 5 | |
| showGrade | 是否显示 grade | boolean | false | |
| allowHalf | 是否允许半星评分 | boolean | - | |
| allowClear | 是否允许再次点击后清除 | boolean | false | |
| onChange | 用户点击评分时触发的回调 | (value: number) => void | - | |
| onHoverChange | 用户 hover 评分时触发的回调 | (value?: number) => void | - | |
| disabled | 是否禁用 | boolean | false | |
| isPreview | 是否为预览态 | boolean | false | |
| renderPreview | 预览态模式下渲染的内容（isPreview 时必传，否则预览不生效）<br/><br/>**签名**:<br/>**参数**:<br/>_value_: 评分值<br/>_props_: 组件参数对象<br/>**返回值**:<br/>预览模式下的渲染内容 | (value: number, props: RatingProps) => React.ReactNode | - | |
| readAs | 评分文案生成方法，传入 id 支持无障碍时，读屏软件可读<br/><br/>**签名**:<br/>**参数**:<br/>_val_: 当前分值<br/>**返回值**:<br/>该分值的渲染文案 | (val: number) => React.ReactNode | - | |
| type | - | string | - | |

## 无障碍键盘操作指南

| 按键 | 说明 |
| :---------- | :----- |
| 按键 | 说明 |
| :---------- | :----------- |
| Up Arrow | 增加星级评分 |
| Down Arrow | 减少星级评分 |
| Right Arrow | 增加星级评分 |
Expand Down
11 changes: 7 additions & 4 deletions components/rating/__docs__/theme/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import '../../../demo-helper/style';
import { Demo, DemoGroup, DemoHead, initDemo } from '../../../demo-helper';
import ConfigProvider from '../../../config-provider';
Expand Down Expand Up @@ -33,16 +35,17 @@ const i18nMap = {
},
};

function render(i18n, lang) {
function render(i18n: (typeof i18nMap)[keyof typeof i18nMap], lang: 'zh-cn' | 'en-us') {
// eslint-disable-next-line react/no-render-return-value
return ReactDOM.render(
<ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
<div className="demo-container">
<Demo title={i18n.readonly}>
<DemoHead cols={['L', 'M', 'S']} />
<DemoGroup label={i18n.normal}>
<Rating value={3.5} showInfo disabled size="large" />
<Rating value={3.5} showInfo disabled />
<Rating value={3.5} showInfo disabled size="small" />
<Rating value={3.5} disabled size="large" />
<Rating value={3.5} disabled />
<Rating value={3.5} disabled size="small" />
</DemoGroup>
</Demo>
<Demo title={i18n.normal}>
Expand Down
20 changes: 2 additions & 18 deletions components/rating/__tests__/a11y-spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,14 @@
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { unmount, testReact } from '../../util/__tests__/legacy/a11y/validate';
import { testReact } from '../../util/__tests__/a11y/validate';
import Rating from '../index';
import '../style';

Enzyme.configure({ adapter: new Adapter() });

/* eslint-disable no-undef, react/jsx-filename-extension */
describe('Rating A11y', () => {
let wrapper;

afterEach(() => {
if (wrapper) {
wrapper.unmount();
wrapper = null;
}
unmount();
});

it('should not have any violations', async () => {
wrapper = await testReact(
await testReact(
<div>
<Rating defaultValue={3.3} id="action-test-1" />
</div>
);
return wrapper;
});
});
Loading

0 comments on commit d7ff133

Please sign in to comment.