Skip to content

Commit 3933a24

Browse files
irisSongirisSong
committed
fix(countdown): 适配v14 && type增加text类型
1 parent 6341c78 commit 3933a24

File tree

18 files changed

+169
-118
lines changed

18 files changed

+169
-118
lines changed

‎src/packages/countdown/countdown.harmony.css‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,69 @@
33
flex-direction: row;
44
align-items: center;
55
color: #ff0f23;
6-
font-size: 10px;
6+
font-size: 11px;
77
}
88
.nut-countdown-number-primary {
99
display: flex;
1010
align-items: center;
1111
justify-content: center;
12-
height: 14px;
12+
height: 16px;
1313
font-weight: 400;
14-
font-size: 10px;
14+
font-size: 11px;
1515
}
1616
.nut-countdown-number {
1717
display: flex;
1818
align-items: center;
1919
justify-content: center;
20-
height: 14px;
20+
height: 16px;
2121
font-weight: 400;
22-
font-size: 10px;
22+
font-size: 11px;
23+
}
24+
.nut-countdown-number-text {
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
height: 16px;
29+
font-weight: 400;
30+
font-size: 11px;
2331
}
2432
.nut-countdown-unit {
2533
display: flex;
2634
align-items: center;
2735
justify-content: center;
28-
height: 14px;
36+
height: 16px;
2937
font-weight: 400;
30-
font-size: 10px;
38+
font-size: 11px;
3139
}
3240
.nut-countdown-number {
33-
min-width: 20px;
34-
padding: 0 1px;
41+
min-width: 16px;
42+
padding: 0 0;
3543
border-radius: 2px;
36-
margin: 0 2px;
44+
margin: 0 1px;
45+
text-align: center;
3746
}
3847
.nut-countdown-number-primary {
39-
min-width: 20px;
40-
padding: 0 1px;
48+
min-width: 16px;
49+
padding: 0 0;
4150
border-radius: 2px;
42-
margin: 0 2px;
51+
margin: 0 1px;
52+
text-align: center;
4353
}
4454
.nut-countdown-number {
4555
border: 1px solid #ffebf1;
46-
background-color: transparent;
56+
background-color: #ffffff;
4757
color: #ff0f23;
48-
text-align: center;
4958
}
5059
.nut-countdown-number-primary {
5160
border: 1px solid #ff0f23;
5261
background-color: #ff0f23;
5362
color: #ffffff;
5463
}
64+
.nut-countdown-number-text {
65+
border: 0;
66+
background-color: transparent;
67+
color: #ff0f23;
68+
}
5569
.nut-countdown-unit {
5670
color: #ff0f23;
5771
}

‎src/packages/countdown/countdown.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
font-size: $countdown-font-size;
77
&-number-primary,
88
&-number,
9+
&-number-text,
910
&-unit {
1011
display: flex;
1112
align-items: center;
@@ -20,18 +21,23 @@
2021
padding: $countdown-number-padding;
2122
border-radius: $countdown-number-border-radius;
2223
margin: $countdown-number-margin;
24+
text-align: center;
2325
}
2426
&-number {
2527
border: 1px solid $countdown-number-border-color;
2628
background-color: $countdown-number-background-color;
2729
color: $countdown-number-color;
28-
text-align: center;
2930
}
3031
&-number-primary {
3132
border: 1px solid $countdown-number-primary-border-color;
3233
background-color: $countdown-number-primary-background-color;
3334
color: $countdown-number-primary-color;
3435
}
36+
&-number-text {
37+
border: 0;
38+
background-color: transparent;
39+
color: $countdown-number-color;
40+
}
3541
&-unit {
3642
color: $color-primary;
3743
}

‎src/packages/countdown/countdown.taro.tsx‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,22 @@ import React, {
22
useState,
33
useRef,
44
useEffect,
5-
ReactNode,
65
ForwardRefRenderFunction,
76
useImperativeHandle,
87
} from 'react'
8+
import classNames from 'classnames'
99
import { View } from '@tarojs/components'
10-
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
10+
import { ComponentDefaults } from '@/utils/typings'
1111
import { padZero } from '@/utils/pad-zero'
1212
import { web } from '@/utils/platform-taro'
1313

14-
export interface CountDownTimeProps {
14+
interface CountDownTimeProps {
1515
d: number
1616
h: number
1717
m: number
1818
s: number
1919
ms: number
2020
}
21-
export type CountDownType = 'default' | 'primary'
22-
export interface CountDownProps extends BasicComponent {
23-
type: CountDownType
24-
paused: boolean
25-
startTime: number
26-
endTime: number
27-
remainingTime: number
28-
millisecond: boolean
29-
format: string
30-
autoStart: boolean
31-
time: number
32-
destroy: boolean
33-
onEnd: () => void
34-
onPaused: (restTime: number) => void
35-
onRestart: (restTime: number) => void
36-
onUpdate: (restTime: any) => void
37-
children: ReactNode
38-
}
3921

4022
const defaultProps = {
4123
...ComponentDefaults,
@@ -198,7 +180,7 @@ const InternalCountDown: ForwardRefRenderFunction<
198180
} else if (formatCache.includes('SS')) {
199181
formatCache = formatCache.replace('SS', msC.slice(0, 2))
200182
} else if (formatCache.includes('S')) {
201-
formatCache = formatCache.replace('SS', msC.slice(0, 1))
183+
formatCache = formatCache.replace('S', msC.slice(0, 1))
202184
}
203185
}
204186

@@ -301,7 +283,11 @@ const InternalCountDown: ForwardRefRenderFunction<
301283
{format.includes(formatUnit) ? (
302284
<>
303285
<View
304-
className={`${classPrefix}-number${type === 'primary' ? '-primary' : ''}`}
286+
className={classNames({
287+
[`${classPrefix}-number`]: type === 'default',
288+
[`${classPrefix}-number-primary`]: type === 'primary',
289+
[`${classPrefix}-number-text`]: type === 'text',
290+
})}
305291
>
306292
{padZero(time)}
307293
</View>

‎src/packages/countdown/countdown.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,12 @@ import React, {
22
useState,
33
useRef,
44
useEffect,
5-
ReactNode,
65
ForwardRefRenderFunction,
76
useImperativeHandle,
87
} from 'react'
9-
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
8+
import { ComponentDefaults } from '@/utils/typings'
109
import { padZero } from '@/utils/pad-zero'
11-
12-
export type CountDownType = 'default' | 'primary'
13-
14-
export interface CountDownProps extends BasicComponent {
15-
type: CountDownType
16-
paused: boolean
17-
startTime: number
18-
endTime: number
19-
remainingTime: number
20-
millisecond: boolean
21-
format: string
22-
autoStart: boolean
23-
time: number
24-
destroy: boolean
25-
onEnd: () => void
26-
onPaused: (restTime: number) => void
27-
onRestart: (restTime: number) => void
28-
onUpdate: (restTime: any) => void
29-
children: ReactNode
30-
}
10+
import { CountDownProps } from './types'
3111

3212
const defaultProps = {
3313
...ComponentDefaults,
@@ -194,14 +174,18 @@ const InternalCountDown: ForwardRefRenderFunction<
194174
} else if (formatCache.includes('SS')) {
195175
formatCache = formatCache.replace('SS', msC.slice(0, 2))
196176
} else if (formatCache.includes('S')) {
197-
formatCache = formatCache.replace('SS', msC.slice(0, 1))
177+
formatCache = formatCache.replace('S', msC.slice(0, 1))
198178
}
199179
}
180+
const isTextDom =
181+
type === 'text'
182+
? `<span class="nut-countdown-number-text">$1</span>`
183+
: `<span class="nut-countdown-number">$1</span>`
200184
formatCache = formatCache.replace(
201185
/(\d+)/g,
202186
type === 'primary'
203187
? `<span class="nut-countdown-number-primary">$1</span>`
204-
: `<span class="nut-countdown-number">$1</span>`
188+
: isTextDom
205189
)
206190

207191
return formatCache

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,20 @@ const Demo1 = () => {
1010
}
1111
return (
1212
<>
13+
<Cell>
14+
<CountDown
15+
endTime={stateRef.current.endTime}
16+
type="primary"
17+
onEnd={onEnd}
18+
/>
19+
</Cell>
1320
<Cell>
1421
<CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
1522
</Cell>
1623
<Cell>
1724
<CountDown
1825
endTime={stateRef.current.endTime}
19-
type="primary"
26+
type="text"
2027
onEnd={onEnd}
2128
/>
2229
</Cell>

‎src/packages/countdown/demos/h5/demo3.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,24 @@ import { Cell, CountDown } from '@nutui/nutui-react'
44
const Demo3 = () => {
55
const stateRef = useRef({
66
endTime: Date.now() + 60 * 1000,
7+
endDay: Date.now() + 60 * 1000 * 60 * 25,
78
})
89
return (
9-
<Cell>
10-
<CountDown
11-
endTime={stateRef.current.endTime}
12-
format="DD 天 HH 时 mm 分 ss 秒"
13-
/>
14-
</Cell>
10+
<>
11+
<Cell>
12+
<CountDown endTime={stateRef.current.endTime} format="mm:ss" />
13+
</Cell>
14+
<Cell>
15+
<CountDown endTime={stateRef.current.endTime} format="ss" />
16+
</Cell>
17+
<Cell>
18+
<CountDown
19+
type="text"
20+
endTime={stateRef.current.endDay}
21+
format="DD天HH:mm:ss"
22+
/>
23+
</Cell>
24+
</>
1525
)
1626
}
1727
export default Demo3

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Demo4 = () => {
1010
<CountDown
1111
endTime={stateRef.current.endTime}
1212
millisecond
13-
format="HH:mm:ss:SS"
13+
format="HH:mm:ss:S"
1414
/>
1515
</Cell>
1616
)

‎src/packages/countdown/demos/taro/demo1.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,20 @@ const Demo1 = () => {
1010
}
1111
return (
1212
<>
13+
<Cell>
14+
<CountDown
15+
endTime={stateRef.current.endTime}
16+
type="primary"
17+
onEnd={onEnd}
18+
/>
19+
</Cell>
1320
<Cell>
1421
<CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
1522
</Cell>
1623
<Cell>
1724
<CountDown
1825
endTime={stateRef.current.endTime}
19-
type="primary"
26+
type="text"
2027
onEnd={onEnd}
2128
/>
2229
</Cell>

‎src/packages/countdown/demos/taro/demo3.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,24 @@ import { Cell, CountDown } from '@nutui/nutui-react-taro'
44
const Demo3 = () => {
55
const stateRef = useRef({
66
endTime: Date.now() + 60 * 1000,
7+
endDay: Date.now() + 60 * 1000 * 60 * 25,
78
})
89
return (
9-
<Cell>
10-
<CountDown endTime={stateRef.current.endTime} format="DD天HH时mm分ss秒" />
11-
</Cell>
10+
<>
11+
<Cell>
12+
<CountDown endTime={stateRef.current.endTime} format="mm:ss" />
13+
</Cell>
14+
<Cell>
15+
<CountDown endTime={stateRef.current.endTime} format="ss" />
16+
</Cell>
17+
<Cell>
18+
<CountDown
19+
type="text"
20+
endTime={stateRef.current.endDay}
21+
format="DD天HH:mm:ss"
22+
/>
23+
</Cell>
24+
</>
1225
)
1326
}
1427
export default Demo3

‎src/packages/countdown/demos/taro/demo4.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Demo4 = () => {
1010
<CountDown
1111
endTime={stateRef.current.endTime}
1212
millisecond
13-
format="HH:mm:ss:SS"
13+
format="HH:mm:ss:S"
1414
/>
1515
</Cell>
1616
)

0 commit comments

Comments
 (0)