Skip to content

Commit 5057098

Browse files
irisSongirisSong
authored
fix(countdown): 修改实现逻辑适配v13和四端 (#2316)
* fix(countdown): 修改展示逻辑适配v13和四端 * fix: 取消col修改 * fix: cr修改 * chore: update docs
1 parent c3257ac commit 5057098

File tree

14 files changed

+346
-83
lines changed

14 files changed

+346
-83
lines changed

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

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,57 @@
11
.nut-countdown {
22
display: flex;
3-
color: #1A1A1A;
4-
font-size: 14px;
3+
flex-direction: row;
4+
align-items: center;
5+
color: #ff0f23;
6+
font-size: 10px;
7+
}
8+
.nut-countdown-number-primary {
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
height: 14px;
13+
font-weight: 400;
14+
font-size: 10px;
15+
}
16+
.nut-countdown-number {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
height: 14px;
21+
font-weight: 400;
22+
font-size: 10px;
23+
}
24+
.nut-countdown-unit {
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
height: 14px;
29+
font-weight: 400;
30+
font-size: 10px;
31+
}
32+
.nut-countdown-number {
33+
min-width: 20px;
34+
padding: 0 1px;
35+
border-radius: 2px;
36+
margin: 0 2px;
37+
}
38+
.nut-countdown-number-primary {
39+
min-width: 20px;
40+
padding: 0 1px;
41+
border-radius: 2px;
42+
margin: 0 2px;
43+
}
44+
.nut-countdown-number {
45+
border: 1px solid #ffebf1;
46+
background-color: transparent;
47+
color: #ff0f23;
48+
text-align: center;
49+
}
50+
.nut-countdown-number-primary {
51+
border: 1px solid #ff0f23;
52+
background-color: #ff0f23;
53+
color: #ffffff;
54+
}
55+
.nut-countdown-unit {
56+
color: #ff0f23;
557
}

‎src/packages/countdown/countdown.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
11
.nut-countdown {
22
display: $countdown-display;
3+
flex-direction: row;
4+
align-items: center;
35
color: $countdown-color;
46
font-size: $countdown-font-size;
7+
&-number-primary,
8+
&-number,
9+
&-unit {
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: $countdown-height;
14+
font-weight: $coutdown-font-weight;
15+
font-size: $countdown-font-size;
16+
}
17+
&-number,
18+
&-number-primary {
19+
min-width: $countdown-width;
20+
padding: $countdown-number-padding;
21+
border-radius: $countdown-number-border-radius;
22+
margin: $countdown-number-margin;
23+
}
24+
&-number {
25+
border: 1px solid $countdown-number-border-color;
26+
background-color: $countdown-number-background-color;
27+
color: $countdown-number-color;
28+
text-align: center;
29+
}
30+
&-number-primary {
31+
border: 1px solid $countdown-number-primary-border-color;
32+
background-color: $countdown-number-primary-background-color;
33+
color: $countdown-number-primary-color;
34+
}
35+
&-unit {
36+
color: $color-primary;
37+
}
538
}

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

Lines changed: 101 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,20 @@ import React, {
77
useImperativeHandle,
88
} from 'react'
99
import { View } from '@tarojs/components'
10-
import { useConfig } from '@/packages/configprovider/configprovider.taro'
1110
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
1211
import { padZero } from '@/utils/pad-zero'
13-
import { harmonyAndRn } from '@/utils/platform-taro'
12+
import { harmonyAndRn, web } from '@/utils/platform-taro'
1413

14+
export interface CountDownTimeProps {
15+
d: number
16+
h: number
17+
m: number
18+
s: number
19+
ms: number
20+
}
21+
export type CountDownType = 'default' | 'primary'
1522
export interface CountDownProps extends BasicComponent {
23+
type: CountDownType
1624
paused: boolean
1725
startTime: number
1826
endTime: number
@@ -31,6 +39,7 @@ export interface CountDownProps extends BasicComponent {
3139

3240
const defaultProps = {
3341
...ComponentDefaults,
42+
type: 'default',
3443
paused: false,
3544
startTime: Date.now(),
3645
endTime: Date.now(),
@@ -46,8 +55,8 @@ const InternalCountDown: ForwardRefRenderFunction<
4655
unknown,
4756
Partial<CountDownProps>
4857
> = (props, ref) => {
49-
const { locale } = useConfig()
5058
const {
59+
type,
5160
paused,
5261
startTime,
5362
endTime,
@@ -94,7 +103,7 @@ const InternalCountDown: ForwardRefRenderFunction<
94103
stateRef.current.handleEndTime = Date.now() + Number(remainingTime)
95104
} else {
96105
stateRef.current.handleEndTime = endTime
97-
if (!harmonyAndRn()) {
106+
if (web()) {
98107
stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
99108
}
100109
}
@@ -127,7 +136,7 @@ const InternalCountDown: ForwardRefRenderFunction<
127136
})
128137
}
129138

130-
// 将倒计时剩余时间格式化 参数： t 时间戳 type custom 自定义类型
139+
// 将倒计时剩余时间格式化 参数：t时间戳 type custom 自定义类型
131140
const formatRemainTime = (t: number, type?: string) => {
132141
const ts = t
133142
const rest = {
@@ -152,13 +161,7 @@ const InternalCountDown: ForwardRefRenderFunction<
152161
return type === 'custom' ? rest : parseFormat({ ...rest })
153162
}
154163

155-
const parseFormat = (time: {
156-
d: number
157-
h: number
158-
m: number
159-
s: number
160-
ms: number
161-
}) => {
164+
const parseFormat = (time: CountDownTimeProps) => {
162165
const { d } = time
163166
let { h, m, s, ms } = time
164167
let formatCache = format
@@ -198,8 +201,16 @@ const InternalCountDown: ForwardRefRenderFunction<
198201
formatCache = formatCache.replace('SS', msC.slice(0, 1))
199202
}
200203
}
204+
formatCache = formatCache.replace(
205+
/(\d+)/g,
206+
type === 'primary'
207+
? `<View class="nut-countdown-number-primary">$1</View>`
208+
: `<View class="nut-countdown-number">$1</View>`
209+
)
210+
201211
return formatCache
202212
}
213+
203214
// 暂定
204215
const pause = () => {
205216
cancelAnimationFrame(stateRef.current.timer)
@@ -286,25 +297,87 @@ const InternalCountDown: ForwardRefRenderFunction<
286297
return formatRemainTime(stateRef.current.restTime)
287298
})()
288299

300+
const getUnit = (unit: string) => {
301+
const formatArr = format.split(/(DD|HH|mm|ss|S)/)
302+
const index = formatArr.indexOf(unit)
303+
return index > -1 ? formatArr[index + 1] : ':'
304+
}
305+
306+
const renderTimeItem = (
307+
formatUnit: string,
308+
time: number | string,
309+
unit = ''
310+
) => {
311+
return (
312+
<>
313+
{format.includes(formatUnit) ? (
314+
<>
315+
<View
316+
className={`${classPrefix}-number${type === 'primary' ? '-primary' : ''}`}
317+
>
318+
{padZero(time)}
319+
</View>
320+
{unit ? (
321+
<View className={`${classPrefix}-unit`}>{getUnit(unit)}</View>
322+
) : null}
323+
</>
324+
) : null}
325+
</>
326+
)
327+
}
328+
329+
const renderTaroTime = () => {
330+
const formatCache = formatRemainTime(stateRef.current.restTime, 'custom')
331+
const { d, h, m, s, ms } = formatCache as CountDownTimeProps
332+
const digit = format.match(/S/g)?.length
333+
// format可能是DD天HH时mm分SSS秒或者DD天HH时mm分S秒或是DD：HH：mm：ss
334+
335+
return (
336+
<>
337+
{renderTimeItem('DD', d, 'DD')}
338+
{renderTimeItem('HH', h, 'HH')}
339+
{renderTimeItem('mm', m, 'mm')}
340+
{renderTimeItem('ss', s)}
341+
{(format.includes('S') || getUnit('ss') !== ':') && (
342+
<>
343+
<View className={`${classPrefix}-unit`}>{getUnit('ss')}</View>
344+
</>
345+
)}
346+
{renderTimeItem(
347+
'S',
348+
padZero(ms, 3)
349+
.toString()
350+
.slice(0, digit || 2)
351+
)}
352+
</>
353+
)
354+
}
355+
289356
return (
290-
<View
291-
className={`${classPrefix} ${className}`}
292-
style={{ ...style }}
293-
{...rest}
294-
>
357+
<>
295358
{children || (
296-
<View
297-
className={`${classPrefix}-block`}
298-
// eslint-disable-next-line react/no-danger
299-
// TODO:RN和鸿蒙暂时不支持dangerouslySetInnerHTML
300-
// dangerouslySetInnerHTML={{
301-
// __html: `${renderTime}`,
302-
// }}
303-
>
304-
{renderTime as any}
305-
</View>
359+
<>
360+
{!harmonyAndRn() ? (
361+
<View
362+
className={`${classPrefix} ${className}`}
363+
style={{ ...style }}
364+
{...rest}
365+
dangerouslySetInnerHTML={{
366+
__html: `${renderTime}`,
367+
}}
368+
/>
369+
) : (
370+
<View
371+
className={`${classPrefix} ${className}`}
372+
style={{ ...style }}
373+
{...rest}
374+
>
375+
{renderTaroTime()}
376+
</View>
377+
)}
378+
</>
306379
)}
307-
</View>
380+
</>
308381
)
309382
}
310383

‎src/packages/countdown/countdown.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import React, {
66
ForwardRefRenderFunction,
77
useImperativeHandle,
88
} from 'react'
9-
import { useConfig } from '@/packages/configprovider'
109
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
1110
import { padZero } from '@/utils/pad-zero'
1211

12+
export type CountDownType = 'default' | 'primary'
13+
1314
export interface CountDownProps extends BasicComponent {
15+
type: CountDownType
1416
paused: boolean
1517
startTime: number
1618
endTime: number
@@ -29,6 +31,7 @@ export interface CountDownProps extends BasicComponent {
2931

3032
const defaultProps = {
3133
...ComponentDefaults,
34+
type: 'default',
3235
paused: false,
3336
startTime: Date.now(),
3437
endTime: Date.now(),
@@ -44,8 +47,8 @@ const InternalCountDown: ForwardRefRenderFunction<
4447
unknown,
4548
Partial<CountDownProps>
4649
> = (props, ref) => {
47-
const { locale } = useConfig()
4850
const {
51+
type,
4952
paused,
5053
startTime,
5154
endTime,
@@ -194,6 +197,13 @@ const InternalCountDown: ForwardRefRenderFunction<
194197
formatCache = formatCache.replace('SS', msC.slice(0, 1))
195198
}
196199
}
200+
formatCache = formatCache.replace(
201+
/(\d+)/g,
202+
type === 'primary'
203+
? `<span class="nut-countdown-number-primary">$1</span>`
204+
: `<span class="nut-countdown-number">$1</span>`
205+
)
206+
197207
return formatCache
198208
}
199209

@@ -284,21 +294,18 @@ const InternalCountDown: ForwardRefRenderFunction<
284294
})()
285295

286296
return (
287-
<div
288-
className={`${classPrefix} ${className}`}
289-
style={{ ...style }}
290-
{...rest}
291-
>
297+
<>
292298
{children || (
293299
<div
294-
className={`${classPrefix}-block`}
295-
// eslint-disable-next-line react/no-danger
300+
className={`${classPrefix} ${className}`}
301+
style={{ ...style }}
302+
{...rest}
296303
dangerouslySetInnerHTML={{
297304
__html: `${renderTime}`,
298305
}}
299306
/>
300307
)}
301-
</div>
308+
</>
302309
)
303310
}
304311

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,18 @@ const Demo1 = () => {
99
console.log('countdown: ended.')
1010
}
1111
return (
12-
<Cell>
13-
<CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
14-
</Cell>
12+
<>
13+
<Cell>
14+
<CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
15+
</Cell>
16+
<Cell>
17+
<CountDown
18+
endTime={stateRef.current.endTime}
19+
type="primary"
20+
onEnd={onEnd}
21+
/>
22+
</Cell>
23+
</>
1524
)
1625
}
1726
export default Demo1

0 commit comments

Comments
 (0)