@ledvance/ui-biz-bundle 1.1.67 → 1.1.69

package/src/modules/mood/MixMood/MixMoodPage.tsx

@@ -1,327 +1,327 @@
-import React, { useCallback, useEffect, useMemo } from 'react'
-import { FlatList, StyleSheet, View, Platform } from 'react-native'
-import { Utils } from 'tuya-panel-kit'
-import Page from '@ledvance/base/src/components/Page'
-import { useScene, useFantasyScene } from '../../scene/SceneAction'
-import { getRemoteMixScene, saveMixMood } from './MixMoodActions'
-import { useWorkMode } from '../../../hooks/DeviceDpStateHooks'
-import { useDeviceInfo, useFlagMode } 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 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 { MixSceneInfo, MixMainLampInfo } from './MixSceneBeans'
-import { SceneInfo } from '../../scene/SceneInfo'
-import MixMoodItem from './MixMoodItem'
-import { useNavigation, useRoute } from '@react-navigation/core'
-import { saveFlagMode } from '@ledvance/ui-biz-bundle/src/modules/flags/FlagActions'
-import { ui_biz_routerKey } from '../../../navigation/Routers'
-import { WORK_MODE } from '@tuya/tuya-panel-lamp-sdk/lib/utils'
-import { cloneDeep } from 'lodash'
-
-const { convertX: cx } = Utils.RatioUtils
-
-interface MixMoodPageUIState {
-  staticTagChecked: boolean
-  dynamicTagChecked: boolean
-  showAddMoodPopover: boolean
-  currentScene?: MixSceneInfo
-  scenes: MixSceneInfo[]
-  filteredMoods: MixSceneInfo[]
-  loading: boolean
-  flag: Symbol
-}
-
-export interface MixMoodPageProps {
-  switchLedDpCode: string  // whiteSwitch
-  sceneDpCode: string
-  workModeDpCode: string
-  rgbcSwitchLed: string
-  fantasySceneDpCode: string
-  rgbcWorkModeDpCode: string
-  isCeilingLight: boolean
-  isSupportColor: boolean
-  isSupportTemperature: boolean
-  isSupportBrightness: boolean
-}
-
-const MAX_MOOD_COUNT = 256
-let moodTimerId: undefined | number = undefined
-
-const MixMoodPage = () => {
-  const routeParams = useRoute().params as MixMoodPageProps
-  const params = {
-    ...routeParams,
-  }
-  const [whiteSceneId, setScene] = useScene(params.sceneDpCode)
-  const [fantasyId, setFantasyScene] = useFantasyScene(params.fantasySceneDpCode, params.rgbcWorkModeDpCode, params.rgbcSwitchLed)
-  const [workMode, setWorkMode] = useWorkMode(params.workModeDpCode)
-  const [rgbcWorkMode, setRgbcWorkMode] = useWorkMode(params.rgbcWorkModeDpCode || '')
-  const [flagMode, setFlagMode] = useFlagMode()
-  const deviceInfo = useDeviceInfo()
-  const navigation = useNavigation()
-  const isMoodMode = useMemo(() => workMode === WORK_MODE.SCENE || rgbcWorkMode === WORK_MODE.SCENE,[workMode, rgbcWorkMode])
-  const state = useReactive<MixMoodPageUIState>({
-    currentScene: undefined,
-    staticTagChecked: true,
-    dynamicTagChecked: true,
-    showAddMoodPopover: false,
-    scenes: [],
-    flag: Symbol(),
-    filteredMoods: [],
-    loading: false,
-  })
-
-  const getSceneList = useCallback(async (mainId: number, secondlyId: number) => {
-    moodTimerId = setTimeout(async () => {
-      const res = await getRemoteMixScene(deviceInfo.devId)
-      if (res.success) {
-        state.scenes = res.data || []
-        state.currentScene = state.scenes.find(scene => {
-          const { mainLamp, secondlyLamp } = scene
-          return (mainLamp.id === mainId) && (secondlyLamp.id === secondlyId)
-        })
-      }
-    }, 200)
-  }, [])
-
-  const onAddMoodDialogItemClick = useCallback((isStatic: boolean, _: number) => {
-    navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood_add, {
-      isStatic,
-      mixMoods: cloneDeep(state.scenes),
-      moduleParams: params,
-      modDeleteFlag,
-    })
-    state.showAddMoodPopover = false
-  }, [state.scenes])
-
-  useEffect(() => {
-    state.filteredMoods = state.scenes.filter(item => {
-      return (state.staticTagChecked && state.dynamicTagChecked) ||
-        (!state.staticTagChecked && !state.dynamicTagChecked) ||
-        (state.staticTagChecked && item.mainLamp.nodes.length < 2) ||
-        (state.dynamicTagChecked && item.secondlyLamp.nodes.length > 1)
-    })
-  }, [state.staticTagChecked, state.dynamicTagChecked, state.scenes])
-
-  useUpdateEffect(() => {
-    state.currentScene = state.scenes.find(scene => {
-      const { mainLamp, secondlyLamp } = scene
-      return (mainLamp.id === whiteSceneId) && (secondlyLamp.id === fantasyId)
-    })
-  }, [whiteSceneId, fantasyId])
-
-  useEffect(() => {
-    getSceneList(whiteSceneId, fantasyId).then()
-    return () =>{
-      if (moodTimerId) clearTimeout(moodTimerId)
-    }
-  }, [state.flag])
-
-
-  const updateFlagMode = () => {
-    if (flagMode?.flagMode && params.isSupportColor) {
-      saveFlagMode(deviceInfo.devId, JSON.stringify({
-        flagMode: false,
-        flagId: undefined
-      })).then()
-      setFlagMode({
-        flagMode: false,
-        flagId: undefined
-      })
-    }
-  }
-
-  const getSceneByMix = (mixMood: MixMainLampInfo): SceneInfo => {
-    return {
-      ...mixMood,
-      nodes: mixMood.nodes.map((item) => ({
-        ...item,
-        switchingInterval: mixMood.speed,
-        transitionTime: mixMood.speed,
-        transitionMode: mixMood.mode,
-        isColorNode: false
-      }))
-    }
-  }
-
-  const checkedCurMoodInAllMoods = useCallback((checkMood: MixSceneInfo, curMood?: MixSceneInfo) =>{
-    const { mainLamp, secondlyLamp } = checkMood
-    const curWhiteId = curMood ? curMood.mainLamp.id : whiteSceneId
-    const curColorId = curMood ? curMood.secondlyLamp.id : fantasyId
-    const isStatic = mainLamp.nodes.length === 1
-    return isStatic ? ((curWhiteId === mainLamp.id) && mainLamp.id !== -1) :
-    (((curWhiteId === mainLamp.id) && mainLamp.id !== -1) && ((curColorId === secondlyLamp.id) && secondlyLamp.id !== -1))
-  }, [fantasyId, whiteSceneId])
-
-  const modDeleteFlag = async (mode: 'add' | 'edit' | 'del', currentMood: MixSceneInfo) => {
-    const list = mode === 'add' ? [currentMood, ...state.scenes] :
-      mode === 'del' ? state.scenes.filter(mood => !checkedCurMoodInAllMoods(currentMood, mood)) :
-        state.scenes.map(mood => {
-          return ((mood.mainLamp.id === currentMood.mainLamp.id) && (mood.secondlyLamp.id === currentMood.secondlyLamp.id)) ? currentMood : mood
-        })
-    const saveRes = await saveMixMood(deviceInfo.devId, list)
-    if (saveRes.success) {
-      if (flagMode?.flagMode) {
-        saveFlagMode(deviceInfo.devId, JSON.stringify({
-          flagMode: false,
-          flagId: undefined
-        })).then()
-        setFlagMode({
-          flagMode: false,
-          flagId: undefined
-        })
-      }
-      if (list.length > 0) {
-        const { mainLamp, secondlyLamp } = currentMood
-        if (mode === 'del') {
-          // 判断当前删除的Mood是否是正在执行的
-          if (checkedCurMoodInAllMoods(currentMood) && isMoodMode){
-            if(list[0].mainLamp.nodes?.length){
-              setScene(deviceInfo.devId, getSceneByMix(list[0].mainLamp), params.sceneDpCode, params.workModeDpCode, params.switchLedDpCode, false, false).then()
-            }
-            if (list[0].secondlyLamp.nodes?.length){
-              setFantasyScene(list[0]?.secondlyLamp).then()
-            }else{
-              setRgbcWorkMode(WORK_MODE.COLOUR).then()
-            }
-          }
-        } else {
-          if (mainLamp.nodes?.length > 0) {
-            setScene(deviceInfo.devId, getSceneByMix(mainLamp), params.sceneDpCode, params.workModeDpCode, params.switchLedDpCode, false, false).then()
-          }
-          if (secondlyLamp.nodes?.length > 0) {
-            setFantasyScene(secondlyLamp).then()
-          }else{
-            setRgbcWorkMode(WORK_MODE.COLOUR).then()
-          }
-        }
-      } else {
-        await setWorkMode(WORK_MODE.WHITE)
-        await setRgbcWorkMode(WORK_MODE.COLOUR)
-      }
-      state.scenes = cloneDeep(list)
-      return { success: true }
-    }
-    
-    return { success: false }
-  }
-
-  return (
-    <>
-      <Page
-        backText={deviceInfo.name}
-        headlineText={Strings.getLang('mood_overview_headline_text')}
-        headlineIcon={state.scenes.length < MAX_MOOD_COUNT ? res.add : undefined}
-        onHeadlineIconClick={() => {
-          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.scenes.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.filteredMoods}
-          renderItem={({ item }) => {
-            return (
-              <MixMoodItem
-                enable={checkedCurMoodInAllMoods(item) && isMoodMode} 
-                mixMood={item}
-                onPress={() => {
-                  navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood_edit, {
-                    mode: 'edit',
-                    isStatic: item.mainLamp.nodes?.length === 1,
-                    currentMood: item,
-                    moods: state.scenes,
-                    moduleParams: params,
-                    modDeleteFlag,
-                  })
-                }}
-                onSwitch={async _ => {
-                  if (checkedCurMoodInAllMoods(item) && isMoodMode) return
-                  state.loading = true
-                  await modDeleteFlag('edit', item)
-                  state.currentScene = 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',
-  },
-})
-
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { FlatList, StyleSheet, View, Platform } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import Page from '@ledvance/base/src/components/Page'
+import { useScene, useFantasyScene } from '../../scene/SceneAction'
+import { getRemoteMixScene, saveMixMood } from './MixMoodActions'
+import { useWorkMode } from '../../../hooks/DeviceDpStateHooks'
+import { useDeviceInfo, useFlagMode } 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 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 { MixSceneInfo, MixMainLampInfo } from './MixSceneBeans'
+import { SceneInfo } from '../../scene/SceneInfo'
+import MixMoodItem from './MixMoodItem'
+import { useNavigation, useRoute } from '@react-navigation/core'
+import { saveFlagMode } from '@ledvance/ui-biz-bundle/src/modules/flags/FlagActions'
+import { ui_biz_routerKey } from '../../../navigation/Routers'
+import { WORK_MODE } from '@tuya/tuya-panel-lamp-sdk/lib/utils'
+import { cloneDeep } from 'lodash'
+
+const { convertX: cx } = Utils.RatioUtils
+
+interface MixMoodPageUIState {
+  staticTagChecked: boolean
+  dynamicTagChecked: boolean
+  showAddMoodPopover: boolean
+  currentScene?: MixSceneInfo
+  scenes: MixSceneInfo[]
+  filteredMoods: MixSceneInfo[]
+  loading: boolean
+  flag: Symbol
+}
+
+export interface MixMoodPageProps {
+  switchLedDpCode: string  // whiteSwitch
+  sceneDpCode: string
+  workModeDpCode: string
+  rgbcSwitchLed: string
+  fantasySceneDpCode: string
+  rgbcWorkModeDpCode: string
+  isCeilingLight: boolean
+  isSupportColor: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+}
+
+const MAX_MOOD_COUNT = 256
+let moodTimerId: undefined | number = undefined
+
+const MixMoodPage = () => {
+  const routeParams = useRoute().params as MixMoodPageProps
+  const params = {
+    ...routeParams,
+  }
+  const [whiteSceneId, setScene] = useScene(params.sceneDpCode)
+  const [fantasyId, setFantasyScene] = useFantasyScene(params.fantasySceneDpCode, params.rgbcWorkModeDpCode, params.rgbcSwitchLed)
+  const [workMode, setWorkMode] = useWorkMode(params.workModeDpCode)
+  const [rgbcWorkMode, setRgbcWorkMode] = useWorkMode(params.rgbcWorkModeDpCode || '')
+  const [flagMode, setFlagMode] = useFlagMode()
+  const deviceInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const isMoodMode = useMemo(() => workMode === WORK_MODE.SCENE || rgbcWorkMode === WORK_MODE.SCENE,[workMode, rgbcWorkMode])
+  const state = useReactive<MixMoodPageUIState>({
+    currentScene: undefined,
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    showAddMoodPopover: false,
+    scenes: [],
+    flag: Symbol(),
+    filteredMoods: [],
+    loading: false,
+  })
+
+  const getSceneList = useCallback(async (mainId: number, secondlyId: number) => {
+    moodTimerId = setTimeout(async () => {
+      const res = await getRemoteMixScene(deviceInfo.devId)
+      if (res.success) {
+        state.scenes = res.data || []
+        state.currentScene = state.scenes.find(scene => {
+          const { mainLamp, secondlyLamp } = scene
+          return (mainLamp.id === mainId) && (secondlyLamp.id === secondlyId)
+        })
+      }
+    }, 200)
+  }, [])
+
+  const onAddMoodDialogItemClick = useCallback((isStatic: boolean, _: number) => {
+    navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood_add, {
+      isStatic,
+      mixMoods: cloneDeep(state.scenes),
+      moduleParams: params,
+      modDeleteFlag,
+    })
+    state.showAddMoodPopover = false
+  }, [state.scenes])
+
+  useEffect(() => {
+    state.filteredMoods = state.scenes.filter(item => {
+      return (state.staticTagChecked && state.dynamicTagChecked) ||
+        (!state.staticTagChecked && !state.dynamicTagChecked) ||
+        (state.staticTagChecked && item.mainLamp.nodes.length < 2) ||
+        (state.dynamicTagChecked && item.secondlyLamp.nodes.length > 1)
+    })
+  }, [state.staticTagChecked, state.dynamicTagChecked, state.scenes])
+
+  useUpdateEffect(() => {
+    state.currentScene = state.scenes.find(scene => {
+      const { mainLamp, secondlyLamp } = scene
+      return (mainLamp.id === whiteSceneId) && (secondlyLamp.id === fantasyId)
+    })
+  }, [whiteSceneId, fantasyId])
+
+  useEffect(() => {
+    getSceneList(whiteSceneId, fantasyId).then()
+    return () =>{
+      if (moodTimerId) clearTimeout(moodTimerId)
+    }
+  }, [state.flag])
+
+
+  const updateFlagMode = () => {
+    if (flagMode?.flagMode && params.isSupportColor) {
+      saveFlagMode(deviceInfo.devId, JSON.stringify({
+        flagMode: false,
+        flagId: undefined
+      })).then()
+      setFlagMode({
+        flagMode: false,
+        flagId: undefined
+      })
+    }
+  }
+
+  const getSceneByMix = (mixMood: MixMainLampInfo): SceneInfo => {
+    return {
+      ...mixMood,
+      nodes: mixMood.nodes.map((item) => ({
+        ...item,
+        switchingInterval: mixMood.speed,
+        transitionTime: mixMood.speed,
+        transitionMode: mixMood.mode,
+        isColorNode: false
+      }))
+    }
+  }
+
+  const checkedCurMoodInAllMoods = useCallback((checkMood: MixSceneInfo, curMood?: MixSceneInfo) =>{
+    const { mainLamp, secondlyLamp } = checkMood
+    const curWhiteId = curMood ? curMood.mainLamp.id : whiteSceneId
+    const curColorId = curMood ? curMood.secondlyLamp.id : fantasyId
+    const isStatic = mainLamp.nodes.length === 1
+    return isStatic ? ((curWhiteId === mainLamp.id) && mainLamp.id !== -1) :
+    (((curWhiteId === mainLamp.id) && mainLamp.id !== -1) && ((curColorId === secondlyLamp.id) && secondlyLamp.id !== -1))
+  }, [fantasyId, whiteSceneId])
+
+  const modDeleteFlag = async (mode: 'add' | 'edit' | 'del', currentMood: MixSceneInfo) => {
+    const list = mode === 'add' ? [currentMood, ...state.scenes] :
+      mode === 'del' ? state.scenes.filter(mood => !checkedCurMoodInAllMoods(currentMood, mood)) :
+        state.scenes.map(mood => {
+          return ((mood.mainLamp.id === currentMood.mainLamp.id) && (mood.secondlyLamp.id === currentMood.secondlyLamp.id)) ? currentMood : mood
+        })
+    const saveRes = await saveMixMood(deviceInfo.devId, list)
+    if (saveRes.success) {
+      if (flagMode?.flagMode) {
+        saveFlagMode(deviceInfo.devId, JSON.stringify({
+          flagMode: false,
+          flagId: undefined
+        })).then()
+        setFlagMode({
+          flagMode: false,
+          flagId: undefined
+        })
+      }
+      if (list.length > 0) {
+        const { mainLamp, secondlyLamp } = currentMood
+        if (mode === 'del') {
+          // 判断当前删除的Mood是否是正在执行的
+          if (checkedCurMoodInAllMoods(currentMood) && isMoodMode){
+            if(list[0].mainLamp.nodes?.length){
+              setScene(deviceInfo.devId, getSceneByMix(list[0].mainLamp), params.sceneDpCode, params.workModeDpCode, params.switchLedDpCode, false, false).then()
+            }
+            if (list[0].secondlyLamp.nodes?.length){
+              setFantasyScene(list[0]?.secondlyLamp).then()
+            }else{
+              setRgbcWorkMode(WORK_MODE.COLOUR).then()
+            }
+          }
+        } else {
+          if (mainLamp.nodes?.length > 0) {
+            setScene(deviceInfo.devId, getSceneByMix(mainLamp), params.sceneDpCode, params.workModeDpCode, params.switchLedDpCode, false, false).then()
+          }
+          if (secondlyLamp.nodes?.length > 0) {
+            setFantasyScene(secondlyLamp).then()
+          }else{
+            setRgbcWorkMode(WORK_MODE.COLOUR).then()
+          }
+        }
+      } else {
+        await setWorkMode(WORK_MODE.WHITE)
+        await setRgbcWorkMode(WORK_MODE.COLOUR)
+      }
+      state.scenes = cloneDeep(list)
+      return { success: true }
+    }
+    
+    return { success: false }
+  }
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        headlineText={Strings.getLang('mood_overview_headline_text')}
+        headlineIcon={state.scenes.length < MAX_MOOD_COUNT ? res.add : undefined}
+        onHeadlineIconClick={() => {
+          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.scenes.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.filteredMoods}
+          renderItem={({ item }) => {
+            return (
+              <MixMoodItem
+                enable={checkedCurMoodInAllMoods(item) && isMoodMode} 
+                mixMood={item}
+                onPress={() => {
+                  navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood_edit, {
+                    mode: 'edit',
+                    isStatic: item.mainLamp.nodes?.length === 1,
+                    currentMood: item,
+                    moods: state.scenes,
+                    moduleParams: params,
+                    modDeleteFlag,
+                  })
+                }}
+                onSwitch={async _ => {
+                  if (checkedCurMoodInAllMoods(item) && isMoodMode) return
+                  state.loading = true
+                  await modDeleteFlag('edit', item)
+                  state.currentScene = 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 MixMoodPage