@ledvance/group-ui-biz-bundle 1.0.0

package/src/modules/mood/MoodPage.tsx

@@ -0,0 +1,332 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import Page from '@ledvance/base/src/components/Page'
+import { Utils } from 'tuya-panel-kit'
+import { SceneMode, ScenePageUIState, SceneUIState, StripSceneUIState } from './SceneInfo'
+import { getRemoteSceneList, saveScene, useScene, useSwitchLed, useWorkMode } from './SceneAction'
+import { WorkMode } from '@ledvance/base/src/utils/interface'
+import { useDeviceInfo, useMoods, useUAGroupInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { useReactive } from 'ahooks'
+import Strings from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import { FlatList, StyleSheet, View } from 'react-native'
+import Tag from '@ledvance/base/src/components/Tag'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import InfoText from '@ledvance/base/src/components/InfoText'
+import CustomListDialog from '@ledvance/base/src/components/CustomListDialog'
+import MoodItem from './MoodItem'
+import { useNavigation, useRoute } from '@react-navigation/core'
+import { cloneDeep } from 'lodash'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+
+const cx = Utils.RatioUtils.convertX
+
+interface MoodPageUIState extends ScenePageUIState {
+  staticTagChecked: boolean
+  dynamicTagChecked: boolean
+  showAddMoodPopover: boolean
+  originScene: SceneUIState[] | StripSceneUIState[]
+  filteredMoods: SceneUIState[] | StripSceneUIState[]
+  loading: boolean
+}
+
+export interface MoodPageProps {
+  switchLedDpCode: string
+  sceneDataDpCode: string
+  workModeDpCode: string
+  isSupportFan?: boolean
+  isSupportUVC?: boolean
+  isSupportColor: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+  isStringLight?: boolean
+  isStripLight?: boolean
+}
+
+const MAX_MOOD_COUNT = 255
+
+const MoodPage = () => {
+  const routeParams = useRoute().params as MoodPageProps
+  const params: MoodPageProps = {
+    ...routeParams,
+  }
+  const deviceInfo = useDeviceInfo()
+  const uaGroupInfo = useUAGroupInfo()
+  const navigation = useNavigation()
+  const [scene, setScene] = useScene({
+    isStringLight: params.isStringLight,
+    isStripLight: params.isStripLight,
+    isSupportFan: params.isSupportFan,
+    isSupportUVC: params.isSupportUVC
+  })
+  const [moods, setMoods] = useMoods()
+  const [workMode] = useWorkMode()
+  const [switchLed] = useSwitchLed()
+  const state = useReactive<MoodPageUIState>({
+    currentScene: undefined,
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    showAddMoodPopover: false,
+    scenes: cloneDeep(moods),
+    flag: Symbol(),
+    originScene: [],
+    filteredMoods: [],
+    loading: false,
+  })
+
+  useEffect(() => {
+    if (!(moods && moods.length)) {
+      getRemoteSceneList(uaGroupInfo.tyGroupId.toString(), {
+        isSupportColor: params.isSupportColor,
+        isSupportTemperature: params.isSupportTemperature,
+        isSupportBrightness: params.isSupportBrightness,
+        isStringLight: params.isStringLight,
+        isStripLight: params.isStripLight,
+        isSupportFan: params.isSupportFan,
+        isSupportUVC: params.isSupportUVC
+      }).then(res => {
+        if (res.success && res.data) {
+          setMoods(res.data)
+          // @ts-ignore
+          state.scenes = cloneDeep(res.data)
+        }
+      })
+    }
+  }, [])
+
+  const checkedMood = (currentMood?: SceneUIState): SceneUIState | undefined=>{
+    if(currentMood){
+      return {
+        ...currentMood,
+        nodes: currentMood.nodes.map(node =>({
+          ...node,
+          h: node.h,
+          s: node.isColorNode ? node.s : 50,
+          v: node.isColorNode ? node.v : 80,
+          colorTemp: node.isColorNode ? 100 : node.colorTemp,
+          brightness: node.isColorNode ? 100 : node.brightness
+        }))
+      }
+    }
+    return currentMood
+  }
+
+  const navigationRoute = (isStatic: boolean, mode: 'add' | 'edit', currentMood?: SceneUIState) => {
+    const path = mode === 'add' ? ui_biz_routerKey.group_ui_biz_mood_add : isStatic ? ui_biz_routerKey.group_ui_biz_static_mood_edit : ui_biz_routerKey.group_ui_biz_dynamic_mood_edit
+    navigation.navigate(path, {
+      mode,
+      isStatic,
+      moods: state.scenes,
+      currentMood: checkedMood(currentMood),
+      moduleParams: params,
+      modDeleteMood
+    })
+  }
+
+  const modDeleteMood = async (mode: 'add' | 'edit' | 'del', currentMood: SceneUIState) => {
+    const checkedMood = {
+      ...currentMood,
+      nodes: currentMood.nodes.map(node => {
+        if(mode !== 'del'){
+          if(node.isColorNode){
+            node.brightness = 0
+            node.colorTemp = 0
+          }else{
+            node.h = 0
+            node.s = 0
+            node.v = 0
+            if(!params.isSupportTemperature){
+              node.colorTemp = 100 // 适配dim灯
+            }
+          }
+          return node
+        }
+        return node
+      })
+    }
+
+    let newScene: SceneUIState[] = []
+    if (mode === 'add') {
+      newScene = [
+        checkedMood,
+        ...state.scenes,
+      ]
+    } else if (mode === 'del') {
+      newScene = state.scenes.filter(item => item.id !== checkedMood.id)
+    } else {
+      newScene = state.scenes.map(item => {
+        if (item.id === checkedMood.id) {
+          return checkedMood
+        }
+        return item
+      })
+    }
+    const mood = mode === 'del' ? (newScene.length === 0 ? undefined : newScene[0]) : checkedMood
+    const res = await saveScene(uaGroupInfo.tyGroupId.toString(), cloneDeep(newScene), {
+      isStringLight: params.isStringLight,
+      isStripLight: params.isStripLight,
+      isSupportFan: params.isSupportFan,
+      isSupportUVC: params.isSupportUVC
+    })
+    if (res.success) {
+      state.scenes = cloneDeep(newScene)
+      setMoods(cloneDeep(newScene))
+      return setScene({
+        scene: cloneDeep(mood),
+        sceneDataDpCode: params.sceneDataDpCode,
+        workModeDpCode: params.workModeDpCode,
+        workMode: mood ? WorkMode.Scene : (params.isSupportColor ? WorkMode.Colour : WorkMode.White),
+        switchLedDpCode: params.switchLedDpCode
+      })
+    }
+    return {
+      success: false
+    }
+  }
+
+  const onAddMoodDialogItemClick = useCallback((isStatic: boolean, _: number) => {
+    if (!!state.scenes) {
+      navigationRoute(isStatic, 'add')
+    }
+    state.showAddMoodPopover = false
+  }, [state.scenes])
+
+  const getCustomList = (isFantasyScene: boolean) =>{
+    const customList = [
+      {
+        text: Strings.getLang('mood_overview_add_mood_text'),
+        value: true,
+      },
+      {
+        text: Strings.getLang('mood_overview_add_mood_text2'),
+        value: false,
+      },
+    ]
+    if(isFantasyScene){
+      return customList.filter(c => !c.value)
+    }
+    return customList
+  }
+
+  useEffect(() => {
+    state.filteredMoods = state.scenes.filter(item => {
+      return (state.staticTagChecked && state.dynamicTagChecked) ||
+        (!state.staticTagChecked && !state.dynamicTagChecked) ||
+        (state.staticTagChecked && item.nodes.length < 2) ||
+        (state.dynamicTagChecked && item.nodes.length > 1)
+    })
+  }, [state.staticTagChecked, state.dynamicTagChecked, state.scenes])
+
+  const gradientMode = useMemo(() => (
+    params.isStringLight ? SceneMode.StringGradient : params.isStripLight ? SceneMode.StripGradient : SceneMode.SourceGradient
+    ), [params.isStringLight, params.isStripLight, SceneMode])
+  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
+          // @ts-ignore
+          data={state.filteredMoods}
+          renderItem={({ item }) => {
+            return (
+              <MoodItem
+                enable={switchLed && workMode === WorkMode.Scene && scene?.scene?.id === item.id}
+                mood={item}
+                onPress={() => {
+                  navigationRoute(item.nodes.length === 1, 'edit', item)
+                }}
+                type={item.mode === gradientMode ? 'gradient' : 'separate'}
+                onSwitch={async _ => {
+                  state.loading = true
+                  await setScene({
+                    scene: cloneDeep(item),
+                    sceneDataDpCode: params.sceneDataDpCode,
+                    workModeDpCode: params.workModeDpCode,
+                    workMode: WorkMode.Scene,
+                    switchLedDpCode: params.switchLedDpCode
+                  })
+                  state.loading = false
+                }} />
+            )
+          }}
+          ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+          ItemSeparatorComponent={() => (<Spacer />)}
+          ListFooterComponent={() => (
+            <View style={styles.infoLine}>
+              <Spacer />
+              <InfoText
+                icon={res.ic_info}
+                text={Strings.getLang('mood_overview_information_text')} />
+              <Spacer height={cx(40)} />
+            </View>
+          )}
+          keyExtractor={item => `${item.id}`} />
+      </Page>
+      <CustomListDialog
+        show={state.showAddMoodPopover}
+        style={styles.addMoodPopover}
+        itemStyle={styles.popoverItem}
+        onDismiss={() => {
+          state.showAddMoodPopover = false
+        }}
+        data={getCustomList(!!(params.isStringLight || params.isStripLight))}
+        onItemPress={onAddMoodDialogItemClick} />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  tagLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(24),
+  },
+  infoLine: {
+    marginHorizontal: cx(24),
+  },
+  addMoodPopover: {
+    width: cx(171),
+    height: cx(90.5),
+    marginStart: cx(156),
+    marginTop: cx(105),
+    backgroundColor: '#fff',
+  },
+  popoverItem: {
+    width: cx(171),
+    height: cx(45),
+    alignItems: 'flex-start',
+  },
+})
+
+export default MoodPage

package/src/modules/mood/RecommendMoodItem.tsx

@@ -0,0 +1,75 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import Card from '@ledvance/base/src/components/Card'
+import { Utils } from 'tuya-panel-kit'
+import MoodColorsLine, { MoodColorsLineType } from '@ledvance/base/src/components/MoodColorsLine'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { hsv2Hex } from '@ledvance/base/src/utils'
+import { CellContent } from '@ledvance/base/src/components/Cell'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import {SceneNodeInfo} from './SceneInfo'
+
+const cx = Utils.RatioUtils.convertX
+
+export interface ColorsLineProps {
+    type: MoodColorsLineType
+    nodes?: SceneNodeInfo[]
+}
+
+interface RecommendMoodItemProps {
+    title: string
+    moodColorsLineProps?: ColorsLineProps
+    onPress: () => void
+}
+
+export default function RecommendMoodItem(props: RecommendMoodItemProps) {
+    return (
+        <Card style={styles.root} onPress={props.onPress}>
+            <CellContent
+                title={props.title}
+                value={''}
+                style={styles.content}
+                titleStyle={styles.title}
+                iconStyle={{
+                    color: '#000',
+                    size: cx(16),
+                }} />
+            {(!!props.moodColorsLineProps) &&
+                (<>
+                        <View style={styles.lineStyle}>
+                            <MoodColorsLine type={props.moodColorsLineProps!!.type}
+                                            colors={props.moodColorsLineProps!!.nodes!!.map(node => {
+                                                return node.isColorNode ?
+                                                    hsv2Hex(node.h, node.s, node.v) :
+                                                    cctToColor(node.colorTemp.toFixed())
+                                            })} />
+                        </View>
+                        <Spacer height={cx(24)} />
+                    </>
+                )
+            }
+        </Card>
+    )
+}
+
+const styles = StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginHorizontal: cx(24),
+    },
+    content: {
+        height: cx(56),
+        marginHorizontal: cx(16),
+        width: cx(295)
+    },
+    title: {
+        color: '#000',
+        fontSize: cx(16),
+        fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    lineStyle: {
+        alignItems: 'center',
+        marginHorizontal: cx(16),
+    },
+})