Skip to content

Commit

Permalink
doc: add doc for richprogress, richprogress modal, table
Browse files Browse the repository at this point in the history
  • Loading branch information
aelf-lxy committed Mar 14, 2024
1 parent 973dedf commit a7edd06
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 44 deletions.
2 changes: 1 addition & 1 deletion packages/component/src/Collapse/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ refer to [Collapse Token](https://ant.design/components/collapse-cn#%E4%B8%BB%E9

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| expandIcon<Badge type='error'>删除</Badge> | 自定义切换图标 | `(panelProps) => ReactNode` | `1.0.0` |
| expandIcon<Badge type='error'>删除</Badge> | 自定义切换图标 | `(panelProps) => ReactNode` | - | `1.0.0` |
| expandIconPosition<Badge type='error'>删除</Badge> | 设置图标位置 | `number` | `start \| end` | `1.0.0` |

## Supported API
Expand Down
57 changes: 57 additions & 0 deletions packages/component/src/ProgressModal/demos/basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React from 'react';
import { Button } from 'aelf-design';

import { IStepItem } from '../../RichProgress/index';
import { ProgressModal } from '../index';

const App: React.FC = () => {
const [showProgress, setShowProgress] = React.useState(false);
const steps: IStepItem[] = [
{
title: 'Title1Title1Title1',
subTitle: 'subTitle1subTitle1.',
percent: 100,
progressTip: 'About 15 sec',
status: 'normal',
available: true,
},
{
title: 'Title2Title2Title2',
subTitle: 'subTitle2subTitle2subTitle2subTitle2.',
percent: 60,
progressTip: 'About 3~5 min',
status: 'exception',
available: true,
},
{
title: 'Title3Title3Title3',
subTitle: 'subTitle3subTitle3subTitle3.',
percent: 0,
progressTip: 'About 20 sec',
status: 'normal',
available: false,
},
];
return (
<div>
<ProgressModal
desc="I am a description"
title="test-progress"
open={showProgress}
steps={steps}
onCancel={() => {
setShowProgress(false);
}}
/>
<Button
onClick={() => {
setShowProgress(true);
}}
>
show progress modal demo
</Button>
</div>
);
};

export default App;
44 changes: 25 additions & 19 deletions packages/component/src/ProgressModal/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,35 @@ group:

# ProgressModal

## Basic Usage

<!-- <code src="./demos/basic.tsx"></code> -->

## Copyable

<!-- <code src="./demos/copyable.tsx"></code> -->
<Badge type='success'>aelf-design</Badge> aelf-design own component

## Format

<!-- <code src="./demos/format.tsx"></code> -->
## Basic Usage

## Custom Tooltip
<code src="./demos/basic.tsx"></code>

<!-- <code src="./demos/customTooltip.tsx"></code> -->
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| stepsData | 步骤数据 | [IStepItem[]](#istepitem) | - | `1.0.0` |
| desc | 弹窗描述信息 | `ReactNode` | - | `1.0.0` |
| strokeColor | 成功进度条颜色 | `string` | 跟随`progress`组件主色 | `1.0.0` |
| strokeErrorColor | 失败进度条颜色 | `string` | 跟随`progress`组件`error`| `1.0.0` |
| trailColor | 进度条底色 | `string` | 跟随`progress`组件`trailColor`| `1.0.0` |
| successIcon | 成功步骤图标 | `ReactNode` | `<ProgressSuccessIcon />` | `1.0.0` |
| errorIcon | 失败步骤图标 | `ReactNode` | `<ProgressErrorIcon />` | `1.0.0` |

## API
### IStepItem

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
| copyable | Address copyable | `boolean` | `false` | - |
| address | Address | `string` | - | - |
| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
| locale | Multilingual settings | `Locale["address"]` | - | - |
| title | 设置title | `ReactNode` | - | `1.0.0` |
| subTitle | 设置subTitle | `ReactNode` | - | `1.0.0` |
| percent | 当前步骤进度条百分比 | `number` | - | `1.0.0` |
| progressTip | 当前步骤进度条下方文本描述 | `ReactNode` | - | `1.0.0` |
| status | 当前步骤状态 | [ProgressLineType](#progresslinetype) | - | `1.0.0` |
| available | 控制当前步骤文案黑色还是灰色 | `boolean` | - | `1.0.0` |

### ProgressLineType

```js
type ProgressLineType = 'exception' | 'normal';
```
39 changes: 39 additions & 0 deletions packages/component/src/RichProgress/demos/basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';

import { IStepItem, RichProgress } from '../index';

const App: React.FC = () => {
const steps: IStepItem[] = [
{
title: 'Title1Title1Title1',
subTitle: 'subTitle1subTitle1.',
percent: 100,
progressTip: 'About 15 sec',
status: 'normal',
available: true,
},
{
title: 'Title2Title2Title2',
subTitle: 'subTitle2subTitle2subTitle2subTitle2.',
percent: 60,
progressTip: 'About 3~5 min',
status: 'exception',
available: true,
},
{
title: 'Title3Title3Title3',
subTitle: 'subTitle3subTitle3subTitle3.',
percent: 0,
progressTip: 'About 20 sec',
status: 'normal',
available: false,
},
];
return (
<div>
<RichProgress stepsData={steps} />
</div>
);
};

export default App;
43 changes: 25 additions & 18 deletions packages/component/src/RichProgress/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,36 @@ group:

# RichProgress

## Basic Usage

<!-- <code src="./demos/basic.tsx"></code> -->

## Copyable
<Badge type='success'>aelf-design</Badge> aelf-design own component

<!-- <code src="./demos/copyable.tsx"></code> -->

## Format
## Basic Usage

<!-- <code src="./demos/format.tsx"></code> -->
<code src="./demos/basic.tsx"></code>

## Custom Tooltip
## API

<!-- <code src="./demos/customTooltip.tsx"></code> -->
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| stepsData | 步骤数据 | [IStepItem[]](#istepitem) | - | `1.0.0` |
| strokeColor | 成功进度条颜色 | `string` | 跟随`progress`组件主色 | `1.0.0` |
| strokeErrorColor | 失败进度条颜色 | `string` | 跟随`progress`组件`error`| `1.0.0` |
| trailColor | 进度条底色 | `string` | 跟随`progress`组件`trailColor`| `1.0.0` |
| successIcon | 成功步骤图标 | `ReactNode` | `<ProgressSuccessIcon />` | `1.0.0` |
| errorIcon | 失败步骤图标 | `ReactNode` | `<ProgressErrorIcon />` | `1.0.0` |

## API
### IStepItem

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
| copyable | Address copyable | `boolean` | `false` | - |
| address | Address | `string` | - | - |
| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
| locale | Multilingual settings | `Locale["address"]` | - | - |
| title | 设置title | `ReactNode` | - | `1.0.0` |
| subTitle | 设置subTitle | `ReactNode` | - | `1.0.0` |
| percent | 当前步骤进度条百分比 | `number` | - | `1.0.0` |
| progressTip | 当前步骤进度条下方文本描述 | `ReactNode` | - | `1.0.0` |
| status | 当前步骤状态 | [ProgressLineType](#progresslinetype) | - | `1.0.0` |
| available | 控制当前步骤文案黑色还是灰色 | `boolean` | - | `1.0.0` |

### ProgressLineType

```js
type ProgressLineType = 'exception' | 'normal';
```
2 changes: 1 addition & 1 deletion packages/component/src/RichProgress/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const StepItemIcon = ({
return (
<Progress
percent={responsive.md ? 0 : percent}
width={24}
size={24}
type="circle"
strokeLinecap="butt"
showInfo
Expand Down
14 changes: 9 additions & 5 deletions packages/component/src/Table/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ group:

# Table

1. 定制了分页器
2. 修改了 table header
1. customize pagination
2. customize table header

## Basic Table

<code src="./demos/basic.tsx"></code>

## 组件 token
## Token

```js
<AELFDProvider theme={{
Expand All @@ -29,8 +29,12 @@ group:
}}>
```

<!-- <code src="./demos/customTooltip.tsx"></code> -->
## Supported Token

refer to [Table Token](https://ant.design/components/table-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)

## API

参考 antd
## Supported API

refer to [Table API](https://ant.design/components/table-cn#table)

0 comments on commit a7edd06

Please sign in to comment.