@ledvance/ui-biz-bundle 1.1.35 → 1.1.37

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

@@ -0,0 +1,133 @@
+import React, { useMemo } from 'react'
+import Card from '@ledvance/base/src/components/Card'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import { Image, StyleSheet, Text, View, ViewProps, ViewStyle } from 'react-native'
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import I18n from '@ledvance/base/src/i18n'
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
+import res from '@ledvance/base/src/res'
+import { MixSceneInfo, MixMainLampInfo } from './MixSceneBeans'
+
+const cx = Utils.RatioUtils.convertX
+
+interface MixMoodItemProps extends ViewProps {
+  enable: boolean
+  mixMood: MixSceneInfo
+  onPress?: () => void
+  onSwitch: (enable: boolean) => void
+  style?: ViewStyle
+}
+
+
+const MixMoodItem = (props: MixMoodItemProps) => {
+  const { mixMood } = props
+  const isStaticMood = useMemo(() => {
+    return mixMood.secondlyLamp.nodes?.length === 0
+  }, [mixMood])
+  
+  return (
+    <Card style={[styles.card, props.style]} onPress={props.onPress}>
+      <View>
+        <Spacer height={cx(16)} />
+        <View style={styles.headline}>
+          <Text style={styles.headText}>{mixMood.name}</Text>
+          <SwitchButton value={props.enable} onValueChange={props.onSwitch} thumbStyle={{ elevation: 0 }} />
+        </View>
+        <Spacer />
+        <MixMoodColorsLine mixSubLight={mixMood.mainLamp} colorLight={false} />
+        {!isStaticMood && <>
+          <Spacer height={cx(7)} />
+          <MixMoodColorsLine mixSubLight={mixMood.secondlyLamp} colorLight={true} />
+        </>}
+        <Spacer height={cx(12)} />
+        <View style={styles.moodTypeItem}>
+          <View style={styles.moodTypeLabel}>
+            <Text style={styles.moodTypeLabelText}>
+              {I18n.getLang(isStaticMood ? 'mood_overview_field_chip_text' : 'mood_overview_field_chip_2')}
+            </Text>
+          </View>
+        </View>
+        <Spacer height={cx(16)} />
+      </View>
+    </Card>
+  )
+}
+
+export default MixMoodItem
+
+export function MixMoodColorsLine(props: { mixSubLight: MixMainLampInfo, colorLight: boolean }) {
+  const { mixSubLight, colorLight } = props
+  const lightColors = mixSubLight.nodes?.map(n => {
+    return colorLight ? hsv2Hex(n.h, Math.round(n.s), Math.round(mapFloatToRange(n.v / 100, 50, 100)))
+      : cctToColor(n.colorTemp.toFixed())
+  })
+  return (
+    <View style={styles.gradientItem}>
+      <Spacer height={0} width={cx(16)} />
+      <MoodColorsLine
+        width={cx(264)}
+        type={'separate'}
+        colors={lightColors} />
+      <Spacer height={0} width={cx(7)} />
+      <View style={styles.gradientItemIconView}>
+        <Image style={styles.gradientItemIcon} source={res.light_on} />
+      </View>
+      <Spacer height={0} width={cx(16)} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: cx(24),
+  },
+  headline: {
+    flexDirection: 'row',
+    marginHorizontal: cx(16),
+  },
+  headText: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    lineHeight: cx(20),
+  },
+  gradientItem: {
+    flexDirection: 'row',
+  },
+  gradientItemIconView: {
+    width: cx(24),
+    height: cx(24),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#aaa',
+    borderRadius: cx(8),
+  },
+  gradientItemIcon: {
+    width: cx(16),
+    height: cx(16),
+    tintColor: '#fff',
+  },
+  gradient: {
+    borderRadius: cx(8),
+  },
+  moodTypeItem: {
+    flexDirection: 'row',
+  },
+  moodTypeLabel: {
+    marginStart: cx(16),
+    paddingHorizontal: cx(12.5),
+    backgroundColor: '#E6E7E8',
+    borderRadius: cx(8),
+  },
+  moodTypeLabelText: {
+    height: cx(16),
+    color: '#000000DD',
+    fontSize: cx(10),
+    textAlignVertical: 'center',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+    lineHeight: cx(16),
+  },
+})

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

@@ -0,0 +1,318 @@
+import React, { useCallback, useEffect } 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
+
+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 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) => {
+    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)
+        })
+      }
+    }, 400)
+  }, [])
+
+  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()
+  }, [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 checkItemEnable = useCallback((mixMood: MixSceneInfo) => {
+    const { mainLamp, secondlyLamp } = mixMood
+    const isStatic = mainLamp.nodes.length === 1
+    return (workMode === WORK_MODE.SCENE || rgbcWorkMode === WORK_MODE.SCENE) &&
+    isStatic ? ((whiteSceneId === mainLamp.id) && mainLamp.id !== -1) :
+      (((whiteSceneId === mainLamp.id) && mainLamp.id !== -1) && ((fantasyId === secondlyLamp.id) && secondlyLamp.id !== -1))
+  }, [workMode, rgbcWorkMode, fantasyId, whiteSceneId])
+
+  const modDeleteFlag = async (mode: 'add' | 'edit' | 'del', currentMood: MixSceneInfo) => {
+    const list = mode === 'add' ? [currentMood, ...state.scenes] :
+      mode === 'del' ? state.scenes.filter(mood => (mood.mainLamp.id !== currentMood.mainLamp.id && mood.secondlyLamp.id !== currentMood.secondlyLamp.id)) :
+        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') {
+          if (whiteSceneId === mainLamp.id) {
+            setScene(deviceInfo.devId, getSceneByMix(list[0].mainLamp), params.sceneDpCode, params.workModeDpCode, params.switchLedDpCode, false, false).then()
+          }
+          if (fantasyId === secondlyLamp.id) {
+            setFantasyScene(list[0]?.secondlyLamp).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 {
+        await setWorkMode(WORK_MODE.WHITE)
+        await setRgbcWorkMode(WORK_MODE.COLOUR)
+      }
+      state.scenes = cloneDeep(list)
+      return { success: true }
+    }
+    
+    return { success: false }
+  }
+
+  useEffect(() => {
+    console.log(state.filteredMoods, '< --- filterMoods')
+  }, [JSON.stringify(state.filteredMoods)])
+  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={checkItemEnable(item)}
+                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 (checkItemEnable(item)) 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