Skip to content

Commit c3cb26b

Browse files
oasis-cloudxiaoyatong
oasis-cloud
and
xiaoyatong
authored
feat(v15): indicator adaptation (#2746)
* feat(v14): indicator adaptation * feat(v14): indicator adaptation * feat: 增加视觉限制最大宽度 * fix: review * fix: update test * fix: 覆盖率 * fix: review * fix: review --------- Co-authored-by: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com>
1 parent f764c71 commit c3cb26b

22 files changed

Lines changed: 606 additions & 174 deletions

‎migrate-from-v2.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -255,12 +255,8 @@ plugins: [
255255

256256
#### Indicator
257257

258-
- 移除 `block`，暴露自定义节点
259-
- 移除 `align`，暴露自定义节点
260-
- `vertical` 重命名为`direction`，默认值为 `horizontal`，可选 `vertical`
261-
- 移除 `fillZero`，暴露自定义节点
262-
- `size` 重命名为 `total`
263-
- 增加非数字展示，并设置为默认状态
258+
- type 属性的值调整为 `'anchor'` 或 `'slide'`
259+
- color 属性的值增加 `'white'`
264260

265261
#### Menu
266262

‎src/config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1048,6 +1048,7 @@
10481048
"sort": 16,
10491049
"show": true,
10501050
"taro": true,
1051+
"v15": true,
10511052
"author": "liukun"
10521053
},
10531054
{

‎src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ exports[`should match snapshot 1`] = `
66
class="nut-indicator"
77
>
88
<div
9-
class="nut-indicator-dot nut-indicator-dot"
9+
class="nut-indicator-dot"
1010
/>
1111
<div
12-
class="nut-indicator-dot nut-indicator-dot"
12+
class="nut-indicator-dot"
1313
/>
1414
<div
15-
class="nut-indicator-dot nut-indicator-dot"
15+
class="nut-indicator-dot"
1616
/>
1717
</div>
1818
</DocumentFragment>

‎src/packages/indicator/__test__/indicator.spec.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ test('should be shown when passing size and current', () => {
1717
</Cell>
1818
)
1919
expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(3)
20-
expect(container.querySelectorAll('.nut-indicator-active')).toHaveLength(1)
20+
expect(container.querySelectorAll('.nut-indicator-dot-active')).toHaveLength(
21+
1
22+
)
2123
})
2224

2325
test('should be shown when custom node', () => {
@@ -41,3 +43,14 @@ test('should be shown when custom node', () => {
4143
)
4244
expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(5)
4345
})
46+
47+
test('should be shown when slide', () => {
48+
const { container } = render(
49+
<Cell>
50+
<Indicator type="slide" total={6} current={5} />
51+
</Cell>
52+
)
53+
expect(container.querySelectorAll('.nut-indicator-line-active')).toHaveLength(
54+
1
55+
)
56+
})

‎src/packages/indicator/demo.taro.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,31 @@ import Demo1 from './demos/taro/demo1'
77
import Demo2 from './demos/taro/demo2'
88
import Demo3 from './demos/taro/demo3'
99
import Demo4 from './demos/taro/demo4'
10+
import Demo5 from './demos/taro/demo5'
11+
import Demo6 from './demos/taro/demo6'
1012

1113
const IndicatorDemo = () => {
1214
const [translated] = useTranslate({
1315
'zh-CN': {
1416
basic: '基础用法',
17+
white: '白色',
18+
type: '类型',
1519
customNode: '自定义节点',
1620
custom: '自定义',
1721
vertical: '竖向展示',
1822
},
1923
'zh-TW': {
2024
basic: '基礎用法',
25+
white: '白色',
26+
type: '类型',
2127
customNode: '自定义节点',
2228
custom: '自定义',
2329
vertical: '豎向展示',
2430
},
2531
'en-US': {
2632
basic: 'Basic usage',
33+
white: 'White',
34+
type: 'Type',
2735
customNode: 'Custom Node',
2836
custom: 'Custom',
2937
vertical: 'Vertical display',
@@ -37,6 +45,12 @@ const IndicatorDemo = () => {
3745
<View className="h2">{translated.basic}</View>
3846
<Demo1 />
3947

48+
<View className="h2">{translated.white}</View>
49+
<Demo5 />
50+
51+
<View className="h2">{translated.type}</View>
52+
<Demo6 />
53+
4054
<View className="h2">{translated.customNode}</View>
4155
<Demo2 />
4256

‎src/packages/indicator/demo.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,31 @@ import Demo1 from './demos/h5/demo1'
44
import Demo2 from './demos/h5/demo2'
55
import Demo3 from './demos/h5/demo3'
66
import Demo4 from './demos/h5/demo4'
7+
import Demo5 from './demos/h5/demo5'
8+
import Demo6 from './demos/h5/demo6'
79

810
const IndicatorDemo = () => {
911
const [translated] = useTranslate({
1012
'zh-CN': {
1113
basic: '基础用法',
14+
white: '白色',
15+
type: '类型',
1216
customNode: '自定义节点',
1317
custom: '自定义',
1418
vertical: '竖向展示',
1519
},
1620
'zh-TW': {
1721
basic: '基礎用法',
22+
white: '白色',
23+
type: '类型',
1824
customNode: '自定义节点',
1925
custom: '自定义',
2026
vertical: '豎向展示',
2127
},
2228
'en-US': {
2329
basic: 'Basic usage',
30+
white: 'White',
31+
type: 'Type',
2432
customNode: 'Custom Node',
2533
custom: 'Custom',
2634
vertical: 'Vertical display',
@@ -33,6 +41,12 @@ const IndicatorDemo = () => {
3341
<h2>{translated.basic}</h2>
3442
<Demo1 />
3543

44+
<h2>{translated.white}</h2>
45+
<Demo5 />
46+
47+
<h2>{translated.type}</h2>
48+
<Demo6 />
49+
3650
<h2>{translated.customNode}</h2>
3751
<Demo2 />
3852

‎src/packages/indicator/demos/h5/demo1.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { Indicator, Cell } from '@nutui/nutui-react'
2+
import { Cell, Indicator } from '@nutui/nutui-react'
33

44
const Demo1 = () => {
55
return (
@@ -8,10 +8,13 @@ const Demo1 = () => {
88
<Indicator total={3} current={0} />
99
</Cell>
1010
<Cell>
11-
<Indicator total={3} current={1} />
11+
<Indicator total={2} current={0} />
1212
</Cell>
1313
<Cell>
14-
<Indicator total={3} current={2} />
14+
<Indicator total={2} current={0} direction="vertical" />
15+
</Cell>
16+
<Cell style={{ background: '#C2C4CC' }}>
17+
<Indicator total={2} current={1} direction="vertical" color="white" />
1518
</Cell>
1619
</>
1720
)

‎src/packages/indicator/demos/h5/demo4.tsx‎

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,61 @@
11
import React from 'react'
2-
import { Indicator, Cell } from '@nutui/nutui-react'
2+
import { Cell, Indicator } from '@nutui/nutui-react'
33

44
const Demo4 = () => {
55
return (
6-
<Cell>
7-
<Indicator total={6} current={5} direction="vertical">
8-
<div
6+
<>
7+
<Cell>
8+
<Indicator total={6} current={5} direction="vertical">
9+
<div
10+
style={{
11+
display: 'inline-block',
12+
width: '14px',
13+
height: '14px',
14+
lineHeight: '14px',
15+
textAlign: 'center',
16+
fontSize: '12px',
17+
color: '#FFFFFF',
18+
border: '1px solid #FFFFFF',
19+
borderRadius: '50%',
20+
margin: '4px',
21+
background: `var(--nutui-color-primary)`,
22+
boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
23+
}}
24+
>
25+
{5}
26+
</div>
27+
</Indicator>
28+
<Indicator
29+
total={6}
30+
current={2}
31+
direction="vertical"
932
style={{
10-
display: 'inline-block',
11-
width: '14px',
12-
height: '14px',
13-
lineHeight: '14px',
14-
textAlign: 'center',
15-
fontSize: '12px',
16-
color: '#FFFFFF',
17-
border: '1px solid #FFFFFF',
18-
borderRadius: '50%',
19-
margin: '4px',
20-
background: `var(--nutui-color-primary)`,
21-
boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
33+
marginLeft: '50px',
2234
}}
23-
>
24-
{5}
25-
</div>
26-
</Indicator>
27-
<Indicator
28-
total={6}
29-
current={2}
30-
direction="vertical"
31-
style={{
32-
marginLeft: '50px',
33-
}}
34-
/>
35-
</Cell>
35+
/>
36+
37+
<Indicator
38+
total={6}
39+
current={5}
40+
direction="vertical"
41+
type="slide"
42+
style={{
43+
marginLeft: '50px',
44+
}}
45+
/>
46+
</Cell>
47+
<Cell style={{ background: '#C2C4CC' }}>
48+
<Indicator
49+
total={6}
50+
current={2}
51+
direction="vertical"
52+
color="white"
53+
style={{
54+
marginLeft: '50px',
55+
}}
56+
/>
57+
</Cell>
58+
</>
3659
)
3760
}
3861
export default Demo4

‎src/packages/indicator/demos/h5/demo5.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import { Cell, Indicator } from '@nutui/nutui-react'
3+
4+
const Demo5 = () => {
5+
return (
6+
<>
7+
<Cell style={{ background: '#C2C4CC' }}>
8+
<Indicator total={3} current={0} color="white" />
9+
</Cell>
10+
</>
11+
)
12+
}
13+
export default Demo5

‎src/packages/indicator/demos/h5/demo6.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import { Cell, Indicator } from '@nutui/nutui-react'
3+
4+
const Demo6 = () => {
5+
return (
6+
<>
7+
<Cell>
8+
<Indicator total={3} current={2} type="slide" />
9+
</Cell>
10+
<Cell>
11+
<Indicator total={3} current={2} type="slide" direction="vertical" />
12+
</Cell>
13+
</>
14+
)
15+
}
16+
export default Demo6

0 commit comments

Comments
 (0)