@ledvance/ui-biz-bundle 1.1.90 → 1.1.92

package/src/newModules/mood/MoodItem.tsx

@@ -12,6 +12,7 @@ import I18n from '@ledvance/base/src/i18n';
 import res from '@ledvance/base/src/res';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 interface LightCategory {
   isMixLight?: boolean
@@ -21,6 +22,7 @@ interface LightCategory {
 }
 
 interface MoodItemProps extends ViewProps {
+  theme?: any
   enable: boolean;
   isMix: boolean;
   mood: MoodUIInfo;
@@ -38,7 +40,42 @@ const MoodItem = (props: MoodItemProps) => {
 
   const gradientMode = useMemo(() => (
     deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
- ), [MoodJumpGradientMode, deviceTypeOption])
+  ), [MoodJumpGradientMode, deviceTypeOption])
+
+
+  const styles = StyleSheet.create({
+    card: {
+      marginHorizontal: cx(24),
+    },
+    headline: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+    },
+    headText: {
+      flex: 1,
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      lineHeight: cx(20),
+    },
+    moodTypeItem: {
+      flexDirection: 'row',
+    },
+    moodTypeLabel: {
+      marginStart: cx(16),
+      paddingHorizontal: cx(12.5),
+      backgroundColor: props.theme.tag.background,
+      borderRadius: cx(8),
+    },
+    moodTypeLabelText: {
+      height: cx(16),
+      color: props.theme.tag.fontColor,
+      fontSize: cx(10),
+      textAlignVertical: 'center',
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      lineHeight: cx(16),
+    },
+  })
 
   return (
     <Card style={[styles.card, props.style]} onPress={props.onPress}>
@@ -76,7 +113,7 @@ const MoodItem = (props: MoodItemProps) => {
   );
 };
 
-export default MoodItem;
+export default withTheme(MoodItem)
 
 export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boolean, type: 'gradient' | 'separate' }) {
   const { mixSubLight, isMix } = props;
@@ -85,6 +122,26 @@ export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boo
       ? hsv2Hex(n.h, Math.round(n.s), Math.round(mapFloatToRange(n.v / 100, 50, 100)))
       : cctToColor(n.colorTemp.toFixed());
   }) : ['#eee'];
+
+  const styles = StyleSheet.create({
+    gradientItem: {
+      flexDirection: 'row',
+    },
+    gradientItemIconView: {
+      width: cx(24),
+      height: cx(24),
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: '#aaa',
+      borderRadius: cx(8),
+    },
+    gradientItemIcon: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: '#fff',
+    },
+  })
+
   return (
     <View style={styles.gradientItem}>
       <Spacer height={0} width={cx(16)} />
@@ -105,56 +162,3 @@ export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boo
     </View>
   );
 }
-
-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: {
-    flexDirection: 'row',
-  },
-  gradientItemIconView: {
-    width: cx(24),
-    height: cx(24),
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#aaa',
-    borderRadius: cx(8),
-  },
-  gradientItemIcon: {
-    width: cx(16),
-    height: cx(16),
-    tintColor: '#fff',
-  },
-  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/newModules/mood/MoodPage.tsx

@@ -29,10 +29,11 @@ import { showDialog } from '@ledvance/base/src/utils/common';
 import I18n from '@ledvance/base/src/i18n';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 const MAX_MOOD_COUNT = 255;
 
-const MoodPage = () => {
+const MoodPage = (props: { theme?: any }) => {
   const params = useParams<MoodPageParams>();
   const deviceInfo = useDeviceInfo();
   const devId = useDeviceId();
@@ -76,7 +77,7 @@ const MoodPage = () => {
   }, []);
 
   const getRemoteMoodInfo = async (isRefresh?: boolean) => {
-    state.loading = true 
+    state.loading = true
     const res = await getRemoteMoodList(devId, params, params.featureId, isRefresh)
     state.loading = false
     if (res.success && Array.isArray(res.data)) {
@@ -275,9 +276,9 @@ const MoodPage = () => {
     (moodItem: MoodUIInfo) => {
       if (params.isCeilingLight) {
         return (
-            moodInfo.mainLamp.id === moodItem.mainLamp.id &&
-            moodInfo.secondaryLamp.id === moodItem.secondaryLamp.id &&
-            (mainWork === WorkMode.Scene || secondaryWork === WorkMode.Scene) && !flagMode.flagMode && switchLed
+          moodInfo.mainLamp.id === moodItem.mainLamp.id &&
+          moodInfo.secondaryLamp.id === moodItem.secondaryLamp.id &&
+          (mainWork === WorkMode.Scene || secondaryWork === WorkMode.Scene) && !flagMode.flagMode && switchLed
         );
       } else if (params.isSupportSceneStatus && sceneStatusId !== -1) {
         return sceneStatusId === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode && switchLed
@@ -286,12 +287,34 @@ const MoodPage = () => {
       }
     },
     [moodInfo, mainWork, secondaryWork, flagMode?.flagMode, switchLed, sceneStatusId]
-);
+  );
 
   const nameRepeat = useCallback((mood: MoodUIInfo) => {
     return !!state.originMoods.filter(m => !(params.isCeilingLight ? (m.mainLamp.id === mood.mainLamp.id && m.secondaryLamp.id === mood.secondaryLamp.id) : (m.id === mood.id))).find(m => m.name === mood.name)
   }, [state.originMoods, params.isCeilingLight])
 
+  const styles = StyleSheet.create({
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    },
+    infoLine: {
+      marginHorizontal: cx(24),
+    },
+    addMoodPopover: {
+      position: 'absolute',
+      right: cx(60),
+      top: Platform.OS === 'android' ? cx(90) : cx(130),
+      maxWidth: cx(200),
+      backgroundColor: props.theme.card.background,
+    },
+    popoverItem: {
+      padding: cx(5),
+      alignItems: 'flex-start',
+      alignSelf: 'flex-start'
+    },
+  })
+
   return (
     <>
       <Page
@@ -308,36 +331,36 @@ const MoodPage = () => {
         loading={state.loading}
       >
         {!(params.isStringLight || params.isStripLight) && <View style={styles.tagLine}>
-          <Tag
-            checked={state.staticTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text1')}
-            onCheckedChange={checked => {
-              state.staticTagChecked = checked;
-            }}
-          />
-          <Spacer width={cx(8)} height={0} />
-          <Tag
-            checked={state.dynamicTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text2')}
-            onCheckedChange={checked => {
-              state.dynamicTagChecked = checked;
-            }}
-          />
+            <Tag
+                checked={state.staticTagChecked}
+                text={Strings.getLang('mood_overview_filter_name_text1')}
+                onCheckedChange={checked => {
+                  state.staticTagChecked = checked;
+                }}
+            />
+            <Spacer width={cx(8)} height={0} />
+            <Tag
+                checked={state.dynamicTagChecked}
+                text={Strings.getLang('mood_overview_filter_name_text2')}
+                onCheckedChange={checked => {
+                  state.dynamicTagChecked = checked;
+                }}
+            />
         </View>}
         <TouchableOpacity style={{ alignItems: 'flex-end',paddingRight: cx(24) }}
-          onPress={() => {
-            showDialog({
-              method: 'confirm',
-              title: I18n.getLang('flag_resetbutton'),
-              subTitle: I18n.getLang('flag_resetdescription'),
-              onConfirm: async (_, { close }) => {
-                close()
-                await getRemoteMoodInfo(true)
-              }
-            })
-          }}
+                          onPress={() => {
+                            showDialog({
+                              method: 'confirm',
+                              title: I18n.getLang('flag_resetbutton'),
+                              subTitle: I18n.getLang('flag_resetdescription'),
+                              onConfirm: async (_, { close }) => {
+                                close()
+                                await getRemoteMoodInfo(true)
+                              }
+                            })
+                          }}
         >
-          <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>
         <Spacer height={cx(10)} />
         {state.originMoods.length >= MAX_MOOD_COUNT && (
@@ -346,7 +369,7 @@ const MoodPage = () => {
             <InfoText
               icon={res.ic_warning_amber}
               text={Strings.getLang('mood_overview_warning_max_number_text')}
-              contentColor={'#ff9500'}
+              contentColor={props.theme.global.warning}
             />
             <Spacer height={cx(6)} />
           </View>
@@ -401,26 +424,4 @@ const MoodPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  tagLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(24),
-  },
-  infoLine: {
-    marginHorizontal: cx(24),
-  },
-  addMoodPopover: {
-    position: 'absolute',
-    right: cx(60),
-    top: Platform.OS === 'android' ? cx(90) : cx(130),
-    maxWidth: cx(200),
-    backgroundColor: '#fff',
-  },
-  popoverItem: {
-    padding: cx(5),
-    alignItems: 'flex-start',
-    alignSelf: 'flex-start'
-  },
-});
-
-export default MoodPage;
+export default withTheme(MoodPage)

package/src/newModules/mood/RecommendMoodItem.tsx

@@ -8,6 +8,7 @@ import { MoodJumpGradientMode, MoodUIInfo } from './Interface';
 import { MixMoodColorsLine } from './MoodItem';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 interface LightCategory {
   isMixLight?: boolean
@@ -17,6 +18,7 @@ interface LightCategory {
 }
 
 interface RecommendMixMoodItemProps {
+  theme?: any
   title: string;
   isMix: boolean;
   mood: MoodUIInfo;
@@ -29,7 +31,29 @@ const RecommendMixMoodItem = (props: RecommendMixMoodItemProps) => {
 
   const gradientMode = useMemo(() => (
     deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
- ), [MoodJumpGradientMode, deviceTypeOption])
+  ), [MoodJumpGradientMode, deviceTypeOption])
+
+
+  const styles = StyleSheet.create({
+    root: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginHorizontal: cx(24),
+    },
+    content: {
+      height: cx(56),
+      marginHorizontal: cx(16),
+      width: cx(295)
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    lineStyle: {
+      alignItems: 'center',
+    },
+  })
 
   return (
     <Card style={styles.root} onPress={props.onPress}>
@@ -39,7 +63,7 @@ const RecommendMixMoodItem = (props: RecommendMixMoodItemProps) => {
         style={styles.content}
         titleStyle={styles.title}
         iconStyle={{
-          color: '#000',
+          color: props.theme.global.fontColor,
           size: cx(16),
         }}
       />
@@ -57,25 +81,4 @@ const RecommendMixMoodItem = (props: RecommendMixMoodItemProps) => {
   );
 };
 
-const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: cx(24),
-  },
-  content: {
-    height: cx(56),
-    marginHorizontal: cx(16),
-    width: cx(295)
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  lineStyle: {
-    alignItems: 'center',
-  },
-});
-
-export default RecommendMixMoodItem;
+export default withTheme(RecommendMixMoodItem)

package/src/newModules/mood/StaticMoodEditorPage.tsx

@@ -25,6 +25,7 @@ import { showDialog } from '@ledvance/base/src/utils/common';
 import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 export interface StaticMoodEditorPageParams {
   mode: 'add' | 'edit';
@@ -42,7 +43,7 @@ export interface StaticMoodEditorPageState {
   loading: boolean;
 }
 
-const StaticMoodEditorPage = () => {
+const StaticMoodEditorPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useParams<StaticMoodEditorPageParams>();
   const params = cloneDeep(routeParams);
@@ -117,6 +118,40 @@ const StaticMoodEditorPage = () => {
     return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
   }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
 
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    name: {
+      marginHorizontal: cx(24),
+    },
+    adjustCard: {
+      marginTop: cx(12),
+      marginHorizontal: cx(24),
+    },
+    fanAdjustCard: {
+      marginHorizontal: cx(24),
+    },
+    preview: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    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('mesh_device_detail_mode')}
@@ -147,7 +182,7 @@ const StaticMoodEditorPage = () => {
             }}
             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'
@@ -204,47 +239,47 @@ const StaticMoodEditorPage = () => {
             )}
           </Card>
           {moduleParams.isMixLight && <Card style={styles.adjustCard}>
-            <LdvSwitch
-              title={I18n.getLang('add_new_trigger_time_field_headline_text3')}
-              color={''}
-              colorAlpha={1}
-              enable={!!state.mood.secondaryLamp.enable}
-              setEnable={(enable: boolean) => {
-                if (enable && state.mood.secondaryLamp.nodes.length === 0) {
-                  state.mood.secondaryLamp.nodes.push(
-                    {
-                      h: 0,
-                      s: 100,
-                      v: 100,
-                      brightness: 100,
-                      colorTemp: 0,
-                      isColorNode: true,
+              <LdvSwitch
+                  title={I18n.getLang('add_new_trigger_time_field_headline_text3')}
+                  color={''}
+                  colorAlpha={1}
+                  enable={!!state.mood.secondaryLamp.enable}
+                  setEnable={(enable: boolean) => {
+                    if (enable && state.mood.secondaryLamp.nodes.length === 0) {
+                      state.mood.secondaryLamp.nodes.push(
+                        {
+                          h: 0,
+                          s: 100,
+                          v: 100,
+                          brightness: 100,
+                          colorTemp: 0,
+                          isColorNode: true,
+                        }
+                      );
                     }
-                  );
-                }
-                state.mood.secondaryLamp.type = 3
-                state.secondaryNode = state.mood.secondaryLamp.nodes[0]
-                state.mood.secondaryLamp.enable = enable
-              }} />
-            {state.mood.secondaryLamp.enable &&
-              <>
-                <ColorAdjustView
-                  reserveSV={true}
-                  h={state.secondaryNode.h}
-                  s={state.secondaryNode.s}
-                  v={state.secondaryNode.v}
-                  onHSVChange={(h, s, v) => {
-                    state.secondaryNode.h = h
-                    state.secondaryNode.s = s
-                    state.secondaryNode.v = v
-                  }}
-                  onHSVChangeComplete={(h, s, v) => {
-                    state.secondaryNode.h = h
-                    state.secondaryNode.s = s
-                    state.secondaryNode.v = v
+                    state.mood.secondaryLamp.type = 3
+                    state.secondaryNode = state.mood.secondaryLamp.nodes[0]
+                    state.mood.secondaryLamp.enable = enable
                   }} />
-                <Spacer />
-              </>
+            {state.mood.secondaryLamp.enable &&
+                <>
+                    <ColorAdjustView
+                        reserveSV={true}
+                        h={state.secondaryNode.h}
+                        s={state.secondaryNode.s}
+                        v={state.secondaryNode.v}
+                        onHSVChange={(h, s, v) => {
+                          state.secondaryNode.h = h
+                          state.secondaryNode.s = s
+                          state.secondaryNode.v = v
+                        }}
+                        onHSVChangeComplete={(h, s, v) => {
+                          state.secondaryNode.h = h
+                          state.secondaryNode.s = s
+                          state.secondaryNode.v = v
+                        }} />
+                    <Spacer />
+                </>
             }
           </Card>}
           <Spacer />
@@ -297,47 +332,4 @@ const StaticMoodEditorPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginTop: 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',
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  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 StaticMoodEditorPage;
+export default withTheme(StaticMoodEditorPage)