@conecli/cone-render 0.10.1-shop3.40 → 0.10.1-shop3.42

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