@conecli/cone-render 0.10.1-shop3.20 → 0.10.1-shop3.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- import Taro from '@tarojs/taro';
2
1
  const {
3
2
  residueTime,
4
3
  serverTime,
5
4
  startTime,
6
5
  endTime,
7
6
  className,
8
7
  info,
9
8
  endTimeEndCallBack,
10
9
  startTimeEndCallBack,
11
10
  startTitleText,
12
11
  endTitleText,
13
12
  timeNumSpaceTextState,
14
13
  showDaytimeNumSpaceTextState,
15
14
  getDaysToHours,
16
15
  onlyShowDayState,
17
16
  showDayState,
18
17
  showHourState,
19
18
  showMinuteState,
20
19
  showSecondState,
21
20
  showDayToSecondState,
22
21
  fromStartText,
23
22
  fromEndText,
24
23
  numTextColor,
25
24
  textColor,
26
25
  numTextBgColor,
27
26
  } = props;
28
27
  const [endTimeFormat, setEndTimeFormat] = useState<{
29
28
  day: string | number;
30
29
  hour: string | number;
31
30
  minute: string | number;
32
31
  second: string | number;
33
32
  }>({
34
33
  day: 0,
35
34
  hour: 0,
36
35
  minute: 0,
37
36
  second: 0,
38
37
  });
39
38
  const countDownTimer = useRef<NodeJS.Timer | null>();
40
39
  const countDownTypeText = useRef<ComponentInterFace.CountDownTimerRef>({
41
40
  type: 'end',
42
41
  text: endTitleText,
43
42
  time: null,
44
43
  });
45
44
 
46
45
  const diffTimerRef = useRef({
47
46
  stopDocumentTime: 0,
48
47
  recoverDocumentTime: 0,
49
48
  diffTime: 0,
50
49
  });
51
50
 
52
51
  useEffect(() => {
53
52
  Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (state) => {
54
53
  if (state) {
55
54
  if (diffTimerRef.current.stopDocumentTime && diffTimerRef.current.stopDocumentTime > 0) {
56
55
  diffTimerRef.current.recoverDocumentTime = Date.now();
57
56
  diffTimerRef.current.diffTime =
58
57
  diffTimerRef.current.recoverDocumentTime - diffTimerRef.current.stopDocumentTime;
59
58
  changeTimerSetInterval(true);
60
59
  }
61
60
  } else {
62
61
  diffTimerRef.current.stopDocumentTime = Date.now();
63
62
  if (countDownTimer.current) {
64
63
  clearInterval(countDownTimer.current);
65
64
  countDownTimer.current = null;
66
65
  }
67
66
  }
68
67
  });
69
68
  }, []);
70
69
  useEffect(() => {
71
70
  if (serverTime > 0 || residueTime > 0) {
72
71
  let getNowEndTime = residueTime > 0 ? residueTime : endTime - serverTime;
73
72
  if (startTime && endTime) {
74
73
  if (serverTime <= startTime) {
75
74
  getNowEndTime = startTime - serverTime;
76
75
  countDownTypeText.current = {
77
76
  type: 'start',
78
77
  text: startTitleText,
79
78
  time: null,
80
79
  };
81
80
  } else {
82
81
  getNowEndTime = endTime - serverTime;
83
82
  countDownTypeText.current = {
84
83
  type: 'end',
85
84
  text: endTitleText,
86
85
  time: null,
87
86
  };
88
87
  }
89
88
  } else {
90
89
  countDownTypeText.current = {
91
90
  type: 'end',
92
91
  text: endTitleText,
93
92
  time: null,
94
93
  };
95
94
  }
96
95
  if (getNowEndTime > 0) {
97
96
  countDownTimeFormat(getNowEndTime);
98
97
  countDownTypeText.current.time = getNowEndTime;
99
98
  countDownTypeText.current.type === 'start' &&
100
99
  (countDownTypeText.current.endTime = endTime - serverTime);
101
100
  changeTimerSetInterval();
102
101
  } else {
103
102
  countDownTypeText.current = {
104
103
  type: 'end',
105
104
  text: endTitleText,
106
105
  time: 0,
107
106
  };
108
107
  }
109
108
  }
110
109
  return () => {
111
110
  countDownTimer.current && clearInterval(countDownTimer.current);
112
111
  };
113
112
  }, [serverTime]);
114
113
 
115
114
  const changeTimerSetInterval = (recoverState = false) => {
116
115
  countDownTimer.current && clearInterval(countDownTimer.current);
117
116
  recoverState && changeTimerFunc();
118
117
  countDownTimer.current = setInterval(changeTimerFunc, 1000);
119
118
  };
120
119
  const changeTimerFunc = () => {
121
120
  if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
122
121
  countDownTypeText.current.time -= diffTimerRef.current.diffTime;
123
122
  countDownTypeText.current.type === 'start' &&
124
123
  countDownTypeText.current.endTime &&
125
124
  (countDownTypeText.current.endTime -= diffTimerRef.current.diffTime);
126
125
  console.log(
127
126
  '当前id倒计时获取倒计时息屏时间计算差值',
128
127
  countDownTimer.current,
129
128
  diffTimerRef.current,
130
129
  countDownTypeText.current,
131
130
  );
132
131
  diffTimerRef.current.stopDocumentTime = 0;
133
132
  diffTimerRef.current.recoverDocumentTime = 0;
134
133
  diffTimerRef.current.diffTime = 0;
135
134
  }
136
135
  if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
137
136
  countDownTypeText.current.time -= 1000;
138
137
  countDownTypeText.current.type === 'start' &&
139
138
  countDownTypeText.current.endTime &&
140
139
  (countDownTypeText.current.endTime -= 1000);
141
140
  countDownTimeFormat(countDownTypeText.current.time);
142
141
  } else {
143
142
  countDownTypeText.current.time = 0;
144
143
  countDownTimeFormat(countDownTypeText.current.time);
145
144
  countDownTimer.current && clearInterval(countDownTimer.current);
146
145
  if (countDownTypeText.current.type === 'start') {
147
146
  let triggerStartTimeEndCallBackState = true;
148
147
  countDownTypeText.current = Object.assign({}, countDownTypeText.current, {
149
148
  type: 'end',
150
149
  text: endTitleText,
151
150
  });
152
151
  countDownTypeText.current.time = countDownTypeText.current.endTime;
153
152
  countDownTypeText.current.time && (countDownTypeText.current.time -= 1000);
154
153
  if (countDownTypeText.current.time && countDownTypeText.current.time > 0) {
155
154
  countDownTimer.current = setInterval(() => {
156
155
  if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
157
156
  countDownTypeText.current.time -= diffTimerRef.current.diffTime;
158
157
  diffTimerRef.current.stopDocumentTime = 0;
159
158
  diffTimerRef.current.recoverDocumentTime = 0;
160
159
  diffTimerRef.current.diffTime = 0;
161
160
  }
162
161
  if (triggerStartTimeEndCallBackState && startTimeEndCallBack) {
163
162
  startTimeEndCallBack({
164
163
  type: 'start',
165
164
  endState: true,
166
165
  ...info,
167
166
  });
168
167
  triggerStartTimeEndCallBackState = false;
169
168
  }
170
169
  if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
171
170
  countDownTypeText.current.time -= 1000;
172
171
  countDownTimeFormat(countDownTypeText.current.time);
173
172
  } else {
174
173
  endTimeEndCallBack &&
175
174
  endTimeEndCallBack({
176
175
  type: 'end',
177
176
  endState: true,
178
177
  ...info,
179
178
  });
180
179
  }
181
180
  }, 1000);
182
181
  }
183
182
  } else {
184
183
  endTimeEndCallBack &&
185
184
  endTimeEndCallBack({
186
185
  type: 'end',
187
186
  endState: true,
188
187
  ...info,
189
188
  });
190
189
  }
191
190
  }
192
191
  };
193
192
  const countDownTimeFormat = (nowEndTime) => {
194
193
  let day = Math.floor(nowEndTime / 1000 / 86400);
195
194
  let hour = Math.floor((nowEndTime / 1000 / 3600) % 24);
196
195
  const minute = Math.floor((nowEndTime / 1000 / 60) % 60);
197
196
  const second = Math.floor((nowEndTime / 1000) % 60);
198
197
  if (getDaysToHours && day > 0) {
199
198
  hour = hour + day * 24;
200
199
  day = 0;
201
200
  }
202
201
  setEndTimeFormat({
203
202
  day,
204
203
  hour: `${hour}`.padStart(2, '0'),
205
204
  minute: `${minute}`.padStart(2, '0'),
206
205
  second: `${second}`.padStart(2, '0'),
207
206
  });
208
207
  };
209
208
  const numCustomStyle = numTextColor
210
209
  ? useRef({ color: numTextColor, backgroundColor: numTextBgColor })
211
210
  : useRef({});
212
211
  const textCustomStyle = textColor ? useRef({ color: textColor }) : useRef({});
213
212
  return (
214
213
  <View
215
214
  className={classNames(
216
215
  countDownStyle['d-count-down'],
217
216
  {
218
217
  [countDownStyle['d-ios-10-count-down']]: ios10State && !devToolPlatformState,
219
218
  },
220
219
  {
221
220
  [countDownStyle['d-en-count-down']]: isLanguageForEn,
222
221
  },
223
222
  className,
224
223
  )}
225
224
  >
226
225
  {countDownTypeText.current && countDownTypeText.current.text && (
227
226
  <Text className={classNames('d-count-down-title', 'font-jdzht')}>
228
227
  {countDownTypeText.current.text}
229
228
  </Text>
230
229
  )}
231
230
  <View className="display-inline-block">
232
231
  {fromStartText && <Text className="d-count-from-start">{fromStartText}</Text>}
233
232
  {onlyShowDayState && endTimeFormat.day > 0 ? (
234
233
  <>
235
234
  <Text
236
235
  className={classNames('d-count-down-time', 'd-day-time', 'font-jdzht')}
237
236
  style={numCustomStyle.current}
238
237
  >
239
238
  {endTimeFormat.day}
240
239
  </Text>
241
240
  <Text className="d-time-space-text d-day-space-text" style={textCustomStyle.current}>
242
241
  {showDaytimeNumSpaceTextState ? countDownTimeDay : ':'}
243
242
  </Text>
244
243
  </>
245
244
  ) : (
246
245
  <>
247
246
  {(showDayState || showDayToSecondState) && endTimeFormat.day > 0 && (
248
247
  <>
249
248
  <Text
250
249
  className={classNames('d-count-down-time', 'd-day-time', 'font-jdzht')}
251
250
  style={numCustomStyle.current}
252
251
  >
253
252
  {endTimeFormat.day}
254
253
  </Text>
255
254
  <Text
256
255
  className="d-time-space-text d-day-space-text"
257
256
  style={textCustomStyle.current}
258
257
  >
259
258
  {showDaytimeNumSpaceTextState ? countDownTimeDay : ':'}
260
259
  </Text>
261
260
  </>
262
261
  )}
263
262
  {showHourState && (
264
263
  <>
265
264
  <Text
266
265
  className={classNames('d-count-down-time', 'd-hour-time', 'font-jdzht')}
267
266
  style={numCustomStyle.current}
268
267
  >
269
268
  {endTimeFormat.hour}
270
269
  </Text>
271
270
  <Text className="d-time-space-text" style={textCustomStyle.current}>
272
271
  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
273
272
  ? countDownTimeHour
274
273
  : ':'}
275
274
  </Text>
276
275
  </>
277
276
  )}
278
277
  {showMinuteState && (
279
278
  <>
280
279
  <Text
281
280
  className={classNames('d-count-down-time', 'd-minute-time', 'font-jdzht')}
282
281
  style={numCustomStyle.current}
283
282
  >
284
283
  {endTimeFormat.minute}
285
284
  </Text>
286
285
  <Text className="d-time-space-text" style={textCustomStyle.current}>
287
286
  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
288
287
  ? countDownTimeMin
289
288
  : endTimeFormat.day > 0
290
289
  ? ''
291
290
  : ':'}
292
291
  </Text>
293
292
  </>
294
293
  )}
295
294
  {showSecondState && (endTimeFormat.day <= 0 || showDayToSecondState) && (
296
295
  <>
297
296
  <Text
298
297
  className={classNames('d-count-down-time', 'd-second-time', 'font-jdzht')}
299
298
  style={numCustomStyle.current}
300
299
  >
301
300
  {endTimeFormat.second}
302
301
  </Text>
303
302
  {(timeNumSpaceTextState ||
304
303
  (showDayToSecondState && showDaytimeNumSpaceTextState)) && (
305
304
  <Text className="d-time-space-text" style={textCustomStyle.current}>
306
305
 
307
306
  </Text>
308
307
  )}
309
308
  </>
310
309
  )}
311
310
  </>
312
311
  )}
313
312
  {fromEndText && <Text className="d-count-from-end">{fromEndText}</Text>}
314
313
  </View>
315
314
  </View>
316
315
  );
317
316
  return useMemo(() => {
318
317
  return <CountDownTimer {...props} />;
319
318
  }, []);
320
319
  residueTime: -1,
321
320
  serverTime: null,
322
321
  className: null,
323
322
  startTime: null,
324
323
  endTime: null,
325
324
  info: null,
326
325
  startTitleText: '距活动开始',
327
326
  endTitleText: '距活动结束',
328
327
  fromEndText: null,
329
328
  startTimeEndCallBack: null,
330
329
  endTimeEndCallBack: null,
331
330
  timeNumSpaceTextState: false,
332
331
  showDaytimeNumSpaceTextState: true,
333
332
  onlyShowDayState: false,
334
333
  showDayState: false,
335
334
  showDayToSecondState: false,
336
335
  getDaysToHours: false,
337
336
  showHourState: true,
338
337
  showMinuteState: true,
339
338
  showSecondState: true,
340
339
  numTextColor: null,
341
340
  textColor: null,
342
341
  numTextBgColor: null,
342
+ import Taro from '@tarojs/taro';
343
343
  const {
344
344
  residueTime,
345
345
  serverTime,
346
346
  startTime,
347
347
  endTime,
348
348
  className,
349
349
  info,
350
350
  endTimeEndCallBack,
351
351
  startTimeEndCallBack,
352
352
  startTitleText,
353
353
  endTitleText,
354
354
  timeNumSpaceTextState,
355
355
  showDaytimeNumSpaceTextState,
356
356
  onlyShowDaySpaceTextState,
357
357
  getDaysToHours,
358
358
  onlyShowDayState,
359
359
  showDayState,
360
360
  showHourState,
361
361
  showMinuteState,
362
362
  showSecondState,
363
363
  showDayToSecondState,
364
364
  fromStartText,
365
365
  fromEndText,
366
366
  numTextColor,
367
367
  textColor,
368
368
  numTextBgColor,
369
369
  useFontV2,
370
370
  useFontV2Bold,
371
371
  } = props;
372
372
  const [endTimeFormat, setEndTimeFormat] = useState<{
373
373
  day: string | number;
374
374
  hour: string | number;
375
375
  minute: string | number;
376
376
  second: string | number;
377
377
  }>({
378
378
  day: 0,
379
379
  hour: 0,
380
380
  minute: 0,
381
381
  second: 0,
382
382
  });
383
383
  const countDownTimer = useRef<NodeJS.Timer | null>();
384
384
  const countDownTypeText = useRef<ComponentInterFace.CountDownTimerRef>({
385
385
  type: 'end',
386
386
  text: endTitleText,
387
387
  time: null,
388
388
  });
389
389
 
390
390
  const diffTimerRef = useRef({
391
391
  stopDocumentTime: 0,
392
392
  recoverDocumentTime: 0,
393
393
  diffTime: 0,
394
394
  });
395
395
 
396
396
  useEffect(() => {
397
397
  Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (state) => {
398
398
  if (state) {
399
399
  if (diffTimerRef.current.stopDocumentTime && diffTimerRef.current.stopDocumentTime > 0) {
400
400
  diffTimerRef.current.recoverDocumentTime = Date.now();
401
401
  diffTimerRef.current.diffTime =
402
402
  diffTimerRef.current.recoverDocumentTime - diffTimerRef.current.stopDocumentTime;
403
403
  changeTimerSetInterval(true);
404
404
  }
405
405
  } else {
406
406
  diffTimerRef.current.stopDocumentTime = Date.now();
407
407
  if (countDownTimer.current) {
408
408
  clearInterval(countDownTimer.current);
409
409
  countDownTimer.current = null;
410
410
  }
411
411
  }
412
412
  });
413
413
  }, []);
414
414
  useEffect(() => {
415
415
  if (serverTime > 0 || residueTime > 0) {
416
416
  let getNowEndTime = residueTime > 0 ? residueTime : endTime - serverTime;
417
417
  if (startTime && endTime) {
418
418
  if (serverTime <= startTime) {
419
419
  getNowEndTime = startTime - serverTime;
420
420
  countDownTypeText.current = {
421
421
  type: 'start',
422
422
  text: startTitleText,
423
423
  time: null,
424
424
  };
425
425
  } else {
426
426
  getNowEndTime = endTime - serverTime;
427
427
  countDownTypeText.current = {
428
428
  type: 'end',
429
429
  text: endTitleText,
430
430
  time: null,
431
431
  };
432
432
  }
433
433
  } else {
434
434
  countDownTypeText.current = {
435
435
  type: 'end',
436
436
  text: endTitleText,
437
437
  time: null,
438
438
  };
439
439
  }
440
440
  if (getNowEndTime > 0) {
441
441
  countDownTimeFormat(getNowEndTime);
442
442
  countDownTypeText.current.time = getNowEndTime;
443
443
  countDownTypeText.current.type === 'start' &&
444
444
  (countDownTypeText.current.endTime = endTime - serverTime);
445
445
  changeTimerSetInterval();
446
446
  } else {
447
447
  countDownTypeText.current = {
448
448
  type: 'end',
449
449
  text: endTitleText,
450
450
  time: 0,
451
451
  };
452
452
  }
453
453
  }
454
454
  return () => {
455
455
  countDownTimer.current && clearInterval(countDownTimer.current);
456
456
  };
457
457
  }, [serverTime]);
458
458
 
459
459
  const changeTimerSetInterval = (recoverState = false) => {
460
460
  countDownTimer.current && clearInterval(countDownTimer.current);
461
461
  recoverState && changeTimerFunc();
462
462
  countDownTimer.current = setInterval(changeTimerFunc, 1000);
463
463
  };
464
464
  const changeTimerFunc = () => {
465
465
  if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
466
466
  countDownTypeText.current.time -= diffTimerRef.current.diffTime;
467
467
  countDownTypeText.current.type === 'start' &&
468
468
  countDownTypeText.current.endTime &&
469
469
  (countDownTypeText.current.endTime -= diffTimerRef.current.diffTime);
470
470
  console.log(
471
471
  '当前id倒计时获取倒计时息屏时间计算差值',
472
472
  countDownTimer.current,
473
473
  diffTimerRef.current,
474
474
  countDownTypeText.current,
475
475
  );
476
476
  diffTimerRef.current.stopDocumentTime = 0;
477
477
  diffTimerRef.current.recoverDocumentTime = 0;
478
478
  diffTimerRef.current.diffTime = 0;
479
479
  }
480
480
  if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
481
481
  countDownTypeText.current.time -= 1000;
482
482
  countDownTypeText.current.type === 'start' &&
483
483
  countDownTypeText.current.endTime &&
484
484
  (countDownTypeText.current.endTime -= 1000);
485
485
  countDownTimeFormat(countDownTypeText.current.time);
486
486
  } else {
487
487
  countDownTypeText.current.time = 0;
488
488
  countDownTimeFormat(countDownTypeText.current.time);
489
489
  countDownTimer.current && clearInterval(countDownTimer.current);
490
490
  if (countDownTypeText.current.type === 'start') {
491
491
  let triggerStartTimeEndCallBackState = true;
492
492
  countDownTypeText.current = Object.assign({}, countDownTypeText.current, {
493
493
  type: 'end',
494
494
  text: endTitleText,
495
495
  });
496
496
  countDownTypeText.current.time = countDownTypeText.current.endTime;
497
497
  countDownTypeText.current.time && (countDownTypeText.current.time -= 1000);
498
498
  if (countDownTypeText.current.time && countDownTypeText.current.time > 0) {
499
499
  countDownTimer.current = setInterval(() => {
500
500
  if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
501
501
  countDownTypeText.current.time -= diffTimerRef.current.diffTime;
502
502
  diffTimerRef.current.stopDocumentTime = 0;
503
503
  diffTimerRef.current.recoverDocumentTime = 0;
504
504
  diffTimerRef.current.diffTime = 0;
505
505
  }
506
506
  if (triggerStartTimeEndCallBackState && startTimeEndCallBack) {
507
507
  startTimeEndCallBack({
508
508
  type: 'start',
509
509
  endState: true,
510
510
  ...info,
511
511
  });
512
512
  triggerStartTimeEndCallBackState = false;
513
513
  }
514
514
  if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
515
515
  countDownTypeText.current.time -= 1000;
516
516
  countDownTimeFormat(countDownTypeText.current.time);
517
517
  } else {
518
518
  endTimeEndCallBack &&
519
519
  endTimeEndCallBack({
520
520
  type: 'end',
521
521
  endState: true,
522
522
  ...info,
523
523
  });
524
524
  }
525
525
  }, 1000);
526
526
  }
527
527
  } else {
528
528
  endTimeEndCallBack &&
529
529
  endTimeEndCallBack({
530
530
  type: 'end',
531
531
  endState: true,
532
532
  ...info,
533
533
  });
534
534
  }
535
535
  }
536
536
  };
537
537
  const countDownTimeFormat = (nowEndTime) => {
538
538
  let day = Math.floor(nowEndTime / 1000 / 86400);
539
539
  let hour = Math.floor((nowEndTime / 1000 / 3600) % 24);
540
540
  const minute = Math.floor((nowEndTime / 1000 / 60) % 60);
541
541
  const second = Math.floor((nowEndTime / 1000) % 60);
542
542
  if (getDaysToHours && day > 0) {
543
543
  hour = hour + day * 24;
544
544
  day = 0;
545
545
  }
546
546
  setEndTimeFormat({
547
547
  day,
548
548
  hour: `${hour}`.padStart(2, '0'),
549
549
  minute: `${minute}`.padStart(2, '0'),
550
550
  second: `${second}`.padStart(2, '0'),
551
551
  });
552
552
  };
553
553
  const numCustomStyle = numTextColor
554
554
  ? useRef({ color: numTextColor, backgroundColor: numTextBgColor })
555
555
  : useRef({});
556
556
  const textCustomStyle = textColor ? useRef({ color: textColor }) : useRef({});
557
557
  return (
558
558
  <View
559
559
  className={classNames(
560
560
  countDownStyle['d-count-down'],
561
561
  {
562
562
  [countDownStyle['d-ios-10-count-down']]: ios10State && !devToolPlatformState,
563
563
  },
564
564
  {
565
565
  [countDownStyle['d-en-count-down']]: isLanguageForEn,
566
566
  },
567
567
  className,
568
568
  )}
569
569
  >
570
570
  {countDownTypeText.current && countDownTypeText.current.text && (
571
571
  <Text
572
572
  className={classNames('d-count-down-title', {
573
573
  'font-jdzht-v2': useFontV2,
574
574
  'font-jdzht-v2-bold': useFontV2Bold,
575
575
  })}
576
576
  >
577
577
  {countDownTypeText.current.text}
578
578
  </Text>
579
579
  )}
580
580
  <View className="display-inline-block">
581
581
  {fromStartText && <Text className="d-count-from-start">{fromStartText}</Text>}
582
582
  {onlyShowDayState && endTimeFormat.day > 0 ? (
583
583
  <>
584
584
  <Text
585
585
  className={classNames('d-count-down-time', 'd-day-time', {
586
586
  'font-jdzht-v2': useFontV2,
587
587
  'font-jdzht-v2-bold': useFontV2Bold,
588
588
  })}
589
589
  style={numCustomStyle.current}
590
590
  >
591
591
  {endTimeFormat.day}
592
592
  </Text>
593
593
  <Text className="d-time-space-text d-day-space-text" style={textCustomStyle.current}>
594
594
  {showDaytimeNumSpaceTextState || onlyShowDaySpaceTextState ? countDownTimeDay : ':'}
595
595
  </Text>
596
596
  </>
597
597
  ) : (
598
598
  <>
599
599
  {(showDayState || showDayToSecondState) && endTimeFormat.day > 0 && (
600
600
  <>
601
601
  <Text
602
602
  className={classNames('d-count-down-time', 'd-day-time', {
603
603
  'font-jdzht-v2': useFontV2,
604
604
  'font-jdzht-v2-bold': useFontV2Bold,
605
605
  })}
606
606
  style={numCustomStyle.current}
607
607
  >
608
608
  {endTimeFormat.day}
609
609
  </Text>
610
610
  <Text
611
611
  className="d-time-space-text d-day-space-text"
612
612
  style={textCustomStyle.current}
613
613
  >
614
614
  {showDaytimeNumSpaceTextState || onlyShowDaySpaceTextState
615
615
  ? countDownTimeDay
616
616
  : ':'}
617
617
  </Text>
618
618
  </>
619
619
  )}
620
620
  {showHourState && (
621
621
  <>
622
622
  <Text
623
623
  className={classNames('d-count-down-time', 'd-hour-time', {
624
624
  'font-jdzht-v2': useFontV2,
625
625
  'font-jdzht-v2-bold': useFontV2Bold,
626
626
  })}
627
627
  style={numCustomStyle.current}
628
628
  >
629
629
  {endTimeFormat.hour}
630
630
  </Text>
631
631
  <Text className="d-time-space-text" style={textCustomStyle.current}>
632
632
  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
633
633
  ? countDownTimeHour
634
634
  : ':'}
635
635
  </Text>
636
636
  </>
637
637
  )}
638
638
  {showMinuteState && (
639
639
  <>
640
640
  <Text
641
641
  className={classNames('d-count-down-time', 'd-minute-time', {
642
642
  'font-jdzht-v2': useFontV2,
643
643
  'font-jdzht-v2-bold': useFontV2Bold,
644
644
  })}
645
645
  style={numCustomStyle.current}
646
646
  >
647
647
  {endTimeFormat.minute}
648
648
  </Text>
649
649
  <Text className="d-time-space-text" style={textCustomStyle.current}>
650
650
  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
651
651
  ? countDownTimeMin
652
652
  : endTimeFormat.day > 0 && !showDayToSecondState
653
653
  ? ''
654
654
  : ':'}
655
655
  </Text>
656
656
  </>
657
657
  )}
658
658
  {showSecondState && (endTimeFormat.day <= 0 || showDayToSecondState) && (
659
659
  <>
660
660
  <Text
661
661
  className={classNames('d-count-down-time', 'd-second-time', {
662
662
  'font-jdzht-v2': useFontV2,
663
663
  'font-jdzht-v2-bold': useFontV2Bold,
664
664
  })}
665
665
  style={numCustomStyle.current}
666
666
  >
667
667
  {endTimeFormat.second}
668
668
  </Text>
669
669
  {(timeNumSpaceTextState ||
670
670
  (showDayToSecondState && showDaytimeNumSpaceTextState)) && (
671
671
  <Text className="d-time-space-text" style={textCustomStyle.current}>
672
672
 
673
673
  </Text>
674
674
  )}
675
675
  </>
676
676
  )}
677
677
  </>
678
678
  )}
679
679
  {fromEndText && <Text className="d-count-from-end">{fromEndText}</Text>}
680
680
  </View>
681
681
  </View>
682
682
  );
683
683
  return useMemo(() => {
684
684
  return <CountDownTimer {...props} />;
685
685
  }, []);
686
686
  residueTime: -1,
687
687
  serverTime: null,
688
688
  className: null,
689
689
  startTime: null,
690
690
  endTime: null,
691
691
  info: null,
692
692
  startTitleText: '距活动开始',
693
693
  endTitleText: '距活动结束',
694
694
  fromEndText: null,
695
695
  startTimeEndCallBack: null,
696
696
  endTimeEndCallBack: null,
697
697
  timeNumSpaceTextState: false,
698
698
  showDaytimeNumSpaceTextState: true,
699
699
  onlyShowDayState: false,
700
700
  onlyShowDaySpaceTextState: false,
701
701
  showDayState: false,
702
702
  showDayToSecondState: false,
703
703
  getDaysToHours: false,
704
704
  showHourState: true,
705
705
  showMinuteState: true,
706
706
  showSecondState: true,
707
707
  numTextColor: null,
708
708
  textColor: null,
709
709
  numTextBgColor: null,
710
710
  useFontV2: false,
711
711
  useFontV2Bold: false,