@ledvance/ui-biz-bundle 1.1.90 → 1.1.92

package/src/newModules/fixedTime/FixedTimePage.tsx

@@ -21,14 +21,15 @@ import Tag from "@ledvance/base/src/components/Tag";
 import InfoText from "@ledvance/base/src/components/InfoText";
 
 const { convertX: cx } = Utils.RatioUtils
-
+const { withTheme } = Utils.ThemeUtils
+const {parseTimer} = Utils.TimeUtils
 export interface FixedTimePageParams {
   fixedTimeDpCode: string
   conflictDps: {
     randomTimeDpCode?: string
     biorhythmDpCode?: string
     sleepDpCode?: string
-    wakeUpDpCode?: string 
+    wakeUpDpCode?: string
   }
   isPlug?: boolean
   showTags?: boolean
@@ -38,7 +39,7 @@ export interface FixedTimePageParams {
   isSupportBrightness?: boolean
 }
 
-const FixedTimePage = () => {
+const FixedTimePage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const devInfo = useDeviceInfo()
   const params = useParams<FixedTimePageParams>()
@@ -92,6 +93,55 @@ const FixedTimePage = () => {
     return res
   }, [state.originList])
 
+
+  const styles = StyleSheet.create({
+    randomTimingCard: {
+      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',
+    },
+    categoryList: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      marginHorizontal: cx(24),
+      alignSelf: 'flex-start'
+    },
+    tagContainer: {
+      flexDirection: 'row',
+      marginBottom: cx(15)
+    },
+    tag: {
+      borderRadius: cx(16),
+      height: cx(16),
+      backgroundColor: props.theme.tag.background,
+      marginRight: cx(10),
+      paddingHorizontal: cx(12)
+    },
+    tagTitle: {
+      fontSize: cx(10),
+      textAlign: 'center',
+      fontFamily: 'PingFangSC-Medium',
+      color: props.theme.tag.fontColor,
+    },
+  })
+
   const showTags = useMemo(() => (
     <View style={styles.categoryList}>
       {state.checkTags.map((tag, idx) => (
@@ -122,46 +172,47 @@ const FixedTimePage = () => {
     >
       <ScrollView nestedScrollEnabled={true}>
         <Text style={{
-          color: '#000',
+          color: props.theme.global.fontColor,
           marginLeft: cx(24),
           fontSize: cx(12)
         }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
         <Spacer height={cx(10)} />
         {showMaxNumTip() && <InfoText
-          style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
-          icon={res.ic_warning_amber}
-          iconStyle={{ width: cx(16), height: cx(16) }}
-          contentColor="#FF9500"
-          text={I18n.getLang('fixedtimecycle_warning_max_number_text')}
-          textStyle={{ fontSize: cx(12) }}
+            style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
+            icon={res.ic_warning_amber}
+            iconStyle={{ width: cx(16), height: cx(16) }}
+            contentColor="#FF9500"
+            text={I18n.getLang('fixedtimecycle_warning_max_number_text')}
+            textStyle={{ fontSize: cx(12) }}
         />}
         {params.showTags && !!state.originList.length && showTags}
         {state.fixedTimeList.length > 0 ? <FlatList
-          data={state.fixedTimeList}
-          renderItem={({ item }) => (
-            <FixedTimeCard
-              is24Hour={is24Hour}
-              fixedTime={item}
-              showTags={params.showTags}
-              tags={params.applyForList}
-              onSwitch={async (v) => {
-                state.loading = true
-                await onPost('edit', {
-                  ...item,
-                  enable: v
-                })
-                state.loading = false
-              }}
-              onPress={() => {
-                navigateToEdit('edit', item)
-              }}
-            />
-          )}
-          keyExtractor={(item: any) => `${item?.index}`}
-          ItemSeparatorComponent={() => <Spacer />}
-          ListHeaderComponent={<Spacer height={cx(10)} />}
-          ListFooterComponent={<Spacer />}
-        /> :
+            data={state.fixedTimeList}
+            renderItem={({ item }) => (
+              <FixedTimeCard
+                styles={styles}
+                is24Hour={is24Hour}
+                fixedTime={item}
+                showTags={params.showTags}
+                tags={params.applyForList}
+                onSwitch={async (v) => {
+                  state.loading = true
+                  await onPost('edit', {
+                    ...item,
+                    enable: v
+                  })
+                  state.loading = false
+                }}
+                onPress={() => {
+                  navigateToEdit('edit', item)
+                }}
+              />
+            )}
+            keyExtractor={(item: any) => `${item?.index}`}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListHeaderComponent={<Spacer height={cx(10)} />}
+            ListFooterComponent={<Spacer />}
+          /> :
           <View style={{ flex: 1, marginTop: cx(60), alignItems: 'center', marginHorizontal: cx(24) }}>
             <Image
               style={{ width: cx(225), height: cx(198) }}
@@ -171,22 +222,22 @@ const FixedTimePage = () => {
               icon={res.device_panel_schedule_alert}
               text={I18n.getLang(!state.originList.length ? 'fixedTimeCycle_information_text' : 'fixedTimeCycle_empty_filtering_information_text')}
               style={{ width: 'auto', alignItems: 'center' }}
-              textStyle={{ color: '#000', fontSize: cx(12), flex: undefined }}
-              iconStyle={{ width: cx(16), height: cx(16), tintColor: '#000' }}
+              textStyle={{ color: props.theme.global.fontColor, fontSize: cx(12), flex: undefined }}
+              iconStyle={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor, }}
             />
             <Spacer />
             {!state.originList.length && <TextButton
-              text={I18n.getLang('fixedTimeCycle_bttn_text')}
-              style={{
-                backgroundColor: '#f60',
-                borderRadius: cx(6),
-                paddingVertical: cx(12),
-                paddingHorizontal: cx(24),
-              }}
-              textStyle={{ color: '#fff' }}
-              onPress={() => {
-                navigateToEdit('add', newFixedTime(!!params.isPlug))
-              }} />}
+                text={I18n.getLang('fixedTimeCycle_bttn_text')}
+                style={{
+                  backgroundColor: props.theme.button.primary,
+                  borderRadius: cx(6),
+                  paddingVertical: cx(12),
+                  paddingHorizontal: cx(24),
+                }}
+                textStyle={{ color: props.theme.button.fontColor, }}
+                onPress={() => {
+                  navigateToEdit('add', newFixedTime(!!params.isPlug))
+                }} />}
           </View>}
       </ScrollView>
 
@@ -201,8 +252,9 @@ const FixedTimeCard = memo((props: {
   showTags?: boolean,
   onSwitch: (enable: boolean) => void,
   onPress: () => void
+  styles: StyleSheet.NamedStyles<any>
 }) => {
-  const { is24Hour, fixedTime, tags, showTags, onSwitch, onPress } = props
+  const { is24Hour, fixedTime, tags, showTags, onSwitch, onPress, styles } = props
   return (
     <Card style={styles.randomTimingCard} onPress={onPress}>
       <Spacer height={cx(16)} />
@@ -215,16 +267,16 @@ const FixedTimeCard = memo((props: {
           thumbStyle={{ elevation: 0 }}
           onValueChange={onSwitch} />
       </View>
-      <Text style={styles.loopText}>{loopText(fixedTime.weeks)}</Text>
+      <Text style={styles.loopText}>{loopText(fixedTime.weeks, parseTimer(fixedTime.endTime * 60))}</Text>
       <Spacer height={cx(5)} />
       <Text style={styles.loopText}>{fixedTime.name}</Text>
       <Spacer height={cx(showTags ? 5 : 20)} />
       {showTags && <View style={styles.tagContainer}>
-        <View style={styles.tag}>
-          <Text style={styles.tagTitle}>
-            {tags[fixedTime.channel || 0]?.key}
-          </Text>
-        </View>
+          <View style={styles.tag}>
+              <Text style={styles.tagTitle}>
+                {tags[fixedTime.channel || 0]?.key}
+              </Text>
+          </View>
       </View>}
     </Card>
   )
@@ -251,52 +303,4 @@ const newFixedTime = (isPlug: boolean) => {
   }
 }
 
-const styles = StyleSheet.create({
-  randomTimingCard: {
-    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',
-  },
-  categoryList: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginHorizontal: cx(24),
-    alignSelf: 'flex-start'
-  },
-  tagContainer: {
-    flexDirection: 'row',
-    marginBottom: cx(15)
-  },
-  tag: {
-    borderRadius: cx(16),
-    height: cx(16),
-    backgroundColor: '#E6E7E8',
-    marginRight: cx(10),
-    paddingHorizontal: cx(12)
-  },
-  tagTitle: {
-    fontSize: cx(10),
-    textAlign: 'center',
-    fontFamily: 'PingFangSC-Medium',
-    color: '#000'
-  },
-})
-
-export default FixedTimePage
+export default withTheme(FixedTimePage)

package/src/newModules/lightMode/LightModePage.tsx

@@ -12,6 +12,7 @@ import { useParams } from '@ledvance/base/src/hooks/Hooks'
 import {Result} from "@ledvance/base/src/models/modules/Result";
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 const LIGHT_MODE_RELAY = 'relay'
 const LIGHT_MODE_POS = 'pos'
@@ -28,7 +29,7 @@ export const useLightMode = (code: string): [LightMode, (v: LightMode) => Promis
   return useDp(code)
 }
 
-const LightModePage = () => {
+const LightModePage = (props: { theme?: any }) => {
   const params = useParams<LightModePageParams>()
   const deviceInfo = useDeviceInfo()
   const [lightMode, setLightMode] = useLightMode(params.lightModeCode)
@@ -42,6 +43,71 @@ const LightModePage = () => {
     state.lightMode = lightMode
   }, [lightMode])
 
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+    },
+    desc: {
+      marginHorizontal: cx(24),
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    tipText: {
+      marginHorizontal: cx(24),
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    modeSelectGroup: {
+      marginHorizontal: cx(24),
+      backgroundColor: props.theme.container.background,
+      borderRadius: cx(4),
+    },
+    modeTip: {
+      marginHorizontal: cx(8),
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    modeSelectCard: {
+      marginHorizontal: cx(8),
+    },
+    line: {
+      height: cx(1),
+      marginHorizontal: cx(12),
+      backgroundColor: props.theme.container.divider,
+    },
+    itemRoot: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(12),
+      paddingBottom: cx(8),
+    },
+    itemTextGroup: {
+      flex: 1,
+      marginEnd: cx(12),
+      justifyContent: 'center',
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    itemContent: {
+      color: props.theme.global.secondFontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    itemCheckedIcon: {
+      width: cx(32),
+      height: cx(32),
+      marginEnd: cx(4),
+    },
+  })
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -61,6 +127,7 @@ const LightModePage = () => {
           <Card style={styles.modeSelectCard}>
             <Spacer height={cx(12)} />
             <LightModeItem
+              styles={styles}
               enable={state.lightMode === LIGHT_MODE_RELAY}
               title={I18n.getLang('matterplug_option1title')}
               content={I18n.getLang('matterplug_option1description')}
@@ -71,6 +138,7 @@ const LightModePage = () => {
             <View style={styles.line} />
             <Spacer height={cx(8)} />
             <LightModeItem
+              styles={styles}
               enable={state.lightMode === LIGHT_MODE_POS}
               title={I18n.getLang('matterplug_option2title')}
               content={I18n.getLang('matterplug_option2description')}
@@ -81,6 +149,7 @@ const LightModePage = () => {
             <View style={styles.line} />
             <Spacer height={cx(8)} />
             <LightModeItem
+              styles={styles}
               enable={state.lightMode === LIGHT_MODE_OFF}
               title={I18n.getLang('matterplug_option3title')}
               content={I18n.getLang('matterplug_option3description')}
@@ -91,6 +160,7 @@ const LightModePage = () => {
             <Spacer height={cx(8)} />
             <View style={styles.line} />
             <LightModeItem
+              styles={styles}
               enable={state.lightMode === LIGHT_MODE_ON}
               title={I18n.getLang('matterplug_option4title')}
               content={I18n.getLang('matterplug_option4description')}
@@ -108,6 +178,7 @@ const LightModePage = () => {
 }
 
 interface LightModeItemProps extends PropsWithChildren<ViewProps> {
+  styles: StyleSheet.NamedStyles<any>
   onPress: () => void
   title: string
   content: string
@@ -115,6 +186,7 @@ interface LightModeItemProps extends PropsWithChildren<ViewProps> {
 }
 
 function LightModeItem(props: LightModeItemProps) {
+  const { styles } = props
   return (
     <TouchableOpacity onPress={props.onPress}>
       <View style={styles.itemRoot}>
@@ -136,69 +208,4 @@ function LightModeItem(props: LightModeItemProps) {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  desc: {
-    marginHorizontal: cx(24),
-    color: '#000',
-    fontSize: cx(14),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  tipText: {
-    marginHorizontal: cx(24),
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  modeSelectGroup: {
-    marginHorizontal: cx(24),
-    backgroundColor: '#f6f6f6',
-    borderRadius: cx(4),
-  },
-  modeTip: {
-    marginHorizontal: cx(8),
-    color: '#000',
-    fontSize: cx(14),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  modeSelectCard: {
-    marginHorizontal: cx(8),
-  },
-  line: {
-    height: cx(1),
-    marginHorizontal: cx(12),
-    backgroundColor: '#3C3C435B',
-  },
-  itemRoot: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(12),
-    paddingBottom: cx(8),
-  },
-  itemTextGroup: {
-    flex: 1,
-    marginEnd: cx(12),
-    justifyContent: 'center',
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemContent: {
-    color: '#666',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemCheckedIcon: {
-    width: cx(32),
-    height: cx(32),
-    marginEnd: cx(4),
-  },
-})
-
-export default LightModePage
+export default withTheme(LightModePage)

package/src/newModules/mood/AddMoodPage.tsx

@@ -19,6 +19,7 @@ import { difference, head, range } from 'lodash';
 import { RecommendMood, getRecommendMixMoods, getRecommendMoods } from './MoodInfo';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 export interface AddMoodPageParams {
   isStatic: boolean;
@@ -32,7 +33,7 @@ interface AddMoodPageState {
   data: RecommendMood[];
 }
 
-const AddMoodPage = () => {
+const AddMoodPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useRoute().params as AddMoodPageParams;
   const moduleParams = routeParams.moduleParams;
@@ -77,6 +78,21 @@ const AddMoodPage = () => {
     [routeParams]
   );
 
+
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    desc: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      marginHorizontal: cx(24),
+      marginTop: cx(12),
+    },
+  })
+
+
   return (
     <Page
       backText={Strings.getLang('add_new_static_mood_system_back')}
@@ -120,20 +136,7 @@ const AddMoodPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  desc: {
-    color: '#000',
-    fontSize: cx(16),
-    marginHorizontal: cx(24),
-    marginTop: cx(12),
-  },
-});
-
-export default AddMoodPage;
+export default withTheme(AddMoodPage)
 
 const defStripConfig = {
   version: 0,