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

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