Skip to content

Commit

Permalink
refactor(Progress): improve ts, doc and tc
Browse files Browse the repository at this point in the history 
refactor(Progress): import type fix

refactor(Progress): fix code review

refactor(Progress): fix code review

fix(Progress): fix tc
  • Loading branch information
@eternalsky
萌鱼 authored and eternalsky committed May 30, 2024
1 parent d8161d6 commit 020d6e2
Show file tree
Hide file tree
Showing 13 changed files with 231 additions and 205 deletions.
41 changes: 38 additions & 3 deletions components/progress/__docs__/adaptor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,28 @@ import React from 'react';
import { Types } from '@alifd/adaptor-helper';
import { Progress } from '@alifd/next';

const _propsValue = ({ shape, level, size, mode, border, width, style, ...others }) => {
interface AdaptorProps {
shape?: 'line' | 'circle';
level?: 'normal' | 'success' | 'error';
size?: 'small' | 'medium' | 'large';
mode?: 'basic' | 'staging';
border?: boolean;
width?: number;
style?: React.CSSProperties;
text?: boolean;
percent?: number;
}

const _propsValue = ({
shape,
level,
size,
mode,
border,
width,
style,
...others
}: AdaptorProps) => {
return {
...others,
style: {
Expand Down Expand Up @@ -70,7 +91,18 @@ export default {
],
};
},
adaptor: ({ shape, level, size, mode, text, border, width, percent, style, ...others }) => {
adaptor: ({
shape,
level,
size,
mode,
text,
border,
width,
percent,
style,
...others
}: AdaptorProps) => {
const props = _propsValue({ shape, level, size, mode, border, width, style, ...others });
return (
<Progress
Expand Down Expand Up @@ -98,7 +130,10 @@ export default {
default: 'hide',
},
].filter(({ name }) => name !== 'border' || shape === 'line'),
transform: (props, { staging, text, border }) => {
transform: (
props: AdaptorProps,
{ staging, text, border }: { staging: string; text: string; border: string }
) => {
switch (staging) {
case 'started':
props = {
Expand Down
9 changes: 2 additions & 7 deletions components/progress/__docs__/demo/controlled/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,8 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Progress, Button, Icon } from '@alifd/next';

class CustomProgress extends React.Component {
constructor(props) {
super(props);
this.state = {
percent: 0,
};
}
class CustomProgress extends React.Component<unknown, { percent: number }> {
state = { percent: 0 };

addProgress = () => {
this.setState(prevState => {
Expand Down
2 changes: 1 addition & 1 deletion components/progress/__docs__/demo/percentrender/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 { Progress, Icon } from '@alifd/next';

const textRender = percent => {
const textRender = (percent: number) => {
if (percent === 100) {
return <Icon type="select" size="medium" />;
}
Expand Down
25 changes: 13 additions & 12 deletions components/progress/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,21 @@ Progress used to show the progress of a task.

If a task will take long time to complete, it could be use a `Progress` to show the progress. Such as:

- For a background operation with long time
- For a operation need to show its percentage
- For a background operation with long time
- For a operation need to show its percentage

## API

### Progress

| Param | Descripiton | Type | Default Value |
| ----------- |---------- | -------- | ----------- |
| size | Size <br><br>**option**:<br>'small', 'medium', 'large' | Enum | 'medium' |
| shape | Shape <br><br>**option**:<br>'circle', 'line' | Enum | 'line' |
| percent | Current percente of progress | Number | 0 |
| state | State of progress, priority: color > progressive > state <br><br>**option**:<br>'normal', 'success', 'error' | Enum | 'normal' |
| progressive | Progressive mode (with dynamic color), priority: color > progressive > state | Boolean | false |
| hasBorder | Has border for progress line | Boolean | false |
| textRender | Text render <br><br>**signature**:<br>Function(percent: Number) => ReactNode<br>**parameter**:<br>_percent_: {Number} current percent<br>**return**:<br>{ReactNode} text node<br> | Function | percent => `${Math.floor(percent)}%` |
| color | progressbar color, priority: color > progressive > state | String | '' |
| Param | Description | Type | Default Value | Required |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------- | -------- |
| shape | Shape | 'circle' \| 'line' | 'line' | |
| size | Size | 'small' \| 'medium' \| 'large' | 'medium' | |
| percent | Current percente of progress | number | 0 | |
| state | State of progress, priority: color \> progressive \> state | 'normal' \| 'success' \| 'error' | 'normal' | |
| progressive | Progressive mode (with dynamic color), priority: color \> progressive \> state | boolean | false | |
| hasBorder | Has border for progress line | boolean | false | |
| textRender | Text render<br/><br/>**signature**:<br/>**params**:<br/>_percent_: Current percent<br/>_option_: Additional options<br/>**return**:<br/>Text node | (percent: number, option?: {rtl?: boolean}) => React.ReactNode | percent =\> \`$\{Math.floor(percent)\}%\` | |
| color | Progressbar color, priority: color \> progressive \> state | string | - | |
| backgroundColor | Background color | string | - | |
22 changes: 11 additions & 11 deletions components/progress/__docs__/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@

### Progress

| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------ |
| size | 尺寸<br/><br/>**可选值**:<br/>'small', 'medium', 'large' | Enum | 'medium' |
| shape | 形态<br/><br/>**可选值**:<br/>'circle', 'line' | Enum | 'line' |
| percent | 所占百分比 | Number | 0 |
| state | 进度状态, 显示优先级: color > progressive > state<br/><br/>**可选值**:<br/>'normal', 'success', 'error' | Enum | 'normal' |
| progressive | 是否为色彩阶段变化模式, 显示优先级: color > progressive > state | Boolean | false |
| hasBorder | 是否添加 Border（只适用于 Line Progress) | Boolean | false |
| textRender | 文本渲染函数<br/><br/>**签名**:<br/>Function(percent: Number, option: Object) => ReactNode<br/>**参数**:<br/>_percent_: {Number} 当前的进度信息<br/>_option_: {Object} 额外的参数<br/>**返回值**:<br/>{ReactNode} 返回文本节点<br/> | Function | percent => `${Math.floor(percent)}%` |
| color | 进度条颜色, 显示优先级: color > progressive > state | String | - |
| backgroundColor | 背景色 | String | - |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------- | -------- |
| shape | 形态 | 'circle' \| 'line' | 'line' | |
| size | 尺寸 | 'small' \| 'medium' \| 'large' | 'medium' | |
| percent | 所占百分比 | number | 0 | |
| state | 进度状态, 显示优先级: color \> progressive \> state | 'normal' \| 'success' \| 'error' | 'normal' | |
| progressive | 是否为色彩阶段变化模式, 显示优先级: color \> progressive \> state | boolean | false | |
| hasBorder | 是否添加 Border（只适用于 Line Progress) | boolean | false | |
| textRender | 文本渲染函数<br/><br/>**签名**:<br/>**参数**:<br/>_percent_: 当前的进度信息<br/>_option_: 额外的参数<br/>**返回值**:<br/>文本节点 | (percent: number, option?: {rtl?: boolean}) => React.ReactNode | percent =\> \`$\{Math.floor(percent)\}%\` | |
| color | 进度条颜色, 显示优先级: color \> progressive \> state | string | - | |
| backgroundColor | 背景色 | string | - | |
50 changes: 37 additions & 13 deletions components/progress/__docs__/theme/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import { Demo, DemoHead, DemoGroup, initDemo } from '../../../demo-helper';
import React from 'react';
import ReactDOM from 'react-dom';
import {
Demo,
DemoHead,
DemoGroup,
initDemo,
type DemoProps,
type DemoFunctionDefineForObject,
} from '../../../demo-helper';
import Progress from '../../index';
import ConfigProvider from '../../../config-provider';
import zhCN from '../../../locale/zh-cn';
import enUS from '../../../locale/en-us';
import '../../../demo-helper/style';
import '../../style';

/* eslint-disable */
const i18nMap = {
'zh-cn': {
lineBasic: '线型基本',
Expand Down Expand Up @@ -43,7 +51,23 @@ const i18nMap = {
},
};

function renderLineProgress(i18n, props) {
type I18N = (typeof i18nMap)[keyof typeof i18nMap];

interface progressRenderProps {
textRender?: (percent: number) => React.ReactNode;
hasBorder?: boolean;
}
interface IProps {
title: DemoProps['title'];
circle?: boolean;
locale: I18N;
progressRender: (i18n: I18N, props: progressRenderProps) => React.ReactNode;
}
interface IState {
demoFunction: Record<string, DemoFunctionDefineForObject>;
}

function renderLineProgress(i18n: I18N, props: progressRenderProps) {
return (
<Demo title={i18n.lineBasic} block>
<DemoHead cols={['L', 'M', 'S']} />
Expand All @@ -66,7 +90,7 @@ function renderLineProgress(i18n, props) {
);
}

function renderLineProgressive(i18n, props) {
function renderLineProgressive(i18n: I18N, props: progressRenderProps) {
return (
<Demo title={i18n.lineProgressive} block>
<DemoHead cols={['L', 'M', 'S']} />
Expand All @@ -89,7 +113,7 @@ function renderLineProgressive(i18n, props) {
);
}

function renderCircleProgress(i18n, props) {
function renderCircleProgress(i18n: I18N, props: progressRenderProps) {
return (
<Demo title={i18n.circleBasic} block>
<DemoHead cols={['L', 'M', 'S']} />
Expand All @@ -112,7 +136,7 @@ function renderCircleProgress(i18n, props) {
);
}

function renderCircleProgressive(i18n, props) {
function renderCircleProgressive(i18n: I18N, props: progressRenderProps) {
return (
<Demo title={i18n.circleProgressive} block>
<DemoHead cols={['L', 'M', 'S']} />
Expand All @@ -135,8 +159,8 @@ function renderCircleProgressive(i18n, props) {
);
}

class FunctionDemo extends React.Component {
constructor(props) {
class FunctionDemo extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
demoFunction: {
Expand All @@ -160,7 +184,7 @@ class FunctionDemo extends React.Component {
};
}

onFunctionChange = ret => {
onFunctionChange = (ret: IState['demoFunction']) => {
this.setState({
demoFunction: ret,
});
Expand All @@ -172,7 +196,7 @@ class FunctionDemo extends React.Component {

const withText = demoFunction.showText.value === 'true' || circle;

const props = {};
const props: progressRenderProps = {};

if (!withText) {
props.textRender = () => false;
Expand All @@ -196,9 +220,9 @@ class FunctionDemo extends React.Component {
}
}

function render(i18n, lang) {
return ReactDOM.render(
<ConfigProvider lang={lang === 'en-us' ? enUS : zhCN}>
function render(i18n: I18N, lang: string) {
ReactDOM.render(
<ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
<div className="demo-container">
<FunctionDemo
title={i18n.lineBasic}
Expand Down
23 changes: 3 additions & 20 deletions components/progress/__tests__/a11y-spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,18 @@
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Progress from '../index';
import '../style';
import { unmount, testReact } from '../../util/__tests__/legacy/a11y/validate';
import { testReact } from '../../util/__tests__/a11y/validate';

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

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

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

it('should not have any violations for Line Progress', async () => {
wrapper = await testReact(<Progress percent={30} />, {
await testReact(<Progress percent={30} />, {
incomplete: true,
});
return wrapper;
});

it('should not have any violations for Circle Progress', async () => {
wrapper = await testReact(<Progress shape="circle" percent={30} />, {
await testReact(<Progress shape="circle" percent={30} />, {
incomplete: true,
});
return wrapper;
});
});
Loading

0 comments on commit 020d6e2

Please sign in to comment.