@ledvance/ui-biz-bundle 1.1.58 → 1.1.61

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.58",
+  "version": "1.1.61",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/flags/FlagEditPage.tsx

@@ -5,7 +5,7 @@ import Page from '@ledvance/base/src/components/Page'
 import res from '@ledvance/base/src/res'
 import { ScrollView, View, FlatList, StyleSheet, Image, TouchableOpacity, Text } from 'react-native'
 import Spacer from '@ledvance/base/src/components/Spacer'
-import { useReactive } from 'ahooks'
+import { useReactive, useUpdateEffect } from 'ahooks'
 import { Utils } from 'tuya-panel-kit'
 import TextField from '@ledvance/base/src/components/TextField'
 import Card from '@ledvance/base/src/components/Card'
@@ -40,20 +40,13 @@ const FlagEditPage = () => {
     mood: params.currentMood,
     currentWhiteNode: params.currentMood.whiteColors[params.currentMood.whiteColors.length - 1]!,
     currentNode: params.currentMood.colors[params.currentMood.colors.length - 1],
-    whitePaintBucketIdx: params.currentMood.colors.length - 1,
+    whitePaintBucketIdx: params.currentMood.whiteColors.length - 1,
     colorPaintBucketIdx: params.currentMood.colors.length - 1,
     whitePaintBucketSelected: true,
     colorPaintBucketSelected: false,
     loading: false
   })
-
-  const getButtonStatus = () => {
-    return (params.mode === 'edit' && isEqual(state.mood, params.currentMood)) ||
-      !(!!state.mood.name) ||
-      nameRepeat ||
-      state.mood.name.length > 32
-  }
-
+  
   const getColorBlockColor = useCallback((isMainLight?: boolean) => {
     if (isMainLight) {
       return cctToColor(state.currentWhiteNode.colorTemp, Math.max(...[state.currentWhiteNode.brightness, 50]))
@@ -62,14 +55,30 @@ const FlagEditPage = () => {
     return hsv2Hex(h, s, v)
   }, [state.currentNode, state.currentWhiteNode])
 
+  useUpdateEffect(() =>{
+    state.currentNode = state.mood.colors[state.colorPaintBucketIdx]
+  }, [JSON.stringify(state.mood.colors), state.colorPaintBucketIdx])
+
+  useUpdateEffect(() =>{
+    state.currentWhiteNode = state.mood.whiteColors[state.whitePaintBucketIdx]
+  }, [JSON.stringify(state.mood.whiteColors), state.whitePaintBucketIdx])
+
+  const checkMoodDataChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [params.currentMood, state.mood])
+
   const nameRepeat = useMemo(() => {
     return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name && state.mood.name !== ''))
   }, [state.mood.name])
 
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodDataChanged)
+  }, [nameRepeat, state.mood.name, checkMoodDataChanged, params.mode])
+
   return (
     <Page
       backText={I18n.getLang('Feature_devicepanel_flags')}
-      showBackDialog={true}
+      showBackDialog={!checkMoodDataChanged}
       loading={state.loading}
       backDialogTitle={
         I18n.getLang(params.mode === 'add' ?
@@ -80,10 +89,9 @@ const FlagEditPage = () => {
         I18n.getLang('flag_cancelinfo')
       }
       headlineText={I18n.getLang(params.mode === 'add' ? 'flag_addanewflag' : 'flag_edittheflag')}
-      rightButtonIcon={getButtonStatus() ? res.ic_uncheck : res.ic_check}
-      rightButtonDisabled={getButtonStatus()}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
       rightButtonIconClick={async () => {
-        if (state.loading) return
+        if (state.loading || !canSaveMoodData) return
         state.loading = true
         const res = await params.modDeleteFlag(params.mode, state.mood)
         if (res.success) {

package/src/modules/flags/FlagInfo.tsx

@@ -228,19 +228,19 @@ export const defFlagList: FlagUiInfo[] = [
     id: 224,
     name: I18n.getLang('country_MX'),
     ...defFlagConfig,
-    colors: [{ h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 100 },],
+    colors: [{ h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 64 },],
   },
   {
     id: 223,
     name: I18n.getLang('country_SA'),
     ...defFlagConfig,
-    colors: [{ h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 100 },],
+    colors: [{ h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 64 },],
   },
   {
     id: 222,
     name: I18n.getLang('country_AE'),
     ...defFlagConfig,
-    colors: [{ h: 0, s: 0, v: 0 }, { h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 100 }, { h: 0, s: 100, v: 100 },],
+    colors: [{ h: 0, s: 0, v: 0 }, { h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 64 }, { h: 0, s: 100, v: 100 },],
   },
   {
     id: 221,
@@ -324,7 +324,7 @@ export const defFlagList: FlagUiInfo[] = [
     id: 208,
     name: I18n.getLang('country_GH'),
     ...defFlagConfig,
-    colors: [{ h: 128, s: 77, v: 100 }, { h: 60, s: 100, v: 100 }, { h: 0, s: 100, v: 100 },],
+    colors: [{ h: 128, s: 77, v: 64 }, { h: 60, s: 100, v: 100 }, { h: 0, s: 100, v: 100 },],
   },
   {
     id: 207,
@@ -390,7 +390,7 @@ export const defFlagList: FlagUiInfo[] = [
     id: 197,
     name: I18n.getLang('country_KE'),
     ...defFlagConfig,
-    colors: [{ h: 147, s: 100, v: 100 }, { h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 0 },],
+    colors: [{ h: 147, s: 100, v: 64 }, { h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 0 },],
   },
   {
     id: 196,

package/src/modules/flags/FlagPage.tsx

@@ -137,8 +137,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,30 +153,19 @@ const FlagPage = () => {
     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)
       setFlags(cloneDeep(newScene))
-      if(mode === 'del'){
-        const isDrawTool = !!(params.isCeilingLight || params.isStripLight)
-        if(!isDrawTool && (dps[params.workModeCode] !== WORK_MODE.SCENE || currentMood.id !== flagId)){
-          return {
-            success: true
-          }
-        }
-        if(isDrawTool && !flagMode.flagMode){
+      state.flags = cloneDeep(newScene)
+      if (mood){
+        if (mode === 'del' && (!flagMode?.flagMode || currentMood.id !== flagId || !dps[params.switchLedCode])){
           return {
-            success: true
+            success: true 
           }
         }
-      }
-      if(mood){
-        setFlag(mood).then()
         updateFlagMode(true, mood)
+        return setFlag(mood)
       }else{
-        setDps({[params.workModeCode!!]: params.isSupportColor ? WORK_MODE.COLOUR : WORK_MODE.WHITE})
         updateFlagMode(false)
-      }
-      return {
-        success: true
+        return setDps({[params.workModeCode!!]: params.isSupportColor ? WORK_MODE.COLOUR : WORK_MODE.WHITE})
       }
     }
     return {

package/src/modules/mood/DynamicMoodEditorPage.tsx

@@ -144,25 +144,23 @@ const DynamicMoodEditorPage = () => {
     navigation.navigate(ui_biz_routerKey.ui_biz_mood)
     routeParams.onSave()
   }, [])
-  const getButtonStatus = () => {
-    return (params.mode === 'edit' && isEqual(state.mood, routeParams.currentMood)) ||
-      !(!!state.mood.name) ||
-      nameRepeat ||
-      state.mood.name.length > 32 ||
-      state.mood.nodes.length < 2
-  }
-
-  const showBackDialog = (): boolean => {
-    return !isEqual(state.mood, routeParams.currentMood);
-  }
 
   const nameRepeat = useMemo(() => {
     return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
   }, [state.mood.name])
+
+  const checkMoodChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [JSON.stringify(state.mood), params.currentMood])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
+  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
+
   return (
     <Page
       backText={Strings.getLang('mesh_device_detail_mode')}
-      showBackDialog={showBackDialog()}
+      showBackDialog={!checkMoodChanged}
       backDialogTitle={
         Strings.getLang(params.mode === 'add' ?
           'string_light_pp_dialog_sm_add_headline_c' :
@@ -174,9 +172,9 @@ const DynamicMoodEditorPage = () => {
           'strip_light_static_mood_editor_step_2_dialog_text')
       }
       headlineText={state.headline}
-      rightButtonIcon={getButtonStatus() ? res.ic_uncheck : res.ic_check}
-      rightButtonDisabled={getButtonStatus()}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
       rightButtonIconClick={async () => {
+        if (!canSaveMoodData) return;
         await onPost(false)
       }}>
       <ScrollView

package/src/modules/mood/FantasyMoodEditPage.tsx

@@ -179,26 +179,22 @@ const FantasyMoodEditPage = () => {
     return currentOther.label
   }, [state.mood.expand])
 
-  const getButtonStatus = () => {
-    return (params.mode === 'edit' && isEqual(state.mood, routeParams.currentMood)) ||
-      !(!!state.mood.name) ||
-      nameRepeat ||
-      state.mood.name.length > 32 ||
-      state.mood.nodes.length < 2
-  }
-
   const nameRepeat = useMemo(() => {
     return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
   }, [state.mood.name])
 
-  const showBackDialog = (): boolean => {
-    return !isEqual(state.mood, routeParams.currentMood);
-  }
+  const checkMoodChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [JSON.stringify(state.mood), params.currentMood])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
+  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
 
   return (
     <Page
       backText={I18n.getLang('mesh_device_detail_mode')}
-      showBackDialog={showBackDialog()}
+      showBackDialog={!checkMoodChanged}
       backDialogTitle={
         I18n.getLang(params.mode === 'add' ?
           'string_light_pp_dialog_sm_add_headline_c' :
@@ -210,9 +206,11 @@ const FantasyMoodEditPage = () => {
           'strip_light_static_mood_editor_step_2_dialog_text')
       }
       headlineText={state.headline}
-      rightButtonIcon={getButtonStatus() ? res.ic_uncheck : res.ic_check}
-      rightButtonDisabled={getButtonStatus()}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
       rightButtonIconClick={async () => {
+        if (!canSaveMoodData) {
+          return
+        }
         await onPost(false)
       }}>
       <ScrollView

package/src/modules/mood/StaticMoodEditorPage.tsx

@@ -143,25 +143,22 @@ const StaticMoodEditorPage = () => {
     routeParams.onSave()
   }, [moodId])
 
-  const getButtonStatus = () => {
-    return (params.mode === 'edit' && isEqual(state.mood, routeParams.currentMood)) ||
-      !(!!state.mood.name) ||
-      nameRepeat ||
-      state.mood.name.length > 32
-  }
-
   const nameRepeat = useMemo(() => {
     return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
   }, [state.mood.name])
 
-  const showBackDialog = (): boolean => {
-    return !isEqual(state.mood, routeParams.currentMood);
-  }
+  const checkMoodChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [JSON.stringify(state.mood), params.currentMood])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
+  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
 
   return (
     <Page
       backText={Strings.getLang('mesh_device_detail_mode')}
-      showBackDialog={showBackDialog()}
+      showBackDialog={!checkMoodChanged}
       backDialogTitle={
         Strings.getLang(params.mode === 'add' ?
           'string_light_pp_dialog_sm_add_headline_c' :
@@ -173,9 +170,11 @@ const StaticMoodEditorPage = () => {
           'strip_light_static_mood_editor_step_2_dialog_text')
       }
       headlineText={state.headline}
-      rightButtonIcon={getButtonStatus() ? res.ic_uncheck : res.ic_check}
-      rightButtonDisabled={getButtonStatus()}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
       rightButtonIconClick={async () => {
+        if (!canSaveMoodData) {
+          return
+        }
         await onPost(false)
       }}>
       <ScrollView

package/src/modules/timer/TimerPage.tsx

@@ -16,6 +16,8 @@ import { cloneDeep } from "lodash";
 import dayjs from "dayjs";
 import DeleteButton from "@ledvance/base/src/components/DeleteButton";
 
+const { withTheme } = Utils.ThemeUtils
+
 export type dpItem = {
   label: string
   value: string
@@ -35,7 +37,7 @@ type Props = {
 }
 
 const { convertX: cx } = Utils.RatioUtils
-const TimerPage = () => {
+const TimerPage = (props: {theme?: any}) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const { dps } = useRoute<Props['route']>().params
@@ -139,12 +141,12 @@ const TimerPage = () => {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        backgroundColor: '#fff',
+        backgroundColor: props.theme.global.background,
         marginBottom: cx(8)
       }}>
         <Text
           style={{
-            color: '#000',
+            color: props.theme.global.fontColor,
             fontSize: 14,
             marginHorizontal: cx(6),
             marginVertical: cx(9),
@@ -159,6 +161,54 @@ const TimerPage = () => {
     );
   };
 
+  const styles = StyleSheet.create({
+    content: {
+      marginHorizontal: cx(24)
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      marginTop: cx(30),
+      marginBottom: cx(10)
+    },
+    skillListItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      height: cx(30),
+      alignItems: 'center',
+      marginVertical: cx(5)
+    },
+    activeTimer: {
+      marginHorizontal: cx(20),
+      marginVertical: cx(20),
+    },
+    activeTimerTitleBox: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: cx(20),
+    },
+    activeTimerTitle: {
+      fontSize: cx(20),
+      color: props.theme.global.fontColor,
+    },
+    activeTimerCancelBtn: {
+      paddingHorizontal: cx(8),
+      paddingVertical: cx(5),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: '#666',
+      borderRadius: cx(5)
+    },
+    activeTimerTimeBox: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: cx(20),
+    },
+  })
+
   return (
     <Page
       backText={devInfo.name}
@@ -185,7 +235,7 @@ const TimerPage = () => {
                   <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
                   <View
                       style={{
-                        backgroundColor: '#f6f6f6',
+                        backgroundColor: props.theme.card.background,
                         borderRadius: 4,
                         minHeight: cx(50),
                         flex: 1,
@@ -210,7 +260,7 @@ const TimerPage = () => {
                 {state.skillList.map((skill: dpItem) => {
                   return (
                     <TouchableOpacity style={styles.skillListItem} key={skill.dpId} onPress={() => handelTimer(skill, true)}>
-                      <Text style={{ color: '#000' }}>{skill.label}</Text>
+                      <Text style={{ color: props.theme.global.fontColor }}>{skill.label}</Text>
                       <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
                     </TouchableOpacity>
                   )
@@ -223,7 +273,7 @@ const TimerPage = () => {
                   text={I18n.getLang('timer_sockets_button_text')}
                   onPress={onStartPress}
                   textStyle={{ fontSize: cx(14) }}
-                  style={{ backgroundColor: !state.selectedSkill.length ? '#FFE0D4' : '#f60' }}
+                  style={{ backgroundColor: !state.selectedSkill.length ? props.theme.button.disabled : props.theme.button.active }}
               />
               <Spacer />
           </>}
@@ -300,7 +350,7 @@ const TimerPage = () => {
                   thumbStroke={'#f60'}
                   renderCenterView={
                     <View style={{ position: 'absolute' }}>
-                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: '#666' }}>
+                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: props.theme.global.secondFontColor }}>
                         {getActiveTimeString(runningTimer()[0].progressHook.countdown)}
                       </Text>
                     </View>
@@ -331,52 +381,4 @@ const TimerPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  content: {
-    marginHorizontal: cx(24)
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginTop: cx(30),
-    marginBottom: cx(10)
-  },
-  skillListItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: cx(30),
-    alignItems: 'center',
-    marginVertical: cx(5)
-  },
-  activeTimer: {
-    marginHorizontal: cx(20),
-    marginVertical: cx(20),
-  },
-  activeTimerTitleBox: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: cx(20),
-  },
-  activeTimerTitle: {
-    fontSize: cx(20),
-    color: '#000',
-  },
-  activeTimerCancelBtn: {
-    paddingHorizontal: cx(8),
-    paddingVertical: cx(5),
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#666',
-    borderRadius: cx(5)
-  },
-  activeTimerTimeBox: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: cx(20),
-  },
-})
-
-export default TimerPage
+export default withTheme(TimerPage)