@conecli/cone-render 0.10.1-shop-beta.37 → 0.10.1-shop-beta.38

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

@@ -1 +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,
  } = props;
  const [endTimeFormat, setEndTimeFormat] = useState<{
    day: string | number;
    hour: string | number;
    minute: string | number;
    second: string | number;
  }>({
    day: 0,
    hour: 0,
    minute: 0,
    second: 0,
  });
  const countDownTimer = useRef<NodeJS.Timer | null>();
  const countDownTypeText = useRef<ComponentInterFace.CountDownTimerRef>({
    type: 'end',
    text: endTitleText,
    time: null,
  });
  
  const diffTimerRef = useRef({
    stopDocumentTime: 0,
    recoverDocumentTime: 0,
    diffTime: 0,
  });
  
  useEffect(() => {
    Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (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;
          changeTimerSetInterval(true);
        }
      } else {
        diffTimerRef.current.stopDocumentTime = Date.now();
        if (countDownTimer.current) {
          clearInterval(countDownTimer.current);
          countDownTimer.current = null;
        }
      }
    });
  }, []);
  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 && clearInterval(countDownTimer.current);
    };
  }, [serverTime, residueTime]);
  
  const changeTimerSetInterval = (recoverState = false) => {
    countDownTimer.current && clearInterval(countDownTimer.current);
    recoverState && changeTimerFunc();
    countDownTimer.current = setInterval(changeTimerFunc, 1000);
  };
  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) {
      countDownTypeText.current.time -= 1000;
      countDownTypeText.current.type === 'start' &&
        countDownTypeText.current.endTime &&
        (countDownTypeText.current.endTime -= 1000);
      countDownTimeFormat(countDownTypeText.current.time);
    } else {
      countDownTypeText.current.time = 0;
      countDownTimeFormat(countDownTypeText.current.time);
      countDownTimer.current && clearInterval(countDownTimer.current);
      if (countDownTypeText.current.type === 'start') {
        let triggerStartTimeEndCallBackState = true;
        countDownTypeText.current = Object.assign({}, countDownTypeText.current, {
          type: 'end',
          text: endTitleText,
        });
        const now = Date.now();
        countDownTypeText.current.time = endTime ? endTime - now : 0;
        if (countDownTypeText.current.time && countDownTypeText.current.time > 0) {
          countDownTimer.current = setInterval(() => {
            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;
            }
            const now = Date.now();
            let remainingTime = endTime ? endTime - now : 0;
            remainingTime = Math.max(0, remainingTime);
            if (remainingTime > 1000) {
              countDownTypeText.current.time = remainingTime;
              countDownTimeFormat(countDownTypeText.current.time);
            } else {
              endTimeEndCallBack &&
                endTimeEndCallBack({
                  type: 'end',
                  endState: true,
                  ...info,
                });
            }
          }, 1000);
        }
      } else {
        endTimeEndCallBack &&
          endTimeEndCallBack({
            type: 'end',
            endState: true,
            ...info,
          });
      }
    }
  };
  const countDownTimeFormat = (nowEndTime) => {
    let day = Math.floor(nowEndTime / 1000 / 86400);
    let hour = Math.floor((nowEndTime / 1000 / 3600) % 24);
    const minute = Math.floor((nowEndTime / 1000 / 60) % 60);
    const second = Math.floor((nowEndTime / 1000) % 60);
    if (getDaysToHours && day > 0) {
      hour = hour + day * 24;
      day = 0;
    }
    setEndTimeFormat({
      day,
      hour: `${hour}`.padStart(2, '0'),
      minute: `${minute}`.padStart(2, '0'),
      second: `${second}`.padStart(2, '0'),
    });
  };
  const numCustomStyle = numTextColor
    ? useRef({ color: numTextColor, backgroundColor: numTextBgColor })
    : useRef({});
  const textCustomStyle = textColor ? useRef({ color: textColor }) : useRef({});
  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 && (
              <>
                <Text
                  className={classNames('d-count-down-time', 'd-hour-time', {
                    'font-jdzht-v2': useFontV2,
                    'font-jdzht-v2-bold': useFontV2Bold,
                  })}
                  style={numCustomStyle.current}
                >
                  {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}
                >
                  {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}
                >
                  {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]);
  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, 
+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,
  } = props;
  const [endTimeFormat, setEndTimeFormat] = useState<{
    day: string | number;
    hour: string | number;
    minute: string | number;
    second: string | number;
  }>({
    day: 0,
    hour: 0,
    minute: 0,
    second: 0,
  });
  const countDownTimer = useRef<NodeJS.Timer | null>();
  const countDownTypeText = useRef<ComponentInterFace.CountDownTimerRef>({
    type: 'end',
    text: endTitleText,
    time: null,
  });
  
  const diffTimerRef = useRef({
    stopDocumentTime: 0,
    recoverDocumentTime: 0,
    diffTime: 0,
  });
  
  useEffect(() => {
    Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (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;
          changeTimerSetInterval(true);
        }
      } else {
        diffTimerRef.current.stopDocumentTime = Date.now();
        if (countDownTimer.current) {
          clearInterval(countDownTimer.current);
          countDownTimer.current = null;
        }
      }
    });
  }, []);
  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 && clearInterval(countDownTimer.current);
    };
  }, [serverTime, residueTime]);
  
  const changeTimerSetInterval = (recoverState = false) => {
    countDownTimer.current && clearInterval(countDownTimer.current);
    recoverState && changeTimerFunc();
    countDownTimer.current = setInterval(changeTimerFunc, 1000);
  };
  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) {
      countDownTypeText.current.time -= 1000;
      countDownTypeText.current.type === 'start' &&
        countDownTypeText.current.endTime &&
        (countDownTypeText.current.endTime -= 1000);
      countDownTimeFormat(countDownTypeText.current.time);
    } else {
      countDownTypeText.current.time = 0;
      countDownTimeFormat(countDownTypeText.current.time);
      countDownTimer.current && clearInterval(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) {
          countDownTimer.current = setInterval(() => {
            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);
            } else {
              endTimeEndCallBack &&
                endTimeEndCallBack({
                  type: 'end',
                  endState: true,
                  ...info,
                });
            }
          }, 1000);
        }
      } else {
        endTimeEndCallBack &&
          endTimeEndCallBack({
            type: 'end',
            endState: true,
            ...info,
          });
      }
    }
  };
  const countDownTimeFormat = (nowEndTime) => {
    let day = Math.floor(nowEndTime / 1000 / 86400);
    let hour = Math.floor((nowEndTime / 1000 / 3600) % 24);
    const minute = Math.floor((nowEndTime / 1000 / 60) % 60);
    const second = Math.floor((nowEndTime / 1000) % 60);
    if (getDaysToHours && day > 0) {
      hour = hour + day * 24;
      day = 0;
    }
    setEndTimeFormat({
      day,
      hour: `${hour}`.padStart(2, '0'),
      minute: `${minute}`.padStart(2, '0'),
      second: `${second}`.padStart(2, '0'),
    });
  };
  const numCustomStyle = numTextColor
    ? useRef({ color: numTextColor, backgroundColor: numTextBgColor })
    : useRef({});
  const textCustomStyle = textColor ? useRef({ color: textColor }) : useRef({});
  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 && (
              <>
                <Text
                  className={classNames('d-count-down-time', 'd-hour-time', {
                    'font-jdzht-v2': useFontV2,
                    'font-jdzht-v2-bold': useFontV2Bold,
                  })}
                  style={numCustomStyle.current}
                >
                  {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}
                >
                  {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}
                >
                  {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]);
  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,