LampModuleSchedule 组件的倒计时开关启动时不会弹出倒计时设置页面

[15002075425]

• Tuya MiniApp IDE 版本信息：0.8.7;

  • App 应用版本信息： 6.3.3

  • @ray-js/ray, @ray-js/panel-sdk的版本 ¹.6.1；¹.13.1

    关键组件信息："@ray-js/lamp-module-schedule": "⁰.2.30",

  • 移动设备信息：

  • 相关代码：

Code: Select all

import React, { useState, useEffect } from 'react';
import { View, ScrollView } from '@ray-js/ray';
import { useDevice, useActions, useProps, useDevInfo } from '@ray-js/panel-sdk';
import { TopBar } from '@/components';
import Strings from '@/i18n';
import LampModuleSchedule, {
  useCountdownTime,
  useCountdownDpPull,
  useTriggerChildrenFunction,
} from '@ray-js/lamp-module-schedule';
import { getCachedSystemInfo } from '@/api/getCachedSystemInfo';
import styles from './index.module.less';

const sysInfo = getCachedSystemInfo();

const dpCodes = {
  switchCode: 'switch_led',
  countdownCode: 'countdown',
  rtcTimerCode: 'rtc_timer',
  workModeCode: 'woke_mode',
  fanSwitchCode: 'fan_switch',
};
// 根据需求自行调整
const actionList = [
  {
    label: 'Turn on and color changing', // 开启
    dpList: [
      {
        value: true,
        code: dpCodes.switchCode,
        id: 20,
      },
      {
        value: true,
        code: dpCodes.fanSwitchCode,
        id: 62,
      },
    ],
  },
  {
    label: 'Turn on the lights to execute the scene', // 关闭
    dpList: [
      {
        value: false,
        code: dpCodes.switchCode,
        id: 20,
      },
    ],
  },
  {
    label: 'close all', // 开启
    dpList: [
      {
        value: false,
        code: dpCodes.fanSwitchCode,
        id: 62,
      },
      {
        value: false,
        code: dpCodes.switchCode,
        id: 20,
      },
    ],
  },
];

const Main = () => {
  const deviceInfo = useDevInfo();

  // const state = useSelector(_state => _state);

  // console.log('🚀 ~ Main ~ state:', state);

  const countdown = useProps(dp => dp.countdown);
  const actions = useActions();

  // const { countdown } = state.dpState;
  const [_countdown, setCountdown] = useState(0);
  // 由于dp获取后不会变化，倒计时数据需要自行进行处理
  useCountdownTime(_countdown, (_countdown: number) => {
    // 进行倒计时更新
    setCountdown(_countdown);
    if (_countdown <= 0) {
      // 下发dp
      actions.countdown.set(0);
    }
  });

  useEffect(() => {
    if (countdown) {
      setCountdown(countdown);
      return;
    }
    if (countdown <= 0) {
      setCountdown(0);
    }
  }, [countdown]);

  const _onCountdownToggle = (_countdown: number) => {
    console.log(_countdown, 'onCountdownToggle');
    // actions.countdown.set(_countdown);
    if (_countdown > 0) {
      // 下发dp
      actions.countdown.set(_countdown);
      return;
    }
    if (_countdown <= 0) {
      // 下发dp
      actions.countdown.set(0);
      return;
    }
    console.log('开启倒计时了', 'onCountdownToggle');
  };

  // const { run: runTimerToggle } = useTriggerChildrenFunction('timerToggle');

  // // mock dp触发定时状态修改
  // useEffect(() => {
  //   setTimeout(() => {
  //     const timerId = 1;
  //     const timerStatus = false;
  //     runTimerToggle(timerId, timerStatus);
  //   }, 4000);
  // }, []);

  // sigmesh协议下需要主动拉取倒计时dp值，防止倒计时dp不同步
  const dpId = 26; // TODO:
  useCountdownDpPull(deviceInfo.devId, dpId);
  return (
    <View className={styles.view} style={{ paddingTop: `${sysInfo.statusBarHeight}px` }}>
      <TopBar title={Strings.schedule} />
      <ScrollView scrollY className={styles.scheduleView}>
        <LampModuleSchedule
          devId={deviceInfo?.devId}
          groupId={deviceInfo?.groupId}
          supportCountdown
          supportCloudTimer
          supportRctTimer
          showHeader={false}
          countdownConfig={{
            countdown: _countdown,
          }}
          style={{ height: '90vh' }}
          timingConfig={{
            actionList,
            timerLimitNum: 6,
          }}
          themeConfig={{
            theme: 'dark',
            // 整体背景色
            background: '#000',
            // 品牌色
            brandColor: '#1082FE',
            // 字体颜色
            fontColor: {
              titlePrimary: '#FFFFFF', // 主要标题文字颜色
              textPrimary: '#FFFFFF', // 主要文字颜色
              textRegular: 'rgba(255, 255, 255, 0.5)', // 常规文字颜色
            },
            // 卡片样式
            card: {
              background: '#1F2022', // 卡片背景色
              borderColor: 'rgba(255, 255, 255, 0.102054)',
              textPrimary: '#fff',
              textRegular: 'rgba(255, 255, 255, 0.5)',
            },
            // 时间选择器样式
            timer: {
              background: 'rgba(0, 0, 0, 1)', // 背景色
              timerPickerBorderColor: 'rgba(0, 0, 0, 1)', // 分割线颜色
              customStyle: {
                color: '#fff', // 自定义周期文字颜色
                borderColor: 'rgba(255, 255, 255, 0.1)', // 自定义周期边框颜色
                background: 'rgba(0, 0, 0, 1)', // 自定义周期卡片背景色
              },
            },
          }}
          onBeforeTimerChange={(res, type, timerList) => {
            console.log(res, type, timerList, 'onBeforeTimerChange');
            // 支持异步
            // return new Promise(resolve => {
            //   setTimeout(() => {
            //     resolve(true);
            //   }, 100);
            // });
            // 同步
            return true;
          }}
          onCountdownToggle={(_countdown: number) => {
            _onCountdownToggle(_countdown);
          }}
          onRtcTimeAdd={timerData => {
            console.log(timerData, 'onRtcTimeAdd');
          }}
          onRtcTimeRemove={timerData => {
            console.log(timerData, 'onRtcTimeRemove');
          }}
          onRtcTimeUpdate={timerData => {
            console.log(timerData, 'onRtcTimeUpdate');
          }}
        />
      </ScrollView>
    </View>
  );
};

export default Main;

Code: Select all

- 日志信息：无

- 问题描述（复现步骤）：打开计划页面，倒计时开关从关闭 => 开启

- 预期结果：弹出倒计时设置页面

- 实际结果：只有按钮状态变成：开启

[crisiron]

临时处理方案： 在 引入组件的页面 less 文件中添加，样式覆盖=> :global(.countdown-card-mask) {
bottom: 0 !important;
top: auto !important;
} 后续会发版本修复

[15002075425]

解决了