@ledvance/ui-biz-bundle 1.1.70 → 1.1.72

package/src/newModules/mood/MoodPage.tsx

@@ -1,386 +1,402 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import Page from '@ledvance/base/src/components/Page';
-import { Utils } from 'tuya-panel-kit';
-import { saveMoodList, useWorkMode } from './MoodActions';
-import {
-  useDeviceId,
-  useDeviceInfo,
-  useFlagMode,
-  useMoods,
-} from '@ledvance/base/src/models/modules/NativePropsSlice';
-import { useReactive } from 'ahooks';
-import Strings from '@ledvance/base/src/i18n';
-import res from '@ledvance/base/src/res';
-import { FlatList, StyleSheet, View, Platform } from 'react-native';
-import Tag from '@ledvance/base/src/components/Tag';
-import Spacer from '@ledvance/base/src/components/Spacer';
-import InfoText from '@ledvance/base/src/components/InfoText';
-import CustomListDialog from '@ledvance/base/src/components/CustomListDialog';
-import MoodItem from './MoodItem';
-import { useNavigation } from '@react-navigation/core';
-import { MoodPageParams, MoodPageState, MoodUIInfo } from './Interface';
-import { getRemoteMoodList, useMoodScene } from './MoodActions';
-import { useParams } from '@ledvance/base/src/hooks/Hooks';
-import { ui_biz_routerKey } from '../../navigation/Routers'
-import { cloneDeep, filter, map } from 'lodash';
-import { saveFlagMode } from '@ledvance/ui-biz-bundle/src/modules/flags/FlagActions';
-import { WorkMode } from '@ledvance/base/src/utils/interface';
-
-const cx = Utils.RatioUtils.convertX;
-
-const MAX_MOOD_COUNT = 255;
-
-const MoodPage = () => {
-  const params = useParams<MoodPageParams>();
-  const deviceInfo = useDeviceInfo();
-  const devId = useDeviceId();
-  const navigation = useNavigation();
-  const [moodInfo, setMoodInfo] = useMoodScene(params);
-  const [moods, setMoods] = useMoods();
-  const [mainWork, setMainWork] = useWorkMode(params.mainWorkMode);
-  const [secondaryWork, setSecondaryWork] = useWorkMode(params.secondaryWorkMode!);
-  const [flagMode, setFlagMode] = useFlagMode();
-  const state = useReactive<MoodPageState>({
-    currentMood: undefined,
-    staticTagChecked: true,
-    dynamicTagChecked: true,
-    showAddMoodPopover: false,
-    originMoods: cloneDeep(moods),
-    filterMoods: [],
-    loading: false,
-    timerId: undefined as any,
-    flag: Symbol(),
-  });
-
-  const moodIds = useMemo(() => {
-    const mainIds = map(state.originMoods, 'id').filter(v => v !== undefined)
-    const secondaryIds = map(state.originMoods.map(m => m.secondaryLamp) || [], 'id')
-    return filter([...mainIds, ...secondaryIds], v => v !== undefined) as number[]
-  }, [JSON.stringify(state.originMoods)])
-  
-  useEffect(() => {
-    state.loading = true 
-    state.timerId = setTimeout(() => {
-      getRemoteMoodList(
-        devId,
-        params,
-        params.featureId
-      ).then(res => {
-        state.loading = false 
-        if (res.success && Array.isArray(res.data)) {
-          console.log(res.data, '< --- res.data')
-          state.originMoods = cloneDeep(res.data);
-        }
-      });
-    }, 250);
-
-    return () => {
-      clearTimeout(state.timerId);
-    };
-  }, []);
-
-  useEffect(() => {
-    state.filterMoods = state.originMoods.filter(item => {
-      return (
-        (state.staticTagChecked && state.dynamicTagChecked) ||
-        (!state.staticTagChecked && !state.dynamicTagChecked) ||
-        (state.staticTagChecked && item.mainLamp.nodes.length < 2) ||
-        (state.dynamicTagChecked &&
-          (item.secondaryLamp.nodes.length > 1 || item.mainLamp.nodes.length > 1))
-      );
-    });
-  }, [state.staticTagChecked, state.dynamicTagChecked, state.originMoods]);
-
-  const navigationRoute = (isStatic: boolean, mode: 'add' | 'edit', currentMood?: MoodUIInfo) => {
-    const path =
-      mode === 'add'
-        ? ui_biz_routerKey.ui_biz_mood_add
-        : isStatic
-        ? ui_biz_routerKey.ui_biz_static_mood_edit
-        : !!(params.isMixLight || params.isCeilingLight)
-        ? ui_biz_routerKey.ui_biz_dynamic_mix_mood_edit
-        : ui_biz_routerKey.ui_biz_dynamic_mood_edit;
-    navigation.navigate(path, {
-      mode,
-      isStatic,
-      currentMood,
-      moduleParams: params,
-      moodIds,
-      nameRepeat,
-      modDeleteMood,
-    });
-  };
-
-  const modDeleteMood = async (mode: 'add' | 'edit' | 'del' | 'set', currentMood: MoodUIInfo) => {
-    const checkedMood: MoodUIInfo = {
-      ...currentMood,
-      mainLamp: {
-        ...currentMood.mainLamp,
-        nodes: currentMood.mainLamp.nodes.map(node => {
-          if (mode !== 'del') {
-            if (node.isColorNode) {
-              node.brightness = 0;
-              node.colorTemp = 0;
-            } else {
-              node.h = 0;
-              node.s = 0;
-              node.v = 0;
-              if (!params.isSupportTemperature) {
-                node.colorTemp = 100; // 适配dim灯
-              }
-            }
-            return node;
-          }
-          return node;
-        }),
-      },
-      secondaryLamp: {
-        ...currentMood.secondaryLamp,
-        nodes: currentMood.secondaryLamp && currentMood.secondaryLamp.nodes?.length
-          ? currentMood.secondaryLamp.nodes.map(node => {
-              if (mode !== 'del') {
-                if (node.isColorNode) {
-                  node.brightness = 0;
-                  node.colorTemp = 0;
-                } else {
-                  node.h = 0;
-                  node.s = 0;
-                  node.v = 0;
-                  if (!params.isSupportTemperature) {
-                    node.colorTemp = 100; // 适配dim灯
-                  }
-                }
-                return node;
-              }
-              return node;
-            })
-          : [],
-      },
-    };
-    if (mode === 'set') {
-      return setMoodInfo(checkedMood);
-    }
-    let newScene: MoodUIInfo[] = [];
-    if (mode === 'add') {
-      newScene = [checkedMood, ...state.originMoods];
-    } else if (mode === 'del') {
-      newScene = state.originMoods.filter(item => item.id !== checkedMood.id);
-    } else {
-      newScene = state.originMoods.map(item => {
-        if (item.id === checkedMood.id) {
-          return checkedMood;
-        }
-        return item;
-      });
-    }
-    const mood = mode === 'del' ? (newScene.length === 0 ? undefined : newScene[0]) : checkedMood;
-    const res = await saveMoodList(devId, newScene, params, params.featureId);
-    if (res.success) {
-      state.originMoods = cloneDeep(newScene);
-      setMoods(cloneDeep(newScene));
-      updateFlagMode();
-      if (mood) {
-        if (mode === 'del') {
-          if (
-            (mainWork !== WorkMode.Scene && secondaryWork !== WorkMode.Scene) ||
-            (params.isCeilingLight
-              ? currentMood.mainLamp.id !== moodInfo.mainLamp.id &&
-                currentMood.secondaryLamp.id !== moodInfo.secondaryLamp.id
-              : currentMood.id !== moodInfo.id)
-          ) {
-            return {
-              success: true,
-            };
-          }
-        }
-        setMoodInfo(mood).then();
-      } else {
-        if (mainWork === WorkMode.Scene) {
-          if (params.isCeilingLight) {
-            setMainWork(WorkMode.White).then();
-          } else {
-            const work = getWorkMode(undefined, params);
-            setMainWork(work).then();
-          }
-        }
-        if (params.isCeilingLight && params.secondaryWorkMode && secondaryWork === WorkMode.Scene) {
-          setSecondaryWork(WorkMode.Colour).then();
-        }
-      }
-      return {
-        success: true,
-      };
-    } else {
-      return {
-        success: false,
-      };
-    }
-  };
-
-  function getWorkMode(mood: MoodUIInfo | undefined, params: MoodPageParams): WorkMode {
-    if (mood) return WorkMode.Scene;
-    if (params.isFanLight || params.isUVCFan) return WorkMode.Control;
-    if (params.isSupportColor) return WorkMode.Colour;
-    return WorkMode.White;
-  }
-
-  const updateFlagMode = () => {
-    if (flagMode?.flagMode) {
-      saveFlagMode(
-        devId,
-        JSON.stringify({
-          flagMode: false,
-          flagId: undefined,
-        })
-      ).then();
-      setFlagMode({
-        flagMode: false,
-        flagId: undefined,
-      });
-    }
-  };
-
-  const onAddMoodDialogItemClick = useCallback(
-    (isStatic: boolean, _: number) => {
-      if (!!state.originMoods) {
-        navigationRoute(isStatic, 'add');
-      }
-      state.showAddMoodPopover = false;
-    },
-    [state.originMoods]
-  );
-
-  const getItemEnable = useCallback(
-    (moodItem: MoodUIInfo) => {
-      if (params.isCeilingLight) {
-        return (
-          moodInfo.mainLamp.id === moodItem.mainLamp.id &&
-          moodInfo.secondaryLamp.id === moodItem.secondaryLamp.id &&
-          (mainWork === WorkMode.Scene || secondaryWork === WorkMode.Scene)
-        );
-      } else {
-        return moodInfo.id === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode;
-      }
-    },
-    [moodInfo, mainWork]
-  );
-
-  const nameRepeat = useCallback((mood: MoodUIInfo) => {
-    return !!state.originMoods.filter(m => !(params.isCeilingLight ? (m.mainLamp.id === mood.mainLamp.id && m.secondaryLamp.id === mood.secondaryLamp.id) : (m.id === mood.id))).find(m => m.name === mood.name)
-  }, [state.originMoods, params.isCeilingLight])
-
-  return (
-    <>
-      <Page
-        backText={deviceInfo.name}
-        headlineText={Strings.getLang('mood_overview_headline_text')}
-        headlineIcon={state.originMoods.length < MAX_MOOD_COUNT ? res.add : undefined}
-        onHeadlineIconClick={() => {
-          if (params.isStringLight || params.isStripLight) {
-            onAddMoodDialogItemClick(false, 1);
-          } else {
-            state.showAddMoodPopover = !state.showAddMoodPopover;
-          }
-        }}
-        loading={state.loading}
-      >
-        <View style={styles.tagLine}>
-          <Tag
-            checked={state.staticTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text1')}
-            onCheckedChange={checked => {
-              state.staticTagChecked = checked;
-            }}
-          />
-          <Spacer width={cx(8)} height={0} />
-          <Tag
-            checked={state.dynamicTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text2')}
-            onCheckedChange={checked => {
-              state.dynamicTagChecked = checked;
-            }}
-          />
-        </View>
-        <Spacer height={cx(10)} />
-        {state.originMoods.length >= MAX_MOOD_COUNT && (
-          <View style={styles.infoLine}>
-            <Spacer height={cx(10)} />
-            <InfoText
-              icon={res.ic_warning_amber}
-              text={Strings.getLang('mood_overview_warning_max_number_text')}
-              contentColor={'#ff9500'}
-            />
-            <Spacer height={cx(6)} />
-          </View>
-        )}
-        <FlatList
-          data={state.filterMoods}
-          renderItem={({ item }) => {
-            return (
-              <MoodItem
-                enable={getItemEnable(item)}
-                isMix={!!(params.isMixLight || params.isCeilingLight)}
-                mood={item}
-                onPress={() => {
-                  navigationRoute(item.mainLamp.nodes.length === 1, 'edit', item);
-                }}
-                onSwitch={async _ => {
-                  state.loading = true;
-                  await modDeleteMood('set', item);
-                  updateFlagMode();
-                  state.loading = false;
-                }}
-              />
-            );
-          }}
-          ListHeaderComponent={() => <Spacer height={cx(10)} />}
-          ItemSeparatorComponent={() => <Spacer />}
-          ListFooterComponent={() => <Spacer />}
-          keyExtractor={item => `${item.name}`}
-        />
-      </Page>
-      <CustomListDialog
-        show={state.showAddMoodPopover}
-        style={styles.addMoodPopover}
-        itemStyle={styles.popoverItem}
-        onDismiss={() => {
-          state.showAddMoodPopover = false;
-        }}
-        data={[
-          {
-            text: Strings.getLang('mood_overview_add_mood_text'),
-            value: true,
-          },
-          {
-            text: Strings.getLang('mood_overview_add_mood_text2'),
-            value: false,
-          },
-        ]}
-        onItemPress={onAddMoodDialogItemClick}
-      />
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  tagLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(24),
-  },
-  infoLine: {
-    marginHorizontal: cx(24),
-  },
-  addMoodPopover: {
-    position: 'absolute',
-    right: cx(60),
-    top: Platform.OS === 'android' ? cx(90) : cx(130),
-    maxWidth: cx(200),
-    backgroundColor: '#fff',
-  },
-  popoverItem: {
-    padding: cx(5),
-    alignItems: 'flex-start',
-  },
-});
-
-export default MoodPage;
+import React, { useCallback, useEffect, useMemo } from 'react';
+import Page from '@ledvance/base/src/components/Page';
+import { Utils } from 'tuya-panel-kit';
+import { saveMoodList, useSwitchLed, useWorkMode } from './MoodActions';
+import {
+  useDeviceId,
+  useDeviceInfo,
+  useFlagMode,
+  useMoods,
+} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { useReactive, useUpdateEffect } from 'ahooks';
+import Strings from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import { FlatList, StyleSheet, View, Platform } from 'react-native';
+import Tag from '@ledvance/base/src/components/Tag';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import InfoText from '@ledvance/base/src/components/InfoText';
+import CustomListDialog from '@ledvance/base/src/components/CustomListDialog';
+import MoodItem from './MoodItem';
+import { useNavigation } from '@react-navigation/core';
+import { MoodPageParams, MoodPageState, MoodUIInfo } from './Interface';
+import { getRemoteMoodList, useMoodScene } from './MoodActions';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { cloneDeep, filter, map } from 'lodash';
+import { saveFlagMode } from '@ledvance/ui-biz-bundle/src/modules/flags/FlagActions';
+import { WorkMode } from '@ledvance/base/src/utils/interface';
+
+const cx = Utils.RatioUtils.convertX;
+
+const MAX_MOOD_COUNT = 255;
+
+const MoodPage = () => {
+  const params = useParams<MoodPageParams>();
+  const deviceInfo = useDeviceInfo();
+  const devId = useDeviceId();
+  const navigation = useNavigation();
+  const [moodInfo, setMoodInfo] = useMoodScene(params);
+  const [moods, setMoods] = useMoods();
+  const [mainWork, setMainWork] = useWorkMode(params.mainWorkMode);
+  const [secondaryWork, setSecondaryWork] = useWorkMode(params.secondaryWorkMode!);
+  const [switchLed] = useSwitchLed(params.switchLedDp)
+  const [flagMode, setFlagMode] = useFlagMode();
+  
+  const state = useReactive<MoodPageState>({
+    currentMood: undefined,
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    showAddMoodPopover: false,
+    originMoods: cloneDeep(moods),
+    filterMoods: [],
+    loading: false,
+    timerId: undefined as any,
+    flag: Symbol(),
+  });
+
+  const moodIds = useMemo(() => {
+    const mainIds = map(state.originMoods, 'id').filter(v => v !== undefined)
+    const secondaryIds = map(state.originMoods.map(m => m.secondaryLamp) || [], 'id')
+    return filter([...mainIds, ...secondaryIds], v => v !== undefined) as number[]
+  }, [JSON.stringify(state.originMoods)])
+  
+  useEffect(() => {
+    state.loading = true 
+    state.timerId = setTimeout(() => {
+      getRemoteMoodList(
+        devId,
+        params,
+        params.featureId
+      ).then(res => {
+        state.loading = false 
+        if (res.success && Array.isArray(res.data)) {
+          console.log(res.data, ' <--- res.data')
+          state.originMoods = cloneDeep(res.data);
+        }
+      });
+    }, 250);
+
+    return () => {
+      clearTimeout(state.timerId);
+    };
+  }, []);
+
+  useEffect(() => {
+    state.filterMoods = state.originMoods.filter(item => {
+      return (
+        (state.staticTagChecked && state.dynamicTagChecked) ||
+        (!state.staticTagChecked && !state.dynamicTagChecked) ||
+        (state.staticTagChecked && item.mainLamp.nodes.length < 2) ||
+        (state.dynamicTagChecked &&
+          (item.secondaryLamp.nodes.length > 1 || item.mainLamp.nodes.length > 1))
+      );
+    });
+  }, [state.staticTagChecked, state.dynamicTagChecked, state.originMoods]);
+
+  const navigationRoute = (isStatic: boolean, mode: 'add' | 'edit', currentMood?: MoodUIInfo) => {
+    const path =
+      mode === 'add'
+        ? ui_biz_routerKey.ui_biz_mood_add
+        : isStatic
+        ? ui_biz_routerKey.ui_biz_static_mood_edit
+        : !!(params.isMixLight || params.isCeilingLight)
+        ? ui_biz_routerKey.ui_biz_dynamic_mix_mood_edit
+        : ui_biz_routerKey.ui_biz_dynamic_mood_edit;
+    navigation.navigate(path, {
+      mode,
+      isStatic,
+      currentMood,
+      moduleParams: params,
+      moodIds,
+      nameRepeat,
+      modDeleteMood,
+    });
+  };
+
+  const modDeleteMood = async (mode: 'add' | 'edit' | 'del' | 'set', currentMood: MoodUIInfo) => {
+    const checkedMood: MoodUIInfo = {
+      ...currentMood,
+      mainLamp: {
+        ...currentMood.mainLamp,
+        nodes: currentMood.mainLamp.nodes.map(node => {
+          if (mode !== 'del') {
+            if (node.isColorNode) {
+              node.brightness = 0;
+              node.colorTemp = 0;
+            } else {
+              node.h = 0;
+              node.s = 0;
+              node.v = 0;
+              if (!params.isSupportTemperature) {
+                node.colorTemp = 100; // 适配dim灯
+              }
+            }
+            return node;
+          }
+          return node;
+        }),
+      },
+      secondaryLamp: {
+        ...currentMood.secondaryLamp,
+        nodes: currentMood.secondaryLamp && currentMood.secondaryLamp.nodes?.length
+          ? currentMood.secondaryLamp.nodes.map(node => {
+              if (mode !== 'del') {
+                if (node.isColorNode) {
+                  node.brightness = 0;
+                  node.colorTemp = 0;
+                } else {
+                  node.h = 0;
+                  node.s = 0;
+                  node.v = 0;
+                  if (!params.isSupportTemperature) {
+                    node.colorTemp = 100; // 适配dim灯
+                  }
+                }
+                return node;
+              }
+              return node;
+            })
+          : [],
+      },
+    };
+    if (mode === 'set') {
+      return setMoodInfo(checkedMood);
+    }
+    let newScene: MoodUIInfo[] = [];
+    if (mode === 'add') {
+      newScene = [checkedMood, ...state.originMoods];
+    } else if (mode === 'del') {
+      if (params.isCeilingLight) {
+        newScene = state.originMoods.filter(item => (item.mainLamp.id !== checkedMood.mainLamp.id) || (item.secondaryLamp.id !== checkedMood.secondaryLamp.id))
+      } else {
+        newScene = state.originMoods.filter(item => item.id !== checkedMood.id);
+      }
+    } else {
+      if (params.isCeilingLight) {
+        newScene = state.originMoods.map(item => {
+          if (item.mainLamp.id === checkedMood.mainLamp.id && item.secondaryLamp.id === checkedMood.secondaryLamp.id) {
+            return checkedMood;
+          }
+          return item;
+        });
+      } else {
+        newScene = state.originMoods.map(item => {
+          if (item.id === checkedMood.id) {
+            return checkedMood;
+          }
+          return item;
+        });
+      }
+    }
+    const mood = mode === 'del' ? (newScene.length === 0 ? undefined : newScene[0]) : checkedMood;
+    const res = await saveMoodList(devId, newScene, params, params.featureId);
+    if (res.success) {
+      state.originMoods = cloneDeep(newScene);
+      setMoods(cloneDeep(newScene));
+      updateFlagMode();
+      if (mood) {
+        if (mode === 'del') {
+          if (
+            (mainWork !== WorkMode.Scene && secondaryWork !== WorkMode.Scene) ||
+            (params.isCeilingLight
+              ? currentMood.mainLamp.id !== moodInfo.mainLamp.id &&
+                currentMood.secondaryLamp.id !== moodInfo.secondaryLamp.id
+              : currentMood.id !== moodInfo.id) || !switchLed
+          ) {
+            return {
+              success: true,
+            };
+          }
+        }
+        setMoodInfo(mood).then();
+      } else {
+        if (mainWork === WorkMode.Scene) {
+          if (params.isCeilingLight) {
+            setMainWork(WorkMode.White).then();
+          } else {
+            const work = getWorkMode(undefined, params);
+            setMainWork(work).then();
+          }
+        }
+        if (params.isCeilingLight && params.secondaryWorkMode && secondaryWork === WorkMode.Scene) {
+          setSecondaryWork(WorkMode.Colour).then();
+        }
+      }
+      return {
+        success: true,
+      };
+    } else {
+      return {
+        success: false,
+      };
+    }
+  };
+
+  function getWorkMode(mood: MoodUIInfo | undefined, params: MoodPageParams): WorkMode {
+    if (mood) return WorkMode.Scene;
+    if (params.isFanLight || params.isUVCFan) return WorkMode.Control;
+    if (params.isSupportColor) return WorkMode.Colour;
+    return WorkMode.White;
+  }
+
+  const updateFlagMode = () => {
+    if (flagMode?.flagMode) {
+      saveFlagMode(
+        devId,
+        JSON.stringify({
+          flagMode: false,
+          flagId: undefined,
+        })
+      ).then();
+      setFlagMode({
+        flagMode: false,
+        flagId: undefined,
+      });
+    }
+  };
+
+  const onAddMoodDialogItemClick = useCallback(
+    (isStatic: boolean, _: number) => {
+      if (!!state.originMoods) {
+        navigationRoute(isStatic, 'add');
+      }
+      state.showAddMoodPopover = false;
+    },
+    [state.originMoods]
+  );
+
+  const getItemEnable = useCallback(
+    (moodItem: MoodUIInfo) => {
+      if (params.isCeilingLight) {
+        return (
+          moodInfo.mainLamp.id === moodItem.mainLamp.id &&  
+          moodInfo.secondaryLamp.id === moodItem.secondaryLamp.id &&
+          (mainWork === WorkMode.Scene || secondaryWork === WorkMode.Scene) && !flagMode.flagMode && switchLed
+        );
+      } else {
+        return moodInfo.id === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode && switchLed
+      }
+    },
+    [moodInfo, mainWork, secondaryWork, flagMode?.flagMode, switchLed]
+  );
+
+  const nameRepeat = useCallback((mood: MoodUIInfo) => {
+    return !!state.originMoods.filter(m => !(params.isCeilingLight ? (m.mainLamp.id === mood.mainLamp.id && m.secondaryLamp.id === mood.secondaryLamp.id) : (m.id === mood.id))).find(m => m.name === mood.name)
+  }, [state.originMoods, params.isCeilingLight])
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        headlineText={Strings.getLang('mood_overview_headline_text')}
+        headlineIcon={state.originMoods.length < MAX_MOOD_COUNT ? res.add : undefined}
+        onHeadlineIconClick={() => {
+          if (params.isStringLight || params.isStripLight) {
+            onAddMoodDialogItemClick(false, 1);
+          } else {
+            state.showAddMoodPopover = !state.showAddMoodPopover;
+          }
+        }}
+        loading={state.loading}
+      >
+        <View style={styles.tagLine}>
+          <Tag
+            checked={state.staticTagChecked}
+            text={Strings.getLang('mood_overview_filter_name_text1')}
+            onCheckedChange={checked => {
+              state.staticTagChecked = checked;
+            }}
+          />
+          <Spacer width={cx(8)} height={0} />
+          <Tag
+            checked={state.dynamicTagChecked}
+            text={Strings.getLang('mood_overview_filter_name_text2')}
+            onCheckedChange={checked => {
+              state.dynamicTagChecked = checked;
+            }}
+          />
+        </View>
+        <Spacer height={cx(10)} />
+        {state.originMoods.length >= MAX_MOOD_COUNT && (
+          <View style={styles.infoLine}>
+            <Spacer height={cx(10)} />
+            <InfoText
+              icon={res.ic_warning_amber}
+              text={Strings.getLang('mood_overview_warning_max_number_text')}
+              contentColor={'#ff9500'}
+            />
+            <Spacer height={cx(6)} />
+          </View>
+        )}
+        <FlatList
+          data={state.filterMoods}
+          renderItem={({ item }) => {
+            return (
+              <MoodItem
+                enable={getItemEnable(item)}
+                isMix={!!(params.isMixLight || params.isCeilingLight)}
+                mood={item}
+                deviceTypeOption={params}
+                onPress={() => {
+                  navigationRoute(item.mainLamp.nodes.length === 1, 'edit', item);
+                }}
+                onSwitch={async _ => {
+                  state.loading = true;
+                  await modDeleteMood('set', item);
+                  updateFlagMode();
+                  state.loading = false;
+                }}
+              />
+            );
+          }}
+          ListHeaderComponent={() => <Spacer height={cx(10)} />}
+          ItemSeparatorComponent={() => <Spacer />}
+          ListFooterComponent={() => <Spacer />}
+          keyExtractor={item => `${item.name}`}
+        />
+      </Page>
+      <CustomListDialog
+        show={state.showAddMoodPopover}
+        style={styles.addMoodPopover}
+        itemStyle={styles.popoverItem}
+        onDismiss={() => {
+          state.showAddMoodPopover = false;
+        }}
+        data={[
+          {
+            text: Strings.getLang('mood_overview_add_mood_text'),
+            value: true,
+          },
+          {
+            text: Strings.getLang('mood_overview_add_mood_text2'),
+            value: false,
+          },
+        ]}
+        onItemPress={onAddMoodDialogItemClick}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  tagLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(24),
+  },
+  infoLine: {
+    marginHorizontal: cx(24),
+  },
+  addMoodPopover: {
+    position: 'absolute',
+    right: cx(60),
+    top: Platform.OS === 'android' ? cx(90) : cx(130),
+    maxWidth: cx(200),
+    backgroundColor: '#fff',
+  },
+  popoverItem: {
+    padding: cx(5),
+    alignItems: 'flex-start',
+  },
+});
+
+export default MoodPage;