@conecli/cone-render 0.10.1-shop-beta.54 → 0.10.1-shop-beta.55

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