@ledvance/group-ui-biz-bundle 1.0.76 → 1.0.78

package/src/modules/mood_new/StaticMoodEditorPage.tsx

@@ -24,6 +24,7 @@ import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
 import { showDialog } from '@ledvance/base/src/utils/common';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 export interface StaticMoodEditorPageParams {
   mode: 'add' | 'edit';
@@ -41,7 +42,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,41 @@ 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 +183,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'
@@ -253,47 +289,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)

package/src/modules/music/MusicPage.tsx

@@ -13,23 +13,24 @@ import * as MusicManager from './MusicManager'
 import Spacer from '@ledvance/base/src/components/Spacer'
 import LdvSlider from '@ledvance/base/src/components/ldvSlider'
 import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
-import { SelectPageParams } from '@ledvance/group-ui-biz-bundle/src/modules/select/SelectPage'
+import { SelectPageParams } from '../select/SelectPage'
 import { ui_biz_routerKey } from '../../navigation/Routers'
 import { cloneDeep } from 'lodash'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 import { ColorParser } from '@ledvance/base/src/utils/ColorParser'
 import { WorkMode } from '@ledvance/base/src/utils/interface'
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface MusicPageParams {
-  switchLedDp: string 
-  workModeDp: string 
+  switchLedDp: string
+  workModeDp: string
   musicDataDp: string
   dreamMusicDp?: string
   isMixLight?: boolean
 }
 
-const MusicPage = () => {
+const MusicPage = (props: { theme?: any }) => {
   const deviceInfo = useDeviceInfo()
   const tyGroupId = useUAGroupInfo().tyGroupId
   const params = useParams<MusicPageParams>()
@@ -43,7 +44,7 @@ const MusicPage = () => {
   useUpdateEffect(() =>{
     state.musicData = cloneDeep(musicData)
   }, [musicData])
-  
+
   const openMusic = () =>{
     if(workMode !== WorkMode.Music) state.musicData.lastWorkMode = workMode
     state.musicData.musicSwitch = true
@@ -60,7 +61,7 @@ const MusicPage = () => {
         () => {},
         async (v) =>{
           const musicDpData = ColorParser.encodeControlData(
-            v.mode, 
+            v.mode,
             v.hue,
             v.saturation,
             v.value,
@@ -94,6 +95,25 @@ const MusicPage = () => {
     return [title, selectModeData]
   }
 
+  const styles = StyleSheet.create({
+    content: {
+      flex: 1,
+      marginHorizontal: cx(18)
+    },
+    headSwitch: {
+      position: 'absolute',
+      right: 0,
+      top: - cx(40),
+      zIndex: 2,
+      marginBottom: cx(24)
+    },
+    tiptext: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      lineHeight: cx(14),
+    }
+  })
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -112,16 +132,17 @@ const MusicPage = () => {
             }
           }} />
         {params.dreamMusicDp && <TabBar
-          type='radio'
-          tabs={musicTabs}
-          style={{ borderRadius: cx(8), backgroundColor: '#f6f6f6', height: cx(36) }}
-          tabTextStyle={{ color: '#000', fontSize: cx(14) }}
-          tabActiveTextStyle={{ color: '#000', fontSize: cx(14), fontWeight: 'bold' }}
-          activeKey={state.musicData.musicType}
-          onChange={async (v) => {
-            state.musicData.musicType = Number(v)
-            if(state.musicData.musicSwitch && workMode === WorkMode.Music) openMusic()
-          }}
+            type='radio'
+            tabs={musicTabs}
+            style={{ borderRadius: cx(8), backgroundColor: props.theme.segment.background, height: cx(36) }}
+            tabTextStyle={{ color: props.theme.segment.fontColor, fontSize: cx(14) }}
+            tabActiveTextStyle={{ color: props.theme.segment.fontColor, fontSize: cx(14), fontWeight: 'bold' }}
+            activeColor={props.theme.segment.active}
+            activeKey={state.musicData.musicType}
+            onChange={async (v) => {
+              state.musicData.musicType = Number(v)
+              if(state.musicData.musicSwitch && workMode === WorkMode.Music) openMusic()
+            }}
         />}
         <Spacer />
         <Text style={styles.tiptext}>{I18n.getLang(state.musicData.musicType === 0 ? 'devicemusic_devicemic_description_text' : 'devicemusic_description_text')}</Text>
@@ -134,71 +155,52 @@ const MusicPage = () => {
         </View>
         {
           state.musicData.musicSwitch && workMode === WorkMode.Music &&
-          <>
-            {params.dreamMusicDp && state.musicData.musicType === 0 &&
-              <LdvSlider
-                title={I18n.getLang('devicemusic_switch_tab_device_sensitivity')}
-                value={state.musicData.deviceMusicData[state.musicData.deviceGenreMode]?.sensitivity || 50}
-                min={1}
-                max={100}
-                onValueChange={() => { }}
-                onSlidingComplete={(v: number) => {
-                  state.musicData.deviceMusicData = state.musicData.deviceMusicData.map(m => {
-                    if(m.id === state.musicData.deviceGenreMode){
-                      return {
-                        ...m,
-                        sensitivity: v
+            <>
+              {params.dreamMusicDp && state.musicData.musicType === 0 &&
+                  <LdvSlider
+                      title={I18n.getLang('devicemusic_switch_tab_device_sensitivity')}
+                      value={state.musicData.deviceMusicData[state.musicData.deviceGenreMode]?.sensitivity || 50}
+                      min={1}
+                      max={100}
+                      onValueChange={() => { }}
+                      onSlidingComplete={(v: number) => {
+                        state.musicData.deviceMusicData = state.musicData.deviceMusicData.map(m => {
+                          if(m.id === state.musicData.deviceGenreMode){
+                            return {
+                              ...m,
+                              sensitivity: v
+                            }
+                          }
+                          return m
+                        })
+                        openMusic()
+                      }}
+                      subTitleStr={''} />
+              }
+                <TextFieldStyleButton
+                    text={getSelectModeData()[0] || I18n.getLang('devicemusic_music_text')}
+                    placeholder={I18n.getLang('devicemusic_subheadline_text')}
+                    onPress={() => {
+                      const paramsSelect: SelectPageParams<number> = {
+                        title: I18n.getLang('devicemusic_subheadline_text'),
+                        data: getSelectModeData()[1],
+                        onSelect: selectPageData => {
+                          if (params.dreamMusicDp && state.musicData.musicType === 0) {
+                            state.musicData.deviceGenreMode = selectPageData.value
+                          } else {
+                            state.musicData.phoneGenreMode = selectPageData.value
+                          }
+                          openMusic()
+                        },
                       }
-                    }
-                    return m
-                  })
-                  openMusic()
-                }}
-                subTitleStr={''} />
-            }
-            <TextFieldStyleButton
-              text={getSelectModeData()[0] || I18n.getLang('devicemusic_music_text')}
-              placeholder={I18n.getLang('devicemusic_subheadline_text')}
-              onPress={() => {
-                const paramsSelect: SelectPageParams<number> = {
-                  title: I18n.getLang('devicemusic_subheadline_text'),
-                  data: getSelectModeData()[1],
-                  onSelect: selectPageData => {
-                    if (params.dreamMusicDp && state.musicData.musicType === 0) {
-                      state.musicData.deviceGenreMode = selectPageData.value
-                    } else {
-                      state.musicData.phoneGenreMode = selectPageData.value
-                    }
-                    openMusic()
-                  },
-                }
-                navigation.navigate(ui_biz_routerKey.group_ui_biz_select_page, paramsSelect)
-              }}
-            />
-          </>
+                      navigation.navigate(ui_biz_routerKey.group_ui_biz_select_page, paramsSelect)
+                    }}
+                />
+            </>
         }
       </View>
     </Page>
   )
 }
 
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    marginHorizontal: cx(18)
-  },
-  headSwitch: {
-    position: 'absolute',
-    right: 0,
-    top: - cx(40),
-    zIndex: 2,
-    marginBottom: cx(24)
-  },
-  tiptext: {
-    color: '#000',
-    fontSize: cx(14),
-    lineHeight: cx(14),
-  }
-})
-
-export default MusicPage
+export default withTheme(MusicPage)

package/src/modules/randomTimingForLight/ItemCard.tsx

@@ -7,9 +7,11 @@ import {getIsClosed, loopText} from "@ledvance/base/src/utils/common";
 import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 const {parseTimer} = Utils.TimeUtils
 
 export interface ItemCardProps<T> {
+  theme?: any
   item: T & {
     power: boolean
     startTime: number
@@ -25,8 +27,33 @@ export interface ItemCardProps<T> {
 
 const ItemCard = <T, >(props: ItemCardProps<T>) => {
   const {item, is24Hour, onSwitch, onPress} = props
-  // 判断是否关闭 
+  // 判断是否关闭
   const closed = getIsClosed(item)
+
+  const styles = StyleSheet.create({
+    itemCard: {
+      marginHorizontal: cx(24),
+      paddingHorizontal: cx(16),
+    },
+    switchLine: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    time: {
+      flex: 1,
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    switchBtn: {},
+    loopText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+  })
+
   return (
     <Card style={styles.itemCard} onPress={onPress}>
       <Spacer height={cx(16)}/>
@@ -52,28 +79,4 @@ const ItemCard = <T, >(props: ItemCardProps<T>) => {
   )
 }
 
-const styles = StyleSheet.create({
-  itemCard: {
-    marginHorizontal: cx(24),
-    paddingHorizontal: cx(16),
-  },
-  switchLine: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  time: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  switchBtn: {},
-  loopText: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-})
-
-export default ItemCard
+export default withTheme(ItemCard)

package/src/modules/randomTimingForLight/RandomTimingForLightDetailPage.tsx

@@ -23,6 +23,7 @@ import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 
 const {parseTimer} = Utils.TimeUtils
 const {convertX: cx} = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 
 interface RandomTimeDetailParam extends RandomTimingParam {
   mode: 'add' | 'edit',
@@ -49,7 +50,7 @@ const newRandomTimingItem = (): RandomTimingItem => {
   }
 }
 
-const RandomTimingForLightDetailPage = () => {
+const RandomTimingForLightDetailPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const params = useRoute().params as RandomTimeDetailParam
   const initItem = newRandomTimingItem();
@@ -125,6 +126,36 @@ const RandomTimingForLightDetailPage = () => {
       }
     })
   }
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      marginHorizontal: cx(24)
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    applyContent: {
+      backgroundColor: props.theme.container.background,
+      borderRadius: 4,
+      minHeight: cx(55),
+      flex: 1,
+      justifyContent: 'center',
+      paddingHorizontal: cx(10),
+      paddingTop: cx(10)
+    },
+    applyItem: {
+      paddingLeft: cx(5),
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: props.theme.global.background,
+      height: cx(35),
+    },
+  })
+
   return (
     <Page
       backText={I18n.getLang('randomtimecycle_sockets_headline_text')}
@@ -154,7 +185,8 @@ const RandomTimingForLightDetailPage = () => {
         {/* pick */}
         <TimerPicker
           itemTextColor='#aeadb5'
-          style={{paddingVertical: cx(0), marginVertical: cx(0)}}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
+          pickerFontColor={props.theme.global.fontColor}
           is12Hours={!params.is24Hour}
           startTime={state.item.startTime}
           endTime={state.item.endTime}
@@ -170,7 +202,9 @@ const RandomTimingForLightDetailPage = () => {
             state.item.weeks[rawIndex] = state.item.weeks[rawIndex] === 1 ? 0 : 1
           }}/>
         <Spacer/>
-        <Text style={styles.cardContainer}>{loopText(state.item.weeks, parseTimer(state.item.endTime * 60))}</Text>
+        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>
+          {loopText(state.item.weeks, parseTimer(state.item.endTime * 60))}
+        </Text>
         <Spacer/>
         {/*Apply for */}
         <View style={styles.cardContainer}>
@@ -178,15 +212,17 @@ const RandomTimingForLightDetailPage = () => {
           <Spacer height={cx(10)}/>
           <View style={styles.applyContent}>
             {state.item.channel === undefined ?
-              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              <Text style={{color: props.theme.global.fontColor}}>
+                {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
+              </Text> :
               <View style={[styles.applyItem, {marginBottom: cx(10), borderRadius: 4}]}>
-                <Text style={{color: '#000'}}>{params.channels[state.item.channel]}</Text>
+                <Text style={{color: props.theme.global.fontColor}}>{params.channels[state.item.channel]}</Text>
                 {params.channels.length > 1 && <TouchableOpacity
                     onPress={() => {
                       state.item.channel = undefined
                     }}
                     style={{paddingHorizontal: cx(5)}}>
-                    <Image style={{width: cx(16), height: cx(16)}} source={res.ic_arrows_nav_clear}/>
+                    <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor}} source={res.ic_arrows_nav_clear}/>
                 </TouchableOpacity>}
               </View>
             }
@@ -203,8 +239,8 @@ const RandomTimingForLightDetailPage = () => {
                   state.item.channel = index
                 }}
               >
-                <Text style={{color: '#000'}}>{item}</Text>
-                <Image style={{width: cx(16), height: cx(16)}} source={res.device_panel_timer_add}/>
+                <Text style={{color: props.theme.global.fontColor}}>{item}</Text>
+                <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor}} source={res.device_panel_timer_add}/>
               </TouchableOpacity>
             )
           })}
@@ -217,7 +253,7 @@ const RandomTimingForLightDetailPage = () => {
           <Card>
             <LdvSwitch
               title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-              color={'#fff'}
+              color={props.theme.card.background}
               colorAlpha={1}
               enable={true}
               setEnable={() => { }}
@@ -283,75 +319,4 @@ const RandomTimingForLightDetailPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  applyContent: {
-    backgroundColor: '#f6f6f6',
-    borderRadius: 4,
-    minHeight: cx(55),
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: cx(10),
-    paddingTop: cx(10)
-  },
-  applyItem: {
-    paddingLeft: cx(5),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    height: cx(35),
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10)
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  summaryImg: {
-    width: cx(12),
-    height: cx(12),
-    marginRight: cx(6)
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000'
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    borderRadius: cx(16),
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  rightTitle: {
-    paddingLeft: cx(12),
-    paddingRight: cx(12),
-    fontSize: cx(10),
-    textAlign: 'center',
-    alignSelf: 'flex-start'
-  },
-  filletCorner: {
-    flexDirection: 'row',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignSelf: 'flex-start'
-  }
-})
-
-export default RandomTimingForLightDetailPage
+export default withTheme(RandomTimingForLightDetailPage)