@ledvance/group-ui-biz-bundle 1.0.31 → 1.0.33

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/flags/FlagActions.ts

@@ -55,7 +55,7 @@ export const useFlag: UseFlagType = (params) => {
 
       return dps
     }
-  }, flagData => ({workMode: (params.isStripLight && flagData?.drawToolStatus) ? WorkMode.Colour : WorkMode.Scene, switchLed: true}))
+  }, flagData => ({workMode: (params.isStripLight && flagData?.drawToolStatus) ? WorkMode.Colour : WorkMode.Scene, switch_led: true}))
 }
 
 export interface FlagOption {

package/src/modules/mood/MoodPage.tsx

@@ -180,6 +180,7 @@ const MoodPage = () => {
           success: true
         }
       }
+      let workMode: WorkMode = getWorkMode(mood, params);
       return setScene({
         scene: cloneDeep(mood),
         sceneDataDpCode: params.sceneDataDpCode,

package/src/modules/randomTimeForPlug/ItemCard.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import Card from "@ledvance/base/src/components/Card";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import {StyleSheet, Text, View} from "react-native";
+import {SwitchButton, Utils} from "tuya-panel-kit";
+import {loopText} from "@ledvance/base/src/utils/common";
+import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+
+const {convertX: cx} = Utils.RatioUtils
+const {parseTimer} = Utils.TimeUtils
+
+export interface ItemCardProps<T> {
+  item: T & {
+    enable: boolean
+    startTime: number
+    endTime: number
+    weeks: number[]
+    name?: string
+  },
+  is24Hour?: boolean,
+  onSwitch: (enable: boolean) => void
+  onPress: () => void
+}
+
+const ItemCard = <T, >(props: ItemCardProps<T>) => {
+  const {item, is24Hour, onSwitch, onPress} = props
+  return (
+    <Card style={styles.itemCard} onPress={onPress}>
+      <Spacer height={cx(16)}/>
+      <View style={styles.switchLine}>
+        <Text style={styles.time}>
+          {is24Hour ?
+            `${parseTimer(item.startTime * 60)} - ${parseTimer(item.endTime * 60)}`
+            :
+            `${parseHour12(item.startTime * 60)} - ${parseHour12(item.endTime * 60)}`
+          }
+        </Text>
+        <SwitchButton
+          style={styles.switchBtn}
+          value={item.enable}
+          thumbStyle={{elevation: 0}}
+          onValueChange={onSwitch}/>
+      </View>
+      <Text style={styles.loopText}>{loopText(item.weeks, parseTimer(item.startTime * 60))}</Text>
+      <Spacer height={cx(5)}/>
+      <Text style={styles.loopText}>{item.name}</Text>
+      <Spacer/>
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  itemCard: {
+    marginHorizontal: cx(24),
+    paddingHorizontal: cx(16),
+  },
+  switchLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  switchBtn: {},
+  loopText: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+})
+
+export default ItemCard

package/src/modules/randomTimeForPlug/RandomTimeForPlugAction.ts

@@ -0,0 +1,136 @@
+/**
+ * 随机定时：最大 16 个定时功能。每 6 个字节代表含义如下：
+ *
+ * 第 1 个字节：通道号。bit0 代表开关，bit7-bit1 代表通道号，排插位数 0-6。
+ * 第 2 个字节：星期。
+ * 第 3 个字节和第 4 个字节：起始时间。单位：分钟。
+ * 第 5 个字节和第 6 个字节：结束时间。单位：分钟。
+ */
+
+import {useFeatureHook} from "@ledvance/base/src/models/modules/NativePropsSlice";
+
+
+export interface RandomTimeParam {
+  channels: string[],
+  is24Hour?: boolean
+}
+
+export interface RandomTimeItem {
+  enable: boolean
+  channel?: number
+  weeks: number[]
+  startTime: number
+  endTime: number
+  name?: string
+  index?: number
+}
+
+interface PlugConfig {
+  randomTime: RandomTimeItem[]
+}
+
+export function useRandomTime() {
+  return useFeatureHook<PlugConfig, RandomTimeItem[]>('randomTime', [], (val) => randomTimeItemsToBase64(val))
+}
+
+const base64Chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+const decodeBase64 = (base64: string): Uint8Array => {
+  const bufferLength = base64.length * 0.75;
+  const buffer = new Uint8Array(bufferLength);
+  let encoded1: number, encoded2: number, encoded3: number, encoded4: number;
+  let p = 0;
+
+  for (let i = 0; i < base64.length; i += 4) {
+    encoded1 = base64Chars.indexOf(base64[i]);
+    encoded2 = base64Chars.indexOf(base64[i + 1]);
+    encoded3 = base64Chars.indexOf(base64[i + 2]);
+    encoded4 = base64Chars.indexOf(base64[i + 3]);
+
+    buffer[p++] = (encoded1 << 2) | (encoded2 >> 4);
+    buffer[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
+    buffer[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
+  }
+
+  return buffer;
+}
+
+const encodeBase64 = (buffer: Uint8Array): string => {
+  let base64 = '';
+  let p = 0;
+  const length = buffer.length;
+
+  while (p < length) {
+    const byte1 = buffer[p++];
+    const byte2 = p < length ? buffer[p++] : 0;
+    const byte3 = p < length ? buffer[p++] : 0;
+
+    const encoded1 = byte1 >> 2;
+    const encoded2 = ((byte1 & 3) << 4) | (byte2 >> 4);
+    const encoded3 = ((byte2 & 15) << 2) | (byte3 >> 6);
+    const encoded4 = byte3 & 63;
+
+    base64 += base64Chars[encoded1] + base64Chars[encoded2];
+    base64 += p < length + 2 ? base64Chars[encoded3] : '=';
+    base64 += p < length + 1 ? base64Chars[encoded4] : '=';
+  }
+
+  return base64;
+}
+
+// @ts-ignore
+const randomTimeItemsFromBase64 = (base64: string): RandomTimeItem[] => {
+  const bytes = decodeBase64(base64);
+  const items: RandomTimeItem[] = [];
+
+  for (let i = 0; i < bytes.length; i += 6) {
+    const channelByte = bytes[i];
+    const enable = (channelByte & 1) === 1;
+    const channel = (channelByte >> 1) & 0x7F;
+    const week = bytes[i + 1];
+    const startTime = (bytes[i + 2] << 8) | bytes[i + 3];
+    const endTime = (bytes[i + 4] << 8) | bytes[i + 5];
+
+    items.push({
+      enable,
+      channel,
+      weeks: [
+        (week & 0b00000001) >> 0,
+        (week & 0b00000010) >> 1,
+        (week & 0b00000100) >> 2,
+        (week & 0b00001000) >> 3,
+        (week & 0b00010000) >> 4,
+        (week & 0b00100000) >> 5,
+        (week & 0b01000000) >> 6,
+        (week & 0b10000000) >> 7,
+      ],
+      startTime,
+      endTime,
+      index: i % 6
+    });
+  }
+
+  return items;
+}
+
+export const randomTimeItemsToBase64 = (items: RandomTimeItem[]): string => {
+  const bytes = new Uint8Array(items.length * 6);
+
+  items.forEach((item, index) => {
+    const channelByte = (item.channel!! << 1) | (item.enable ? 1 : 0);
+    const week = item.weeks.reduce((acc, bit, i) => acc | (bit << i), 0);
+    const startTime = item.startTime;
+    const endTime = item.endTime;
+
+    const offset = index * 6;
+    bytes[offset] = channelByte;
+    bytes[offset + 1] = week;
+    bytes[offset + 2] = (startTime >> 8) & 0xFF;
+    bytes[offset + 3] = startTime & 0xFF;
+    bytes[offset + 4] = (endTime >> 8) & 0xFF;
+    bytes[offset + 5] = endTime & 0xFF;
+  });
+
+  return encodeBase64(bytes);
+}
+

package/src/modules/randomTimeForPlug/RandomTimeForPlugDetailPage.tsx

@@ -0,0 +1,268 @@
+import React, {useMemo} from 'react'
+import Page from "@ledvance/base/src/components/Page";
+import I18n from "@ledvance/base/src/i18n";
+import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import {TimerPicker, Utils} from "tuya-panel-kit";
+import {RandomTimeItem} from "./RandomTimeForPlugAction";
+import res from "@ledvance/base/src/res/index";
+import {useReactive} from "ahooks";
+import {useNavigation, useRoute} from '@react-navigation/core';
+import LdvTopName from "@ledvance/base/src/components/ldvTopName";
+import TextField from "@ledvance/base/src/components/TextField";
+import LdvWeekView from "@ledvance/base/src/components/weekSelect";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import {loopText, showDialog} from "@ledvance/base/src/utils/common";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import dayjs from "dayjs";
+import {cloneDeep, isEqual} from "lodash";
+import Summary from "./Summary";
+import {RandomTimeParam} from "./RandomTimeForPlugAction";
+import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+
+const {parseTimer} = Utils.TimeUtils
+const {convertX: cx} = Utils.RatioUtils;
+
+interface RandomTimeDetailParam extends RandomTimeParam {
+  mode: 'add' | 'edit',
+  item: RandomTimeItem,
+  onPost: (mode: 'add' | 'edit' | 'del', item: RandomTimeItem, goBack?: boolean) => Promise<void>
+}
+
+const newRandomTimeItem = (): RandomTimeItem => {
+  const startTime = dayjs().hour() * 60 + dayjs().minute()
+  return {
+    enable: true,
+    channel: 0,
+    weeks: [0, 0, 0, 0, 0, 0, 0, 0],
+    startTime: startTime,
+    endTime: startTime + 30
+  }
+}
+
+const RandomTimeForPlugDetailPage = () => {
+  const navigation = useNavigation()
+  const params = useRoute().params as RandomTimeDetailParam
+  const state = useReactive({
+    item: params.mode === 'add' ? newRandomTimeItem() : cloneDeep(params.item),
+    loading: false
+  })
+
+  const canSave = useMemo(() => {
+    return state.item.name && state.item.name.length < 33 && state.item.channel !== undefined
+  }, [state.item.name, state.item.channel])
+
+  const showConfirm = useMemo(() => {
+    return params.mode === 'edit' && !isEqual(state.item, params.item)
+  }, [JSON.stringify(state.item), JSON.stringify(params.item)])
+
+  const onSave = async () => {
+    if (!canSave) {
+      return
+    }
+    const timeInterval = state.item.endTime - state.item.startTime;
+    if (timeInterval >= 0 && timeInterval < 30) {
+      showDialog({
+        method: 'alert',
+        title: I18n.getLang('conflict_dialog_save_item_randomtimecycle_tips'),
+        subTitle: I18n.getLang('conflict_dialog_save_item_randomtimecycle_interval_description'),
+        onConfirm: async (_, { close }) => {
+          close()
+        }
+      })
+      return
+    }
+    await params.onPost(params.mode, cloneDeep(state.item), true);
+  }
+
+  const onDelete = () => {
+    return showDialog({
+      method: 'confirm',
+      title: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_titel'),
+      subTitle: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_description'),
+      onConfirm: async (_, {close}) => {
+        close()
+        await params.onPost('del', state.item, true)
+      }
+    })
+  }
+  return (
+    <Page
+      backText={I18n.getLang('randomtimecycle_sockets_headline_text')}
+      onBackClick={!showConfirm ? navigation.goBack : undefined}
+      rightButtonIcon={canSave ? res.ic_check : res.ic_uncheck}
+      rightButtonDisabled={state.loading}
+      loading={state.loading}
+      showBackDialog={showConfirm}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_delete_item_randomtimecycle_description')}
+      rightButtonIconClick={onSave}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <LdvTopName
+          title={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')}/>
+        <TextField
+          style={styles.cardContainer}
+          value={state.item.name}
+          showError={(state.item.name?.length || 0) > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.item.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor='#aeadb5'
+          style={{paddingVertical: cx(0), marginVertical: cx(0)}}
+          is12Hours={!params.is24Hour}
+          startTime={state.item.startTime}
+          endTime={state.item.endTime}
+          onTimerChange={(startTime, endTime) => {
+            state.item.startTime = startTime
+            state.item.endTime = endTime
+          }}/>
+        <LdvWeekView
+          value={state.item.weeks}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1
+            state.item.weeks[rawIndex] = state.item.weeks[rawIndex] === 1 ? 0 : 1
+          }}/>
+        <Spacer/>
+        <Text style={styles.cardContainer}>{loopText(state.item.weeks, parseTimer(state.item.startTime * 60))}</Text>
+        <Spacer/>
+        {/*Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+          <Spacer height={cx(10)}/>
+          <View style={styles.applyContent}>
+            {state.item.channel === undefined ?
+              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              <View style={[styles.applyItem, {marginBottom: cx(10), borderRadius: 4}]}>
+                <Text style={{color: '#000'}}>{params.channels[state.item.channel]}</Text>
+                {params.channels.length > 1 && <TouchableOpacity
+                    onPress={() => {
+                      state.item.channel = undefined
+                    }}
+                    style={{paddingHorizontal: cx(5)}}>
+                    <Image style={{width: cx(16), height: cx(16)}} source={res.ic_arrows_nav_clear}/>
+                </TouchableOpacity>}
+              </View>
+            }
+          </View>
+          {params.channels.map((item: string, index: number) => {
+            if (state.item.channel === index) {
+              return null
+            }
+            return (
+              <TouchableOpacity
+                style={styles.applyItem}
+                key={item}
+                onPress={() => {
+                  state.item.channel = index
+                }}
+              >
+                <Text style={{color: '#000'}}>{item}</Text>
+                <Image style={{width: cx(16), height: cx(16)}} source={res.device_panel_timer_add}/>
+              </TouchableOpacity>
+            )
+          })}
+        </View>
+        <Spacer/>
+        {/* summary */}
+        <Summary
+          frequency={loopText(state.item.weeks)}
+          time={params.is24Hour ?
+            `${parseTimer(state.item.startTime * 60)} - ${parseTimer(state.item.endTime * 60)}`
+            :
+            `${parseHour12(state.item.startTime * 60)} - ${parseHour12(state.item.endTime * 60)}`
+          }
+          hideActions={true}
+        />
+        <Spacer/>
+        {params.mode === 'edit' &&
+            <View style={{marginHorizontal: cx(24)}}>
+                <DeleteButton
+                    text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
+                    onPress={onDelete}/>
+            </View>
+        }
+        <Spacer/>
+      </ScrollView>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24)
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  applyContent: {
+    backgroundColor: '#f6f6f6',
+    borderRadius: 4,
+    minHeight: cx(55),
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: cx(10),
+    paddingTop: cx(10)
+  },
+  applyItem: {
+    paddingLeft: cx(5),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    height: cx(35),
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10)
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  summaryImg: {
+    width: cx(12),
+    height: cx(12),
+    marginRight: cx(6)
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000'
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    marginLeft: cx(21),
+    borderRadius: cx(16),
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+  rightTitle: {
+    paddingLeft: cx(12),
+    paddingRight: cx(12),
+    fontSize: cx(10),
+    textAlign: 'center',
+    alignSelf: 'flex-start'
+  },
+  filletCorner: {
+    flexDirection: 'row',
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    alignSelf: 'flex-start'
+  }
+})
+
+export default RandomTimeForPlugDetailPage

package/src/modules/randomTimeForPlug/RandomTimeForPlugPage.tsx

@@ -0,0 +1,192 @@
+import Page from "@ledvance/base/src/components/Page";
+import {useDeviceInfo} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {useNavigation, useRoute} from '@react-navigation/native'
+import I18n from "@ledvance/base/src/i18n/index";
+import res from "@ledvance/base/src/res/index";
+import {useReactive} from "ahooks";
+import React, {useCallback, useMemo} from "react";
+import {FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import {Utils} from "tuya-panel-kit";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+import {RandomTimeItem, RandomTimeParam, useRandomTime} from "./RandomTimeForPlugAction";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import ItemCard from "./ItemCard";
+import {cloneDeep} from "lodash";
+
+const {convertX: cx, topBarHeight} = Utils.RatioUtils;
+const MAX_NUM = 16
+
+const RandomTimeForPlugPage = () => {
+  const devInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const params = useRoute().params as RandomTimeParam
+  const [randomTimeList, setRandomTimeList] = useRandomTime()
+  const state = useReactive({
+    loading: false
+  })
+
+  const isMaxNum = useMemo(() => {
+    return randomTimeList.length >= MAX_NUM
+  }, [randomTimeList])
+
+  const onAddOrEditItem = (mode: 'add' | 'edit', item?: RandomTimeItem) => {
+    const path = ui_biz_routerKey.group_ui_biz_random_time_plug_detail
+    navigation.navigate(path, {
+      ...params,
+      mode,
+      item,
+      onPost
+    })
+  }
+
+  const onPost = useCallback(async (mode: 'add' | 'edit' | 'del', randomTime: RandomTimeItem, goBack?: boolean) => {
+    state.loading = true
+    const cloneRandomTimeList = cloneDeep(randomTimeList)
+    const idx = randomTimeList.findIndex(it => it.index === randomTime.index)
+    if (mode === 'edit') {
+      cloneRandomTimeList.splice(idx, 1, randomTime)
+    }
+    if (mode === 'del') cloneRandomTimeList.splice(idx, 1)
+    const newRandomTimeList = mode === 'add' ? [...randomTimeList, {
+      ...randomTime,
+      index: randomTimeList.length
+    }] : cloneRandomTimeList
+    const res = await setRandomTimeList(newRandomTimeList)
+    state.loading = false
+    if (res.success && goBack) {
+      navigation.goBack()
+    }
+  }, [randomTimeList])
+
+  const renderList = () => {
+    return (
+      <ScrollView nestedScrollEnabled={true}>
+        <Text style={{
+          color: '#000',
+          marginLeft: cx(24),
+        }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+        <Spacer height={cx(10)}/>
+        {isMaxNum && <View style={{marginHorizontal: cx(24), flexDirection: 'row'}}>
+            <Image style={{width: cx(16), height: cx(16), tintColor: '#ff9500'}} source={res.ic_warning_amber}/>
+            <Text>{I18n.getLang('fixedtimecycle_warning_max_number_text')}</Text>
+        </View>}
+        <FlatList
+          data={randomTimeList}
+          renderItem={({item}) => (
+            <ItemCard
+              item={item}
+              is24Hour={params.is24Hour}
+              onSwitch={async (v) => {
+                await onPost('edit', {
+                  ...item,
+                  enable: v,
+                })
+              }}
+              onPress={() => {
+                onAddOrEditItem('edit', item)
+              }}
+            />
+          )}
+          keyExtractor={(item: any) => `${item?.index}`}
+          ItemSeparatorComponent={() => <Spacer/>}
+          ListHeaderComponent={<Spacer height={cx(10)}/>}
+          ListFooterComponent={<Spacer/>}
+        />
+      </ScrollView>
+    )
+  }
+  const renderEmpty = () => {
+    return (
+      <View style={styles.emptyListCon}>
+        <Image
+          style={styles.emptyImage}
+          source={{uri: res.ldv_timer_empty}}
+          resizeMode="contain"/>
+        <View
+          style={{
+            marginHorizontal: cx(24),
+            marginTop: cx(30),
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <Image
+            source={{uri: res.device_panel_schedule_alert}}
+            style={{width: cx(16), height: cx(16)}}
+          />
+          <Text style={styles.emptyNoTime}>{I18n.getLang('randomtimecycle_empty_information_text')}</Text>
+        </View>
+        <View
+          style={{
+            height: cx(36),
+            width: cx(150),
+            marginVertical: cx(25),
+            marginHorizontal: cx(24),
+            borderRadius: cx(6),
+            backgroundColor: '#f60',
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              flex: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+            onPress={() => onAddOrEditItem('add')}
+          >
+            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: '#fff', textAlign: 'center'}}>
+              {I18n.getLang('randomtimecycle_empty_bttn_text')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    )
+  }
+  return (
+    <Page
+      backText={devInfo.name}
+      headlineText={I18n.getLang('randomtimecycle_sockets_headline_text')}
+      headlineIcon={!isMaxNum && res.device_panel_schedule_add || undefined}
+      onHeadlineIconClick={() => onAddOrEditItem('add')}
+      loading={state.loading}
+    >
+      {randomTimeList.length > 0 ? renderList() : renderEmpty()}
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  bg: {
+    marginTop: topBarHeight,
+    flex: 1,
+  },
+  emptyListCon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: cx(30),
+  },
+  emptyImage: {
+    width: cx(225),
+    height: cx(198)
+  },
+  emptyNoTime: {
+    fontSize: cx(12),
+    color: '#000'
+  },
+  emptyTimeTip: {
+    fontSize: cx(12),
+    lineHeight: cx(17),
+    marginTop: cx(6),
+    width: '76%',
+    textAlign: 'center'
+  },
+  listContainer: {
+    bottom: cx(74)
+  },
+  categoryList: {
+    marginHorizontal: cx(24),
+    marginBottom: cx(12),
+  },
+})
+
+export default RandomTimeForPlugPage