@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/flags/FlagPage.tsx

@@ -1,278 +1,278 @@
-import React, { useEffect, useMemo } from "react";
-import Page from "@ledvance/base/src/components/Page";
-import { useDeviceId, useDeviceInfo, useFlagMode, useFlags, useMoods } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { FlatList, Image, TouchableOpacity, View } 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, saveFlagMode, useFlag } from "./FlagActions";
-import { useRoute, useNavigation } from '@react-navigation/core'
-import I18n from "@ledvance/base/src/i18n";
-import { useReactive, useUpdateEffect } 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 { ColorUtils, WORK_MODE } from "@tuya/tuya-panel-lamp-sdk/lib/utils";
-import TextField from "@ledvance/base/src/components/TextField";
-import { showDialog } from "@ledvance/base/src/utils/common";
-const cx = Utils.RatioUtils.convertX
-
-export interface FlagPageProps {
-  isSupportColor?: boolean
-  isSupportBrightness?: boolean
-  isSupportTemperature?: boolean
-  isStringLight?: boolean
-  isStripLight?: boolean
-  isCeilingLight?: boolean
-  isSupportMixScene?: boolean
-  drawToolLight?: { 
-    drawToolCode: string
-    drawToolObj2dp: (colors: any[]) => string[]
-    drawToolDp2Obj: (dp: string) => string[]
-  }
-  getRemoteMoodList?: (devId: string) => Promise<Result<any>>
-  sceneDataCode?: string
-  workModeCode: string
-  switchLedCode: string
-  whiteSwitchCode?:string
-  rgbcWorkModeCode?: string 
-  rgbcSwitchLedCode?: string 
-  brightValueCode?: string 
-  temperatureCode?: string 
-}
-
-const FlagPage = () => {
-  const params = useRoute().params as FlagPageProps
-  const devInfo = useDeviceInfo()
-  const devId = useDeviceId()
-  const navigation = useNavigation()
-  const [dps, setDps] = useDps()
-  const [moods, setMoods] = useMoods()
-  const [flags, setFlags] = useFlags()
-  const [flagMode, setFlagMode] = useFlagMode()
-  const [flagState, setFlag] = useFlag(((params.isStripLight || params.isCeilingLight) ? params?.drawToolLight?.drawToolCode : params.sceneDataCode)!!, {
-    isMixLight: params.isSupportMixScene,
-    isStringLight: params.isStringLight,
-    isCeilingLight: params.isCeilingLight,
-    ...params
-  })
-  const state = useReactive({
-    loading: false,
-    flags: cloneDeep(flags) as FlagUiInfo[],
-    moods: params.isStripLight ? [] : cloneDeep(moods),
-    searchText: ''
-  })
-  const flagId = useMemo(() =>{
-    if(flagState.colors !== undefined){
-      if(flagMode?.flagId !== undefined) return flagMode.flagId
-      const flag = state.flags.find(item => {
-        const hexColors = item.colors.map(c => ColorUtils.hsv2hex(c.h, c.s, c.v).toLocaleUpperCase())
-        return isEqual(hexColors, flagState.colors)
-      })
-      return flag?.id
-    }
-    if(flagState.id !== undefined){
-      return flagState.id
-    }
-    return -1
-  }, [JSON.stringify(flagState), JSON.stringify(state.flags), flagMode])
-
-  console.log(flags, '< --- flags')
-  useEffect(() => {
-    if(!devInfo.devId) return 
-    if(!flags?.length){
-      getRemoteFlagInfo().then()
-    }
-    if(params.getRemoteMoodList && !moods?.length){
-      params.getRemoteMoodList(devInfo.devId).then(res =>{
-        if(res.success && Array.isArray(res.data)){
-          state.moods = res.data
-          setMoods(cloneDeep(res.data))
-        }
-      })
-    }
-  }, [devInfo.devId])
-
-  useUpdateEffect(() =>{
-    state.moods = params.isStripLight ? [] : cloneDeep(moods)
-  }, [JSON.stringify(moods)])
-
-  useUpdateEffect(() =>{
-    state.flags = cloneDeep(flags)
-  }, [JSON.stringify(flags)])
-
-  useUpdateEffect(() =>{
-    state.flags = state.searchText !== '' ? cloneDeep(flags).filter(flag => (flag.name ?? '').toLowerCase().includes(state.searchText.toLowerCase())) : cloneDeep(flags)
-  }, [state.searchText, flags])
-
-  const getRemoteFlagInfo = async (isRefresh?: boolean) => {
-    const res = await getRemoteFlag(devInfo.devId, isRefresh)
-    if (res.success) {
-      let cloneFlag: FlagUiInfo[] = cloneDeep(res.data) || []
-      state.flags = cloneFlag
-      setFlags(cloneDeep(cloneFlag))
-    }
-  }
-
-  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 = [
-        ...state.flags,
-        checkedMood
-      ]
-    } 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) {
-      setFlags(cloneDeep(newScene))
-      state.flags = cloneDeep(newScene)
-      if (mood){
-        if (mode === 'del' && (!flagMode?.flagMode || currentMood.id !== flagId || !dps[params.switchLedCode])){
-          return {
-            success: true 
-          }
-        }
-        updateFlagMode(true, mood)
-        return setFlag(mood)
-      }else{
-        updateFlagMode(false)
-        return setDps({[params.workModeCode!!]: params.isSupportColor ? WORK_MODE.COLOUR : WORK_MODE.WHITE})
-      }
-    }
-    return {
-      success: false
-    }
-  }
-
-  const updateFlagMode = (flagMode: boolean, flag?:FlagUiInfo) =>{
-    saveFlagMode(devId, JSON.stringify({
-      flagMode,
-      flagId: flag?.id
-    })).then()
-    setFlagMode({
-      flagMode,
-      flagId: flag?.id
-    })
-  }
-
-  return (
-    <Page
-      headlineText={I18n.getLang('Feature_devicepanel_flags')}
-      backText={devInfo.name}
-      headlineIcon={res.add}
-      loading={state.loading}
-      onHeadlineIconClick={() => {
-        const useIds = map([
-          ...state.flags,
-          ...state.moods
-        ], 'id')
-        const idRange = range(0, 256)
-        const unuseId = last(difference(idRange, useIds))
-        if(unuseId !== undefined){
-          navigationRoute('add', newFlag(unuseId))
-        }
-      }}
-    >
-      <View style={{flexDirection: 'row', display: 'flex', alignItems: 'center'}}>
-        <TextField 
-          value={state.searchText}
-          onChangeText={text => {
-            state.searchText = text
-          }}
-          placeholder={I18n.getLang('country_selection_textfield_headline_search')}
-          style={{ marginHorizontal: cx(24), flex: 1 }}
-        />
-        <TouchableOpacity style={{paddingRight: cx(24)}}
-          onPress={() =>{
-            showDialog({
-              method: 'confirm',
-              title: I18n.getLang('flag_resetbutton'),
-              subTitle: I18n.getLang('flag_resetdescription'),
-              onConfirm: async (_, {close}) =>{
-                close()
-                state.loading = true 
-                await getRemoteFlagInfo(true)
-                state.loading = false 
-              }
-            })
-          }}
-        >
-          <Image source={res.ic_refresh} style={{width: cx(24), height: cx(24)}}/>
-        </TouchableOpacity>
-      </View>
-      <FlatList
-        data={state.flags}
-        renderItem={({ item }) => <FlagItem
-          enable={flagMode?.flagMode && dps[params.workModeCode] === (params.isCeilingLight ? WORK_MODE.WHITE : params.isStripLight ? WORK_MODE.COLOUR : WORK_MODE.SCENE) && flagId === item.id && dps[params.switchLedCode]}
-          title={item.name}
-          icon={item.icon}
-          colors={item.colors.map(item => hsv2Hex(item.h, item.s, item.v)).reverse()}
-          onSwitch={async (enable) => {
-            if (enable) {
-              state.loading = true 
-              await setFlag(item)
-              state.loading = false 
-              updateFlagMode(true, 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
-  }
-}
-
+import React, { useEffect, useMemo } from "react";
+import Page from "@ledvance/base/src/components/Page";
+import { useDeviceId, useDeviceInfo, useFlagMode, useFlags, useMoods } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { FlatList, Image, TouchableOpacity, View } 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, saveFlagMode, useFlag } from "./FlagActions";
+import { useRoute, useNavigation } from '@react-navigation/core'
+import I18n from "@ledvance/base/src/i18n";
+import { useReactive, useUpdateEffect } 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 { ColorUtils, WORK_MODE } from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+import TextField from "@ledvance/base/src/components/TextField";
+import { showDialog } from "@ledvance/base/src/utils/common";
+const cx = Utils.RatioUtils.convertX
+
+export interface FlagPageProps {
+  isSupportColor?: boolean
+  isSupportBrightness?: boolean
+  isSupportTemperature?: boolean
+  isStringLight?: boolean
+  isStripLight?: boolean
+  isCeilingLight?: boolean
+  isSupportMixScene?: boolean
+  drawToolLight?: { 
+    drawToolCode: string
+    drawToolObj2dp: (colors: any[]) => string[]
+    drawToolDp2Obj: (dp: string) => string[]
+  }
+  getRemoteMoodList?: (devId: string) => Promise<Result<any>>
+  sceneDataCode?: string
+  workModeCode: string
+  switchLedCode: string
+  whiteSwitchCode?:string
+  rgbcWorkModeCode?: string 
+  rgbcSwitchLedCode?: string 
+  brightValueCode?: string 
+  temperatureCode?: string 
+}
+
+const FlagPage = () => {
+  const params = useRoute().params as FlagPageProps
+  const devInfo = useDeviceInfo()
+  const devId = useDeviceId()
+  const navigation = useNavigation()
+  const [dps, setDps] = useDps()
+  const [moods, setMoods] = useMoods()
+  const [flags, setFlags] = useFlags()
+  const [flagMode, setFlagMode] = useFlagMode()
+  const [flagState, setFlag] = useFlag(((params.isStripLight || params.isCeilingLight) ? params?.drawToolLight?.drawToolCode : params.sceneDataCode)!!, {
+    isMixLight: params.isSupportMixScene,
+    isStringLight: params.isStringLight,
+    isCeilingLight: params.isCeilingLight,
+    ...params
+  })
+  const state = useReactive({
+    loading: false,
+    flags: cloneDeep(flags) as FlagUiInfo[],
+    moods: params.isStripLight ? [] : cloneDeep(moods),
+    searchText: ''
+  })
+  const flagId = useMemo(() =>{
+    if(flagState.colors !== undefined){
+      if(flagMode?.flagId !== undefined) return flagMode.flagId
+      const flag = state.flags.find(item => {
+        const hexColors = item.colors.map(c => ColorUtils.hsv2hex(c.h, c.s, c.v).toLocaleUpperCase())
+        return isEqual(hexColors, flagState.colors)
+      })
+      return flag?.id
+    }
+    if(flagState.id !== undefined){
+      return flagState.id
+    }
+    return -1
+  }, [JSON.stringify(flagState), JSON.stringify(state.flags), flagMode])
+
+  console.log(flags, '< --- flags')
+  useEffect(() => {
+    if(!devInfo.devId) return 
+    if(!flags?.length){
+      getRemoteFlagInfo().then()
+    }
+    if(params.getRemoteMoodList && !moods?.length){
+      params.getRemoteMoodList(devInfo.devId).then(res =>{
+        if(res.success && Array.isArray(res.data)){
+          state.moods = res.data
+          setMoods(cloneDeep(res.data))
+        }
+      })
+    }
+  }, [devInfo.devId])
+
+  useUpdateEffect(() =>{
+    state.moods = params.isStripLight ? [] : cloneDeep(moods)
+  }, [JSON.stringify(moods)])
+
+  useUpdateEffect(() =>{
+    state.flags = cloneDeep(flags)
+  }, [JSON.stringify(flags)])
+
+  useUpdateEffect(() =>{
+    state.flags = state.searchText !== '' ? cloneDeep(flags).filter(flag => (flag.name ?? '').toLowerCase().includes(state.searchText.toLowerCase())) : cloneDeep(flags)
+  }, [state.searchText, flags])
+
+  const getRemoteFlagInfo = async (isRefresh?: boolean) => {
+    const res = await getRemoteFlag(devInfo.devId, isRefresh)
+    if (res.success) {
+      let cloneFlag: FlagUiInfo[] = cloneDeep(res.data) || []
+      state.flags = cloneFlag
+      setFlags(cloneDeep(cloneFlag))
+    }
+  }
+
+  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 = [
+        ...state.flags,
+        checkedMood
+      ]
+    } 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) {
+      setFlags(cloneDeep(newScene))
+      state.flags = cloneDeep(newScene)
+      if (mood){
+        if (mode === 'del' && (!flagMode?.flagMode || currentMood.id !== flagId || !dps[params.switchLedCode])){
+          return {
+            success: true 
+          }
+        }
+        updateFlagMode(true, mood)
+        return setFlag(mood)
+      }else{
+        updateFlagMode(false)
+        return setDps({[params.workModeCode!!]: params.isSupportColor ? WORK_MODE.COLOUR : WORK_MODE.WHITE})
+      }
+    }
+    return {
+      success: false
+    }
+  }
+
+  const updateFlagMode = (flagMode: boolean, flag?:FlagUiInfo) =>{
+    saveFlagMode(devId, JSON.stringify({
+      flagMode,
+      flagId: flag?.id
+    })).then()
+    setFlagMode({
+      flagMode,
+      flagId: flag?.id
+    })
+  }
+
+  return (
+    <Page
+      headlineText={I18n.getLang('Feature_devicepanel_flags')}
+      backText={devInfo.name}
+      headlineIcon={res.add}
+      loading={state.loading}
+      onHeadlineIconClick={() => {
+        const useIds = map([
+          ...state.flags,
+          ...state.moods
+        ], 'id')
+        const idRange = range(0, 256)
+        const unuseId = last(difference(idRange, useIds))
+        if(unuseId !== undefined){
+          navigationRoute('add', newFlag(unuseId))
+        }
+      }}
+    >
+      <View style={{flexDirection: 'row', display: 'flex', alignItems: 'center'}}>
+        <TextField 
+          value={state.searchText}
+          onChangeText={text => {
+            state.searchText = text
+          }}
+          placeholder={I18n.getLang('country_selection_textfield_headline_search')}
+          style={{ marginHorizontal: cx(24), flex: 1 }}
+        />
+        <TouchableOpacity style={{paddingRight: cx(24)}}
+          onPress={() =>{
+            showDialog({
+              method: 'confirm',
+              title: I18n.getLang('flag_resetbutton'),
+              subTitle: I18n.getLang('flag_resetdescription'),
+              onConfirm: async (_, {close}) =>{
+                close()
+                state.loading = true 
+                await getRemoteFlagInfo(true)
+                state.loading = false 
+              }
+            })
+          }}
+        >
+          <Image source={res.ic_refresh} style={{width: cx(24), height: cx(24)}}/>
+        </TouchableOpacity>
+      </View>
+      <FlatList
+        data={state.flags}
+        renderItem={({ item }) => <FlagItem
+          enable={flagMode?.flagMode && dps[params.workModeCode] === (params.isCeilingLight ? WORK_MODE.WHITE : params.isStripLight ? WORK_MODE.COLOUR : WORK_MODE.SCENE) && flagId === item.id && dps[params.switchLedCode]}
+          title={item.name}
+          icon={item.icon}
+          colors={item.colors.map(item => hsv2Hex(item.h, item.s, item.v)).reverse()}
+          onSwitch={async (enable) => {
+            if (enable) {
+              state.loading = true 
+              await setFlag(item)
+              state.loading = false 
+              updateFlagMode(true, 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/flags/Router.ts

@@ -1,25 +1,25 @@
-import {NavigationRoute} from "tuya-panel-kit";
-import FlagPage from "./FlagPage";
-import FlagEditPage from "./FlagEditPage";
-import {ui_biz_routerKey} from "../../navigation/Routers";
-
-const FlagPageRouters: NavigationRoute[] = [
-  {
-    name: ui_biz_routerKey.ui_biz_flag_page,
-    component: FlagPage,
-    options: {
-      hideTopbar: true,
-      showOfflineView: false,
-    }
-  },
-  {
-    name: ui_biz_routerKey.ui_biz_flag_page_edit,
-    component: FlagEditPage,
-    options: {
-      hideTopbar: true,
-      showOfflineView: false,
-    }
-  },
-]
-
-export default FlagPageRouters
+import {NavigationRoute} from "tuya-panel-kit";
+import FlagPage from "./FlagPage";
+import FlagEditPage from "./FlagEditPage";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const FlagPageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_flag_page,
+    component: FlagPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  },
+  {
+    name: ui_biz_routerKey.ui_biz_flag_page_edit,
+    component: FlagEditPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  },
+]
+
+export default FlagPageRouters

package/src/modules/history/HistoryPage.d.ts

@@ -1,2 +1,2 @@
-declare const SwitchHistoryPage: () => any;
-export default SwitchHistoryPage;
+declare const SwitchHistoryPage: () => any;
+export default SwitchHistoryPage;