Skip to content

Commit 92ae696

Browse files
anlyyaoanlyyao
authored
feat(Progress): support size props (#3604)
* feat(Progress): support size props * feat(Progress): update demo * test: update snapshots
1 parent 0849416 commit 92ae696

File tree

12 files changed

+131
-59
lines changed

12 files changed

+131
-59
lines changed

‎src/progress/README.en-US.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v
1111
color | String / Object / Array | '' | Typescript：`string \| Array<string> \| Record<string, string>` | N
1212
label | String / Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
1313
percentage | Number | 0 | \- | N
14+
size | String / Number | 'default' | \- | N
1415
status | String | - | options: success/error/warning/active。Typescript：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
1516
stroke-width | String / Number | - | \- | N
1617
theme | String | line | options: line/plump/circle。Typescript：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
@@ -40,4 +41,4 @@ Name | Default Value | Description
4041
--td-progress-track-bg-color | @bg-color-component | -
4142
--td-progress-circle-label-font-size | 40rpx | -
4243
--td-progress-circle-label-line-height | 56rpx | -
43-
--td-progress-circle-label-font-weight | 700 | -
44+
--td-progress-circle-label-font-weight | 700 | -

‎src/progress/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场
7373
color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或 `{ from: '#000', to: '#000' }` 等。TS 类型：`string \| Array<string> \| Record<string, string>` | N
7474
label | String / Boolean / Slot | true | 进度百分比，可自定义。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
7575
percentage | Number | 0 | 进度条百分比 | N
76+
size | String / Number | 'default' | 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24 | N
7677
status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
7778
stroke-width | String / Number | - | 进度条线宽，默认单位 `px` | N
7879
theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
@@ -102,4 +103,4 @@ t-class-label | 标签样式类
102103
--td-progress-track-bg-color | @bg-color-component | -
103104
--td-progress-circle-label-font-size | 40rpx | -
104105
--td-progress-circle-label-line-height | 56rpx | -
105-
--td-progress-circle-label-font-weight | 700 | -
106+
--td-progress-circle-label-font-weight | 700 | -

‎src/progress/__test__/__snapshots__/demo.test.js.snap

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,59 @@
22

33
exports[`Progress Progress base demo works fine 1`] = `
44
<base>
5-
<t-progress
6-
percentage="80"
7-
/>
8-
<t-progress
9-
percentage="80"
10-
theme="plump"
11-
/>
12-
<t-progress
13-
percentage="30"
14-
theme="circle"
15-
/>
5+
<wx-view
6+
class="demo-desc"
7+
>
8+
基础进度条
9+
</wx-view>
10+
<wx-view
11+
class="demo-wrapper"
12+
>
13+
<t-progress
14+
percentage="80"
15+
/>
16+
</wx-view>
17+
<wx-view
18+
class="demo-desc"
19+
>
20+
百分比内显
21+
</wx-view>
22+
<wx-view
23+
class="demo-wrapper"
24+
>
25+
<t-progress
26+
percentage="80"
27+
theme="plump"
28+
/>
29+
</wx-view>
30+
<wx-view
31+
class="demo-desc"
32+
>
33+
环形进度条
34+
</wx-view>
35+
<wx-view
36+
class="demo-wrapper"
37+
>
38+
<t-progress
39+
percentage="30"
40+
theme="circle"
41+
/>
42+
</wx-view>
43+
<wx-view
44+
class="demo-desc"
45+
>
46+
微型环形进度条
47+
</wx-view>
48+
<wx-view
49+
class="demo-wrapper"
50+
>
51+
<t-progress
52+
label="{{false}}"
53+
percentage="30"
54+
size="micro"
55+
theme="circle"
56+
/>
57+
</wx-view>
1658
</base>
1759
`;
1860

‎src/progress/_example/base/index.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"component": true,
3+
"styleIsolation": "apply-shared",
34
"usingComponents": {
45
"t-progress": "tdesign-miniprogram/progress/progress"
56
}

‎src/progress/_example/base/index.wxml

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1-
<t-progress percentage="80" />
2-
<t-progress theme="plump" percentage="80" />
3-
<t-progress wx:if="{{!skylineRender}}" theme="circle" percentage="30" />
1+
<view class="demo-desc">基础进度条</view>
2+
<view class="demo-wrapper">
3+
<t-progress percentage="80" />
4+
</view>
5+
6+
<view class="demo-desc">百分比内显</view>
7+
<view class="demo-wrapper">
8+
<t-progress theme="plump" percentage="80" />
9+
</view>
10+
11+
<view class="demo-desc">环形进度条</view>
12+
<view class="demo-wrapper" wx:if="{{!skylineRender}}">
13+
<t-progress theme="circle" percentage="30" />
14+
</view>
15+
16+
<view class="demo-desc">微型环形进度条</view>
17+
<view class="demo-wrapper" wx:if="{{!skylineRender}}">
18+
<t-progress theme="circle" size="micro" percentage="30" label="{{false}}" />
19+
</view>

‎src/progress/_example/base/index.wxss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.demo-wrapper {
2+
padding: 0 32rpx;
3+
}

‎src/progress/_example/progress.wxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
desc="用于展示任务当前的进度。"
88
notice="渲染框架支持情况：Skyline、WebView"
99
/>
10-
<t-demo title="01 组件类型" desc="基础进度条" padding>
10+
<t-demo title="01 组件类型">
1111
<base />
1212
</t-demo>
1313
<t-demo desc="过渡样式" padding>

‎src/progress/progress.less

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,10 @@
153153
-webkit-line-clamp: 2;
154154
}
155155

156-
.@{progress}__icon {
157-
font-size: @progress-circle-icon-font-size;
156+
&--micro {
157+
--td-progress-circle-width: 48rpx;
158+
--td-progress-stroke-circle-width: 4rpx;
159+
--td-progress-circle-icon-font-size: 40rpx;
158160
}
159161
}
160162

@@ -176,34 +178,26 @@
176178
}
177179
}
178180

179-
.@{progress}--status--success {
181+
.progress-status(@bgColor, @iconColor) {
180182
.@{progress}__inner {
181-
background: @progress-inner-bg-color-success;
183+
background: @bgColor;
182184
}
183185

184186
.@{progress}__icon {
185-
color: @success-color;
187+
color: @iconColor;
186188
}
187189
}
188190

189-
.@{progress}--status--warning {
190-
.@{progress}__inner {
191-
background: @progress-inner-bg-color-warning;
192-
}
191+
.@{progress}--status--success {
192+
.progress-status(@progress-inner-bg-color-success, @success-color);
193+
}
193194

194-
.@{progress}__icon {
195-
color: @warning-color;
196-
}
195+
.@{progress}--status--warning {
196+
.progress-status(@progress-inner-bg-color-warning, @warning-color);
197197
}
198198

199199
.@{progress}--status--error {
200-
.@{progress}__inner {
201-
background: @progress-inner-bg-color-error;
202-
}
203-
204-
.@{progress}__icon {
205-
color: @error-color;
206-
}
200+
.progress-status(@progress-inner-bg-color-error, @error-color);
207201
}
208202

209203
@keyframes progress-active-animation {

‎src/progress/progress.wxml

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,10 @@
7575
aria-valuenow="{{computedProgress}}"
7676
aria-label="{{ ariaLabel || (isIOS ? _this.getIOSAriaLabel(status) : _this.getAndroidAriaLabel(status)) }}"
7777
aria-live="polite"
78-
class="{{classPrefix}}__canvas--circle"
79-
style="background-image: conic-gradient(from var(--td-progress-circle-from), {{colorCircle || _this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);"
78+
class="{{_.cls(classPrefix + '__canvas--circle', [[size, true]])}}"
79+
style="{{_this.getCircleStyle(size, heightBar)}}; background-image: conic-gradient(from var(--td-progress-circle-from), {{colorCircle || _this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);"
8080
>
81-
<view
82-
class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"
83-
style="{{heightBar? '--td-progress-stroke-circle-width:' + heightBar + 'px' : ''}}"
84-
>
81+
<view class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar">
8582
<view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
8683
<template
8784
wx:if="{{_.includes(_this.STATUS, status)}}"

‎src/progress/progress.wxs

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
var utils = require('../common/utils.wxs');
2+
13
var STATUS = ['success', 'error', 'warning'];
24
var STATUS_TEXT = ['success', 'error', 'warning', 'active'];
35

@@ -12,11 +14,13 @@ var STATUS_COLOR = {
1214
error: '#e34d59',
1315
warning: '#ed7b2f',
1416
};
17+
1518
var LINE_STATUS_ICON = {
1619
success: 'check-circle-filled',
1720
error: 'error-circle-filled',
1821
warning: 'error-circle-filled',
1922
};
23+
2024
var CIRCLE_STATUS_ICON = {
2125
success: 'check',
2226
error: 'close',
@@ -31,25 +35,37 @@ var CIRCLE_STATUS_ICON = {
3135
*
3236
*/
3337

34-
var getIOSAriaLabel = function (status) {
38+
function getIOSAriaLabel(status) {
3539
if (status === 'error') {
3640
return '进度失败';
3741
}
3842
if (status === 'warning') {
3943
return '进度异常';
4044
}
4145
return '';
42-
};
46+
}
4347

44-
var getAndroidAriaLabel = function (status) {
48+
function getAndroidAriaLabel(status) {
4549
if (status === 'error') {
4650
return '%' + '，进度失败';
4751
}
4852
if (status === 'warning') {
4953
return '%' + '，进度异常';
5054
}
5155
return '%';
52-
};
56+
}
57+
58+
function getCircleStyle(size, strokeWidth) {
59+
var styles = {
60+
'--td-progress-stroke-circle-width': utils.addUnit(strokeWidth),
61+
};
62+
63+
if (!utils.includes(['default', 'micro'], size)) {
64+
styles['--td-progress-circle-width'] = utils.addUnit(size);
65+
}
66+
67+
return utils._style(styles);
68+
}
5369

5470
module.exports = {
5571
STATUS: STATUS,
@@ -60,4 +76,5 @@ module.exports = {
6076
CIRCLE_STATUS_ICON: CIRCLE_STATUS_ICON,
6177
getAndroidAriaLabel: getAndroidAriaLabel,
6278
getIOSAriaLabel: getIOSAriaLabel,
79+
getCircleStyle: getCircleStyle,
6380
};

‎src/progress/props.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ const props: TdProgressProps = {
2121
type: Number,
2222
value: 0,
2323
},
24+
/** 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24 */
25+
size: {
26+
type: null,
27+
value: 'default',
28+
},
2429
/** 进度条状态 */
2530
status: {
2631
type: String,
@@ -29,11 +34,6 @@ const props: TdProgressProps = {
2934
strokeWidth: {
3035
type: null,
3136
},
32-
/** 自定义组件样式 */
33-
style: {
34-
type: String,
35-
value: '',
36-
},
3737
/** 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间 */
3838
theme: {
3939
type: String,

‎src/progress/type.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ export interface TdProgressProps {
2929
type: NumberConstructor;
3030
value?: number;
3131
};
32+
/**
33+
* 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24
34+
* @default 'default'
35+
*/
36+
size?: {
37+
type: null;
38+
value?: string | number;
39+
};
3240
/**
3341
* 进度条状态
3442
*/
@@ -43,14 +51,6 @@ export interface TdProgressProps {
4351
type: null;
4452
value?: string | number;
4553
};
46-
/**
47-
* 自定义组件样式
48-
* @default ''
49-
*/
50-
style?: {
51-
type: StringConstructor;
52-
value?: string;
53-
};
5454
/**
5555
* 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间
5656
* @default line

0 commit comments

Comments
 (0)