@ledvance/group-ui-biz-bundle 1.0.0

package/src/modules/mood/AddMoodPage.tsx

@@ -0,0 +1,826 @@
+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 } from 'ahooks'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import { SceneNodeTransitionMode, SceneUIState, SceneMode } from './SceneInfo'
+import { MoodPageProps } from './MoodPage'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+
+const cx = Utils.RatioUtils.convertX
+
+export interface AddMoodPageParams {
+  isStatic: boolean,
+  moods: SceneUIState[],
+  moduleParams: MoodPageProps
+  modDeleteMood: (mode: 'add' | 'edit' | 'del', currentMood: SceneUIState) => Promise<Result<any>>
+}
+
+interface AddMoodPageState {
+  data: RecommendMood[]
+}
+
+const AddMoodPage = () => {
+  const navigation = useNavigation()
+  const routeParams = useRoute().params as AddMoodPageParams
+  const moduleParams = routeParams.moduleParams
+  const state = useReactive<AddMoodPageState>({
+    data: getRecommendMoods(
+      routeParams.isStatic,
+      moduleParams,
+    ),
+  })
+  const recommendMood2SceneUIState = useCallback((recommendMood: RecommendMood) => {
+    const id = routeParams.moods.length > 0 ? Math.max(...routeParams.moods.map(m => m.id)) + 1 : 0
+    return {
+      id: id,
+      image: '',
+      fanEnable: recommendMood.fanEnable,
+      fanSpeed: recommendMood.fanSpeed,
+      speed: recommendMood.speed,
+      name: recommendMood.name,
+      nodes: recommendMood.moodColorsLineProps?.nodes || [],
+      mode: recommendMood.mode,
+      segmented: 0,
+      excessive: 0,
+      expand: 0,
+      direction: 0
+    }
+  }, [routeParams, routeParams.moods])
+
+  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={() => {
+                const id = routeParams.moods.length > 0 ? Math.max(...routeParams.moods.map(m => m.id)) + 1 : 0
+                if (routeParams.isStatic) {
+                  navigation.navigate(ui_biz_routerKey.group_ui_biz_static_mood_edit,
+                    {
+                      mode: 'add',
+                      currentMood: index === 0 ? newMood(
+                        id,
+                        moduleParams.isSupportColor && moduleParams.isSupportTemperature,
+                        routeParams.isStatic,
+                        moduleParams
+                      ) : recommendMood2SceneUIState(item),
+                      moduleParams,
+                      modDeleteMood: routeParams.modDeleteMood
+                    })
+                } else {
+                  navigation.navigate(ui_biz_routerKey.group_ui_biz_dynamic_mood_edit,
+                    {
+                      mode: 'add',
+                      currentMood: index === 0 ? newMood(
+                        id,
+                        moduleParams.isSupportColor && moduleParams.isSupportTemperature,
+                        routeParams.isStatic,
+                        moduleParams
+                      ) : recommendMood2SceneUIState(item),
+                      moduleParams,
+                      modDeleteMood: routeParams.modDeleteMood
+                    })
+                }
+              }} />
+          }}
+          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,
+  moduleParams: MoodPageProps
+): SceneUIState {
+  const jump = moduleParams.isStringLight ? SceneMode.StringJump : moduleParams.isStripLight ? SceneMode.StripJump : SceneMode.SourceJump
+  const node = {
+    brightness: 100,
+    colorTemp: 100,
+    h: 0,
+    s: 50,
+    v: 80,
+    isColorNode: isColorMode,
+    switchingInterval: 13,
+    transitionMode: isStatic ? SceneNodeTransitionMode.Static : jump,
+    transitionTime: 13,
+  }
+  return {
+    name: '',
+    image: '',
+    id,
+    fanEnable: false,
+    fanSpeed: 2,
+    speed: 12,
+    mode: isStatic ? SceneNodeTransitionMode.Static : jump,
+    // @ts-ignore
+    nodes: isStatic ? [node] : [node, { ...node }],
+    segmented: 0,
+    excessive: 0,
+    expand: 0,
+    direction: 0,
+  }
+}
+
+type RecommendMood = {
+  name: string
+  fanEnable: boolean
+  fanSpeed: number
+  moodColorsLineProps?: ColorsLineProps
+  speed?: number
+  mode?: number
+}
+
+function getRecommendMoods(
+  isStatic: boolean,
+  moduleParams: MoodPageProps
+): RecommendMood[] {
+  const { isSupportColor, isSupportTemperature } = moduleParams
+  const jump = moduleParams.isStringLight ? SceneMode.StringJump : moduleParams.isStripLight ? SceneMode.StripJump : SceneMode.SourceJump
+  const gradient = moduleParams.isStringLight ? SceneMode.StringGradient : moduleParams.isStripLight ? SceneMode.StripGradient : SceneMode.SourceGradient
+  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: 100,
+                colorTemp: 100,
+                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: 100,
+                colorTemp: 100,
+                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: 100,
+                colorTemp: 100,
+                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: 50,
+                v: 80,
+                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: 50,
+                v: 80,
+                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: 50,
+                v: 80,
+                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: 50,
+                v: 80,
+                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: 50,
+                v: 80,
+                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: 50,
+                v: 80,
+                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,
+        speed: 50,
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: jump,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 75,
+              s: 90,
+              v: 48,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 200,
+              s: 26,
+              v: 86,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 75,
+              s: 90,
+              v: 80,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: gradient,
+        moodColorsLineProps: {
+          type: 'gradient',
+          nodes: [
+            {
+              h: 40,
+              s: 100,
+              v: 100,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+            {
+              h: 24,
+              s: 100,
+              v: 100,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+            {
+              h: 0,
+              s: 100,
+              v: 100,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: jump,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 300,
+              s: 17,
+              v: 59,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 183,
+              s: 51,
+              v: 82,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 40,
+              s: 100,
+              v: 100,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: true,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+          ],
+        },
+      },
+    ]
+  } else if (isSupportTemperature) {
+    return [
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 50
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: jump,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 20,
+              colorTemp: 20,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 40,
+              colorTemp: 40,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 60,
+              colorTemp: 60,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: gradient,
+        moodColorsLineProps: {
+          type: 'gradient',
+          nodes: [
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 40,
+              colorTemp: 40,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 60,
+              colorTemp: 60,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 80,
+              colorTemp: 80,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: jump,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 50,
+              colorTemp: 50,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 70,
+              colorTemp: 70,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+          ],
+        },
+      },
+    ]
+  } else {
+    return [
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text1'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 50
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text2'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: jump,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 20,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 40,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 60,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text4'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: gradient,
+        moodColorsLineProps: {
+          type: 'gradient',
+          nodes: [
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 40,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 60,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 80,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: gradient,
+            },
+          ],
+        },
+      },
+      {
+        name: Strings.getLang('add_new_dynamic_mood_field_headline_text3'),
+        fanEnable: true,
+        fanSpeed: 1,
+        speed: 14,
+        mode: jump,
+        moodColorsLineProps: {
+          type: 'separate',
+          nodes: [
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 50,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 70,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+            {
+              h: 0,
+              s: 50,
+              v: 80,
+              brightness: 100,
+              colorTemp: 100,
+              isColorNode: false,
+              switchingInterval: 0,
+              transitionTime: 14,
+              transitionMode: jump,
+            },
+          ],
+        },
+      },
+    ]
+  }
+}