@conecli/cone-render 0.10.1-shop3.12 → 0.10.1-shop3.121

package/dist/components/base/CountDownForApp/index.module.scss

@@ -0,0 +1,52 @@
+
+.d-count-down {
+  position: relative;
+  z-index: 2;
+  padding-top: 1px;
+  line-height: 28px;
+  font-size: 24px;
+  font-weight: bolder;
+  color: #fff;
+  text-align: center;
+  &.d-ios-10-count-down {
+    padding-top: 9px;
+  }
+  :global {
+    .d-count-down-title {
+      // position: relative;
+      // top: -2px;
+      display: inline-block;
+      padding-right: 5px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 20px;
+    }
+    .d-count-down-time {
+      display: inline-block;
+      //margin: 0 2px;
+      min-width: 24px;
+      line-height: 28px;
+      font-size: 20px;
+      text-align: center;
+    }
+    .d-time-space-text {
+      display: inline-block;
+      //margin: 0 2px;
+      font-size: 20px;
+    }
+    .d-day-time {
+      min-width: 12px;
+    }
+    // .d-count-from-end {
+    // 	margin-right: 4px;
+    // 	font-size: 9px;
+    // }
+  }
+  &.d-en-count-down {
+    :global {
+      .d-day-space-text {
+        padding-right: 4px;
+      }
+    }
+  }
+}

package/dist/components/base/CountDownForApp/index.tsx

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro';
  ? 'd'
  : taroJdBaseInfo?.languageJsonData?.timeUnitDay || '天';
  ? ':'
  : taroJdBaseInfo?.languageJsonData?.timeUnitHour || '时';
  ? ''
  : taroJdBaseInfo?.languageJsonData?.timeUnitMinute || '分';
  const {
    residueTime,
    serverTime,
    startTime,
    endTime,
    className,
    info,
    endTimeEndCallBack,
    startTimeEndCallBack,
    startTitleText,
    endTitleText,
    timeNumSpaceTextState,
    showDaytimeNumSpaceTextState,
    onlyShowDaySpaceTextState,
    getDaysToHours,
    onlyShowDayState,
    showDayState,
    showHourState,
    showMinuteState,
    showSecondState,
    showDayToSecondState,
    fromStartText,
    fromEndText,
    numTextColor,
    textColor,
    numTextBgColor,
    useFontV2,
    useFontV2Bold,
    useDateNowCalc,
  } = props;
  const [endTimeFormat, setEndTimeFormat] = useState<{
    day: number;
    hour: number;
    minute: number;
    second: number;
  }>({
    day: 0,
    hour: 0,
    minute: 0,
    second: 0,
  });
  const countDownTimer = useRef<ReturnType<typeof setTimeout> | null>();
  const nextTickTimeRef = useRef<number>(0);
  const scheduleNextTickRef = useRef<(() => void) | null>(null);
  const countDownTypeText = useRef<ComponentInterFace.CountDownTimerRef>({
    type: 'end',
    text: endTitleText,
    time: null,
  });
  
  const diffTimerRef = useRef({
    stopDocumentTime: 0,
    recoverDocumentTime: 0,
    diffTime: 0,
  });
  
  useEffect(() => {
    function visibilityChanged(state) {
      if (state) {
        if (diffTimerRef.current.stopDocumentTime && diffTimerRef.current.stopDocumentTime > 0) {
          diffTimerRef.current.recoverDocumentTime = Date.now();
          diffTimerRef.current.diffTime =
            diffTimerRef.current.recoverDocumentTime - diffTimerRef.current.stopDocumentTime;
          if (useDateNowCalc && endTime) {
            diffTimerRef.current.diffTime = 0;
            diffTimerRef.current.stopDocumentTime = 0;
            diffTimerRef.current.recoverDocumentTime = 0;
          }
          changeTimerSetInterval(true);
        }
      } else {
        diffTimerRef.current.stopDocumentTime = Date.now();
        if (countDownTimer.current) {
          clearTimeout(countDownTimer.current);
          countDownTimer.current = null;
        }
      }
    }
    Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, visibilityChanged);
    return () => {
      Taro.eventCenter.off(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, visibilityChanged);
    };
  }, []);
  useEffect(() => {
    if (serverTime > 0 || residueTime > 0) {
      let getNowEndTime = residueTime > 0 ? residueTime : endTime - serverTime;
      if (startTime && endTime) {
        if (serverTime <= startTime) {
          getNowEndTime = startTime - serverTime;
          countDownTypeText.current = {
            type: 'start',
            text: startTitleText,
            time: null,
          };
        } else {
          getNowEndTime = endTime - serverTime;
          countDownTypeText.current = {
            type: 'end',
            text: endTitleText,
            time: null,
          };
        }
      } else {
        countDownTypeText.current = {
          type: 'end',
          text: endTitleText,
          time: null,
        };
      }
      if (getNowEndTime > 0) {
        countDownTimeFormat(getNowEndTime);
        countDownTypeText.current.time = getNowEndTime;
        countDownTypeText.current.type === 'start' &&
          (countDownTypeText.current.endTime = endTime - serverTime);
        changeTimerSetInterval();
      } else {
        countDownTypeText.current = {
          type: 'end',
          text: endTitleText,
          time: 0,
        };
      }
    }
    return () => {
      countDownTimer.current && clearTimeout(countDownTimer.current);
    };
  }, [serverTime, residueTime]);
  
  const changeTimerSetInterval = (recoverState = false) => {
    countDownTimer.current && clearTimeout(countDownTimer.current);
    nextTickTimeRef.current = Math.ceil(Date.now() / 1000) * 1000;
    recoverState && changeTimerFunc();
    const scheduleNextTick = () => {
      const now = Date.now();
      const delay = Math.max(0, nextTickTimeRef.current - now);
      countDownTimer.current = setTimeout(() => {
        nextTickTimeRef.current += 1000;
        changeTimerFunc();
      }, delay);
    };
    scheduleNextTickRef.current = scheduleNextTick;
    scheduleNextTick();
  };
  const changeTimerFunc = () => {
    if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
      countDownTypeText.current.time -= diffTimerRef.current.diffTime;
      countDownTypeText.current.type === 'start' &&
        countDownTypeText.current.endTime &&
        (countDownTypeText.current.endTime -= diffTimerRef.current.diffTime);
      console.log(
        '当前id倒计时获取倒计时息屏时间计算差值',
        countDownTimer.current,
        diffTimerRef.current,
        countDownTypeText.current,
      );
      diffTimerRef.current.stopDocumentTime = 0;
      diffTimerRef.current.recoverDocumentTime = 0;
      diffTimerRef.current.diffTime = 0;
    }
    if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
      if (useDateNowCalc && endTime && countDownTypeText.current.type === 'end') {
        const now = Date.now();
        countDownTypeText.current.time = endTime - now;
      } else {
        countDownTypeText.current.time -= 1000;
        countDownTypeText.current.type === 'start' &&
          countDownTypeText.current.endTime &&
          (countDownTypeText.current.endTime -= 1000);
      }
      countDownTimeFormat(countDownTypeText.current.time);
      scheduleNextTickRef.current && scheduleNextTickRef.current();
    } else {
      countDownTypeText.current.time = 0;
      countDownTimeFormat(countDownTypeText.current.time);
      countDownTimer.current && clearTimeout(countDownTimer.current);
      if (countDownTypeText.current.type === 'start') {
        let triggerStartTimeEndCallBackState = true;
        countDownTypeText.current = Object.assign({}, countDownTypeText.current, {
          type: 'end',
          text: endTitleText,
        });
        countDownTypeText.current.time = countDownTypeText.current.endTime;
        countDownTypeText.current.time && (countDownTypeText.current.time -= 1000);
        if (countDownTypeText.current.time && countDownTypeText.current.time > 0) {
          nextTickTimeRef.current = Math.ceil(Date.now() / 1000) * 1000;
          const scheduleEndTick = () => {
            const now = Date.now();
            const delay = Math.max(0, nextTickTimeRef.current - now);
            countDownTimer.current = setTimeout(() => {
              nextTickTimeRef.current += 1000;
              if (countDownTypeText.current.time && diffTimerRef.current.diffTime > 0) {
                countDownTypeText.current.time -= diffTimerRef.current.diffTime;
                diffTimerRef.current.stopDocumentTime = 0;
                diffTimerRef.current.recoverDocumentTime = 0;
                diffTimerRef.current.diffTime = 0;
              }
              if (triggerStartTimeEndCallBackState && startTimeEndCallBack) {
                startTimeEndCallBack({
                  type: 'start',
                  endState: true,
                  ...info,
                });
                triggerStartTimeEndCallBackState = false;
              }
              if (countDownTypeText.current.time && countDownTypeText.current.time > 1000) {
                countDownTypeText.current.time -= 1000;
                countDownTimeFormat(countDownTypeText.current.time);
                scheduleEndTick();
              } else {
                endTimeEndCallBack &&
                  endTimeEndCallBack({
                    type: 'end',
                    endState: true,
                    ...info,
                  });
              }
            }, delay);
          };
          scheduleNextTickRef.current = scheduleEndTick;
          scheduleEndTick();
        }
      } else {
        endTimeEndCallBack &&
          endTimeEndCallBack({
            type: 'end',
            endState: true,
            ...info,
          });
      }
    }
  };
  const countDownTimeFormat = (nowEndTime) => {
    const totalSeconds = Math.max(Math.round(nowEndTime / 1000), 0);
    let day = Math.max(Math.floor(totalSeconds / 86400), 0);
    let hour = Math.max(Math.floor((totalSeconds / 3600) % 24), 0);
    const minute = Math.max(Math.floor((totalSeconds / 60) % 60), 0);
    const second = Math.max(Math.floor(totalSeconds % 60), 0);
    if (getDaysToHours && day > 0) {
      hour = hour + day * 24;
      day = 0;
    }
    setEndTimeFormat({
      day,
      hour,
      minute,
      second,
    });
  };
  const numCustomStyle = numTextColor
    ? useRef({ color: numTextColor, backgroundColor: numTextBgColor })
    : useRef({});
  const textCustomStyle = textColor ? useRef({ color: textColor }) : useRef({});
  const padStartTime = useCallback((time) => {
    return `${time}`.padStart(2, '0');
  }, []);
  return (
    <View
      className={classNames(
        countDownStyle['d-count-down'],
        {
          [countDownStyle['d-ios-10-count-down']]: ios10State && !devToolPlatformState,
        },
        {
          [countDownStyle['d-en-count-down']]: isLanguageForEn,
        },
        className,
      )}
    >
      {countDownTypeText.current && countDownTypeText.current.text && (
        <Text
          className={classNames('d-count-down-title', {
            'font-jdzht-v2': useFontV2,
            'font-jdzht-v2-bold': useFontV2Bold,
          })}
        >
          {countDownTypeText.current.text}
        </Text>
      )}
      <View className="display-inline-block">
        {fromStartText && <Text className="d-count-from-start">{fromStartText}</Text>}
        {onlyShowDayState && endTimeFormat.day > 0 ? (
          <>
            <Text
              className={classNames('d-count-down-time', 'd-day-time', {
                'font-jdzht-v2': useFontV2,
                'font-jdzht-v2-bold': useFontV2Bold,
              })}
              style={numCustomStyle.current}
            >
              {endTimeFormat.day}
            </Text>
            <Text className="d-time-space-text d-day-space-text" style={textCustomStyle.current}>
              {showDaytimeNumSpaceTextState || onlyShowDaySpaceTextState ? countDownTimeDay : ':'}
            </Text>
          </>
        ) : (
          <>
            {(showDayState || showDayToSecondState) && endTimeFormat.day > 0 && (
              <>
                <Text
                  className={classNames('d-count-down-time', 'd-day-time', {
                    'font-jdzht-v2': useFontV2,
                    'font-jdzht-v2-bold': useFontV2Bold,
                  })}
                  style={numCustomStyle.current}
                >
                  {endTimeFormat.day}
                </Text>
                <Text
                  className="d-time-space-text d-day-space-text"
                  style={textCustomStyle.current}
                >
                  {showDaytimeNumSpaceTextState || onlyShowDaySpaceTextState
                    ? countDownTimeDay
                    : ':'}
                </Text>
              </>
            )}
            {showHourState && endTimeFormat.hour > 0 && (
              <>
                <Text
                  className={classNames('d-count-down-time', 'd-hour-time', {
                    'font-jdzht-v2': useFontV2,
                    'font-jdzht-v2-bold': useFontV2Bold,
                  })}
                  style={numCustomStyle.current}
                >
                  {padStartTime(endTimeFormat.hour)}
                </Text>
                <Text className="d-time-space-text" style={textCustomStyle.current}>
                  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
                    ? countDownTimeHour
                    : ':'}
                </Text>
              </>
            )}
            {showMinuteState && (
              <>
                <Text
                  className={classNames('d-count-down-time', 'd-minute-time', {
                    'font-jdzht-v2': useFontV2,
                    'font-jdzht-v2-bold': useFontV2Bold,
                  })}
                  style={numCustomStyle.current}
                >
                  {padStartTime(endTimeFormat.minute)}
                </Text>
                <Text className="d-time-space-text" style={textCustomStyle.current}>
                  {(endTimeFormat.day > 0 && showDaytimeNumSpaceTextState) || timeNumSpaceTextState
                    ? countDownTimeMin
                    : endTimeFormat.day > 0 && !showDayToSecondState
                    ? ''
                    : ':'}
                </Text>
              </>
            )}
            {showSecondState && (endTimeFormat.day <= 0 || showDayToSecondState) && (
              <>
                <Text
                  className={classNames('d-count-down-time', 'd-second-time', {
                    'font-jdzht-v2': useFontV2,
                    'font-jdzht-v2-bold': useFontV2Bold,
                  })}
                  style={numCustomStyle.current}
                >
                  {padStartTime(endTimeFormat.second)}
                </Text>
                {(timeNumSpaceTextState ||
                  (showDayToSecondState && showDaytimeNumSpaceTextState)) && (
                  <Text className="d-time-space-text" style={textCustomStyle.current}>
                    秒
                  </Text>
                )}
              </>
            )}
          </>
        )}
        {fromEndText && <Text className="d-count-from-end">{fromEndText}</Text>}
      </View>
    </View>
  );
  return useMemo(() => {
    return <CountDownTimer {...props} />;
  }, [props.residueTime, props.endTime]);
  residueTime: -1, 
  serverTime: null,
  className: null,
  startTime: null,
  endTime: null,
  info: null, 
  startTitleText: '距活动开始',
  endTitleText: '距活动结束',
  fromEndText: null,
  startTimeEndCallBack: null,
  endTimeEndCallBack: null,
  timeNumSpaceTextState: false, 
  showDaytimeNumSpaceTextState: true, 
  onlyShowDayState: false, 
  onlyShowDaySpaceTextState: false, 
  showDayState: false, 
  showDayToSecondState: false, 
  getDaysToHours: false, 
  showHourState: true,
  showMinuteState: true,
  showSecondState: true,
  numTextColor: null,
  textColor: null,
  numTextBgColor: null,
  useFontV2: false, 
  useFontV2Bold: false,