@ledvance/group-ui-biz-bundle 1.0.48 → 1.0.49

package/src/modules/flags/FlagPage.tsx

@@ -1,115 +1,66 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";
 import Page from "@ledvance/base/src/components/Page";
-import { useDeviceInfo, useFlagMode, useFlags, useMoods, useUAGroupInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { FlatList } from "react-native";
+import { useDeviceInfo, useFlags, useGroupDp, useUAGroupInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { FlatList, TouchableOpacity, View, Image } from "react-native";
 import Spacer from "@ledvance/base/src/components/Spacer";
 import { Utils } from "tuya-panel-kit";
 import FlagItem from "./FlagItem";
 import { FlagUiInfo, def2Pids, def3Pids } from "./FlagInfo";
-import { getRemoteFlag, saveFlag, saveFlagMode, useFlag } from "./FlagActions";
-import { useRoute, useNavigation } from '@react-navigation/core'
+import { getRemoteFlag, saveFlag, useFlag, useFlagMode, useWorkMode } from "./FlagActions";
+import { 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 { cloneDeep, difference, 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/group-ui-biz-bundle/src/modules/mood/SceneInfo";
-import { Result } from "@ledvance/base/src/models/modules/Result";
-import { WorkMode } from "@ledvance/base/src/utils/interface";
 import TextField from "@ledvance/base/src/components/TextField";
+import { useParams } from "@ledvance/base/src/hooks/Hooks";
+import { WorkMode } from "@ledvance/base/src/utils/interface";
+import { getGlobalParamsDp, showDialog } from "@ledvance/base/src/utils/common";
 const cx = Utils.RatioUtils.convertX
 
 export interface FlagPageProps {
-  isSupportMixScene?: boolean
+  isMixLight?: boolean
   isStripLight?: boolean
   isStringLight?: boolean
+  isCeilingLight?: boolean
   isSupportTemperature?: boolean
   isSupportBrightness?: boolean
-  drawToolLight?: {
-    drawToolCode: string
-    drawToolObj2dp: (colors: string[]) => string
-  }
-  getRemoteMoodList?: (groupId: string) => Promise<Result<any>>
-  sceneDataCode?: string
-  workModeCode: string
-  switchLedCode: string
 }
 
 const FlagPage = () => {
-  const params = useRoute().params as FlagPageProps
+  const params = useParams<FlagPageProps>()
   const devInfo = useDeviceInfo()
   const uaGroupInfo = useUAGroupInfo()
   const navigation = useNavigation()
-  const [moods, setMoods] = useMoods()
+  const [switch_led] = useGroupDp<boolean>(getGlobalParamsDp('switch_led'))
+  const [, setWorkMode] = useWorkMode()
   const [flags, setFlags] = useFlags()
   const [flagMode, setFlagMode] = useFlagMode()
-  const [flagState, setFlag] = useFlag({
-    isStripLight: params.isStripLight,
-    isStringLight: params.isStringLight,
-    isMixLight: params.isSupportMixScene
-  })
+  const [, setFlag] = useFlag(params)
   const state = useReactive({
-    loading: true,
+    loading: false,
     flags: cloneDeep(flags) as FlagUiInfo[],
-    moods: params.isStripLight ? [] : cloneDeep(moods),
     searchText: ''
   })
-  const defParams = {
-    workModeDpCode: params.workModeCode,
-    switchLedDpCode: params.switchLedCode,
-    workMode: params.isStripLight ? WorkMode.Colour : WorkMode.Scene,
-    sceneStatus: !params.isStripLight && params.sceneDataCode ? {
-      sceneDataDpCode: params.sceneDataCode
-    } : undefined,
-    drawToolStatus: params.isStripLight && params.drawToolLight ? {
-      drawToolCode: params.drawToolLight.drawToolCode,
-      drawToolObj2dp: params.drawToolLight.drawToolObj2dp
-    } : undefined
-  }
-  const flagId = useMemo(() => {
-    if (flagState && state.flags?.length) {
-      const { flag } = flagState
-      if(params.isStripLight && flag?.colors !== undefined){
-        if(flagMode?.flagId !== undefined) return flagMode.flagId
-        const v = state.flags.find(item => {
-          return isEqual(item.colors, flag?.colors)
-        })
-        return v?.id
-      }
-      if (flag?.id !== undefined) {
-        return flag.id
-      }
-    }
-
-    return -1
-  }, [JSON.stringify(flagState), JSON.stringify(state.flags), flagMode])
 
   useEffect(() => {
-    if(!flags?.length){
-      getRemoteFlagInfo().then()
-    }
-    if (params.getRemoteMoodList && !params.isStripLight && !moods?.length) {
-      params.getRemoteMoodList(uaGroupInfo.tyGroupId.toString()).then(res => {
-        if (res.success && Array.isArray(res.data)) {
-          state.moods = res.data
-          setMoods(cloneDeep(res.data))
-        }
-      })
-    }
+    getRemoteFlagInfo().then()
   }, [])
 
-  useUpdateEffect(() =>{
-    state.flags = state.searchText !== '' ? cloneDeep(flags).filter(flag => flag.name.includes(state.searchText)) : cloneDeep(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 () => {
+  const getRemoteFlagInfo = async (isRefresh?: boolean) => {
     const defNum = uaGroupInfo.groupDevices.filter(device => !(def2Pids.includes(device.tyPid) || def3Pids.includes(device.tyPid))).length
     const def2Num = uaGroupInfo.groupDevices.filter(device => def2Pids.includes(device.tyPid)).length
     const def3Num = uaGroupInfo.groupDevices.filter(device => def3Pids.includes(device.tyPid)).length
     const isDef2 = def2Num > def3Num && def2Num > defNum
     const isDef3 = def3Num > def2Num && def3Num > defNum
-    const res = await getRemoteFlag(uaGroupInfo.tyGroupId.toString(), {isDef2, isDef3})
+    const res = await getRemoteFlag(uaGroupInfo.tyGroupId.toString(), { isDef2, isDef3, isRefresh })
     if (res.success) {
       let cloneFlag: FlagUiInfo[] = cloneDeep(res.data) || []
       state.flags = cloneFlag
@@ -135,8 +86,8 @@ const FlagPage = () => {
     let newScene: FlagUiInfo[] = []
     if (mode === 'add') {
       newScene = [
-        checkedMood,
         ...state.flags,
+        checkedMood,
       ]
     } else if (mode === 'del') {
       newScene = state.flags.filter(item => item.id !== checkedMood.id)
@@ -153,22 +104,21 @@ const FlagPage = () => {
     if (res.success) {
       state.flags = cloneDeep(newScene)
       setFlags(cloneDeep(newScene))
-      if(mode === 'del' && (!flagState?.flag || checkedMood.id !== flagId)){
-        return{
-          success: true
+      if (mood) {
+        if (mode === 'del' && (checkedMood.id !== flagMode?.flagId || !flagMode?.flagMode || !switch_led)) {
+          return {
+            success: true
+          }
         }
-      }
-      if(mood){
-        setFlag({
-          ...defParams,
-          flag: cloneDeep(mood)
-        }).then()
-        updateFlagMode(true, mood)
-      }else{
-        updateFlagMode(false)
-      }
-      return {
-        success: true
+        return setFlag({ flag: cloneDeep(mood) })
+      } else {
+        if (flagMode?.flagMode) {
+          setWorkMode(params.isCeilingLight ? WorkMode.White : WorkMode.Colour)
+        }
+        return setFlagMode({
+          flagMode: false,
+          flagId: undefined
+        })
       }
     }
     return {
@@ -176,16 +126,6 @@ const FlagPage = () => {
     }
   }
 
-  const updateFlagMode = (flagMode: boolean, flag?:FlagUiInfo) =>{
-    saveFlagMode(uaGroupInfo.tyGroupId.toString(), JSON.stringify({
-      flagMode,
-      flagId: flag?.id
-    })).then()
-    setFlagMode({
-      flagMode,
-      flagId: flag?.id
-    })
-  }
   return (
     <Page
       headlineText={I18n.getLang('Feature_devicepanel_flags')}
@@ -194,7 +134,6 @@ const FlagPage = () => {
       onHeadlineIconClick={() => {
         const useIds = map([
           ...state.flags,
-          ...state.moods
         ], 'id')
         const idRange = range(0, 256)
         const unuseId = last(difference(idRange, useIds))
@@ -202,29 +141,49 @@ const FlagPage = () => {
           navigationRoute('add', newFlag(unuseId))
         }
       }}
+      loading={state.loading}
     >
-      <TextField 
-        style={{marginHorizontal: cx(24)}}
-        value={state.searchText}
-        onChangeText={(v)=>{
-          state.searchText = v
-        }}
-        placeholder={I18n.getLang('country_selection_textfield_headline_search')}
-      />
+      <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={flagState?.workMode === (params.isStripLight ? WorkMode.Colour : WorkMode.Scene) && flagId === item.id && flagMode?.flagMode}
+          enable={flagMode?.flagId === item.id && flagMode?.flagMode && switch_led}
           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({
-                ...defParams,
                 flag: cloneDeep(item),
               })
-              updateFlagMode(true, item)
+              state.loading = false
             }
           }}
           onPress={() => {