@conecli/cone-render 0.10.1-shop-beta.47 → 0.10.1-shop-beta.49

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