@ledvance/ui-biz-bundle 1.1.59 → 1.1.61

package/src/newModules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -22,6 +22,7 @@ import EnergyPopup, {EnergyData} from "./component/EnergyModal";
 import {carbonDioxideEmission, countryAndRegion} from "./co2Data";
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface EnergyConsumptionDetailProps {
   addEleDpCode: string
@@ -31,8 +32,8 @@ export interface EnergyConsumptionDetailProps {
   updateEnergyData: (data: EnergyData) => {}
 }
 
-const EnergyConsumptionDetail = () => {
-  const props = useRoute().params as EnergyConsumptionDetailProps
+const EnergyConsumptionDetail = (props: {theme?: any}) => {
+  const params = useRoute().params as EnergyConsumptionDetailProps
   const devId = useDeviceId()
   const isSolarPlug = useEngergyGeneration()
   const navigation = useNavigation()
@@ -52,8 +53,8 @@ const EnergyConsumptionDetail = () => {
   })
 
   useEffect(() => {
-    state.price = props.price
-    state.unit = props.unit
+    state.price = params.price
+    state.unit = params.unit
     getElectricity().then()
   }, [])
 
@@ -65,14 +66,14 @@ const EnergyConsumptionDetail = () => {
   }, [state.totalElectricity, timeZoneCity])
 
   const getElectricity = async () => {
-    const startDay = props.curMonth.headlineText + '01'
-    const endDay = props.curMonth.headlineText + dayjs(props.curMonth.headlineText + '01').daysInMonth()
+    const startDay = params.curMonth.headlineText + '01'
+    const endDay = params.curMonth.headlineText + dayjs(params.curMonth.headlineText + '01').daysInMonth()
     state.over365Days = overDays(startDay, 365)
     if (state.over365Days) {
       state.overviewList = []
       return
     }
-    const res = await getDataWithSpecified(devId, props.addEleDpCode, startDay, endDay, 'sum')
+    const res = await getDataWithSpecified(devId, params.addEleDpCode, startDay, endDay, 'sum')
     if (!isEmpty(res) && res.result) {
       const dayList = res.result
       const dayData = Object.keys(dayList).filter(v => Number(dayList[v]) > 0).map(time => {
@@ -106,7 +107,7 @@ const EnergyConsumptionDetail = () => {
     if (state.over7Days) {
       return []
     }
-    const res = await getDpResultByHour(devId, props.addEleDpCode, date, 'sum')
+    const res = await getDpResultByHour(devId, params.addEleDpCode, date, 'sum')
     const list: Array<object> = []
     const resData = Object.keys(res)?.map(val => {
       return { key: Number(val?.slice(8, 10)), value: Number(res[val]) }
@@ -122,10 +123,71 @@ const EnergyConsumptionDetail = () => {
     return list
   }
 
+  const styles = StyleSheet.create({
+    showTip: {
+      marginHorizontal: cx(24)
+    },
+    cardContainer: {
+      flex: 1,
+      marginHorizontal: cx(24),
+      padding: cx(16)
+    },
+    cardTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold'
+    },
+    consumedEnergyContent: {
+      flex: 1,
+      flexDirection: 'row',
+    },
+    consumptionNum: {
+      color: props.theme.global.secondBrand,
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    subContent: {
+      flex: 1,
+      alignItems: 'center',
+      marginBottom: cx(9)
+    },
+    valueText: {
+      fontSize: cx(24),
+      fontWeight: 'bold',
+      color: props.theme.global.secondBrand,
+    },
+    titleText: {
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      fontSize: cx(14),
+      color: props.theme.global.secondFontColor,
+      textAlign: 'center',
+    },
+    priceBg: {
+      height: cx(40),
+      width: cx(40),
+      borderRadius: cx(40),
+      backgroundColor: props.theme.global.thirdBrand,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: cx(10)
+    },
+    priceNum: {
+      marginRight: cx(10)
+    },
+    priceButton: {
+      borderRadius: cx(5),
+      paddingHorizontal: cx(10),
+      paddingVertical: cx(8),
+      marginTop: cx(8),
+      backgroundColor: props.theme.button.active,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  })
+
   return (
     <Page
       backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
-      headlineText={props.curMonth.key}
+      headlineText={params.curMonth.key}
       headlineIcon={res.download_icon}
       onHeadlineIconClick={() => { }}
       showGreenery={false}
@@ -139,10 +201,10 @@ const EnergyConsumptionDetail = () => {
           <Card
             style={styles.cardContainer}
           >
-            <Text style={styles.cardTitle}>{props.curMonth.key}</Text>
+            <Text style={styles.cardTitle}>{params.curMonth.key}</Text>
             <Spacer height={cx(15)} />
             <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{props.curMonth.value}</Text>
+              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{params.curMonth.value}</Text>
               <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
             </View>
             <Spacer />
@@ -153,12 +215,12 @@ const EnergyConsumptionDetail = () => {
                         <Image
                             source={res.energy_consumption_cash}
                             resizeMode="contain"
-                            style={{ height: cx(20), width: cx(20), tintColor: '#FF6600' }}
+                            style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
                         />
                     </View>
                     <View style={styles.priceNum}>
                         <View style={{ flexDirection: 'row' }}>
-                            <Text style={{ color: '#666', marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
+                            <Text style={{ color: props.theme.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
                             <TouchableOpacity
                                 onPress={() => {
                                   state.showPopup = true
@@ -168,11 +230,11 @@ const EnergyConsumptionDetail = () => {
                                 <Image
                                     source={res.co2Icon}
                                     resizeMode="contain"
-                                    style={{ height: cx(20), width: cx(20), tintColor: '#FF6600' }}
+                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.action }}
                                 />
                             </TouchableOpacity>
                         </View>
-                        <Text style={{ color: '#000', fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
+                        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
                     </View>
                 </View>
                 <Spacer height={cx(10)} />
@@ -183,20 +245,20 @@ const EnergyConsumptionDetail = () => {
                 <Image
                   source={res.energy_consumption_cash}
                   resizeMode="contain"
-                  style={{ height: cx(20), width: cx(20), tintColor: '#FF6600' }}
+                  style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
                 />
               </View>
               <View>
                 <View style={styles.priceNum}>
-                  <Text style={{ color: '#666' }}>{I18n.getLang('consumption_data_field3_value_text2')}</Text>
-                  <Text style={{ color: '#000', fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(props.curMonth.value), 2)} ${state.unit}` : '-'}</Text>
+                  <Text style={{ color: props.theme.global.secondFontColor }}>{I18n.getLang('consumption_data_field3_value_text2')}</Text>
+                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(params.curMonth.value), 2)} ${state.unit}` : '-'}</Text>
                 </View>
                 <TouchableOpacity onPress={() => {
                   state.showPopup = true
                   state.popupType = 'money'
                 }}>
                   <View style={styles.priceButton}>
-                    <Text style={{ color: '#fff' }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
+                    <Text style={{ color: props.theme.button.fontColor }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
                   </View>
                 </TouchableOpacity>
               </View>
@@ -209,7 +271,7 @@ const EnergyConsumptionDetail = () => {
             headlineText={I18n.getLang('consumption_data_monthly_overview_field2_headline_text')}
             headlineClick={() => {
               navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_chart, {
-                headlineText: props.curMonth.key,
+                headlineText: params.curMonth.key,
                 chartData: state.overviewList,
                 over365Days: state.over365Days
               } as EnergyConsumptionChartProps)
@@ -238,7 +300,7 @@ const EnergyConsumptionDetail = () => {
               state.popupType = ''
               state.showPopup = false
               if(energyData){
-                props.updateEnergyData({
+                params.updateEnergyData({
                   ...energyData,
                   price: exchangeNumber(energyData.price)
                 })
@@ -257,65 +319,4 @@ const EnergyConsumptionDetail = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  showTip: {
-    marginHorizontal: cx(24)
-  },
-  cardContainer: {
-    flex: 1,
-    marginHorizontal: cx(24),
-    padding: cx(16)
-  },
-  cardTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold'
-  },
-  consumedEnergyContent: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  consumptionNum: {
-    color: '#FF8555',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  subContent: {
-    flex: 1,
-    alignItems: 'center',
-    marginBottom: cx(9)
-  },
-  valueText: {
-    fontSize: cx(24),
-    fontWeight: 'bold',
-    color: '#ff8555',
-  },
-  titleText: {
-    fontFamily: 'helvetica_neue_lt_std_roman',
-    fontSize: cx(14),
-    color: '#666666',
-    textAlign: 'center',
-  },
-  priceBg: {
-    height: cx(40),
-    width: cx(40),
-    borderRadius: cx(40),
-    backgroundColor: '#FFE0D4',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: cx(10)
-  },
-  priceNum: {
-    marginRight: cx(10)
-  },
-  priceButton: {
-    borderRadius: cx(5),
-    paddingHorizontal: cx(10),
-    paddingVertical: cx(8),
-    marginTop: cx(8),
-    backgroundColor: '#FF6600',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-})
-
-export default EnergyConsumptionDetail
+export default withTheme(EnergyConsumptionDetail)