@ledvance/ui-biz-bundle 1.1.90 → 1.1.91

package/package.json

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

package/src/modules/flags/FlagEditPage.tsx

@@ -23,6 +23,7 @@ import { showDialog } from '@ledvance/base/src/utils/common'
 import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface FlagEditParams {
   mode: 'add' | 'edit'
@@ -32,7 +33,7 @@ export interface FlagEditParams {
   modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo, options?: FlagOption) => Promise<Result<any>>
 }
 
-const FlagEditPage = () => {
+const FlagEditPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const params = cloneDeep(useRoute().params as FlagEditParams)
   const state = useReactive({
@@ -46,7 +47,7 @@ const FlagEditPage = () => {
     colorPaintBucketSelected: false,
     loading: false
   })
-  
+
   const getColorBlockColor = useCallback((isMainLight?: boolean) => {
     if (isMainLight) {
       return cctToColor(state.currentWhiteNode.colorTemp, Math.max(...[state.currentWhiteNode.brightness, 50]))
@@ -79,6 +80,100 @@ const FlagEditPage = () => {
     return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodDataChanged)
   }, [nameRepeat, state.mood.name, checkMoodDataChanged, params.mode])
 
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    name: {
+      marginHorizontal: cx(24),
+    },
+    adjustCard: {
+      marginVertical: cx(12),
+      marginHorizontal: cx(24),
+    },
+    fanAdjustCard: {
+      marginHorizontal: cx(24),
+    },
+    lightLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+    },
+    light: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(18),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    transitionMode: {
+      marginHorizontal: cx(16),
+    },
+    preview: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    nodesAdjust: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    adjustButtons: {
+      width: cx(44),
+      marginStart: cx(16),
+    },
+    adjustButton: {
+      width: cx(44),
+      height: cx(44),
+    },
+    nodeList: {
+      flex: 1,
+      marginHorizontal: cx(16),
+    },
+    nodeItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    nodeBlock: {
+      flex: 1,
+      height: cx(40),
+      borderRadius: cx(8),
+      borderWidth: 1,
+      borderColor: props.theme.card.border
+    },
+    nodeDeleteBtn: {
+      width: cx(24),
+      height: cx(30),
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    nodeDeleteIcon: {
+      width: cx(16),
+      height: cx(16),
+    },
+    nodeAddBtn: {
+      height: cx(40),
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginEnd: cx(26),
+      borderRadius: cx(8),
+      borderWidth: cx(1),
+      borderStyle: 'dashed',
+      borderColor: props.theme.addNode.border,
+      backgroundColor: props.theme.addNode.background,
+    },
+    deleteBtn: {
+      width: '100%',
+      height: cx(50),
+      backgroundColor: props.theme.button.delete,
+      borderRadius: cx(8),
+    },
+    deleteBtnText: {
+      color: props.theme.button.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+  })
+
   return (
     <Page
       backText={I18n.getLang('Feature_devicepanel_flags')}
@@ -116,55 +211,55 @@ const FlagEditPage = () => {
             }}
             maxLength={33}
             showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? '#f00' : undefined}
+            tipColor={nameRepeat ? props.theme.global.error : undefined}
             tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
             errorText={I18n.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')} />
           {(params.moduleParams.isSupportMixScene || params.moduleParams.isCeilingLight) && <><Card style={styles.adjustCard}>
-            <Spacer height={cx(16)} />
-            <View style={styles.lightLine}>
-              <Text style={styles.light}>
-                {I18n.getLang('light_sources_tile_main_lighting_headline')}
-              </Text>
-              <View style={[styles.preview, { backgroundColor: getColorBlockColor(true) }]} />
-            </View>
-            <Spacer />
-            <ColorTempAdjustView
-              isSupportBrightness={!!params.moduleParams.isSupportTemperature}
-              isSupportTemperature={!!params.moduleParams.isSupportTemperature}
-              colorTemp={state.currentWhiteNode.colorTemp}
-              brightness={state.currentWhiteNode.brightness}
-              onCCTChange={(cct) => {
-                state.currentWhiteNode.colorTemp = cct
-              }}
-              onCCTChangeComplete={(cct) => {
-                state.currentWhiteNode.colorTemp = cct
-                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
-                  if (idx === state.whitePaintBucketIdx) {
-                    return {
-                      ...state.mood.whiteColors[idx],
-                      colorTemp: cct
-                    }
-                  }
-                  return item
-                })
-              }}
-              onBrightnessChange={() => { }}
-              onBrightnessChangeComplete={(bright) => {
-                state.currentWhiteNode.brightness = bright
-                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
-                  if (idx === state.whitePaintBucketIdx) {
-                    return {
-                      ...state.mood.whiteColors[idx],
-                      brightness: bright
-                    }
-                  }
-                  return item
-                })
-              }}
-            />
-            <Spacer height={cx(16)} />
+              <Spacer height={cx(16)} />
+              <View style={styles.lightLine}>
+                  <Text style={styles.light}>
+                    {I18n.getLang('light_sources_tile_main_lighting_headline')}
+                  </Text>
+                  <View style={[styles.preview, { backgroundColor: getColorBlockColor(true) }]} />
+              </View>
+              <Spacer />
+              <ColorTempAdjustView
+                  isSupportBrightness={!!params.moduleParams.isSupportTemperature}
+                  isSupportTemperature={!!params.moduleParams.isSupportTemperature}
+                  colorTemp={state.currentWhiteNode.colorTemp}
+                  brightness={state.currentWhiteNode.brightness}
+                  onCCTChange={(cct) => {
+                    state.currentWhiteNode.colorTemp = cct
+                  }}
+                  onCCTChangeComplete={(cct) => {
+                    state.currentWhiteNode.colorTemp = cct
+                    state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                      if (idx === state.whitePaintBucketIdx) {
+                        return {
+                          ...state.mood.whiteColors[idx],
+                          colorTemp: cct
+                        }
+                      }
+                      return item
+                    })
+                  }}
+                  onBrightnessChange={() => { }}
+                  onBrightnessChangeComplete={(bright) => {
+                    state.currentWhiteNode.brightness = bright
+                    state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                      if (idx === state.whitePaintBucketIdx) {
+                        return {
+                          ...state.mood.whiteColors[idx],
+                          brightness: bright
+                        }
+                      }
+                      return item
+                    })
+                  }}
+              />
+              <Spacer height={cx(16)} />
           </Card>
-            <Spacer />
+              <Spacer />
           </>}
           <Card style={styles.adjustCard}>
             <Spacer height={cx(16)} />
@@ -175,16 +270,16 @@ const FlagEditPage = () => {
             </View>
             <Spacer height={cx(10)} />
             {(!params.moduleParams.isStripLight && !params.moduleParams.isCeilingLight) && <>
-              <LdvSlider
-                title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
-                value={state.mood.speed}
-                onValueChange={value => {
-                  state.mood.speed = value
-                }}
-                onSlidingComplete={value => {
-                  state.mood.speed = value
-                }} />
-              <Spacer height={cx(16)} />
+                <LdvSlider
+                    title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+                    value={state.mood.speed}
+                    onValueChange={value => {
+                      state.mood.speed = value
+                    }}
+                    onSlidingComplete={value => {
+                      state.mood.speed = value
+                    }} />
+                <Spacer height={cx(16)} />
             </>}
             <View style={styles.nodesAdjust}>
               <View style={styles.adjustButtons}>
@@ -193,7 +288,7 @@ const FlagEditPage = () => {
                     state.colorPaintBucketSelected = true
                   }}>
                   <Image
-                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#f60' : '#666' }]}
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? props.theme.icon.primary : props.theme.icon.normal }]}
                     source={res.ic_paint_bucket} />
                 </TouchableOpacity>
                 <TouchableOpacity
@@ -201,7 +296,7 @@ const FlagEditPage = () => {
                     state.colorPaintBucketSelected = false
                   }}>
                   <Image
-                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#666' : '#f60' }]}
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? props.theme.icon.normal : props.theme.icon.primary }]}
                     source={res.ic_colorize} />
                 </TouchableOpacity>
               </View>
@@ -233,7 +328,7 @@ const FlagEditPage = () => {
                           style={[
                             styles.nodeDeleteIcon,
                             {
-                              tintColor: state.mood.colors.length < 3 ? '#ccc' : '#666',
+                              tintColor: state.mood.colors.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
                             },
                           ]}
                           source={res.ic_mood_del} />
@@ -264,7 +359,7 @@ const FlagEditPage = () => {
                           style={{
                             width: cx(18),
                             height: cx(18),
-                            tintColor: '#000',
+                            tintColor: props.theme.global.fontColor,
                           }}
                           source={{ uri: res.add }} />
                       </TouchableOpacity>
@@ -319,29 +414,29 @@ const FlagEditPage = () => {
           </Card>
           <Spacer />
           {params.mode === 'edit' &&
-            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
-              <TextButton
-                style={styles.deleteBtn}
-                textStyle={styles.deleteBtnText}
-                text={I18n.getLang('flag_deleteflag')}
-                onPress={() => {
-                  showDialog({
-                    method: 'confirm',
-                    title: I18n.getLang('flag_deletepopup'),
-                    subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
-                    onConfirm: async (_, { close }) => {
-                      close()
-                      if (state.loading) return
-                      state.loading = true
-                      const res = await params.modDeleteFlag('del', state.mood)
-                      if (res.success) {
-                        state.loading = false
-                        navigation.goBack()
-                      }
-                    }
-                  })
-                }} />
-            </View>}
+              <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+                  <TextButton
+                      style={styles.deleteBtn}
+                      textStyle={styles.deleteBtnText}
+                      text={I18n.getLang('flag_deleteflag')}
+                      onPress={() => {
+                        showDialog({
+                          method: 'confirm',
+                          title: I18n.getLang('flag_deletepopup'),
+                          subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
+                          onConfirm: async (_, { close }) => {
+                            close()
+                            if (state.loading) return
+                            state.loading = true
+                            const res = await params.modDeleteFlag('del', state.mood)
+                            if (res.success) {
+                              state.loading = false
+                              navigation.goBack()
+                            }
+                          }
+                        })
+                      }} />
+              </View>}
           <Spacer />
         </View>
       </ScrollView>
@@ -349,98 +444,4 @@ const FlagEditPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginVertical: cx(12),
-    marginHorizontal: cx(24),
-  },
-  fanAdjustCard: {
-    marginHorizontal: cx(24),
-  },
-  lightLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-  },
-  light: {
-    color: '#000',
-    fontSize: cx(18),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  transitionMode: {
-    marginHorizontal: cx(16),
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  nodesAdjust: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  adjustButtons: {
-    width: cx(44),
-    marginStart: cx(16),
-  },
-  adjustButton: {
-    width: cx(44),
-    height: cx(44),
-  },
-  nodeList: {
-    flex: 1,
-    marginHorizontal: cx(16),
-  },
-  nodeItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nodeBlock: {
-    flex: 1,
-    height: cx(40),
-    borderRadius: cx(8),
-    borderWidth: 1,
-    borderColor: '#ccc'
-  },
-  nodeDeleteBtn: {
-    width: cx(24),
-    height: cx(30),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  nodeDeleteIcon: {
-    width: cx(16),
-    height: cx(16),
-  },
-  nodeAddBtn: {
-    height: cx(40),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginEnd: cx(26),
-    borderRadius: cx(8),
-    borderWidth: cx(1),
-    borderStyle: 'dashed',
-    borderColor: '#666',
-    backgroundColor: '#f6f6f6',
-  },
-  deleteBtn: {
-    width: '100%',
-    height: cx(50),
-    backgroundColor: '#666',
-    borderRadius: cx(8),
-  },
-  deleteBtnText: {
-    color: '#fff',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-})
-
-export default FlagEditPage
+export default withTheme(FlagEditPage)

package/src/modules/flags/FlagItem.tsx

@@ -6,8 +6,10 @@ import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
 import Spacer from '@ledvance/base/src/components/Spacer'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface RecommendMoodItemProps {
+  theme?: any
   enable: boolean
   title: string
   colors: string[]
@@ -17,9 +19,30 @@ interface RecommendMoodItemProps {
   onSwitch: (enable: boolean) => void
 }
 
-export default function FlagItem(props: RecommendMoodItemProps) {
+function FlagItem(props: RecommendMoodItemProps) {
   const icon = typeof props.icon === 'number' ? props.icon : { uri: props.icon }
 
+  const styles = StyleSheet.create({
+    card: {
+      marginHorizontal: cx(24),
+    },
+    headline: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+      justifyContent: 'space-between',
+    },
+    headText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      lineHeight: cx(20),
+      flex: 1
+    },
+    gradientItem: {
+      alignItems: 'center',
+    },
+  })
+
   return (
     <Card
       style={[styles.card, props.style]}
@@ -40,7 +63,7 @@ export default function FlagItem(props: RecommendMoodItemProps) {
         <View style={styles.gradientItem}>
           <MoodColorsLine
             type={'separate'}
-            nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
+            nodeStyle={{ borderColor: props.theme.card.border, borderWidth: 1 }}
             colors={props.colors} />
         </View>
         <Spacer height={cx(16)} />
@@ -49,43 +72,4 @@ export default function FlagItem(props: RecommendMoodItemProps) {
   )
 }
 
-const styles = StyleSheet.create({
-  card: {
-    marginHorizontal: cx(24),
-  },
-  headline: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-    justifyContent: 'space-between',
-  },
-  headText: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    lineHeight: cx(20),
-    flex: 1
-  },
-  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),
-  },
-})
+export default withTheme(FlagItem)

package/src/modules/flags/FlagPage.tsx

@@ -23,6 +23,7 @@ import { showDialog } from "@ledvance/base/src/utils/common";
 import { defFlagHash, fnv1aHash } from "@ledvance/ui-biz-bundle/src/modules/flags/FlagHash";
 import { NativeApi } from "@ledvance/base/src/api/native";
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface FlagPageProps {
   isSupportColor?: boolean
@@ -32,7 +33,7 @@ export interface FlagPageProps {
   isStripLight?: boolean
   isCeilingLight?: boolean
   isSupportMixScene?: boolean
-  drawToolLight?: { 
+  drawToolLight?: {
     drawToolCode: string
     drawToolObj2dp: (colors: any[]) => string[]
     drawToolDp2Obj: (dp: string) => string[]
@@ -42,13 +43,13 @@ export interface FlagPageProps {
   workModeCode: string
   switchLedCode: string
   whiteSwitchCode?:string
-  rgbcWorkModeCode?: string 
-  rgbcSwitchLedCode?: string 
-  brightValueCode?: string 
-  temperatureCode?: string 
+  rgbcWorkModeCode?: string
+  rgbcSwitchLedCode?: string
+  brightValueCode?: string
+  temperatureCode?: string
 }
 
-const FlagPage = () => {
+const FlagPage = (props: { theme?: any }) => {
   const params = useRoute().params as FlagPageProps
   const devInfo = useDeviceInfo()
   const devId = useDeviceId()
@@ -85,7 +86,7 @@ const FlagPage = () => {
   }, [JSON.stringify(flagState), JSON.stringify(state.flags), flagMode])
 
   useEffect(() => {
-    if(!devInfo.devId) return 
+    if(!devInfo.devId) return
     if(!flags?.length){
       getRemoteFlagInfo().then()
     }
@@ -160,7 +161,7 @@ const FlagPage = () => {
       if (mood){
         if (mode === 'del' && (!flagMode?.flagMode || currentMood.id !== flagId || !dps[params.switchLedCode])){
           return {
-            success: true 
+            success: true
           }
         }
         updateFlagMode(true, mood)
@@ -205,7 +206,7 @@ const FlagPage = () => {
       }}
     >
       <View style={{flexDirection: 'row', display: 'flex', alignItems: 'center'}}>
-        <TextField 
+        <TextField
           value={state.searchText}
           onChangeText={text => {
             state.searchText = text
@@ -214,21 +215,21 @@ const FlagPage = () => {
           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 
-              }
-            })
-          }}
+                          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)}}/>
+          <Image source={res.ic_refresh} style={{width: cx(24), height: cx(24), tintColor: props.theme.global.fontColor}}/>
         </TouchableOpacity>
       </View>
       <FlatList
@@ -240,7 +241,7 @@ const FlagPage = () => {
           colors={item.colors.map(item => hsv2Hex(item.h, item.s, item.v)).reverse()}
           onSwitch={async (enable) => {
             if (enable) {
-              state.loading = true               
+              state.loading = true
               await setFlag(item)
               const flagHash = fnv1aHash(JSON.stringify(item.colors))
               if (defFlagHash[flagHash]){
@@ -249,7 +250,7 @@ const FlagPage = () => {
                   id: defFlagHash[flagHash].id
                 }).then()
               }
-              state.loading = false 
+              state.loading = false
               updateFlagMode(true, item)
             }
           }}
@@ -283,4 +284,4 @@ export const newFlag = (id: number) => {
   }
 }
 
-export default FlagPage
+export default withTheme(FlagPage)