@ledvance/ui-biz-bundle 1.1.62 → 1.1.63

package/src/newModules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -42,6 +42,8 @@ import ManualSettings from './components/ManuaSettings';
 import { defDeviceData, defMixDeviceData, defStripDeviceData } from './TimeScheduleActions';
 import MoodItem from '../mood/MoodItem';
 import { getRemoteMoodList } from '../mood/MoodActions';
+import { MoodUIInfo } from '@ledvance/ui-biz-bundle/src/newModules/mood/Interface';
+import Summary from '@ledvance/base/src/components/Summary'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { toFixedString } = Utils.NumberUtils;
@@ -54,7 +56,7 @@ interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
   refreshFn: () => void;
 }
 
-const TimeScheduleDetailPage = (props: {theme?: any}) => {
+const TimeScheduleDetailPage = (props: { theme?: any }) => {
   const is24HourClock = useSystemTimeFormate();
   const params = useParams<TimeScheduleDetailPageParams>();
   const navigation = useNavigation();
@@ -73,7 +75,7 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
       params.mode === 'add'
         ? getDefaultManual(params)
         : params.manualDataDp2Obj(params.timeSchedule.dps).deviceData,
-    mood: undefined,
+    mood: params.mode === 'add' ? undefined : params.manualDataDp2Obj(params.timeSchedule.dps)?.mood,
     moods: cloneDeep(moods),
     timerId: undefined,
     moodName: '',
@@ -109,10 +111,10 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
       state.unSelectedSkill = [];
     } else {
       const selectedList = cloneApplyList.filter(item =>
-        Object.keys(timeSchedule.dps).includes(item.dp)
+        Object.keys(timeSchedule?.dps || {}).includes(item.dp)
       );
       const unSelectedList = cloneApplyList.filter(
-        item => !Object.keys(timeSchedule.dps).includes(item.dp)
+        item => !Object.keys(timeSchedule?.dps || {}).includes(item.dp)
       );
       state.selectedSkill = mode === 'add' ? [] : selectedList;
       state.unSelectedSkill = mode === 'add' ? cloneApplyList : unSelectedList;
@@ -134,7 +136,7 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
             if (!state.mood) state.mood = cloneDeep(res.data[0]);
           }
         });
-      }, 400);
+      }, 250);
       return () => {
         if (state.timerId) clearTimeout(state.timerId);
       };
@@ -167,18 +169,14 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
   }, []);
 
   const isModify = useMemo(() => {
-    if (params.mode === 'add') {
-      return true
-    }
-
-    const schedule = params.timeSchedule;
-    const manual = params.manualDataDp2Obj(params.timeSchedule?.dps).deviceData;
+    const schedule = params.mode === 'add' ? newTimeSchedule() : params.timeSchedule;
+    const manual = params.mode === 'add' ? getDefaultManual(params) : params.manualDataDp2Obj(params.timeSchedule?.dps).deviceData;
     const before = {
       ...schedule,
       selectedSkill: state.initSelectedSkill,
       dps: manual,
-      isManual: params.manualDataDp2Obj(params.timeSchedule.dps).isManual,
-      mood: params.manualDataDp2Obj(params.timeSchedule?.dps).mood,
+      isManual: params.mode === 'add' || params.manualDataDp2Obj(params.timeSchedule.dps).isManual,
+      mood: params.mode === 'add' ? undefined : params.manualDataDp2Obj(params.timeSchedule?.dps).mood,
       id: 1,
     };
 
@@ -187,24 +185,33 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
       selectedSkill: state.selectedSkill,
       dps: state.manualData,
       isManual: state.isManual,
-      mood: state.mood,
+      mood: state.isManual ? undefined : state.mood,
       id: 1,
     };
-    return !isEqual(before, now);
+    return isEqual(before, now);
   }, [JSON.stringify(state.timeSchedule), state.manualData, state.isManual, state.mood, JSON.stringify(state.selectedSkill)]);
 
+  const showMoodFanSelectText = useMemo(() => {
+    return (params.isUVCFan || params.isFanLight) && !state.isManual && state.selectedSkill.length < 2
+  }, [params.isUVCFan, params.isFanLight, state.selectedSkill.length, state.isManual])
+
   const allowSubmit = useMemo(() => {
     return (
       !!(state.timeSchedule.name.length && state.timeSchedule.name.length < 33) &&
       !!state.selectedSkill.length &&
-      (state.isManual ? true : state.mood) &&
-      isModify
+      (state.isManual || !!state.mood) &&
+      !isModify &&
+      !showMoodFanSelectText
     );
-  }, [state.timeSchedule.name, state.selectedSkill, isModify, state.isManual, state.mood]);
+  }, [state.timeSchedule.name, state.selectedSkill, isModify, state.isManual, state.mood, showMoodFanSelectText]);
 
   const showSelectedIcon = useMemo(() => {
-    return state.selectedSkill.length !== 1 && !params.applyForDisabled;
-  }, [state.selectedSkill.length, params.applyForDisabled]);
+    return params.applyForList.length !== 1 && !params.applyForDisabled;
+  }, [params.applyForList.length, params.applyForDisabled]);
+
+  const getMoodItemEnable = useCallback((item: MoodUIInfo) => {
+    return params.isCeilingLight ? ((item.mainLamp.id === state.mood?.mainLamp?.id) && (item.secondaryLamp.id === state.mood?.secondaryLamp?.id)) : item.id === state.mood?.id
+  }, [state.mood, params.isCeilingLight])
 
   const styles = StyleSheet.create({
     cardContainer: {
@@ -217,13 +224,13 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     applyContent: {
-      backgroundColor: props.theme.card.background,
+      backgroundColor: props.theme.card.board,
       borderRadius: 4,
       minHeight: cx(55),
       flex: 1,
       justifyContent: 'center',
-      paddingHorizontal: cx(10),
       paddingTop: cx(10),
+      paddingHorizontal: cx(10),
     },
     applyItem: {
       paddingLeft: cx(5),
@@ -259,14 +266,15 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
     },
     summaryRight: {
       flexDirection: 'column',
-      marginLeft: cx(21),
       backgroundColor: props.theme.card.background,
       borderRadius: cx(16),
       alignItems: 'center'
     },
+
     rightItem: {
       paddingHorizontal: cx(12),
       color: props.theme.global.fontColor,
+      fontSize: cx(14)
     },
     switchButton: {
       flexDirection: 'row',
@@ -276,6 +284,7 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
     },
     text: {
       color: props.theme.global.fontColor,
+      fontSize: cx(14)
     },
   });
 
@@ -354,7 +363,7 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
           }}
         />
         <Spacer />
-        <Text style={{...styles.cardContainer, color: props.theme.global.fontColor}}>{loopText(state.timeSchedule.loops.split(''))}</Text>
+        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>{loopText(state.timeSchedule.loops.split(''))}</Text>
         <Spacer height={cx(30)} />
 
         {/* Apply for */}
@@ -363,8 +372,8 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
             {I18n.getLang('timeschedule_add_schedule_subheadline_text')}
           </Text>
           <Spacer height={cx(10)} />
-          <View style={styles.applyContent}>
-            {params.applyForList.length === 0 ? (
+          <View style={[styles.applyContent, { paddingTop: state.selectedSkill.length ? cx(10) : 0 }]}>
+            {state.selectedSkill.length === 0 ? (
               <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text>
             ) : (
               state.selectedSkill.map(skill => (
@@ -372,7 +381,7 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
                   style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}
                   key={skill.dp}
                 >
-                  <Text style={{ color: props.theme.global.fontColor }}>{skill.key}</Text>
+                  <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{skill.key}</Text>
                   {showSelectedIcon && (
                     <TouchableOpacity
                       onPress={() => {
@@ -401,7 +410,7 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
                   state.unSelectedSkill = state.unSelectedSkill.filter(s => item.dp !== s.dp);
                 }}
               >
-                <Text style={{ color: props.theme.global.fontColor }}>{item.key}</Text>
+                <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{item.key}</Text>
                 <Image
                   style={{ width: cx(16), height: cx(16) }}
                   source={res.device_panel_timer_add}
@@ -429,6 +438,20 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
           </>
         )}
         <Spacer height={cx(10)} />
+        {(!state.selectedSkill.length && !showMoodFanSelectText) && <InfoText
+          style={{ marginHorizontal: cx(24) }}
+          icon={res.ic_warning_amber}
+          contentColor="#FF9500"
+          text={I18n.getLang('timeschedule_add_schedule_no_device_warning_text')}
+          textStyle={{fontSize: cx(12)}}
+        />}
+        {showMoodFanSelectText && <InfoText
+          style={{ marginHorizontal: cx(24) }}
+          icon={res.ic_warning_amber}
+          contentColor="#FF9500"
+          text={I18n.getLang('timeschedule_add_schedule_devicestate_sec_warning_text')}
+          textStyle={{fontSize: cx(12)}}
+        />}
         {state.isManual ? (
           <ManualSettings
             dps={state.dps}
@@ -439,9 +462,9 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
             isStripLight={params.isStripLight}
             manualData={state.manualData}
             onManualChange={manual => {
-              // @ts-ignore
               state.manualData = {
                 ...state.manualData,
+              // @ts-ignore
                 deviceData: cloneDeep(manual),
               };
             }}
@@ -450,16 +473,16 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
             }}
           />
         ) : (
-          <FlatList
+          !showMoodFanSelectText ? <FlatList
             data={state.moods}
             renderItem={({ item }) => {
               return (
                 <MoodItem
-                  enable={state.mood?.id === item.id}
+                  enable={getMoodItemEnable(item)}
                   mood={item}
                   isMix={!!(params.isMixLight || params.isCeilingLight)}
                   onSwitch={_ => {
-                    state.mood = item;
+                    state.mood = cloneDeep(item);
                   }}
                 />
               );
@@ -468,10 +491,7 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
             ItemSeparatorComponent={() => <Spacer />}
             ListFooterComponent={() => <Spacer />}
             keyExtractor={item => `${item.name}`}
-          />
-          // <ScrollView style={styles.moodScrollView} nestedScrollEnabled={true}>
-
-          // </ScrollView>
+          /> : <View></View>
         )}
         <Spacer />
 
@@ -491,108 +511,71 @@ const TimeScheduleDetailPage = (props: {theme?: any}) => {
         <Spacer />
 
         {/* summary */}
-        <Text style={[styles.itemTitle, styles.cardContainer]}>
-          {I18n.getLang('add_sleepschedule_one_source_subheadline4_text')}
-        </Text>
-        <Spacer height={cx(10)} />
-        <View style={styles.summaryContainer}>
-          <InfoText
-            icon={res.summary_icon1}
-            text={I18n.getLang('feature_summary_frequency_headline')}
-            iconStyle={styles.summaryImg}
-            textStyle={styles.leftTitle}
-            style={styles.summaryLeft}
-          />
-          <View style={styles.summaryRight}>
-            <Text style={styles.rightItem}>
-              {loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.summaryContainer}>
-          <InfoText
-            icon={res.summary_icon2}
-            text={I18n.getLang('feature_summary_time_headline')}
-            iconStyle={styles.summaryImg}
-            textStyle={styles.leftTitle}
-            style={styles.summaryLeft}
-          />
-          <View style={styles.summaryRight}>
-            <Text style={styles.rightItem}>
-              {is24HourClock
-                ? state.timeSchedule.time
-                : convertTo12HourFormat(state.timeSchedule.time)}
-            </Text>
-          </View>
-        </View>
-        <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
-          <InfoText
-            icon={res.summary_icon3}
-            text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
-            iconStyle={styles.summaryImg}
-            textStyle={styles.leftTitle}
-            style={styles.summaryLeft}
-          />
-          <View style={{ marginLeft: cx(16), flex: 1 }}>
+        <Summary
+          frequency={loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}
+          time={is24HourClock
+            ? state.timeSchedule.time
+            : convertTo12HourFormat(state.timeSchedule.time)}
+          actions={<View style={{ flex: 1 }}>
             {state.isManual
               ? !!state.selectedSkill.length && (
-              <>
-                {!!state.selectedSkill.filter(skill => skill.enable).length && (
-                  <>
-                    <Text style={{ marginLeft: cx(5), color: props.theme.global.fontColor }}>
-                      {I18n.getLang('feature_summary_action_txt_1')}
-                    </Text>
-                    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                      {state.selectedSkill
-                        .filter(skill => skill.enable)
-                        .map(item => (
-                          <View
-                            style={[
-                              styles.summaryRight,
-                              { marginLeft: cx(5), marginBottom: cx(5) },
-                            ]}
-                            key={item.dp}
-                          >
-                            <Text style={[styles.rightItem]}>{item.key}</Text>
-                          </View>
-                        ))}
-                    </View>
-                  </>
-                )}
+                <>
+                  {!!state.selectedSkill.filter(skill => skill.enable).length && (
+                    <>
+                      <Text style={{ fontSize: cx(14), color: '#000' }}>
+                        {I18n.getLang('feature_summary_action_txt_1')}
+                      </Text>
+                      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                        {state.selectedSkill
+                          .filter(skill => skill.enable)
+                          .map(item => (
+                            <View
+                              style={[
+                                styles.summaryRight,
+                                { marginRight: cx(5), marginBottom: cx(5) },
+                              ]}
+                              key={item.dp}
+                            >
+                              <Text style={[styles.rightItem]}>{item.key}</Text>
+                            </View>
+                          ))}
+                      </View>
+                    </>
+                  )}
 
-                {!!state.selectedSkill.filter(skill => !skill.enable).length && (
-                  <>
-                    <Text style={{ marginLeft: cx(5), color: props.theme.global.fontColor }}>
-                      {I18n.getLang('feature_summary_action_txt_2')}
-                    </Text>
-                    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                      {state.selectedSkill
-                        .filter(skill => !skill.enable)
-                        .map(item => (
-                          <View
-                            style={[
-                              styles.summaryRight,
-                              { marginLeft: cx(5), marginBottom: cx(5) },
-                            ]}
-                            key={item.dp}
-                          >
-                            <Text style={[styles.rightItem]}>{item.key}</Text>
-                          </View>
-                        ))}
-                    </View>
-                  </>
-                )}
-              </>
-            )
+                  {!!state.selectedSkill.filter(skill => !skill.enable).length && (
+                    <>
+                      <Text style={{ fontSize: cx(14) }}>
+                        {I18n.getLang('feature_summary_action_txt_2')}
+                      </Text>
+                      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                        {state.selectedSkill
+                          .filter(skill => !skill.enable)
+                          .map((item) => (
+                            <View
+                              style={[
+                                styles.summaryRight,
+                                { marginRight: cx(5), marginBottom: cx(5) },
+                              ]}
+                              key={item.dp}
+                            >
+                              <Text style={[styles.rightItem]}>{item.key}</Text>
+                            </View>
+                          ))}
+                      </View>
+                    </>
+                  )}
+                </>
+              )
               : !!state.moodName && (
-              <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                <View style={[styles.summaryRight, { marginLeft: cx(5) }]}>
-                  <Text style={styles.rightItem}>{state.moodName}</Text>
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                  <View style={[styles.summaryRight, { marginLeft: cx(5) }]}>
+                    <Text style={styles.rightItem}>{state.moodName}</Text>
+                  </View>
                 </View>
-              </View>
-            )}
-          </View>
-        </View>
+              )}
+          </View>}
+        />
         <Spacer height={cx(30)} />
 
         {/* delete */}
@@ -643,6 +626,8 @@ const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig
       ? DeviceType.StripLight
       : props.isMixLight
         ? DeviceType.MixLight
+        : props.isPowerStrip
+        ? DeviceType.PowerStrip
         : DeviceType.LightSource;
   const deviceData =
     deviceType === DeviceType.StripLight

package/src/newModules/timeSchedule/TimeSchedulePage.tsx

@@ -19,6 +19,8 @@ import { getTimeSchedule, manageTimeSchedule } from './TimeScheduleActions';
 import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import ScheduleCard from './components/ScheduleCard';
 import { ui_biz_routerKey } from '../../navigation/Routers';
+import Tag from '@ledvance/base/src/components/Tag';
+import { cloneDeep } from 'lodash';
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
@@ -34,26 +36,17 @@ export interface TimeSchedulePageParams {
   isMatterLight?: boolean;
   isCeilingLight?: boolean;
   isMixLight?: boolean;
-  isSupportFan?: boolean;
-  isSupportUVC?: boolean;
-  switchLedCode?: string;
-  switchFan?: string;
-  fanModeCode?: string;
-  fanSpeedCode?: string;
-  workModeCode: string;
-  brightValueCode?: string;
+  isFanLight?: boolean;
+  isUVCFan?: boolean;
+  isPowerStrip?: boolean
   featureId?: string
   applyForList: ApplyForItem[];
   applyForDisabled: boolean; // 是否可以选择apply for
   manualDataDp2Obj: (dps: Record<string, any>) => DeviceStateType;
   manualDataObj2Dp: (deviceState: DeviceStateType, applyForList: ApplyForItem[]) => Record<string, any>;
-  tempValueCode?: string;
-  sceneDataCode?: string;
-  colorDataCode?: string;
-  drawToolDataCode?: string;
 }
 
-const TimeSchedulePage = (props: {theme?: any}) => {
+const TimeSchedulePage = (props: { theme?: any }) => {
   const deviceInfo = useDeviceInfo();
   const devId = useDeviceId();
   const navigation = useNavigation();
@@ -61,42 +54,53 @@ const TimeSchedulePage = (props: {theme?: any}) => {
   const params = useParams<TimeSchedulePageParams>();
   const state = useReactive({
     timeScheduleList: [] as Timer[],
+    originList: [] as Timer[],
     flag: Symbol(),
     loading: false,
+    checkTags: params.applyForList.map(v => ({ ...v, enable: false }))
   });
 
-  const isMaxSchedule = useMemo(() => state.timeScheduleList.length >= MAX_NUM, [
-    state.timeScheduleList,
+  const isMaxSchedule = useMemo(() => state.originList.length >= MAX_NUM, [
+    state.originList,
   ]);
 
   useUpdateEffect(() => {
-    const status = state.timeScheduleList.some(item => item.enable);
+    const status = state.originList.some(item => item.enable);
     if (status !== timeScheduleStatus) {
       setTimeScheduleStatus(status);
     }
-  }, [JSON.stringify(state.timeScheduleList)]);
+  }, [JSON.stringify(state.originList)]);
 
   useEffect(() => {
     getTimeSchedule(devId).then(res => {
-      state.timeScheduleList = res;
+      state.originList = cloneDeep(res)
     });
   }, [state.flag]);
 
+  useUpdateEffect(() => {
+    const isAll = state.checkTags.every(tag => tag.enable) || state.checkTags.every(tag => !tag.enable)
+    const checkedList = state.originList.filter(item => {
+      const checked = state.checkTags.find(tag => tag.enable && item.dps.hasOwnProperty(tag.dp))
+      return isAll || !!checked
+    })
+    state.timeScheduleList = cloneDeep(checkedList)
+  }, [JSON.stringify(state.checkTags), JSON.stringify(state.originList)])
+
   const modDeleteTimeSchedule = async (mode: TimerActions, timeSchedule: Timer) => {
     const res = await manageTimeSchedule(devId, timeSchedule, mode);
     if (res.success) {
       if (mode === 'add') {
         state.flag = Symbol();
       } else {
-        state.timeScheduleList =
+        state.originList =
           mode === 'update'
-            ? state.timeScheduleList.map(item => {
+            ? state.originList.map(item => {
               if (item.id === timeSchedule.id) {
                 return timeSchedule;
               }
               return item;
             })
-            : state.timeScheduleList.filter(item => item.id !== timeSchedule.id);
+            : state.originList.filter(item => item.id !== timeSchedule.id);
       }
       return {
         success: true,
@@ -139,8 +143,32 @@ const TimeSchedulePage = (props: {theme?: any}) => {
       paddingHorizontal: cx(16),
       backgroundColor: props.theme.button.active,
     },
+    categoryList: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      marginHorizontal: cx(24),
+      alignSelf: 'flex-start'
+    },
   });
 
+  const showTags = useMemo(() => (
+    <View style={styles.categoryList}>
+      {state.checkTags.map((tag, idx) => (
+        <Tag
+          key={tag.key}
+          text={tag.key}
+          checked={tag.enable}
+          onCheckedChange={(v) => {
+            state.checkTags[idx].enable = v
+            state.checkTags = cloneDeep(state.checkTags)
+          }}
+          style={{ marginRight: cx(5), marginBottom: cx(5) }}
+        />
+      ))}
+    </View>
+  ), [state.checkTags])
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -166,11 +194,14 @@ const TimeSchedulePage = (props: {theme?: any}) => {
             iconStyle={{ tintColor: props.theme.global.warning }}
           />
         )}
-        <FlatList
+        {params.applyForList.length > 1 && !!state.originList.length && showTags}
+        {state.timeScheduleList.length > 0 ? <FlatList
           data={state.timeScheduleList}
           renderItem={({ item }) => (
             <ScheduleCard
               item={item}
+              tags={params.applyForList}
+              showTag={params.applyForList.length > 1}
               onEnableChange={async enable => {
                 state.loading = true;
                 await modDeleteTimeSchedule('update', {
@@ -185,36 +216,35 @@ const TimeSchedulePage = (props: {theme?: any}) => {
             />
           )}
           keyExtractor={item => item.id.toString()}
-          ListEmptyComponent={() => (
-            <View style={styles.emptyContainer}>
-              <Spacer height={cx(60)} />
-              <Image
-                style={styles.emptyImage}
-                source={{ uri: res.ldv_timer_empty }}
-                resizeMode="contain"
-              />
-              <InfoText
-                icon={res.device_panel_schedule_alert}
-                text={I18n.getLang('timeschedule_overview_empty_information_text')}
-                style={{ width: 'auto', alignItems: 'center' }}
-                textStyle={{ color: props.theme.global.fontColor, flex: undefined }}
-                iconStyle={{ tintColor: props.theme.global.fontColor }}
-              />
-              <Spacer height={cx(16)} />
-              <DeleteButton
-                style={styles.addBtn}
-                text={`${I18n.getLang('timeschedule_overview_empty_button_add_text')}`}
-                textStyle={{ fontSize: cx(12) }}
-                onPress={() => {
-                  navigateToEdit('add');
-                }}
-              />
-            </View>
-          )}
+          ListEmptyComponent={<Spacer />}
           ListHeaderComponent={() => <Spacer height={cx(10)} />}
           ItemSeparatorComponent={() => <Spacer />}
           ListFooterComponent={() => <Spacer height={cx(30)} />}
-        />
+        /> :
+          <View style={styles.emptyContainer}>
+            <Spacer height={cx(60)} />
+            <Image
+              style={styles.emptyImage}
+              source={{ uri: res.ldv_timer_empty }}
+              resizeMode="contain"
+            />
+            <InfoText
+              icon={res.device_panel_schedule_alert}
+              text={I18n.getLang(!state.originList.length ? 'timeschedule_overview_empty_information_text' : 'sleepwakeschedule_empty_filtering_information_text')}
+              style={{ width: 'auto', alignItems: 'center' }}
+              textStyle={{ color: props.theme.global.fontColor, flex: undefined }}
+              iconStyle={{ tintColor: props.theme.global.fontColor }}
+            />
+            <Spacer height={cx(16)} />
+            {!state.originList.length && <DeleteButton
+              style={styles.addBtn}
+              text={`${I18n.getLang('timeschedule_overview_empty_button_add_text')}`}
+              textStyle={{ fontSize: cx(12) }}
+              onPress={() => {
+                navigateToEdit('add');
+              }}
+            />}
+          </View>}
       </ScrollView>
     </Page>
   );