@ledvance/ui-biz-bundle 1.1.90 → 1.1.92

package/src/newModules/mood/DynamicMoodEditorPage.tsx

@@ -43,6 +43,7 @@ import { MoodNodeInfo } from './Interface';
 import { showDialog } from '@ledvance/base/src/utils/common';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 interface DynamicMoodEditorPageState {
   headline: string;
   mood: MoodUIInfo;
@@ -51,7 +52,7 @@ interface DynamicMoodEditorPageState {
   sceneMode: StripLightMoodMode;
   loading: boolean;
 }
-const DynamicMoodEditorPage = () => {
+const DynamicMoodEditorPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useRoute().params as StaticMoodEditorPageParams;
   const params = cloneDeep(routeParams);
@@ -65,8 +66,8 @@ const DynamicMoodEditorPage = () => {
     sceneMode: moduleParams.isStringLight
       ? stringLightMoodMode
       : moduleParams.isStripLight
-      ? stripLightMoodMode
-      : lightMoodMode,
+        ? stripLightMoodMode
+        : lightMoodMode,
   });
 
   useEffect(() => {
@@ -134,6 +135,98 @@ const DynamicMoodEditorPage = () => {
     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: {
+      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),
+    },
+    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={Strings.getLang('mesh_device_detail_mode')}
@@ -172,7 +265,7 @@ const DynamicMoodEditorPage = () => {
             }}
             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={Strings.getLang(
               nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text'
@@ -289,7 +382,7 @@ const DynamicMoodEditorPage = () => {
                   <Image
                     style={[
                       styles.adjustButton,
-                      { tintColor: state.mainBucketSelected ? '#f60' : '#666' },
+                      { tintColor: state.mainBucketSelected ? props.theme.icon.primary : props.theme.icon.normal },
                     ]}
                     source={res.ic_paint_bucket}
                   />
@@ -302,7 +395,7 @@ const DynamicMoodEditorPage = () => {
                   <Image
                     style={[
                       styles.adjustButton,
-                      { tintColor: state.mainBucketSelected ? '#666' : '#f60' },
+                      { tintColor: state.mainBucketSelected ? props.theme.icon.normal : props.theme.icon.primary },
                     ]}
                     source={res.ic_colorize}
                   />
@@ -337,7 +430,7 @@ const DynamicMoodEditorPage = () => {
                           style={[
                             styles.nodeDeleteIcon,
                             {
-                              tintColor: state.mood.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                              tintColor: state.mood.mainLamp.nodes.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
                             },
                           ]}
                           source={res.ic_mood_del}
@@ -369,7 +462,7 @@ const DynamicMoodEditorPage = () => {
                           style={{
                             width: cx(18),
                             height: cx(18),
-                            tintColor: '#000',
+                            tintColor: props.theme.global.fontColor,
                           }}
                           source={{ uri: res.add }}
                         />
@@ -550,98 +643,8 @@ const DynamicMoodEditorPage = () => {
     </Page>
   );
 };
-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),
-  },
-  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 DynamicMoodEditorPage;
+
+export default withTheme(DynamicMoodEditorPage)
 export function getTransitionModeString(transitionMode: MoodNodeTransitionMode): string {
   if (transitionMode === MoodNodeTransitionMode.Jump) {
     return Strings.getLang('other_lights_modes_jump_text');

package/src/newModules/mood/MixDynamicMoodEditor.tsx

@@ -42,6 +42,7 @@ import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustVi
 import { showDialog } from '@ledvance/base/src/utils/common';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 interface MixDynamicMoodEditorPageState extends StaticMoodEditorPageState {
   mainBucketSelected: boolean;
   secondaryBucketSelected: boolean;
@@ -50,7 +51,7 @@ interface MixDynamicMoodEditorPageState extends StaticMoodEditorPageState {
   sceneMode: StripLightMoodMode;
   mainSceneMode: any
 }
-const MixDynamicMoodEditorPage = () => {
+const MixDynamicMoodEditorPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useRoute().params as StaticMoodEditorPageParams;
   const params = cloneDeep(routeParams);
@@ -146,6 +147,98 @@ const MixDynamicMoodEditorPage = () => {
     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: {
+      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),
+    },
+    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={Strings.getLang('mesh_device_detail_mode')}
@@ -196,7 +289,7 @@ const MixDynamicMoodEditorPage = () => {
             }}
             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={Strings.getLang(
               nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text'
@@ -205,7 +298,7 @@ const MixDynamicMoodEditorPage = () => {
           <Card style={styles.adjustCard}>
             <LdvSwitch
               title={I18n.getLang('light_sources_tile_main_lighting_headline')}
-              color="#fff"
+              color={props.theme.card.background}
               colorAlpha={1}
               enable={!!state.mood.mainLamp.enable}
               setEnable={v => {
@@ -275,7 +368,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.mainBucketSelected ? '#f60' : '#666' },
+                          { tintColor: state.mainBucketSelected ? props.theme.icon.primary : props.theme.icon.normal },
                         ]}
                         source={res.ic_paint_bucket}
                       />
@@ -288,7 +381,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.mainBucketSelected ? '#666' : '#f60' },
+                          { tintColor: state.mainBucketSelected ? props.theme.icon.normal : props.theme.icon.primary },
                         ]}
                         source={res.ic_colorize}
                       />
@@ -324,7 +417,7 @@ const MixDynamicMoodEditorPage = () => {
                               style={[
                                 styles.nodeDeleteIcon,
                                 {
-                                  tintColor: state.mood.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                  tintColor: state.mood.mainLamp.nodes.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
                                 },
                               ]}
                               source={res.ic_mood_del}
@@ -356,7 +449,7 @@ const MixDynamicMoodEditorPage = () => {
                               style={{
                                 width: cx(18),
                                 height: cx(18),
-                                tintColor: '#000',
+                                tintColor: props.theme.addNode.fontColor,
                               }}
                               source={{ uri: res.add }}
                             />
@@ -400,7 +493,7 @@ const MixDynamicMoodEditorPage = () => {
           <Card style={styles.adjustCard}>
             <LdvSwitch
               title={I18n.getLang('light_sources_tile_sec_lighting_headline')}
-              color={'#fff'}
+              color={props.theme.card.background}
               colorAlpha={1}
               enable={!!state.mood.secondaryLamp.enable}
               setEnable={v => {
@@ -540,7 +633,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.secondaryBucketSelected ? '#f60' : '#666' },
+                          { tintColor: state.secondaryBucketSelected ? props.theme.icon.primary : props.theme.icon.normal },
                         ]}
                         source={res.ic_paint_bucket}
                       />
@@ -553,7 +646,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.secondaryBucketSelected ? '#666' : '#f60' },
+                          { tintColor: state.secondaryBucketSelected ? props.theme.icon.normal : props.theme.icon.primary },
                         ]}
                         source={res.ic_colorize}
                       />
@@ -589,7 +682,7 @@ const MixDynamicMoodEditorPage = () => {
                                 styles.nodeDeleteIcon,
                                 {
                                   tintColor:
-                                    state.mood.secondaryLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                    state.mood.secondaryLamp.nodes.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
                                 },
                               ]}
                               source={res.ic_mood_del}
@@ -621,7 +714,7 @@ const MixDynamicMoodEditorPage = () => {
                               style={{
                                 width: cx(18),
                                 height: cx(18),
-                                tintColor: '#000',
+                                tintColor: props.theme.addNode.fontColor,
                               }}
                               source={{ uri: res.add }}
                             />
@@ -701,98 +794,8 @@ const MixDynamicMoodEditorPage = () => {
     </Page>
   );
 };
-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),
-  },
-  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 MixDynamicMoodEditorPage;
+
+export default withTheme(MixDynamicMoodEditorPage)
 export function getTransitionModeString(transitionMode: MoodNodeTransitionMode): string {
   if (transitionMode === MoodNodeTransitionMode.Jump) {
     return Strings.getLang('other_lights_modes_jump_text');