English | 简体中文

@ray-js/lamp-module-schedule

lamp-module-schedule

install

1$ npm install @ray-js/lamp-module-schedule
2$ yarn add @ray-js/lamp-module-schedule
3
4// or
5$ npm install @ray-js/components-ty-lamp
6$ yarn add @ray-js/components-ty-lamp

Preview

Usage

• Props And Methods

1
2interface TimerData {
3  id: string; // 定时组id， 当为本地定时时与timerId一致
4  timerId?: string; // 定时id， 当为本地定时时与id一致
5  weeks: number[]; // 定时周期[0,0,0,0,0,0,0] => 对应星期的“日一二三四五六”, 1为开启，0为关闭；0000000 => 仅一次；1111111 => 每天
6  opened: boolean; // 是否开启
7  time: string; // 定时时间
8  dps: {
9    [v: string]: any;
10  };
11}
12type TTimer = {
13  status: any;
14  time: string;
15  loops: string;
16  dps: Record<string, any>;
17  id?: string;
18  timerId?: string;
19};
20interface IProps {
21  /**
22   * @description.zh 组件样式
23   * @description.en Component style
24   * @default {}
25   */
26  style?: React.CSSProperties;
27  /**
28   * @description.zh 设置主题样式
29   * @description.en Set theme style
30   * @default {}
31   */
32  themeConfig?: {
33    // background color
34    background?: string;
35    // 主题
36    theme?: 'light' | 'dark';
37    // brand color
38    brandColor?: string;
39    // font color
40    fontColor?: {
41      titlePrimary?: string; // Main title text color
42      textPrimary?: string; // Main text color
43      textRegular?: string; // regular text color
44    };
45    // card style
46    card?: {
47      background?: string;
48      borderColor?: string;
49      textPrimary?: string;
50      textRegular?: string;
51    };
52    // Time picker style
53    timer?: {
54      background?: string;
55      timerPickerBorderColor?: string;
56      customStyle: {
57        color?: string;
58        borderColor?: string;
59        boxShadowColor?: string;
60        background?: string;
61      };
62    };
63  };
64  /**
65   * @description.zh 是否展示顶部导航栏
66   * @description.en Whether to display the top navigation bar
67   * @default
68   */
69  showHeader?: boolean;
70  /**
71   * @description.zh 是否展示胶囊按钮
72   * @description.en Whether to display the capsule button
73   * @default true 默认展示
74   */
75  showMenuButton?: boolean;
76  /**
77   * @description.zh 自定义计划包裹层的样式
78   * @description.en Customize the style of the planned wrap layer
79   * @default {}
80   */
81  customItemContainerStyle?: React.CSSProperties;
82  /**
83   * @description.zh 设备id, 如果是单设备传入devId，如果群组传入groupId
84   * @description.en Device id
85   * @default
86   */
87  devId?: string;
88  /**
89   * @description.zh 群组设备id,如果是单设备传入devId，如果群组传入groupId
90   * @description.en Group id
91   * @default
92   */
93  groupId?: string;
94  /**
95   * @description.zh 是否支持倒计时
96   * @description.en Whether to support the countdown
97   * @default false
98   */
99  supportCountdown?: boolean;
100  /**
101   * @description.zh 是否支持本地定时, 群组不支持本地定时
102   * @description.en Whether to support the local time，Group does not support local time
103   * @default false
104   */
105  supportRctTimer?: boolean;
106  /**
107   * @description.zh 是否支持云定时,如果云定时和本地定时都支持，本地定时优先级更高
108   * @description.en Whether to support the cloud, if cloud timed and local support, local time higher priority
109   * @default false
110   */
111  supportCloudTimer?: boolean;
112  /**
113   * @description.zh 渲染自定义计划的功能
114   * @description.en The ability to render custom plans
115   * @default {}
116   */
117  renderCustomItem?: () => React.ReactElement;
118  /**
119   * @description.zh 定时功能配置项
120   * @description.en Timing function configuration items
121   * @default {}
122   */
123  timingConfig?: {
124    timerLimitNum?: number; // "Default local timing is 10, while cloud timing is 30."
125    actionList?: {
126      label: string; // Title
127      // The list of "dp" values to be saved for the selected rows
128      dpList: {
129        value: string | number | boolean, // dp value
130        code: string, // dp code
131        id: number; // dp id
132      }[],
133      type: 'custom'; // Custom complex scenario action
134      callback: (res: TTimer) => void; // Callback function for custom complex scenario action
135      renderCustomActionText: () => string; // Customize the text for rendering a complex scene action
136    }[],
137  };
138  /**
139   * @description.zh 倒计时功能配置项
140   * @description.en The countdown function configuration items
141   * @default {}
142   */
143  countdownConfig?: {
144    countdown: number, // 倒数计剩余秒数
145  };
146  /**
147   * @description.zh 倒计时切换时的回调函数
148   * @description.en The countdown when switching the callback function
149   * @param countdown: 倒数计数值 单位以s计数 / Countdown numerical unit s count
150   * @default
151   */
152  onCountdownToggle?: (countdown: number) => void;
153  /**
154   * @description.zh 定时数据被修改之前触发，如果返回false，将不会触发后续逻辑，一般用于定时数据的校验
155   * @description.en Timing trigger before data is modified, if return false， it will do not trigger after logic, commonly used in data check regularly
156   * @default
157   */
158  onBeforeTimerChange?: (
159    timerDatas: TimerData | []TimerData,
160    type: 'add' | 'remove' | 'update' | 'init'
161  ) => boolean;
162  /**
163   * @description.zh 添加本地定时的回调
164   * @description.en Add local regular callback
165   * @default
166   */
167  onRtcTimeAdd?: (timerData: TimerData) => void;
168  /**
169   * @description.zh 删除本地定时的回调
170   * @description.en Delete local regular callback
171   * @default
172   */
173  onRtcTimeRemove?: (timerData: TimerData) => void;
174  /**
175   * @description.zh 更新本地定时的回调
176   * @description.en Update the local regular callback
177   * @default
178   */
179  onRtcTimeUpdate?: (timerData: TimerData) => void;
180}

• useTriggerChildrenFunction introduce

1// import
2import LampModuleSchedule, { useTriggerChildrenFunction } from '@ray-js/lamp-module-schedule';
3// usage
4// "timerToggle" The switch status of a scheduled item is changed
5// "closeAllTimer" Turn off all timing
6const triggerType = 'timerToggle'; // Method that triggers child components
7const { run: runTimerToggle } = useTriggerChildrenFunction(triggerType);
8
9const triggerType1 = 'closeAllTimer';
10const { run: runCloseAllTimer } = useTriggerChildrenFunction(triggerType1);
11
12setTimeout(() => {
13  const timerId = 1; // timerId
14  const timerStatus = false; // 定时开启关闭状态
15  runTimerToggle(timerId, timerStatus);
16}, 3000);

1// The first reference method
2import LampModuleSchedule, {
3  useCountdownTime,
4  useCountdownDpPull,
5  useTriggerChildrenFunction,
6} from '@ray-js/lamp-module-schedule';
7// The second reference method
8import { LampModuleSchedule } from '@ray-js/components-ty-lamp';
9const { useCountdownTime, useCountdownDpPull, useTriggerChildrenFunction } = LampModuleSchedule;
10
11const dpCodes = {
12  switchCode: 'switch_led',
13  countdownCode: 'countdown',
14  rtcTimerCode: 'rtc_timer',
15  musicCode: 'dreamlightmic_music_data',
16  workModeCode: 'woke_mode',
17};
18
19// According to the requirements to adjust
20const actionList = [
21  {
22    label: '开启', // 开启
23    dpList: [
24      {
25        value: true,
26        code: dpCodes.switchCode,
27        id: 1,
28      },
29    ],
30  },
31  {
32    label: '关闭', // 关闭
33    dpList: [
34      {
35        value: false,
36        code: dpCodes.switchCode,
37        id: 1,
38      },
39    ],
40  },
41  {
42    label: '摇滚',
43    type: 'custom', // 自定义复杂场景动作
44    dpList: [],
45    callback(res: TTimer) {
46      // 注意如果本函数要生效，必须设置上面的 type: 'custom',
47      // 可以跳转新页面去设置
48      // 设置完后 重新 设置下新的dpList的值
49      console.log(res, 'callbackcallback');
50
51      router.push('/test');
52    },
53    renderCustomActionText() {
54      return '自定义'; // 自定义action的文案
55    },
56  },
57];
58
59const Main = () => {
60  const state = useSelector(_state => _state);
61  const { countdown } = state.dpState;
62  const [_countdown, setCountdown] = useState(countdown);
63  // 由于dp获取后不会变化，倒计时数据需要自行进行处理
64  useCountdownTime(countdown, (_countdown: number) => {
65    // 进行倒计时更新
66    setCountdown(_countdown);
67    if (_countdown <= 0) {
68      // 下发dp
69    }
70  });
71
72  // Under sigmesh protocol, it is necessary to actively pull the countdown dp value to prevent the countdown dp from being out of sync
73  const dpId = 1; // TODO:
74  useCountdownDpPull(state.devInfo.devId, dpId);
75
76  const { run: runTimerToggle } = useTriggerChildrenFunction('timerToggle');
77  // mock dp Triggers the timing status change
78  useEffect(() => {
79    setTimeout(() => {
80      const timerId = 1;
81      const timerStatus = false;
82      runTimerToggle(timerId, timerStatus);
83    }, 4000),
84  }, []);
85
86  return (
87    <LampModuleSchedule
88      devId={state.devInfo?.devId}
89      groupId={state.devInfo?.groupId}
90      supportCountdown
91      supportCloudTimer
92      supportRctTimer
93      // showHeader={false}
94      countdownConfig={{
95        countdown: _countdown,
96      }}
97      timingConfig={{
98        actionList,
99        timerLimitNum: 6,
100      }}
101      themeConfig={{
102        theme: 'dark', // Black theme, default white theme
103        // Overall background color
104        background: '#0E263E',
105        // Brand color
106        brandColor: '#00BE9B',
107        // Font color
108        fontColor: {
109          titlePrimary: '#FFFFFF', // Main title text color
110          textPrimary: '#FFFFFF', // Main text color
111          textRegular: 'rgba(255, 255, 255, 0.5)', // Regular text color
112        },
113        // Card style
114        card: {
115          background: 'rgba(35, 58, 82, 0.78)',
116          borderColor: 'rgba(255, 255, 255, 0.102054)',
117          textPrimary: '#fff',
118          textRegular: 'rgba(255, 255, 255, 0.5)',
119        },
120        // Time selector style
121        timer: {
122          background: 'rgba(14, 38, 62, 1)', // background
123          timerPickerBorderColor: 'rgba(31, 48, 64, 1)', // Divider color
124          customStyle: {
125            color: '#fff', // Custom cycle text color
126            borderColor: 'rgba(255, 255, 255, 0.1)', // Customize the periodic border color
127            background: 'rgba(35, 58, 82, 0.78)', // Custom cycle card background color
128          },
129        },
130      }}
131      onBeforeTimerChange={(res, type, timerList) => {
132        console.log(res, type, timerList, 'onBeforeTimerChange');
133        // 支持异步
134        // return new Promise(resolve => {
135        //   setTimeout(() => {
136        //     resolve(true);
137        //   }, 100);
138        // });
139        // 同步
140        return true;
141      }}
142      onCountdownToggle={(_countdown: number) => {
143        console.log(_countdown, '_countdown_countdown');
144      }}
145      onRtcTimeAdd={timerData => {
146        console.log(timerData, 'onRtcTimeAdd');
147      }}
148      onRtcTimeRemove={timerData => {
149        console.log(timerData, 'onRtcTimeRemove');
150      }}
151      onRtcTimeUpdate={timerData => {
152        console.log(timerData, 'onRtcTimeUpdate');
153      }}
154    />
155  );
156};

Notes:

Timing countdown module

• The countdown supports up to 24 hours, and supports minute-by-minute;
• The solar solution does not support countdown, but the strong power solution does;

Module logic

• Single device uses RTC timing, and the group uses cloud timing. If a single device has both RTC timing and cloud timing, the default is RTC timing;