@ledvance/ui-biz-bundle 1.1.89 → 1.1.91

package/src/newModules/sleepWakeUp/SleepWakeUpPage.tsx

@@ -23,6 +23,7 @@ import InfoText from "@ledvance/base/src/components/InfoText";
 
 const cx = Utils.RatioUtils.convertX
 const { parseTimer } = Utils.TimeUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface SleepWakeUpPageRouteParams {
   isSupportColor?: boolean
@@ -40,7 +41,7 @@ export interface SleepWakeUpPageRouteParams {
 }
 
 const MAX_SCHEDULE = 4
-const SleepWakeUpPage = () => {
+const SleepWakeUpPage = (props: { theme?: any }) => {
   const deviceInfo = useDeviceInfo()
   const navigation = useNavigation()
   const is24HourClock = useSystemTimeFormate()
@@ -174,6 +175,101 @@ const SleepWakeUpPage = () => {
     return ''
   }, [getTipText()])
 
+  const styles = StyleSheet.create({
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    },
+    infoLine: {
+      marginHorizontal: cx(24),
+    },
+    addMoodPopover: {
+      width: cx(210),
+      height: cx(90.5),
+      marginStart: cx(115),
+      marginTop: cx(100),
+      backgroundColor: props.theme.card.background,
+    },
+    popoverItem: {
+      width: cx(210),
+      height: cx(45),
+      alignItems: 'flex-start',
+    },
+    emptyListCon: {
+      flex: 1,
+      alignItems: 'center',
+    },
+    emptyImage: {
+      width: cx(225),
+      height: cx(198),
+    },
+    emptyText: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    emptyNoTime: {
+      fontSize: cx(12),
+      lineHeight: cx(20),
+      textAlign: 'center',
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      color: props.theme.global.fontColor
+    },
+    emptyBtnView: {
+      alignItems: 'center'
+    },
+    emptyBtn: {
+      backgroundColor: props.theme.button.primary,
+      borderRadius: cx(5),
+      paddingHorizontal: cx(15),
+      paddingVertical: cx(10)
+    },
+    addTimer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      // width,
+      marginVertical: cx(20),
+    },
+    disableItemText: {
+      color: '#CBCBCB',
+      fontSize: cx(16),
+    },
+    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',
+      height: cx(20)
+    },
+    tag: {
+      alignSelf: 'flex-start',
+      borderRadius: cx(16),
+      height: cx(16),
+      backgroundColor: props.theme.tag.background,
+      paddingHorizontal: cx(10),
+    },
+    tagTitle: {
+      fontSize: cx(10),
+      textAlign: 'center',
+      fontFamily: 'PingFangSC-Medium',
+      color: props.theme.tag.fontColor
+    },
+  })
+
   return (
     <>
       <Page
@@ -187,36 +283,36 @@ const SleepWakeUpPage = () => {
         loading={state.loading}
       >
         <View style={{ marginHorizontal: cx(24) }}>
-          <Text style={{ color: '#000', fontSize: cx(12) }}>
+          <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>
             {I18n.getLang('timeschedule_overview_description_text')}
           </Text>
         </View>
         <Spacer height={cx(5)} />
         {!!getTipText() && <InfoText
-          style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
-          icon={res.ic_warning_amber}
-          iconStyle={{ width: cx(16), height: cx(16) }}
-          contentColor="#FF9500"
-          text={tipText}
-          textStyle={{ fontSize: cx(12) }}
+            style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
+            icon={res.ic_warning_amber}
+            iconStyle={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }}
+            contentColor={props.theme.global.secondFontColor}
+            text={tipText}
+            textStyle={{ fontSize: cx(12) }}
         />}
         {hasScheduleList() && <>
-          <View style={styles.tagLine}>
-            <Tag
-              checked={state.sleepTagChecked}
-              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips2_text')}
-              onCheckedChange={checked => {
-                state.sleepTagChecked = checked
-              }} />
-            <Spacer width={cx(8)} height={0} />
-            <Tag
-              checked={state.wakeUpTagChecked}
-              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips_text')}
-              onCheckedChange={checked => {
-                state.wakeUpTagChecked = checked
-              }} />
-          </View>
-          <Spacer height={cx(5)} />
+            <View style={styles.tagLine}>
+                <Tag
+                    checked={state.sleepTagChecked}
+                    text={I18n.getLang('sleepwakeschedule_field_3_Times_chips2_text')}
+                    onCheckedChange={checked => {
+                      state.sleepTagChecked = checked
+                    }} />
+                <Spacer width={cx(8)} height={0} />
+                <Tag
+                    checked={state.wakeUpTagChecked}
+                    text={I18n.getLang('sleepwakeschedule_field_3_Times_chips_text')}
+                    onCheckedChange={checked => {
+                      state.wakeUpTagChecked = checked
+                    }} />
+            </View>
+            <Spacer height={cx(5)} />
         </>}
         {state.filteredScheduleList.length ?
           <FlatList
@@ -224,6 +320,7 @@ const SleepWakeUpPage = () => {
             renderItem={({ item }) => (
               <SleepWakeUpCard
                 is24HourClock={is24HourClock}
+                styles={styles}
                 sleepWakeUp={item}
                 onPress={() => {
                   onAddScheduleDialogItemClick(item.isSleep, 'edit', item)
@@ -251,7 +348,7 @@ const SleepWakeUpPage = () => {
             <View style={styles.emptyText}>
               <Image
                 source={{ uri: res.device_panel_schedule_alert }}
-                style={{ width: cx(16), height: cx(16) }}
+                style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
               />
               <Text style={styles.emptyNoTime}>
                 {
@@ -262,22 +359,22 @@ const SleepWakeUpPage = () => {
               </Text>
             </View>
             {!hasScheduleList() &&
-              <View style={styles.emptyBtnView}>
-                <Spacer />
-                <TextButton
-                  style={styles.emptyBtn}
-                  textStyle={isSleepMax ? styles.disableItemText : { color: '#fff' }}
-                  text={I18n.getLang('sleepwakeschedule_add_button_text1')}
-                  onPress={() => onAddScheduleDialogItemClick(true, 'add', getNewSleepWakeUp(true, params))}
-                />
-                <Spacer />
-                <TextButton
-                  style={styles.emptyBtn}
-                  textStyle={isWakeUpMax ? styles.disableItemText : { color: '#fff' }}
-                  text={I18n.getLang('sleepwakeschedule_add_button_text2')}
-                  onPress={() => onAddScheduleDialogItemClick(false, 'add', getNewSleepWakeUp(false, params))}
-                />
-              </View>}
+                <View style={styles.emptyBtnView}>
+                    <Spacer />
+                    <TextButton
+                        style={styles.emptyBtn}
+                        textStyle={isSleepMax ? styles.disableItemText : { color: props.theme.button.fontColor }}
+                        text={I18n.getLang('sleepwakeschedule_add_button_text1')}
+                        onPress={() => onAddScheduleDialogItemClick(true, 'add', getNewSleepWakeUp(true, params))}
+                    />
+                    <Spacer />
+                    <TextButton
+                        style={styles.emptyBtn}
+                        textStyle={isWakeUpMax ? styles.disableItemText : { color: props.theme.button.fontColor }}
+                        text={I18n.getLang('sleepwakeschedule_add_button_text2')}
+                        onPress={() => onAddScheduleDialogItemClick(false, 'add', getNewSleepWakeUp(false, params))}
+                    />
+                </View>}
           </View>
         }
       </Page>
@@ -311,8 +408,9 @@ const SleepWakeUpCard = (props: {
   onSwitch: (enable: boolean) => void,
   onPress: () => void
   is24HourClock: boolean
+  styles: StyleSheet.NamedStyles<any>
 }) => {
-  const { sleepWakeUp, is24HourClock, onSwitch, onPress } = props
+  const { sleepWakeUp, is24HourClock, onSwitch, onPress, styles } = props
   return (
     <Card style={styles.randomTimingCard} onPress={onPress}>
       <Spacer height={cx(16)} />
@@ -353,105 +451,11 @@ const getNewSleepWakeUp = (isSleep: boolean, params: SleepWakeUpPageRouteParams)
     last: 0,
     startTime: isSleep ? 1380 : 390,
     endTime: isSleep ? 1410 : 420,
-    isColorMode: params.isSupportColor ? true : false,
-    isSleep
+    isColorMode: !!params.isSupportColor,
+    isSleep,
+    time: isSleep ? 1380 : 420
   }
   return def
 }
 
-const styles = StyleSheet.create({
-  tagLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(24),
-  },
-  infoLine: {
-    marginHorizontal: cx(24),
-  },
-  addMoodPopover: {
-    width: cx(210),
-    height: cx(90.5),
-    marginStart: cx(115),
-    marginTop: cx(100),
-    backgroundColor: '#fff',
-  },
-  popoverItem: {
-    width: cx(210),
-    height: cx(45),
-    alignItems: 'flex-start',
-  },
-  emptyListCon: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  emptyImage: {
-    width: cx(225),
-    height: cx(198),
-  },
-  emptyText: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  emptyNoTime: {
-    fontSize: cx(12),
-    lineHeight: cx(20),
-    textAlign: 'center',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-    color: '#000'
-  },
-  emptyBtnView: {
-    alignItems: 'center'
-  },
-  emptyBtn: {
-    backgroundColor: '#f60',
-    borderRadius: cx(5),
-    paddingHorizontal: cx(15),
-    paddingVertical: cx(10)
-  },
-  addTimer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    // width,
-    marginVertical: cx(20),
-  },
-  disableItemText: {
-    color: '#CBCBCB',
-    fontSize: cx(16),
-  },
-  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',
-    height: cx(20)
-  },
-  tag: {
-    alignSelf: 'flex-start',
-    borderRadius: cx(16),
-    height: cx(16),
-    backgroundColor: 'rgb(230,231,232)',
-    paddingHorizontal: cx(10),
-  },
-  tagTitle: {
-    fontSize: cx(10),
-    textAlign: 'center',
-    fontFamily: 'PingFangSC-Medium',
-    color: '#000'
-  },
-})
-
-export default SleepWakeUpPage
+export default withTheme(SleepWakeUpPage)

package/src/newModules/switchGradient/SwitchGradientPage.tsx

@@ -14,12 +14,13 @@ import Stepper from '@ledvance/base/src/components/Stepper'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface SwitchGradientPageParams {
-  switchGradientDpCode: string 
+  switchGradientDpCode: string
 }
 
-const SwitchGradientPage = () => {
+const SwitchGradientPage = (props: { theme?: any }) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const params = useParams<SwitchGradientPageParams>()
@@ -41,6 +42,26 @@ const SwitchGradientPage = () => {
 
   }, [switchOnDuration, switchOffDuration])
 
+  const styles = StyleSheet.create({
+    stepCard: {
+      marginHorizontal: cx(24),
+      paddingHorizontal: cx(16),
+    },
+    stepTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+    },
+    stepGroup: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    stepText: {
+      flex: 1,
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+    },
+  })
+
   return (
     <Page
       backText={devInfo.name}
@@ -66,7 +87,6 @@ const SwitchGradientPage = () => {
               min={0}
               max={60}
               stepValue={0.2}
-              precision={1}
               editable={true}
               isRealTime={true}
               onValueChange={v => {
@@ -87,7 +107,6 @@ const SwitchGradientPage = () => {
               min={0}
               max={60}
               stepValue={0.2}
-              precision={1}
               editable={true}
               isRealTime={true}
               onValueChange={v => {
@@ -101,24 +120,4 @@ const SwitchGradientPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  stepCard: {
-    marginHorizontal: cx(24),
-    paddingHorizontal: cx(16),
-  },
-  stepTitle: {
-    color: '#000',
-    fontSize: cx(14),
-  },
-  stepGroup: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  stepText: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(16),
-  },
-})
-
-export default SwitchGradientPage
+export default withTheme(SwitchGradientPage)