@ledvance/ui-biz-bundle 1.1.4 → 1.1.7

package/src/modules/flags/FlagInfo.tsx

@@ -0,0 +1,298 @@
+import I18n from "@ledvance/base/src/i18n";
+import { SceneNodeTransitionMode } from "@ledvance/ui-biz-bundle/src/modules/scene/SceneInfo";
+
+type HSV = {
+  h: number 
+  s: number 
+  v: number
+}
+
+type BT = {
+  brightness: number 
+  colorTemp: number
+}
+
+export interface FlagItemInfo {
+  id: number
+  version?: number
+  mode: number
+  speed: number
+  colors: HSV[]
+  whiteColors: BT []
+  fanEnable?: boolean
+  fanSpeed?: number
+}
+
+export interface FlagUiInfo extends FlagItemInfo{
+  name: string
+}
+
+export const defFlagList: FlagUiInfo[] = [
+  {
+    id: 255,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_DE'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [
+      {h: 48, s: 100, v: 100},
+      {h: 360, s: 100, v: 86},
+      {h: 0, s: 0, v:0}],
+  },
+  {
+    id: 254,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_BE'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 350, s: 92, v: 78}, {h: 48, s: 100, v: 100}, {h: 25, s: 15, v: 17}]
+  },
+  {
+    id: 253,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_FR'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 355, s: 82, v: 92}, {h: 0, s: 0, v: 100}, {h: 212, s: 100, v: 32}]
+  },
+  {
+    id: 252,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_PT'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 4, s: 87, v: 85}, {h: 4, s: 87, v: 85}, {h: 150, s: 96, v: 41}]
+  },
+  {
+    id: 251,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_scotland'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 209, s: 100, v: 72}, {h: 0, s: 0, v: 100}, {h: 209, s: 100, v: 72}]
+  },
+  {
+    id: 250,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_ES'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 357, s: 87, v: 66}, {h: 47, s: 100, v: 94}, {h: 357, s: 87, v: 66}]
+  },
+  {
+    id: 249,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_TR'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 350, s: 92, v: 78}, {h: 350, s: 92, v: 78}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 248,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_AT'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 355, s: 78, v: 93}, {h: 0, s: 0, v: 100}, {h: 355, s: 78, v: 93}]
+  },
+  {
+    id: 247,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_england'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 353, s: 91, v: 80}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 246,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_HU'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 133, s: 36, v: 43}, {h: 0, s: 0, v: 100}, {h: 354, s: 80, v: 80}]
+  },
+  {
+    id: 245,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_SK'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 357, s: 88, v: 93}, {h: 213, s: 93, v: 63}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 244,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_AL'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 4, s: 87, v: 85}, {h: 0, s: 0, v:0}, {h: 4, s: 87, v: 85}]
+  },
+  {
+    id: 243,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_DK'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 350, s: 92, v: 78}, {h: 0, s: 0, v:0}, {h: 350, s: 92, v: 78}]
+  },
+  {
+    id: 242,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_NL'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 217, s: 100, v: 64}, {h: 0, s: 0, v:0}, {h: 350, s: 92, v: 78}]
+  },
+  {
+    id: 241,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_RO'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 353, s: 91, v: 80}, {h: 48, s: 91, v: 98}, {h: 219, s: 100, v: 49}]
+  },
+  {
+    id: 240,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_CH'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 4, s: 87, v: 85}, {h: 0, s: 0, v: 100}, {h: 4, s: 87, v: 85}]
+  },
+  {
+    id: 239,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_RS'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 210, s: 89, v: 46}, {h: 357, s: 72, v: 77}]
+  },
+  {
+    id: 238,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_IT'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 366, s: 83, v: 80}, {h: 212, s: 4, v: 100}, {h: 149, s: 100, v: 54}]
+  },
+  {
+    id: 237,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_CZ'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 358, s: 90, v: 84}, {h: 0, s: 0, v: 100}, {h: 211, s: 86, v: 49}]
+  },
+  {
+    id: 236,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_SI'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 217, s: 100, v: 64}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 235,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_HR'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 220, s: 89, v: 54}, {h: 2, s: 89, v: 90}]
+  },
+  {
+    id: 234,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_SE'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 201, s: 100, v: 65}, {h: 48, s: 99, v: 99}, {h: 201, s: 100, v: 65}]
+  },
+  {
+    id: 233,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_NO'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 218, s: 100, v: 35}, {h: 347, s: 93, v: 72}]
+  },
+  {
+    id: 232,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_PL'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 348, s: 90, v: 86}, {h: 0, s: 0, v: 100}]
+  },
+]

package/src/modules/flags/FlagItem.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, View, Text, ViewStyle } from 'react-native'
+import React from 'react'
+import Card from '@ledvance/base/src/components/Card'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
+import Spacer from '@ledvance/base/src/components/Spacer'
+
+const cx = Utils.RatioUtils.convertX
+
+interface RecommendMoodItemProps {
+  enable: boolean
+  title: string
+  colors: string[]
+  style?: ViewStyle
+  onPress?: () => void
+  onSwitch: (enable: boolean) => void
+}
+
+export default function FlagItem(props: RecommendMoodItemProps) {
+  return (
+    <Card
+      style={[styles.card, props.style]}
+      onPress={props.onPress}>
+      <View>
+        <Spacer height={cx(16)} />
+        <View style={styles.headline}>
+          <Text style={styles.headText}>{props.title}</Text>
+          <SwitchButton
+            thumbStyle={{ elevation: 0 }}
+            value={props.enable}
+            onValueChange={props.onSwitch} />
+        </View>
+        <Spacer />
+        <View style={styles.gradientItem}>
+          <MoodColorsLine
+            type={'separate'}
+            nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
+            colors={props.colors} />
+        </View>
+        <Spacer height={cx(16)} />
+      </View>
+    </Card>
+  )
+}
+
+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: {
+    alignItems: 'center',
+  },
+  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/flags/FlagPage.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useMemo } from "react";
+import Page from "@ledvance/base/src/components/Page";
+import { useDeviceId, useDeviceInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { FlatList } from "react-native";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import { Utils } from "tuya-panel-kit";
+import FlagItem from "./FlagItem";
+import { FlagUiInfo } from "./FlagInfo";
+import { getRemoteFlag, saveFlag, useFlag } from "./FlagActions";
+import { useRoute, useNavigation } from '@react-navigation/core'
+import I18n from "@ledvance/base/src/i18n";
+import { useReactive } from "ahooks";
+import { cloneDeep, difference, isEqual, last, map, range } from "lodash";
+import { ui_biz_routerKey} from "../../navigation/Routers";
+import res from "@ledvance/base/src/res";
+import { hsv2Hex } from "@ledvance/base/src/utils";
+import { SceneNodeTransitionMode } from "@ledvance/ui-biz-bundle/src/modules/scene/SceneInfo";
+import { Result } from "@ledvance/base/src/models/modules/Result";
+import { useDps } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { WORK_MODE } from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+const cx = Utils.RatioUtils.convertX
+
+export interface FlagPageProps {
+  isSupportColor?: boolean
+  isSupportBrightness?: boolean
+  isSupportTemperature?: boolean
+  isSupportFan?: boolean
+  isSupportUVCFan?: boolean
+  isSupportMixScene?: boolean
+  drawToolLight?: { 
+    drawToolCode: string
+    drawToolObj2dp: (colors: string[]) => string
+    drawToolDp2Obj: (dp: string) => string[]
+  }
+  getRemoteMoodList?: (devId: string) => Promise<Result<any>>
+  sceneDataCode?: string
+  workModeCode: string
+  switchLed?: string
+}
+
+const FlagPage = () => {
+  const params = useRoute().params as FlagPageProps
+  const devInfo = useDeviceInfo()
+  const devId = useDeviceId()
+  const navigation = useNavigation()
+  const [, setDps] = useDps()
+  const [flagState, setFlag] = useFlag((params.sceneDataCode || params?.drawToolLight?.drawToolCode)!!, {
+    isFan: params.isSupportFan,
+    isUVCFan: params.isSupportUVCFan,
+    isMixLight: params.isSupportMixScene,
+    ...params
+  })
+  const state = useReactive({
+    loading: true,
+    flags: [] as FlagUiInfo[],
+    moods: [] as any[]
+  })
+  const flagId = useMemo(() =>{
+    if(flagState.colors !== undefined){
+      const flag = state.flags.find(item => {
+        const hexColors = item.colors.map(c => hsv2Hex(c.h, c.s, c.v).toLocaleUpperCase())
+        return isEqual(hexColors, flagState.colors)
+      })
+      return flag?.id
+    }
+    if(flagState.id !== undefined){
+      return flagState
+    }
+    return -1
+  }, [JSON.stringify(flagState), JSON.stringify(state.flags)])
+
+
+  useEffect(() => {
+    getRemoteFlagInfo().then()
+    if(params.getRemoteMoodList){
+      params.getRemoteMoodList(devId).then(res =>{
+        if(res.success && Array.isArray(res.data)){
+          state.moods = res.data
+        }
+      })
+    }
+  }, [])
+
+  const getRemoteFlagInfo = async () => {
+    const res = await getRemoteFlag(devId)
+    if (res.success) {
+      state.flags = cloneDeep(res.data) || []
+    }
+  }
+
+  const navigationRoute = (mode: 'add' | 'edit', currentMood?: FlagUiInfo) => {
+    const path = ui_biz_routerKey.ui_biz_flag_page_edit
+    navigation.navigate(path, {
+      mode,
+      moods: state.flags,
+      currentMood,
+      moduleParams: params,
+      modDeleteFlag
+    })
+  }
+
+  const modDeleteFlag = async (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo) => {
+    const checkedMood: FlagUiInfo = {
+      ...currentMood,
+    }
+
+    let newScene: FlagUiInfo[] = []
+    if (mode === 'add') {
+      newScene = [
+        checkedMood,
+        ...state.flags,
+      ]
+    } else if (mode === 'del') {
+      newScene = state.flags.filter(item => item.id !== checkedMood.id)
+    } else {
+      newScene = state.flags.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 saveFlag(devId, cloneDeep(newScene))
+    if (res.success) {
+      state.flags = cloneDeep(newScene)
+      if(mood){
+        setFlag(mood)
+      }else{
+        setDps({[params.workModeCode!!]: params.isSupportColor ? WORK_MODE.COLOUR : WORK_MODE.WHITE})
+      }
+      return {
+        success: true
+      }
+    }
+    return {
+      success: false
+    }
+  }
+
+  return (
+    <Page
+      headlineText={I18n.getLang('Feature_devicepanel_flags')}
+      backText={devInfo.name}
+      headlineIcon={res.add}
+      onHeadlineIconClick={() => {
+        const useIds = map([
+          ...state.flags,
+          ...state.moods
+        ], 'id')
+        console.log(useIds, '< --- useIds')
+        const idRange = range(0, 256)
+        const unuseId = last(difference(idRange, useIds))
+        if(unuseId !== undefined){
+          navigationRoute('add', newFlag(unuseId))
+        }
+      }}
+    >
+      <FlatList
+        data={state.flags}
+        renderItem={({ item }) => <FlagItem
+          enable={flagId === item.id}
+          title={item.name}
+          colors={item.colors.map(item => hsv2Hex(item.h, item.s, item.v))}
+          onSwitch={async (enable) => {
+            if (enable) {
+              await setFlag(item)
+            }
+          }}
+          onPress={() => {
+            navigationRoute('edit', item)
+          }}
+        />}
+        keyExtractor={item => item.name}
+        ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+        ItemSeparatorComponent={() => (<Spacer />)}
+        ListFooterComponent={() => (<Spacer />)}
+      />
+    </Page>
+  )
+}
+
+export const newFlag = (id: number) => {
+  return {
+    version: 0,
+    id,
+    name: '',
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    colors: [
+      { h: 48, s: 100, v: 100 },
+      { h: 360, s: 100, v: 86 },
+    ],
+    whiteColors: [{ brightness: 100, colorTemp: 0 }],
+    fanEnable: undefined,
+    fanSpeed: undefined
+  }
+}
+
+export default FlagPage

package/src/modules/mood/DynamicMoodEditorPage.tsx

@@ -5,7 +5,7 @@ import {useNavigation, useRoute} from '@react-navigation/native'
 import {StackNavigationProp} from '@react-navigation/stack'
 import React, {useCallback, useEffect, useMemo} from 'react'
 import {useReactive} from 'ahooks'
-import {COLOUR, useWorkMode, WHITE} from 'hooks/DeviceDpStateHooks'
+import {COLOUR, SCENE, useWorkMode, WHITE} from 'hooks/DeviceDpStateHooks'
 import {hsv2Hex, mapFloatToRange} from '@ledvance/base/src/utils'
 import {cctToColor} from '@ledvance/base/src/utils/cctUtils'
 import res from '@ledvance/base/src/res'
@@ -38,7 +38,7 @@ const DynamicMoodEditorPage = () => {
   const moduleParams = params.moduleParams
   const deviceId = useDeviceId()
   const [moodId, setScene] = useScene(moduleParams.sceneDpCode)
-  const [, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
+  const [workMode, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
   const isUVCFan = isUVCFanDevice()
   const role = useRole()
   const state = useReactive<DynamicMoodEditorPageState>({
@@ -101,7 +101,7 @@ const DynamicMoodEditorPage = () => {
     )
     if (saveRes.success) {
       if (list.length > 0) {
-        if (isDelete && currentMood.id === moodId) {
+        if (isDelete && currentMood.id === moodId && workMode === SCENE) {
           const setSceneRes = await setScene(
             deviceId,
             list[0],

package/src/modules/mood/FantasyMoodEditPage.tsx

@@ -4,7 +4,7 @@ import { useNavigation, useRoute } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import React, { useCallback, useEffect, useMemo } from 'react'
 import { useReactive } from 'ahooks'
-import { useWorkMode, COLOUR } from 'hooks/DeviceDpStateHooks'
+import { useWorkMode, COLOUR, SCENE } from 'hooks/DeviceDpStateHooks'
 import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
 import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
 import res from '@ledvance/base/src/res'
@@ -16,7 +16,7 @@ import Spacer from '@ledvance/base/src/components/Spacer'
 import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
 import { Utils } from 'tuya-panel-kit'
 import LdvSlider from '@ledvance/base/src/components/ldvSlider'
-import { useDeviceId, useRole } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import TextButton from '@ledvance/base/src/components/TextButton'
 import { stringLightSceneMode, stripLightSceneMode, StripSceneUIState, StripNodeInfo, StripLightSceneMode } from '../scene/SceneInfo'
 import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
@@ -49,9 +49,8 @@ const FantasyMoodEditPage = () => {
   const params = cloneDeep(routeParams)
   const moduleParams = params.moduleParams
   const deviceId = useDeviceId()
-  const [, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
+  const [workMode, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
   const [, setFantasyScene] = useFantasyScene(params.moduleParams.sceneDpCode, params.moduleParams.workModeDpCode, params.moduleParams.switchLedDpCode, moduleParams.isStringLight)
-  const role = useRole()
   const state = useReactive<FantasyMoodEditPageState>({
     headline: '',
     mood: params.currentMood,
@@ -107,7 +106,7 @@ const FantasyMoodEditPage = () => {
     const saveRes = await saveFantasyScene(deviceId, params.moduleParams.featureId, list, moduleParams.isStringLight)
     if (saveRes.success) {
       if (list.length > 0) {
-        if (isDelete) {
+        if (isDelete  && workMode === SCENE) {
           await setFantasyScene(list[0])
         } else {
           await setFantasyScene(currentMood)