Skip to content

Commit 55a5e32

Browse files
anlyyaoanlyyao
authored
feat(Stepper): support integer props (#3230)
* feat(Stepper): support integer props * test: update snapshots
1 parent 4910b0a commit 55a5e32

File tree

7 files changed

+147
-107
lines changed

7 files changed

+147
-107
lines changed

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@
66

77
name | type | default | description | required
88
-- | -- | -- | -- | --
9+
style | Object | - | CSS(Cascading Style Sheets) | N
10+
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
911
disable-input | Boolean | false | \- | N
10-
disabled | Boolean | false | \- | N
11-
external-classes | Array | - | `['t-class', 't-class-input', 't-class-add', 't-class-minus']` | N
12+
disabled | Boolean | undefined | \- | N
1213
input-width | Number | - | \- | N
14+
integer | Boolean | true | \- | N
1315
max | Number | 100 | \- | N
1416
min | Number | 0 | \- | N
17+
size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
1518
step | Number | 1 | \- | N
16-
theme | String | normal | stylish。options：normal/grey | N
19+
theme | String | normal | stylish。options: normal/filled/outline | N
1720
value | String / Number | 0 | \- | N
1821
default-value | String / Number | undefined | uncontrolled property | N
1922

@@ -25,12 +28,21 @@ blur | `({ type: string \| number })` | \-
2528
change | `({ value: string \| number })` | \-
2629
overlimit | `({type: 'minus' \| 'plus'})` | \-
2730

31+
### Stepper External Classes
32+
33+
className | Description
34+
-- | --
35+
t-class | \-
36+
t-class-input | \-
37+
t-class-minus | \-
38+
t-class-plus | \-
2839

2940
### CSS Variables
41+
3042
The component provides the following CSS variables, which can be used to customize styles.
3143
Name | Default Value | Description
3244
-- | -- | --
3345
--td-stepper-border-color | @component-border | -
3446
--td-stepper-border-radius | @radius-small | -
3547
--td-stepper-input-color | @font-gray-1 | -
36-
--td-stepper-input-disabled-color | @font-gray-4 | -
48+
--td-stepper-input-disabled-color | @font-gray-4 | -

‎src/stepper/README.md‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,21 @@ isComponent: true
5252

5353

5454
## API
55+
5556
### Stepper Props
5657

57-
名称 | 类型 | 默认值 | 说明 | 必传
58+
名称 | 类型 | 默认值 | 描述 | 必传
5859
-- | -- | -- | -- | --
60+
style | Object | - | 样式 | N
61+
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
5962
disable-input | Boolean | false | 禁用输入框 | N
60-
disabled | Boolean | false | 禁用全部操作 | N
63+
disabled | Boolean | undefined | 禁用全部操作 | N
6164
input-width | Number | - | 输入框宽度，默认单位 `px` | N
65+
integer | Boolean | true | 是否整型 | N
6266
max | Number | 100 | 最大值 | N
6367
min | Number | 0 | 最小值 | N
68+
size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
6469
step | Number | 1 | 步长 | N
65-
size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
6670
theme | String | normal | 组件风格。可选项：normal/filled/outline | N
6771
value | String / Number | 0 | 值 | N
6872
default-value | String / Number | undefined | 值。非受控属性 | N
@@ -75,19 +79,21 @@ blur | `({ type: string \| number })` | 输入框失去焦点时触发
7579
change | `({ value: string \| number })` | 数值发生变更时触发
7680
overlimit | `({type: 'minus' \| 'plus'})` | 数值超出限制时触发
7781

78-
### Stepper 外部样式类
79-
类名 | 说明
80-
-- | --
82+
### Stepper External Classes
83+
84+
类名 | 描述
85+
-- | --
8186
t-class | 根节点样式类
8287
t-class-input | 输入框样式类
8388
t-class-minus | 左侧递减号样式类
8489
t-class-plus | 右侧递增号样式类
8590

86-
### CSS 变量
91+
### CSS Variables
92+
8793
组件提供了下列 CSS 变量，可用于自定义样式。
8894
名称 | 默认值 | 描述
8995
-- | -- | --
9096
--td-stepper-border-color | @component-border | -
9197
--td-stepper-border-radius | @radius-small | -
9298
--td-stepper-input-color | @font-gray-1 | -
93-
--td-stepper-input-disabled-color | @font-gray-4 | -
99+
--td-stepper-input-disabled-color | @font-gray-4 | -

‎src/stepper/__test__/__snapshots__/index.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ exports[`stepper event : input 2`] = `
107107
disabled="{{false}}"
108108
style=""
109109
type="number"
110-
value="{{4}}"
110+
value="88"
111111
catch:blur="handleBlur"
112112
catch:focus="handleFocus"
113113
catch:input="handleInput"

‎src/stepper/props.ts‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,22 @@ const props: TdStepperProps = {
1313
},
1414
/** 禁用全部操作 */
1515
disabled: {
16-
type: Boolean,
17-
value: false,
16+
type: null,
17+
value: undefined,
1818
},
1919
/** 组件类名，分别用于表示组件外层元素、输入框、右侧递增号、左侧递减号等元素类名 */
2020
externalClasses: {
2121
type: Array,
2222
},
23-
/** 输入框宽度 */
23+
/** 输入框宽度，默认单位 `px` */
2424
inputWidth: {
2525
type: Number,
2626
},
27+
/** 是否整型 */
28+
integer: {
29+
type: Boolean,
30+
value: true,
31+
},
2732
/** 最大值 */
2833
max: {
2934
type: Number,
@@ -34,31 +39,29 @@ const props: TdStepperProps = {
3439
type: Number,
3540
value: 0,
3641
},
37-
/** 步长 */
38-
step: {
39-
type: Number,
40-
value: 1,
41-
},
4242
/** 组件尺寸 */
4343
size: {
4444
type: String,
4545
value: 'medium',
4646
},
47+
/** 步长 */
48+
step: {
49+
type: Number,
50+
value: 1,
51+
},
4752
/** 组件风格 */
4853
theme: {
4954
type: String,
5055
value: 'normal',
5156
},
5257
/** 值 */
5358
value: {
54-
type: String,
55-
optionalTypes: [Number],
59+
type: null,
5660
value: null,
5761
},
5862
/** 值，非受控属性 */
5963
defaultValue: {
60-
type: String,
61-
optionalTypes: [Number],
64+
type: null,
6265
value: 0,
6366
},
6467
};

‎src/stepper/stepper.ts‎

Lines changed: 76 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -42,65 +42,79 @@ export default class Stepper extends SuperComponent {
4242
},
4343
};
4444

45-
isDisabled(type) {
46-
const { min, max, disabled } = this.properties;
47-
const { currentValue } = this.data as any;
48-
if (disabled) {
49-
return true;
50-
}
51-
if (type === 'minus' && currentValue <= min) {
52-
return true;
53-
}
54-
if (type === 'plus' && currentValue >= max) {
55-
return true;
56-
}
57-
return false;
58-
}
59-
60-
getLen(num: number) {
61-
const numStr = num.toString();
62-
return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
63-
}
64-
65-
add(a: number, b: number) {
66-
const maxLen = Math.max(this.getLen(a), this.getLen(b));
67-
const base = 10 ** maxLen;
68-
return Math.round(a * base + b * base) / base;
69-
}
70-
71-
format(value) {
72-
const { min, max, step } = this.properties as any;
73-
const len = Math.max(this.getLen(step), this.getLen(value));
74-
// 超过边界取边界值
75-
return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(len);
76-
}
77-
78-
setValue(value) {
79-
value = this.format(value);
80-
if (this.preValue === value) return;
81-
this.preValue = value;
82-
this._trigger('change', { value: Number(value) });
83-
}
84-
85-
minusValue() {
86-
if (this.isDisabled('minus')) {
87-
this.triggerEvent('overlimit', { type: 'minus' });
88-
return false;
89-
}
90-
const { currentValue, step } = this.data as any;
91-
this.setValue(this.add(currentValue, -step));
92-
}
93-
94-
plusValue() {
95-
if (this.isDisabled('plus')) {
96-
this.triggerEvent('overlimit', { type: 'plus' });
45+
methods = {
46+
isDisabled(type) {
47+
const { min, max, disabled } = this.properties;
48+
const { currentValue } = this.data as any;
49+
if (disabled) {
50+
return true;
51+
}
52+
if (type === 'minus' && currentValue <= min) {
53+
return true;
54+
}
55+
if (type === 'plus' && currentValue >= max) {
56+
return true;
57+
}
9758
return false;
98-
}
99-
const { currentValue, step } = this.data as any;
100-
this.setValue(this.add(currentValue, step));
101-
}
59+
},
60+
61+
getLen(num: number) {
62+
const numStr = num.toString();
63+
return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
64+
},
65+
66+
add(a: number, b: number) {
67+
const maxLen = Math.max(this.getLen(a), this.getLen(b));
68+
const base = 10 ** maxLen;
69+
return Math.round(a * base + b * base) / base;
70+
},
71+
72+
format(value) {
73+
const { min, max, step } = this.properties as any;
74+
const len = Math.max(this.getLen(step), this.getLen(value));
75+
// 超过边界取边界值
76+
return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(len);
77+
},
78+
79+
setValue(value) {
80+
value = this.format(value);
81+
if (this.preValue === value) return;
82+
this.preValue = value;
83+
this._trigger('change', { value: Number(value) });
84+
},
85+
86+
minusValue() {
87+
if (this.isDisabled('minus')) {
88+
this.triggerEvent('overlimit', { type: 'minus' });
89+
return false;
90+
}
91+
const { currentValue, step } = this.data as any;
92+
this.setValue(this.add(currentValue, -step));
93+
},
94+
95+
plusValue() {
96+
if (this.isDisabled('plus')) {
97+
this.triggerEvent('overlimit', { type: 'plus' });
98+
return false;
99+
}
100+
const { currentValue, step } = this.data as any;
101+
this.setValue(this.add(currentValue, step));
102+
},
103+
104+
filterIllegalChar(value: string | number) {
105+
const v = String(value).replace(/[^0-9.]/g, '');
106+
const indexOfDot = v.indexOf('.');
107+
if (this.properties.integer && indexOfDot !== -1) {
108+
return v.split('.')[0];
109+
}
110+
111+
if (!this.properties.integer && indexOfDot !== -1 && indexOfDot !== v.lastIndexOf('.')) {
112+
return v.split('.', 2).join('.');
113+
}
114+
115+
return v;
116+
},
102117

103-
methods = {
104118
handleFocus(e) {
105119
const { value } = e.detail;
106120

@@ -114,7 +128,11 @@ export default class Stepper extends SuperComponent {
114128
return;
115129
}
116130

117-
this.triggerEvent('input', { value });
131+
const formatted = this.filterIllegalChar(value);
132+
this.setData({
133+
currentValue: formatted,
134+
});
135+
this.triggerEvent('input', { value: formatted });
118136
},
119137

120138
handleBlur(e) {

‎src/stepper/stepper.wxml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@
1313
>
1414
<t-icon name="remove" class="{{classPrefix}}__minus-icon" />
1515
</view>
16-
<view class="{{classPrefix}}__input--{{theme}} {{ disabled ? classPrefix + '--' + theme + '-disabled': ''}}">
16+
<view
17+
class="{{classPrefix}}__input--{{theme}} {{ disabled || disableInput ? classPrefix + '--' + theme + '-disabled': ''}}"
18+
>
1719
<input
1820
style="{{inputWidth? 'width:' + inputWidth + 'px;': ''}}"
1921
class="{{classPrefix}}__input {{classPrefix}}__input--{{size}} {{prefix}}-class-input"
2022
disabled="{{ disabled || disableInput }}"
21-
type="number"
23+
type="{{ integer ? 'number' : 'digit' }}"
2224
value="{{ currentValue }}"
2325
catchinput="handleInput"
2426
catchfocus="handleFocus"

0 commit comments

Comments
 (0)