@ledvance/ui-biz-bundle 1.1.89 → 1.1.91

package/src/newModules/randomTime/RandomTimeDetailPage.tsx

@@ -22,6 +22,7 @@ import { Result } from "@ledvance/base/src/models/modules/Result";
 import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
 
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 const {parseTimer} = Utils.TimeUtils
 
 export interface RandomTimeDetailPageParams extends RandomTimePageParams {
@@ -30,7 +31,7 @@ export interface RandomTimeDetailPageParams extends RandomTimePageParams {
   onPost: (mode: 'add' | 'edit' | 'del', randomTime: RandomTimerUiItem) => Promise<Result<any>>
 }
 const minTimeGap = 30
-const RandomTimeDetailPage = () => {
+const RandomTimeDetailPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const params = useRoute().params as RandomTimeDetailPageParams
   const is24Hour = useSystemTimeFormate()
@@ -63,6 +64,35 @@ const RandomTimeDetailPage = () => {
     return state.randomTime.name?.length > 0 && state.randomTime.name?.length < 33 && !checkItemChanged && state.randomTime.channel !== undefined
   }, [JSON.stringify(state.randomTime), checkItemChanged])
 
+  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')}
@@ -122,7 +152,8 @@ const RandomTimeDetailPage = () => {
         {/* 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={!is24Hour}
           startTime={state.randomTime.startTime}
           endTime={state.randomTime.endTime}
@@ -138,7 +169,9 @@ const RandomTimeDetailPage = () => {
             state.randomTime.weeks[rawIndex] = state.randomTime.weeks[rawIndex] === 1 ? 0 : 1
           }} />
         <Spacer />
-        <Text style={styles.cardContainer}>{loopText(state.randomTime.weeks)}</Text>
+        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>
+          {loopText(state.randomTime.weeks)}
+        </Text>
         <Spacer />
         {/* Apply for */}
         <View style={styles.cardContainer}>
@@ -146,15 +179,17 @@ const RandomTimeDetailPage = () => {
           <Spacer height={cx(10)} />
           <View style={[styles.applyContent, { paddingTop: state.randomTime.channel === undefined ? 0 : cx(10) }]}>
             {state.randomTime.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', fontSize: cx(12) }}>{params.applyForList[params.isPlug ? state.randomTime.channel : 0]?.key}</Text>
+                <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{params.applyForList[params.isPlug ? state.randomTime.channel : 0]?.key}</Text>
                 {params.applyForList.length > 1 && <TouchableOpacity
-                  onPress={() => {
-                    state.randomTime.channel = undefined
-                  }}
-                  style={{ paddingHorizontal: cx(5) }}>
-                  <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
+                    onPress={() => {
+                      state.randomTime.channel = undefined
+                    }}
+                    style={{ paddingHorizontal: cx(5) }}>
+                    <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.ic_arrows_nav_clear} />
                 </TouchableOpacity>}
               </View>
             }
@@ -168,8 +203,8 @@ const RandomTimeDetailPage = () => {
                 onPress={() => {
                   state.randomTime.channel = params.isPlug ? index : 1
                 }}>
-                <Text style={{ color: '#000', fontSize: cx(12) }}>{item.key}</Text>
-                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+                <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{item.key}</Text>
+                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.device_panel_timer_add} />
               </TouchableOpacity>
             )
           })}
@@ -177,52 +212,52 @@ const RandomTimeDetailPage = () => {
         <Spacer />
         {/* Devices */}
         {!!state.randomTime.color && !params.isPlug && <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          <Spacer height={cx(10)} />
-          <Card>
-            <LdvSwitch
-              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-              color={'#fff'}
-              colorAlpha={1}
-              enable={true}
-              setEnable={() => { }}
-              showSwitch={false}
-            />
-            <LampAdjustView
-              isSupportColor={!!params.isSupportColor}
-              isSupportBrightness={!!params.isSupportBrightness}
-              isSupportTemperature={!!params.isSupportTemperature}
-              isColorMode={state.randomTime.isColorMode ?? false}
-              reserveSV={true}
-              setIsColorMode={(v) => state.randomTime.isColorMode = v}
-              h={state.randomTime.color.h}
-              s={state.randomTime.color.s}
-              v={state.randomTime.color.v}
-              colorTemp={state.randomTime.color.temperature}
-              brightness={state.randomTime.color.brightness}
-              onHSVChangeComplete={(h, s, v) => {
-                state.randomTime.color = {
-                  ...state.randomTime.color,
-                  h,
-                  s,
-                  v
-                }
-              }}
-              onCCTChangeComplete={(v) => {
-                state.randomTime.color = {
-                  ...state.randomTime.color,
-                  temperature: v
-                }
-              }}
-              onBrightnessChangeComplete={(v) => {
-                state.randomTime.color = {
-                  ...state.randomTime.color,
-                  brightness: v
-                }
-              }}
-            />
-          </Card>
-          <Spacer />
+            <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+            <Spacer height={cx(10)} />
+            <Card>
+                <LdvSwitch
+                    title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                    color={props.theme.card.background}
+                    colorAlpha={1}
+                    enable={true}
+                    setEnable={() => { }}
+                    showSwitch={false}
+                />
+                <LampAdjustView
+                    isSupportColor={!!params.isSupportColor}
+                    isSupportBrightness={!!params.isSupportBrightness}
+                    isSupportTemperature={!!params.isSupportTemperature}
+                    isColorMode={state.randomTime.isColorMode ?? false}
+                    reserveSV={true}
+                    setIsColorMode={(v) => state.randomTime.isColorMode = v}
+                    h={state.randomTime.color.h}
+                    s={state.randomTime.color.s}
+                    v={state.randomTime.color.v}
+                    colorTemp={state.randomTime.color.temperature}
+                    brightness={state.randomTime.color.brightness}
+                    onHSVChangeComplete={(h, s, v) => {
+                      state.randomTime.color = {
+                        ...state.randomTime.color,
+                        h,
+                        s,
+                        v
+                      }
+                    }}
+                    onCCTChangeComplete={(v) => {
+                      state.randomTime.color = {
+                        ...state.randomTime.color,
+                        temperature: v
+                      }
+                    }}
+                    onBrightnessChangeComplete={(v) => {
+                      state.randomTime.color = {
+                        ...state.randomTime.color,
+                        brightness: v
+                      }
+                    }}
+                />
+            </Card>
+            <Spacer />
         </View>}
         {/* summary */}
         <Summary
@@ -232,26 +267,26 @@ const RandomTimeDetailPage = () => {
         />
         <Spacer />
         {params.mode === 'edit' &&
-          <View style={{ marginHorizontal: cx(24) }}>
-            <DeleteButton
-              text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
-              onPress={() => {
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
-                  onConfirm: async (_, { close }) => {
-                    close()
-                    state.loading = true
-                    const res = await params.onPost('del', state.randomTime)
-                    state.loading = false
-                    if (res.success) {
-                      navigation.goBack()
-                    }
-                  }
-                })
-              }} />
-          </View>
+            <View style={{ marginHorizontal: cx(24) }}>
+                <DeleteButton
+                    text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
+                    onPress={() => {
+                      showDialog({
+                        method: 'confirm',
+                        title: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_titel'),
+                        subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
+                        onConfirm: async (_, { close }) => {
+                          close()
+                          state.loading = true
+                          const res = await params.onPost('del', state.randomTime)
+                          state.loading = false
+                          if (res.success) {
+                            navigation.goBack()
+                          }
+                        }
+                      })
+                    }} />
+            </View>
         }
         <Spacer />
       </ScrollView>
@@ -259,76 +294,4 @@ const RandomTimeDetailPage = () => {
   )
 }
 
-
-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 RandomTimeDetailPage
+export default withTheme(RandomTimeDetailPage)

package/src/newModules/randomTime/RandomTimePage.tsx

@@ -15,12 +15,13 @@ import Card from '@ledvance/base/src/components/Card'
 import { convertMinutesTo12HourFormat, loopText } from '@ledvance/base/src/utils/common'
 import { cloneDeep } from 'lodash'
 import dayjs from 'dayjs'
-import { ApplyForItem } from '@ledvance/ui-biz-bundle/src/newModules/timeSchedule/Interface'
+import { ApplyForItem } from '@ledvance/base/src/utils/interface'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 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 RandomTimePageParams {
@@ -29,7 +30,7 @@ export interface RandomTimePageParams {
     fixedTimeDpCode?: string
     biorhythmDpCode?: string
     sleepDpCode?: string
-    wakeUpDpCode?: string 
+    wakeUpDpCode?: string
   }
   isPlug?: boolean
   showTags?: boolean
@@ -39,7 +40,7 @@ export interface RandomTimePageParams {
   isSupportBrightness?: boolean
 }
 
-const RandomTimePage = () => {
+const RandomTimePage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const devInfo = useDeviceInfo()
   const params = useParams<RandomTimePageParams>()
@@ -93,6 +94,56 @@ const RandomTimePage = () => {
     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) => (
@@ -123,70 +174,71 @@ const RandomTimePage = () => {
     >
       <ScrollView nestedScrollEnabled={true}>
         <Text style={{
-          color: '#000',
+          color: props.theme.global.fontColor,
           marginLeft: cx(24),
         }}>{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('randomtimecycle_warning_max_number_text')}
-          textStyle={{fontSize: cx(12)}}
+        {showMaxNumTip() && <InfoText
+            style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
+            icon={res.ic_warning_amber}
+            iconStyle={{width: cx(16), height: cx(16)}}
+            contentColor={props.theme.global.warning}
+            text={I18n.getLang('randomtimecycle_warning_max_number_text')}
+            textStyle={{fontSize: cx(12)}}
         />}
         {params.showTags && !!state.originList.length && showTags}
         {state.randomTimeList.length > 0 ? <FlatList
-          data={state.randomTimeList}
-          renderItem={({ item }) => (
-            <RandomTimeCard
-              is24Hour={is24Hour}
-              randomTime={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.randomTimeList}
+            renderItem={({ item }) => (
+              <RandomTimeCard
+                styles={styles}
+                is24Hour={is24Hour}
+                randomTime={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) }}
               source={{ uri: res.ldv_timer_empty }}
               resizeMode="contain" />
-            <InfoText 
+            <InfoText
               icon={res.device_panel_schedule_alert}
               text={I18n.getLang(!state.originList.length ? 'timeschedule_overview_empty_information_text' : 'sleepwakeschedule_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.secondFontColor, fontSize: cx(12), flex: undefined }}
+              iconStyle={{ width: cx(16), height: cx(16), tintColor: props.theme.global.secondFontColor }}
             />
             <Spacer />
             {!state.originList.length && <TextButton
-              text={I18n.getLang('randomtimecycle_empty_bttn_text')}
-              style={{
-                backgroundColor: '#f60',
-                borderRadius: cx(6),
-                paddingVertical: cx(12),
-                paddingHorizontal: cx(24),
-              }}
-              textStyle={{ color: '#fff' }}
-              onPress={() => {
-                navigateToEdit('add', newRandomTime(params.isPlug))
-              }} />}
+                text={I18n.getLang('randomtimecycle_empty_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', newRandomTime(params.isPlug))
+                }} />}
           </View>}
       </ScrollView>
     </Page>
@@ -194,6 +246,7 @@ const RandomTimePage = () => {
 }
 
 const RandomTimeCard = (props: {
+  styles: StyleSheet.NamedStyles<any>
   is24Hour: boolean
   randomTime: RandomTimerUiItem,
   tags: ApplyForItem[]
@@ -201,7 +254,7 @@ const RandomTimeCard = (props: {
   onSwitch: (enable: boolean) => void,
   onPress: () => void
 }) => {
-  const { is24Hour, randomTime, tags, showTags, onSwitch, onPress } = props
+  const { is24Hour, randomTime, tags, showTags, onSwitch, onPress, styles } = props
   return (
     <Card style={styles.randomTimingCard} onPress={onPress}>
       <Spacer height={cx(16)} />
@@ -219,11 +272,11 @@ const RandomTimeCard = (props: {
       <Text style={styles.loopText}>{randomTime.name}</Text>
       <Spacer height={cx(showTags ? 5 : 20)} />
       {showTags && <View style={styles.tagContainer}>
-        <View style={styles.tag}>
-          <Text style={styles.tagTitle}>
-            {tags[randomTime.channel || 0]?.key}
-          </Text>
-        </View>
+          <View style={styles.tag}>
+              <Text style={styles.tagTitle}>
+                {tags[randomTime.channel || 0]?.key}
+              </Text>
+          </View>
       </View>}
     </Card>
   )
@@ -248,52 +301,4 @@ const newRandomTime = (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 RandomTimePage
+export default withTheme(RandomTimePage)