@ray-js/lamp-module-schedule v0.2.16

English | 简体中文

@ray-js/lamp-module-schedule

lamp-module-schedule

install

$ npm install @ray-js/lamp-module-schedule
$ yarn add @ray-js/lamp-module-schedule

// or
$ npm install @ray-js/components-ty-lamp
$ yarn add @ray-js/components-ty-lamp

Preview

Usage

• Props And Methods

interface TImerData {
  weeks: number[]; // 定时周期[0,0,0,0,0,0,0] => 对应星期的“日一二三四五六”, 1为开启，0为关闭；0000000 => 仅一次；1111111 => 每天
  opened: boolean; // 是否开启
  time: string; // 定时时间
  timerId: string; // 定时id
}

interface IProps {
  /**
   * @description.zh 组件样式
   * @description.en Component style
   * @default {}
   */
  style?: React.CSSProperties;
  /**
   * @description.zh 设备id, 如果是单设备传入devId，如果群组传入groupId
   * @description.en Device id
   * @default
   */
  devId?: string;
  /**
   * @description.zh 群组设备id,如果是单设备传入devId，如果群组传入groupId
   * @description.en Group id
   * @default
   */
  groupId?: string;
  /**
   * @description.zh 是否支持倒计时
   * @description.en Whether to support the countdown
   * @default false
   */
  supportCountdown?: boolean;
  /**
   * @description.zh 是否支持本地定时, 群组不支持本地定时
   * @description.en Whether to support the local time，Group does not support local time
   * @default false
   */
  supportRctTimer?: boolean;
  /**
   * @description.zh 是否支持云定时,如果云定时和本地定时都支持，本地定时优先级更高
   * @description.en Whether to support the cloud, if cloud timed and local support, local time higher priority
   * @default false
   */
  supportCloudTimer?: boolean;
  /**
   * @description.zh 定时功能配置项
   * @description.en Timing function configuration items
   * @default {}
   */
  timingConfig?: {
    actionList?: {
      label: string; // 标题
      // 选中行为需要保存的dp列表
      dpList: {
        value: string | number | boolean, // dp值
        code: string, // dp code
        id: number; // dp id
      }[],
    }[],
  };
  /**
   * @description.zh 倒计时功能配置项
   * @description.en The countdown function configuration items
   * @default {}
   */
  countdownConfig?: {
    countdown: number, // 倒数计剩余秒数
  };
  /**
   * @description.zh 倒计时切换时的回调函数
   * @description.en The countdown when switching the callback function
   * @param countdown: 倒数计数值 单位以s计数 / Countdown numerical unit s count
   * @default
   */
  onCountdownToggle?: (countdown: number) => void;
  /**
   * @description.zh 定时数据被修改之前触发，如果返回false，将不会触发后续逻辑，一般用于定时数据的校验
   * @description.en Timing trigger before data is modified, if return false， it will do not trigger after logic, commonly used in data check regularly
   * @default
   */
  onBeforeTimerChange?: (
    timerDatas: TImerData | []TImerData,
    type: 'add' | 'remove' | 'update' | 'init'
  ) => boolean;
  /**
   * @description.zh 添加本地定时的回调
   * @description.en Add local regular callback
   * @default
   */
  onRtcTimeAdd?: (timerData: TImerData) => void;
  /**
   * @description.zh 删除本地定时的回调
   * @description.en Delete local regular callback
   * @default
   */
  onRtcTimeRemove?: (timerData: TImerData) => void;
  /**
   * @description.zh 更新本地定时的回调
   * @description.en Update the local regular callback
   * @default
   */
  onRtcTimeUpdate?: (timerData: TImerData) => void;
}

• useTriggerChildrenFunction introduce

// import
import LampModuleSchedule, { useTriggerChildrenFunction } from '@ray-js/lamp-module-schedule';
// usage
const triggerType = 'timerToggle'; // Method that triggers child components, currently only support "timer toggle"
const { run: runTimerToggle } = useTriggerChildrenFunction(triggerType);

// trigger
const timerId = 1; // timerId
const timerStatus = false; // It is enabled or disabled periodically

setTimeout(() => {
  runTimerToggle();
}, 3000);

// The first reference method
import LampModuleSchedule, {
  useCountdownTime,
  useCountdownDpPull,
  useTriggerChildrenFunction,
} from '@ray-js/lamp-module-schedule';
// The second reference method
import { LampModuleSchedule } from '@ray-js/components-ty-lamp';
const { useCountdownTime, useCountdownDpPull, useTriggerChildrenFunction } = LampModuleSchedule;

const dpCodes = {
  switchCode: 'switch',
  countdownCode: 'countdown',
  rtcTimerCode: 'rtc_timer',
  musicCode: 'dreamlightmic_music_data',
  workModeCode: 'woke_mode',
};
// According to the requirements to adjust
const actionList = [
  {
    label: 'rock', // rock mode
    dpList: [
      {
        value: 1,
        code: dpCodes.musicCode,
        id: 2,
      },
      {
        value: true,
        code: dpCodes.switchCode,
        id: 1,
      },
    ],
  },
  {
    label: 'jazz', // jazz mode
    dpList: [
      {
        value: 2,
        code: dpCodes.musicCode,
        id: 2,
      },
      {
        value: true,
        code: dpCodes.switchCode,
        id: 1,
      },
    ],
  },
  {
    label: 'classical', // 古典
    dpList: [
      {
        value: 3,
        code: dpCodes.musicCode,
        id: 2,
      },
      {
        value: true,
        code: dpCodes.switchCode,
        id: 1,
      },
    ],
  },
  {
    label: 'rhythm', // 节奏
    dpList: [
      {
        value: 4,
        code: dpCodes.musicCode,
        id: 2,
      },
      {
        value: true,
        code: dpCodes.switchCode,
        id: 1,
      },
    ],
  },
  {
    label: 'rolling', // 滚动
    dpList: [
      {
        value: 5,
        code: dpCodes.musicCode,
        id: 2,
      },
      {
        value: true,
        code: dpCodes.switchCode,
        id: 1,
      },
    ],
  },
  {
    label: 'turnOff', // close
    dpList: [
      {
        value: false,
        code: dpCodes.switchCode,
        id: 1,
      },
    ],
  },
];

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

  // Under sigmesh protocol, it is necessary to actively pull the countdown dp value to prevent the countdown dp from being out of sync
  const dpId = 1; // TODO:
  useCountdownDpPull(state.devInfo.devId, dpId);

  const { run: runTimerToggle } = useTriggerChildrenFunction('timerToggle');
  // mock dp Triggers the timing status change
  useEffect(() => {}, [
    setTimeout(() => {
      const timerId = 1;
      const timerStatus = false;
      runTimerToggle(timerId, timerStatus);
    }, 4000),
  ]);

  return (
    <LampModuleSchedule
      devId={state.devInfo?.devId}
      groupId={state.devInfo?.groupId}
      supportCountdown
      supportCloudTimer
      supportRctTimer
      countdownConfig={{
        countdown: _countdown,
      }}
      timingConfig={{
        actionList,
      }}
      onCountdownToggle={(_countdown: number) => {
        console.log(_countdown, '_countdown_countdown');
      }}
      onRtcTimeAdd={timerData => {
        console.log(timerData, 'onRtcTimeAdd');
      }}
      onRtcTimeRemove={timerData => {
        console.log(timerData, 'onRtcTimeRemove');
      }}
      onRtcTimeUpdate={timerData => {
        console.log(timerData, 'onRtcTimeUpdate');
      }}
    />
  );
};