@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/mood/AddMoodPage.tsx

@@ -1,793 +1,793 @@
-import Strings from '@ledvance/base/src/i18n'
-import Page from '@ledvance/base/src/components/Page'
-import React, {useCallback} from 'react'
-import {FlatList, StyleSheet, Text, View} from 'react-native'
-import {Utils} from 'tuya-panel-kit'
-import RecommendMoodItem, {ColorsLineProps} from './RecommendMoodItem'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import {useReactive, useCreation} from 'ahooks'
-import {useNavigation, useRoute} from '@react-navigation/native'
-import {SceneNodeTransitionMode, SceneUIState} from '../scene/SceneInfo'
-import {toDynamicMoodEditorPage, toStaticMoodEditorPage} from '../../navigation/tools'
-import {MoodPageProps} from './MoodPage'
-import { difference, head, map, range } from 'lodash'
-
-const cx = Utils.RatioUtils.convertX
-
-export interface AddMoodPageParams {
-  isStatic: boolean,
-  moods: SceneUIState[],
-  onSave: () => void,
-  moduleParams: MoodPageProps
-}
-
-interface AddMoodPageState {
-  data: RecommendMood[]
-}
-
-const AddMoodPage = () => {
-  const navigation = useNavigation()
-  const routeParams = useRoute().params as AddMoodPageParams
-  const moduleParams = routeParams.moduleParams
-  const moodId = useCreation(() => {
-    const useIds = map(routeParams.moods, 'id')
-    const idRange = range(0, 256)
-    return Math.max(head(difference(idRange, useIds)) || 0, 0)
-  }, [routeParams.moods])
-  const state = useReactive<AddMoodPageState>({
-    data: getRecommendMoods(
-      routeParams.isStatic,
-      moduleParams.isSupportColor,
-      moduleParams.isSupportTemperature,
-    ),
-  })
-  const recommendMood2SceneUIState = useCallback((recommendMood: RecommendMood) => {
-    return {
-      id: moodId,
-      image: '',
-      fanEnable: recommendMood.fanEnable,
-      fanSpeed: recommendMood.fanSpeed,
-      name: recommendMood.name,
-      nodes: recommendMood.moodColorsLineProps?.nodes || [],
-    }
-  }, [routeParams, routeParams.moods, moodId])
-
-  return (
-    <Page
-      backText={Strings.getLang('add_new_static_mood_system_back')}
-      headlineText={Strings.getLang(routeParams.isStatic ? 'add_new_static_mood_headline_text' : 'add_new_dynamic_mood_headline_text')}>
-      <View style={styles.root}>
-        <Text style={styles.desc}>
-          {Strings.getLang(routeParams.isStatic ? 'add_new_static_mood_description_text' : 'add_new_dynamic_mood_description_text')}
-        </Text>
-        <FlatList
-          style={{flex: 1}}
-          data={state.data}
-          renderItem={({item, index}) => {
-            return <RecommendMoodItem
-              title={item.name}
-              moodColorsLineProps={item.moodColorsLineProps}
-              onPress={() => {
-                if (routeParams.isStatic) {
-                  toStaticMoodEditorPage(navigation,
-                    {
-                      mode: 'add',
-                      currentMood: index === 0 ? newMood(
-                        moodId,
-                        moduleParams.isSupportColor && moduleParams.isSupportTemperature,
-                        routeParams.isStatic,
-                        moduleParams.isSupportColor,
-                      ) : recommendMood2SceneUIState(item),
-                      moods: routeParams.moods,
-                      moduleParams: moduleParams,
-                      onSave: routeParams.onSave,
-                    })
-                } else {
-                  toDynamicMoodEditorPage(navigation,
-                    {
-                      mode: 'add',
-                      currentMood: index === 0 ? newMood(
-                        moodId,
-                        moduleParams.isSupportColor && moduleParams.isSupportTemperature,
-                        routeParams.isStatic,
-                        moduleParams.isSupportColor,
-                      ) : recommendMood2SceneUIState(item),
-                      moods: routeParams.moods,
-                      moduleParams: moduleParams,
-                      onSave: routeParams.onSave,
-                    })
-                }
-              }}/>
-          }}
-          ItemSeparatorComponent={() => <Spacer/>}
-          ListHeaderComponent={() => <Spacer/>}
-          ListFooterComponent={() => <Spacer/>}
-          keyExtractor={item => item.name}/>
-      </View>
-    </Page>
-  )
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  desc: {
-    color: '#000',
-    fontSize: cx(16),
-    marginHorizontal: cx(24),
-    marginTop: cx(12),
-  },
-})
-
-export default AddMoodPage
-
-function newMood(
-  id: number,
-  isColorMode: boolean,
-  isStatic: boolean,
-  isSupportColor: boolean,
-): SceneUIState {
-  const node = {
-    brightness: 100,
-    colorTemp: 100,
-    h: 0,
-    s: 100,
-    v: isSupportColor ? 100 : 1,
-    isColorNode: isColorMode,
-    switchingInterval: 13,
-    transitionMode: isStatic ? SceneNodeTransitionMode.Static : SceneNodeTransitionMode.Jump,
-    transitionTime: 13,
-  }
-  return {
-    name: '',
-    image: '',
-    id: id,
-    fanEnable: false,
-    fanSpeed: 2,
-    nodes: isStatic ? [node] : [node, {...node, brightness: 100}],
-  }
-}
-
-type RecommendMood = {
-  name: string
-  fanEnable: boolean
-  fanSpeed: number
-  moodColorsLineProps?: ColorsLineProps
-}
-
-function getRecommendMoods(
-  isStatic: boolean,
-  isSupportColor: boolean,
-  isSupportTemperature: boolean,
-): RecommendMood[] {
-  if (isStatic) {
-    if (isSupportColor) {
-      return [
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
-          fanEnable: true,
-          fanSpeed: 1,
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 125,
-                s: 46,
-                v: 100,
-                brightness: 0,
-                colorTemp: 0,
-                isColorNode: true,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 0,
-                s: 46,
-                v: 100,
-                brightness: 0,
-                colorTemp: 0,
-                isColorNode: true,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 34,
-                s: 67,
-                v: 100,
-                brightness: 0,
-                colorTemp: 0,
-                isColorNode: true,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-      ]
-    } else if (isSupportTemperature) {
-      return [
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
-          fanEnable: true,
-          fanSpeed: 1,
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 0,
-                s: 0,
-                v: 0,
-                brightness: 60,
-                colorTemp: 20,
-                isColorNode: false,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 0,
-                s: 0,
-                v: 0,
-                brightness: 80,
-                colorTemp: 40,
-                isColorNode: false,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 0,
-                s: 0,
-                v: 0,
-                brightness: 100,
-                colorTemp: 100,
-                isColorNode: false,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-      ]
-    } else {
-      return [
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
-          fanEnable: true,
-          fanSpeed: 1,
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 0,
-                s: 0,
-                v: 0,
-                brightness: 60,
-                colorTemp: 100,
-                isColorNode: false,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 0,
-                s: 0,
-                v: 0,
-                brightness: 80,
-                colorTemp: 100,
-                isColorNode: false,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-        {
-          name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
-          fanEnable: true,
-          fanSpeed: 1,
-          moodColorsLineProps: {
-            type: 'gradient',
-            nodes: [
-              {
-                h: 0,
-                s: 0,
-                v: 0,
-                brightness: 100,
-                colorTemp: 100,
-                isColorNode: false,
-                switchingInterval: 0,
-                transitionTime: 14,
-                transitionMode: SceneNodeTransitionMode.Static,
-              },
-            ],
-          },
-        },
-      ]
-    }
-  }
-  if (isSupportColor) {
-    return [
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
-        fanEnable: true,
-        fanSpeed: 1,
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'separate',
-          nodes: [
-            {
-              h: 75,
-              s: 90,
-              v: 48,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 200,
-              s: 26,
-              v: 86,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 75,
-              s: 90,
-              v: 80,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-          ],
-        },
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'gradient',
-          nodes: [
-            {
-              h: 40,
-              s: 100,
-              v: 100,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-            {
-              h: 24,
-              s: 100,
-              v: 100,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-            {
-              h: 0,
-              s: 100,
-              v: 100,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-          ],
-        },
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'separate',
-          nodes: [
-            {
-              h: 300,
-              s: 17,
-              v: 59,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 183,
-              s: 51,
-              v: 82,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 40,
-              s: 100,
-              v: 100,
-              brightness: 0,
-              colorTemp: 0,
-              isColorNode: true,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-          ],
-        },
-      },
-    ]
-  } else if (isSupportTemperature) {
-    return [
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
-        fanEnable: true,
-        fanSpeed: 1,
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'separate',
-          nodes: [
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 20,
-              colorTemp: 20,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 40,
-              colorTemp: 40,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 60,
-              colorTemp: 60,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-          ],
-        },
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'gradient',
-          nodes: [
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 40,
-              colorTemp: 40,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 60,
-              colorTemp: 60,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 80,
-              colorTemp: 80,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-          ],
-        },
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'separate',
-          nodes: [
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 50,
-              colorTemp: 50,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 70,
-              colorTemp: 70,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 100,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-          ],
-        },
-      },
-    ]
-  } else {
-    return [
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
-        fanEnable: true,
-        fanSpeed: 1,
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'separate',
-          nodes: [
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 20,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 40,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 60,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-          ],
-        },
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'gradient',
-          nodes: [
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 40,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 60,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 80,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Gradient,
-            },
-          ],
-        },
-      },
-      {
-        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
-        fanEnable: true,
-        fanSpeed: 1,
-        moodColorsLineProps: {
-          type: 'separate',
-          nodes: [
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 50,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 70,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-            {
-              h: 0,
-              s: 0,
-              v: 0,
-              brightness: 100,
-              colorTemp: 100,
-              isColorNode: false,
-              switchingInterval: 0,
-              transitionTime: 14,
-              transitionMode: SceneNodeTransitionMode.Jump,
-            },
-          ],
-        },
-      },
-    ]
-  }
+import Strings from '@ledvance/base/src/i18n'
+import Page from '@ledvance/base/src/components/Page'
+import React, {useCallback} from 'react'
+import {FlatList, StyleSheet, Text, View} from 'react-native'
+import {Utils} from 'tuya-panel-kit'
+import RecommendMoodItem, {ColorsLineProps} from './RecommendMoodItem'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import {useReactive, useCreation} from 'ahooks'
+import {useNavigation, useRoute} from '@react-navigation/native'
+import {SceneNodeTransitionMode, SceneUIState} from '../scene/SceneInfo'
+import {toDynamicMoodEditorPage, toStaticMoodEditorPage} from '../../navigation/tools'
+import {MoodPageProps} from './MoodPage'
+import { difference, head, map, range } from 'lodash'
+
+const cx = Utils.RatioUtils.convertX
+
+export interface AddMoodPageParams {
+  isStatic: boolean,
+  moods: SceneUIState[],
+  onSave: () => void,
+  moduleParams: MoodPageProps
+}
+
+interface AddMoodPageState {
+  data: RecommendMood[]
+}
+
+const AddMoodPage = () => {
+  const navigation = useNavigation()
+  const routeParams = useRoute().params as AddMoodPageParams
+  const moduleParams = routeParams.moduleParams
+  const moodId = useCreation(() => {
+    const useIds = map(routeParams.moods, 'id')
+    const idRange = range(0, 256)
+    return Math.max(head(difference(idRange, useIds)) || 0, 0)
+  }, [routeParams.moods])
+  const state = useReactive<AddMoodPageState>({
+    data: getRecommendMoods(
+      routeParams.isStatic,
+      moduleParams.isSupportColor,
+      moduleParams.isSupportTemperature,
+    ),
+  })
+  const recommendMood2SceneUIState = useCallback((recommendMood: RecommendMood) => {
+    return {
+      id: moodId,
+      image: '',
+      fanEnable: recommendMood.fanEnable,
+      fanSpeed: recommendMood.fanSpeed,
+      name: recommendMood.name,
+      nodes: recommendMood.moodColorsLineProps?.nodes || [],
+    }
+  }, [routeParams, routeParams.moods, moodId])
+
+  return (
+    <Page
+      backText={Strings.getLang('add_new_static_mood_system_back')}
+      headlineText={Strings.getLang(routeParams.isStatic ? 'add_new_static_mood_headline_text' : 'add_new_dynamic_mood_headline_text')}>
+      <View style={styles.root}>
+        <Text style={styles.desc}>
+          {Strings.getLang(routeParams.isStatic ? 'add_new_static_mood_description_text' : 'add_new_dynamic_mood_description_text')}
+        </Text>
+        <FlatList
+          style={{flex: 1}}
+          data={state.data}
+          renderItem={({item, index}) => {
+            return <RecommendMoodItem
+              title={item.name}
+              moodColorsLineProps={item.moodColorsLineProps}
+              onPress={() => {
+                if (routeParams.isStatic) {
+                  toStaticMoodEditorPage(navigation,
+                    {
+                      mode: 'add',
+                      currentMood: index === 0 ? newMood(
+                        moodId,
+                        moduleParams.isSupportColor && moduleParams.isSupportTemperature,
+                        routeParams.isStatic,
+                        moduleParams.isSupportColor,
+                      ) : recommendMood2SceneUIState(item),
+                      moods: routeParams.moods,
+                      moduleParams: moduleParams,
+                      onSave: routeParams.onSave,
+                    })
+                } else {
+                  toDynamicMoodEditorPage(navigation,
+                    {
+                      mode: 'add',
+                      currentMood: index === 0 ? newMood(
+                        moodId,
+                        moduleParams.isSupportColor && moduleParams.isSupportTemperature,
+                        routeParams.isStatic,
+                        moduleParams.isSupportColor,
+                      ) : recommendMood2SceneUIState(item),
+                      moods: routeParams.moods,
+                      moduleParams: moduleParams,
+                      onSave: routeParams.onSave,
+                    })
+                }
+              }}/>
+          }}
+          ItemSeparatorComponent={() => <Spacer/>}
+          ListHeaderComponent={() => <Spacer/>}
+          ListFooterComponent={() => <Spacer/>}
+          keyExtractor={item => item.name}/>
+      </View>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  desc: {
+    color: '#000',
+    fontSize: cx(16),
+    marginHorizontal: cx(24),
+    marginTop: cx(12),
+  },
+})
+
+export default AddMoodPage
+
+function newMood(
+  id: number,
+  isColorMode: boolean,
+  isStatic: boolean,
+  isSupportColor: boolean,
+): SceneUIState {
+  const node = {
+    brightness: 100,
+    colorTemp: 100,
+    h: 0,
+    s: 100,
+    v: isSupportColor ? 100 : 1,
+    isColorNode: isColorMode,
+    switchingInterval: 13,
+    transitionMode: isStatic ? SceneNodeTransitionMode.Static : SceneNodeTransitionMode.Jump,
+    transitionTime: 13,
+  }
+  return {
+    name: '',
+    image: '',
+    id: id,
+    fanEnable: false,
+    fanSpeed: 2,
+    nodes: isStatic ? [node] : [node, {...node, brightness: 100}],
+  }
+}
+
+type RecommendMood = {
+  name: string
+  fanEnable: boolean
+  fanSpeed: number
+  moodColorsLineProps?: ColorsLineProps
+}
+
+function getRecommendMoods(
+  isStatic: boolean,
+  isSupportColor: boolean,
+  isSupportTemperature: boolean,
+): RecommendMood[] {
+  if (isStatic) {
+    if (isSupportColor) {
+      return [
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+          fanEnable: true,
+          fanSpeed: 1,
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 125,
+                s: 46,
+                v: 100,
+                brightness: 0,
+                colorTemp: 0,
+                isColorNode: true,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 0,
+                s: 46,
+                v: 100,
+                brightness: 0,
+                colorTemp: 0,
+                isColorNode: true,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 34,
+                s: 67,
+                v: 100,
+                brightness: 0,
+                colorTemp: 0,
+                isColorNode: true,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+      ]
+    } else if (isSupportTemperature) {
+      return [
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+          fanEnable: true,
+          fanSpeed: 1,
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 0,
+                s: 0,
+                v: 0,
+                brightness: 60,
+                colorTemp: 20,
+                isColorNode: false,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 0,
+                s: 0,
+                v: 0,
+                brightness: 80,
+                colorTemp: 40,
+                isColorNode: false,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 0,
+                s: 0,
+                v: 0,
+                brightness: 100,
+                colorTemp: 100,
+                isColorNode: false,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+      ]
+    } else {
+      return [
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+          fanEnable: true,
+          fanSpeed: 1,
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 0,
+                s: 0,
+                v: 0,
+                brightness: 60,
+                colorTemp: 100,
+                isColorNode: false,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 0,
+                s: 0,
+                v: 0,
+                brightness: 80,
+                colorTemp: 100,
+                isColorNode: false,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+        {
+          name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+          fanEnable: true,
+          fanSpeed: 1,
+          moodColorsLineProps: {
+            type: 'gradient',
+            nodes: [
+              {
+                h: 0,
+                s: 0,
+                v: 0,
+                brightness: 100,
+                colorTemp: 100,
+                isColorNode: false,
+                switchingInterval: 0,
+                transitionTime: 14,
+                transitionMode: SceneNodeTransitionMode.Static,
+              },
+            ],
+          },
+        },
+      ]
+    }
+  }
+  if (isSupportColor) {
+    return [
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+        fanEnable: true,
+        fanSpeed: 1,
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 75,
+              s: 90,
+              v: 48,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 200,
+              s: 26,
+              v: 86,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 75,
+              s: 90,
+              v: 80,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'gradient',
+          nodes: [
+            {
+              h: 40,
+              s: 100,
+              v: 100,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+            {
+              h: 24,
+              s: 100,
+              v: 100,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+            {
+              h: 0,
+              s: 100,
+              v: 100,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 300,
+              s: 17,
+              v: 59,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 183,
+              s: 51,
+              v: 82,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 40,
+              s: 100,
+              v: 100,
+              brightness: 0,
+              colorTemp: 0,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+          ],
+        },
+      },
+    ]
+  } else if (isSupportTemperature) {
+    return [
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+        fanEnable: true,
+        fanSpeed: 1,
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 20,
+              colorTemp: 20,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 40,
+              colorTemp: 40,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 60,
+              colorTemp: 60,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'gradient',
+          nodes: [
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 40,
+              colorTemp: 40,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 60,
+              colorTemp: 60,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 80,
+              colorTemp: 80,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 50,
+              colorTemp: 50,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 70,
+              colorTemp: 70,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+          ],
+        },
+      },
+    ]
+  } else {
+    return [
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+        fanEnable: true,
+        fanSpeed: 1,
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 20,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 40,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 60,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'gradient',
+          nodes: [
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 40,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 60,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 80,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Gradient,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+        fanEnable: true,
+        fanSpeed: 1,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 50,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 70,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+            {
+              h: 0,
+              s: 0,
+              v: 0,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: SceneNodeTransitionMode.Jump,
+            },
+          ],
+        },
+      },
+    ]
+  }
 }