@conecli/cone-render 0.10.1-shop-beta.60 → 0.10.1-shop-beta.62

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
  useDateNowCalc,
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
  if (useDateNowCalc) return;
449
449
  function visibilityChanged(state) {
450
450
  if (state) {
451
451
  if (diffTimerRef.current.stopDocumentTime && diffTimerRef.current.stopDocumentTime > 0) {
452
452
  diffTimerRef.current.recoverDocumentTime = Date.now();
453
453
  diffTimerRef.current.diffTime =
454
454
  diffTimerRef.current.recoverDocumentTime - diffTimerRef.current.stopDocumentTime;
455
455
  changeTimerSetInterval(true);
456
456
  }
457
457
  } else {
458
458
  diffTimerRef.current.stopDocumentTime = Date.now();
459
459
  if (countDownTimer.current) {
460
460
  clearInterval(countDownTimer.current);
461
461
  countDownTimer.current = null;
462
462
  }
463
463
  }
464
464
  }
465
465
  Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, visibilityChanged);
466
466
  return () => {
467
467
  Taro.eventCenter.off(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, visibilityChanged);
468
468
  };
469
469
  }, []);
470
470
  useEffect(() => {
471
471
  if (serverTime > 0 || residueTime > 0) {
472
472
  let getNowEndTime = residueTime > 0 ? residueTime : endTime - serverTime;
473
473
  if (useDateNowCalc && endTime) {
474
474
  const now = Date.now();
475
475
  getNowEndTime = endTime - now;
476
476
  }
477
477
  if (startTime && endTime) {
478
478
  if (serverTime <= startTime) {
479
479
  getNowEndTime = startTime - serverTime;
480
480
  countDownTypeText.current = {
481
481
  type: 'start',
482
482
  text: startTitleText,
483
483
  time: null,
484
484
  };
485
485
  } else {
486
486
  getNowEndTime = endTime - serverTime;
487
487
  countDownTypeText.current = {
488
488
  type: 'end',
489
489
  text: endTitleText,
490
490
  time: null,
491
491
  };
492
492
  }
493
493
  } else {
494
494
  countDownTypeText.current = {
495
495
  type: 'end',
496
496
  text: endTitleText,
497
497
  time: null,
498
498
  };
499
499
  }
500
500
  if (getNowEndTime > 0) {
501
501
  countDownTimeFormat(getNowEndTime);
502
502
  countDownTypeText.current.time = getNowEndTime;
503
503
  countDownTypeText.current.type === 'start' &&
504
504
  (countDownTypeText.current.endTime = endTime - serverTime);
505
505
  changeTimerSetInterval();
506
506
  } else {
507
507
  countDownTypeText.current = {
508
508
  type: 'end',
509
509
  text: endTitleText,
510
510
  time: 0,
511
511
  };
512
512
  }
513
513
  }
514
514
  return () => {
515
515
  countDownTimer.current && clearInterval(countDownTimer.current);
516
516
  };
517
517
  }, [serverTime, residueTime]);
518
518
 
519
519
  const changeTimerSetInterval = (recoverState = false) => {
520
520
  countDownTimer.current && clearInterval(countDownTimer.current);
521
521
  recoverState && changeTimerFunc();
522
522
  countDownTimer.current = setInterval(changeTimerFunc, 1000);
523
523
  };
524
524
  const changeTimerFunc = () => {
525
525
  if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
526
526
  countDownTypeText.current.time -= diffTimerRef.current.diffTime;
527
527
  countDownTypeText.current.type === 'start' &&
528
528
  countDownTypeText.current.endTime &&
529
529
  (countDownTypeText.current.endTime -= diffTimerRef.current.diffTime);
530
530
  console.log(
531
531
  '当前id倒计时获取倒计时息屏时间计算差值',
532
532
  countDownTimer.current,
533
533
  diffTimerRef.current,
534
534
  countDownTypeText.current,
535
535
  );
536
536
  diffTimerRef.current.stopDocumentTime = 0;
537
537
  diffTimerRef.current.recoverDocumentTime = 0;
538
538
  diffTimerRef.current.diffTime = 0;
539
539
  }
540
540
  if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
541
541
  if (useDateNowCalc && endTime && countDownTypeText.current.type === 'end') {
542
542
  const now = Date.now();
543
543
  countDownTypeText.current.time = endTime - now;
544
544
  } else {
545
545
  countDownTypeText.current.time -= 1000;
546
546
  countDownTypeText.current.type === 'start' &&
547
547
  countDownTypeText.current.endTime &&
548
548
  (countDownTypeText.current.endTime -= 1000);
549
549
  }
550
550
  countDownTimeFormat(countDownTypeText.current.time);
551
551
  } else {
552
552
  countDownTypeText.current.time = 0;
553
553
  countDownTimeFormat(countDownTypeText.current.time);
554
554
  countDownTimer.current && clearInterval(countDownTimer.current);
555
555
  if (countDownTypeText.current.type === 'start') {
556
556
  let triggerStartTimeEndCallBackState = true;
557
557
  countDownTypeText.current = Object.assign({}, countDownTypeText.current, {
558
558
  type: 'end',
559
559
  text: endTitleText,
560
560
  });
561
561
  countDownTypeText.current.time = countDownTypeText.current.endTime;
562
562
  countDownTypeText.current.time && (countDownTypeText.current.time -= 1000);
563
563
  if (countDownTypeText.current.time && countDownTypeText.current.time > 0) {
564
564
  countDownTimer.current = setInterval(() => {
565
565
  if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
566
566
  countDownTypeText.current.time -= diffTimerRef.current.diffTime;
567
567
  diffTimerRef.current.stopDocumentTime = 0;
568
568
  diffTimerRef.current.recoverDocumentTime = 0;
569
569
  diffTimerRef.current.diffTime = 0;
570
570
  }
571
571
  if (triggerStartTimeEndCallBackState && startTimeEndCallBack) {
572
572
  startTimeEndCallBack({
573
573
  type: 'start',
574
574
  endState: true,
575
575
  ...info,
576
576
  });
577
577
  triggerStartTimeEndCallBackState = false;
578
578
  }
579
579
  if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
580
580
  countDownTypeText.current.time -= 1000;
581
581
  countDownTimeFormat(countDownTypeText.current.time);
582
582
  } else {
583
583
  endTimeEndCallBack &&
584
584
  endTimeEndCallBack({
585
585
  type: 'end',
586
586
  endState: true,
587
587
  ...info,
588
588
  });
589
589
  }
590
590
  }, 1000);
591
591
  }
592
592
  } else {
593
593
  endTimeEndCallBack &&
594
594
  endTimeEndCallBack({
595
595
  type: 'end',
596
596
  endState: true,
597
597
  ...info,
598
598
  });
599
599
  }
600
600
  }
601
601
  };
602
602
  const countDownTimeFormat = (nowEndTime) => {
603
603
  let day = Math.floor(nowEndTime / 1000 / 86400);
604
604
  let hour = Math.floor((nowEndTime / 1000 / 3600) % 24);
605
605
  const minute = Math.floor((nowEndTime / 1000 / 60) % 60);
606
606
  const second = Math.floor((nowEndTime / 1000) % 60);
607
607
  if (getDaysToHours && day > 0) {
608
608
  hour = hour + day * 24;
609
609
  day = 0;
610
610
  }
611
611
  setEndTimeFormat({
612
612
  day,
613
613
  hour: `${hour}`.padStart(2, '0'),
614
614
  minute: `${minute}`.padStart(2, '0'),
615
615
  second: `${second}`.padStart(2, '0'),
616
616
  });
617
617
  };
618
618
  const numCustomStyle = numTextColor
619
619
  ? useRef({ color: numTextColor, backgroundColor: numTextBgColor })
620
620
  : useRef({});
621
621
  const textCustomStyle = textColor ? useRef({ color: textColor }) : useRef({});
622
622
  return (
623
623
  <View
624
624
  className={classNames(
625
625
  countDownStyle['d-count-down'],
626
626
  {
627
627
  [countDownStyle['d-ios-10-count-down']]: ios10State && !devToolPlatformState,
628
628
  },
629
629
  {
630
630
  [countDownStyle['d-en-count-down']]: isLanguageForEn,
631
631
  },
632
632
  className,
633
633
  )}
634
634
  >
635
635
  {countDownTypeText.current && countDownTypeText.current.text && (
636
636
  <Text
637
637
  className={classNames('d-count-down-title', {
638
638
  'font-jdzht-v2': useFontV2,
639
639
  'font-jdzht-v2-bold': useFontV2Bold,
640
640
  })}
641
641
  >
642
642
  {countDownTypeText.current.text}
643
643
  </Text>
644
644
  )}
645
645
  <View className="display-inline-block">
646
646
  {fromStartText && <Text className="d-count-from-start">{fromStartText}</Text>}
647
647
  {onlyShowDayState && endTimeFormat.day > 0 ? (
648
648
  <>
649
649
  <Text
650
650
  className={classNames('d-count-down-time', 'd-day-time', {
651
651
  'font-jdzht-v2': useFontV2,
652
652
  'font-jdzht-v2-bold': useFontV2Bold,
653
653
  })}
654
654
  style={numCustomStyle.current}
655
655
  >
656
656
  {endTimeFormat.day}
657
657
  </Text>
658
658
  <Text className="d-time-space-text d-day-space-text" style={textCustomStyle.current}>
659
659
  {showDaytimeNumSpaceTextState || onlyShowDaySpaceTextState ? countDownTimeDay : ':'}
660
660
  </Text>
661
661
  </>
662
662
  ) : (
663
663
  <>
664
664
  {(showDayState || showDayToSecondState) && endTimeFormat.day > 0 && (
665
665
  <>
666
666
  <Text
667
667
  className={classNames('d-count-down-time', 'd-day-time', {
668
668
  'font-jdzht-v2': useFontV2,
669
669
  'font-jdzht-v2-bold': useFontV2Bold,
670
670
  })}
671
671
  style={numCustomStyle.current}
672
672
  >
673
673
  {endTimeFormat.day}
674
674
  </Text>
675
675
  <Text
676
676
  className="d-time-space-text d-day-space-text"
677
677
  style={textCustomStyle.current}
678
678
  >
679
679
  {showDaytimeNumSpaceTextState || onlyShowDaySpaceTextState
680
680
  ? countDownTimeDay
681
681
  : ':'}
682
682
  </Text>
683
683
  </>
684
684
  )}
685
685
  {showHourState && (
686
686
  <>
687
687
  <Text
688
688
  className={classNames('d-count-down-time', 'd-hour-time', {
689
689
  'font-jdzht-v2': useFontV2,
690
690
  'font-jdzht-v2-bold': useFontV2Bold,
691
691
  })}
692
692
  style={numCustomStyle.current}
693
693
  >
694
694
  {endTimeFormat.hour}
695
695
  </Text>
696
696
  <Text className="d-time-space-text" style={textCustomStyle.current}>
697
697
  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
698
698
  ? countDownTimeHour
699
699
  : ':'}
700
700
  </Text>
701
701
  </>
702
702
  )}
703
703
  {showMinuteState && (
704
704
  <>
705
705
  <Text
706
706
  className={classNames('d-count-down-time', 'd-minute-time', {
707
707
  'font-jdzht-v2': useFontV2,
708
708
  'font-jdzht-v2-bold': useFontV2Bold,
709
709
  })}
710
710
  style={numCustomStyle.current}
711
711
  >
712
712
  {endTimeFormat.minute}
713
713
  </Text>
714
714
  <Text className="d-time-space-text" style={textCustomStyle.current}>
715
715
  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
716
716
  ? countDownTimeMin
717
717
  : endTimeFormat.day > 0 && !showDayToSecondState
718
718
  ? ''
719
719
  : ':'}
720
720
  </Text>
721
721
  </>
722
722
  )}
723
723
  {showSecondState && (endTimeFormat.day <= 0 || showDayToSecondState) && (
724
724
  <>
725
725
  <Text
726
726
  className={classNames('d-count-down-time', 'd-second-time', {
727
727
  'font-jdzht-v2': useFontV2,
728
728
  'font-jdzht-v2-bold': useFontV2Bold,
729
729
  })}
730
730
  style={numCustomStyle.current}
731
731
  >
732
732
  {endTimeFormat.second}
733
733
  </Text>
734
734
  {(timeNumSpaceTextState ||
735
735
  (showDayToSecondState && showDaytimeNumSpaceTextState)) && (
736
736
  <Text className="d-time-space-text" style={textCustomStyle.current}>
737
737
 
738
738
  </Text>
739
739
  )}
740
740
  </>
741
741
  )}
742
742
  </>
743
743
  )}
744
744
  {fromEndText && <Text className="d-count-from-end">{fromEndText}</Text>}
745
745
  </View>
746
746
  </View>
747
747
  );
748
748
  return useMemo(() => {
749
749
  return <CountDownTimer {...props} />;
750
750
  }, [props.residueTime, props.endTime]);
751
751
  residueTime: -1,
752
752
  serverTime: null,
753
753
  className: null,
754
754
  startTime: null,
755
755
  endTime: null,
756
756
  info: null,
757
757
  startTitleText: '距活动开始',
758
758
  endTitleText: '距活动结束',
759
759
  fromEndText: null,
760
760
  startTimeEndCallBack: null,
761
761
  endTimeEndCallBack: null,
762
762
  timeNumSpaceTextState: false,
763
763
  showDaytimeNumSpaceTextState: true,
764
764
  onlyShowDayState: false,
765
765
  onlyShowDaySpaceTextState: false,
766
766
  showDayState: false,
767
767
  showDayToSecondState: false,
768
768
  getDaysToHours: false,
769
769
  showHourState: true,
770
770
  showMinuteState: true,
771
771
  showSecondState: true,
772
772
  numTextColor: null,
773
773
  textColor: null,
774
774
  numTextBgColor: null,
775
775
  useFontV2: false,
776
776
  useFontV2Bold: false,