@ledvance/ui-biz-bundle 1.1.58 → 1.1.61

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -23,6 +23,7 @@ import { NativeApi } from "@ledvance/base/src/api/native";
 import { carbonDioxideEmission, countryAndRegion } from "./co2Data";
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface EnergyConsumptionPageProps {
   electricDpCode: string
@@ -49,14 +50,14 @@ interface EnergyConsumptionState {
   popupType: PopupType
   co2Saved: string
 }
-const EnergyConsumptionPage = () => {
-  const props = useRoute().params as EnergyConsumptionPageProps
+const EnergyConsumptionPage = (props: {theme?: any}) => {
+  const params = useRoute().params as EnergyConsumptionPageProps
   const devId = useDeviceId()
   const navigation = useNavigation()
   const timeZoneCity = useTimeZoneCity()
-  const power = usePower(props.powerDpCode)
-  const voltage = useVoltage(props.voltageDpCode)
-  const electric = useElectricCurrent(props.electricDpCode)
+  const power = usePower(params.powerDpCode)
+  const voltage = useVoltage(params.voltageDpCode)
+  const electric = useElectricCurrent(params.electricDpCode)
   const isSolarPlug = useEngergyGeneration()
   const state = useReactive<EnergyConsumptionState>({
     todayElectricity: '0',
@@ -86,7 +87,7 @@ const EnergyConsumptionPage = () => {
   }, [state.totalElectricity, timeZoneCity])
 
   const getElectricity = async () => {
-    const res = await getDpResultByMonth(devId, props.addEleDpCode, 'sum')
+    const res = await getDpResultByMonth(devId, params.addEleDpCode, 'sum')
     if (!isEmpty(res)) {
       state.todayElectricity = res.thisDay
       state.totalElectricity = res.sum
@@ -127,6 +128,99 @@ const EnergyConsumptionPage = () => {
     state.unit = data.unit
   }
 
+  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'
+    },
+    unitItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: cx(10),
+      alignItems: 'center',
+      height: cx(40),
+
+    }
+  })
+
+
+  const unitDivision = (str) => {
+    if (!str) { return ['', ''] }
+    const strIndex = str.indexOf('(' || '（')
+    const unit = str.substring(strIndex)
+    const name = str.split(unit)[0]
+    return [name, unit]
+  }
+
+  const ConsumedEnergyItem = (props: { value: number, unit: string }) => {
+    return (
+      <View style={styles.subContent}>
+        <Text style={styles.valueText}>{(props.value) || 0}</Text>
+        <Spacer height={cx(4)} />
+        <Text style={styles.titleText}>
+          {unitDivision(props.unit)[0]}
+        </Text>
+        <Text style={styles.titleText}>
+          {unitDivision(props.unit)[1]}
+        </Text>
+      </View>
+    )
+  }
+
   return (
     <Page
       style={{ position: 'relative' }}
@@ -191,34 +285,34 @@ const EnergyConsumptionPage = () => {
             <Spacer />
             {/* CO2 */}
             {isSolarPlug && <>
-              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <View style={styles.priceBg}>
-                  <Image
-                    source={res.energy_consumption_cash}
-                    resizeMode="contain"
-                    style={{ height: cx(20), width: cx(20), tintColor: '#FF6600' }}
-                  />
-                </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>
-                    <TouchableOpacity
-                      onPress={() => {
-                        state.showPopup = true
-                        state.popupType = 'co2'
-                      }}
-                    >
-                      <Image
-                        source={res.co2Icon}
-                        resizeMode="contain"
-                        style={{ height: cx(20), width: cx(20), tintColor: '#FF6600' }}
-                      />
-                    </TouchableOpacity>
-                  </View>
-                  <Text style={{ color: '#000', fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <View style={styles.priceBg}>
+                        <Image
+                            source={res.energy_consumption_cash}
+                            resizeMode="contain"
+                            style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
+                        />
+                    </View>
+                    <View style={styles.priceNum}>
+                        <View style={{ flexDirection: 'row' }}>
+                            <Text style={{ color: props.theme.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
+                            <TouchableOpacity
+                                onPress={() => {
+                                  state.showPopup = true
+                                  state.popupType = 'co2'
+                                }}
+                            >
+                                <Image
+                                    source={res.co2Icon}
+                                    resizeMode="contain"
+                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
+                    </View>
                 </View>
-              </View>
-              <Spacer height={cx(10)} />
+                <Spacer height={cx(10)} />
             </>}
             {/* money */}
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
@@ -226,20 +320,20 @@ const EnergyConsumptionPage = () => {
                 <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(isSolarPlug ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
-                  <Text style={{ color: '#000', fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(state.totalElectricity), 2)} ${state.unit}` : '-'}</Text>
+                  <Text style={{ color: props.theme.global.secondFontColor }}>{I18n.getLang(isSolarPlug ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
+                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(state.totalElectricity), 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>
@@ -258,7 +352,7 @@ const EnergyConsumptionPage = () => {
             }}
             overviewItemClick={(item) => {
               navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_detail, {
-                addEleDpCode: props.addEleDpCode,
+                addEleDpCode: params.addEleDpCode,
                 curMonth: item,
                 price: state.price,
                 unit: state.unit,
@@ -296,97 +390,4 @@ const EnergyConsumptionPage = () => {
   )
 }
 
-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'
-  },
-  unitItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: cx(10),
-    alignItems: 'center',
-    height: cx(40),
-
-  }
-})
-
-
-const unitDivision = (str) => {
-  if (!str) { return ['', ''] }
-  const strIndex = str.indexOf('(' || '（')
-  const unit = str.substring(strIndex)
-  const name = str.split(unit)[0]
-  return [name, unit]
-}
-
-export const ConsumedEnergyItem = (props: { value: number, unit: string }) => {
-  return (
-    <View style={styles.subContent}>
-      <Text style={styles.valueText}>{(props.value) || 0}</Text>
-      <Spacer height={cx(4)} />
-      <Text style={styles.titleText}>
-        {unitDivision(props.unit)[0]}
-      </Text>
-      <Text style={styles.titleText}>
-        {unitDivision(props.unit)[1]}
-      </Text>
-    </View>
-  )
-}
-
-export default EnergyConsumptionPage
+export default withTheme(EnergyConsumptionPage)

package/src/newModules/energyConsumption/component/EnergyModal.tsx

@@ -10,6 +10,7 @@ import { useReactive, useUpdateEffect } from "ahooks";
 import { cloneDeep } from "lodash";
 
 const { convertX: cx, height } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export const UnitList = [
   I18n.getLang('consumption_data_price_per_kwh_currency_value1'),
@@ -23,6 +24,7 @@ export interface EnergyData {
   unit: string
 }
 interface EnergyModalProps {
+  theme?: any
   visible: boolean
   popupType: 'money' | 'co2' | 'unit'
   title: string
@@ -49,14 +51,14 @@ const EnergyModal = (props: EnergyModalProps) => {
     const text = string.split(separators)
     const length = text.length - 1
     return <View>
-      <Text style={{ color: '#000' }}>{text[length - 6] + '.'}</Text>
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 6] + '.'}</Text>
       <Spacer />
-      <Text style={{ color: '#000' }}>{text[length - 5] + '.'}</Text>
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 5] + '.'}</Text>
       <Spacer />
-      <Text style={{ color: '#000' }}>{text[length - 4] + text[length - 3] + ':'}</Text>
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
       <Spacer />
       <Text
-        style={{ textDecorationLine: 'underline', color: '#ff6600' }}
+        style={{ textDecorationLine: 'underline', color: props.theme.button.active }}
         onPress={() => openLink(`${text[length - 2]}:${text[length - 1]}${text[length]}`)}
       >
         {`${text[length - 2]}:${text[length - 1]}${text[length]}`}
@@ -68,6 +70,48 @@ const EnergyModal = (props: EnergyModalProps) => {
     state.energyData = cloneDeep(props.energyData)
   }, [props.energyData])
 
+  const styles = StyleSheet.create({
+    popupTip: {
+      fontSize: cx(16),
+      color: props.theme.global.fontColor,
+      fontWeight: 'bold'
+    },
+    textInput: {
+      flex: 1,
+      height: cx(44),
+      marginStart: cx(16),
+      marginEnd: cx(6),
+      fontSize: cx(16),
+      color: props.theme.textInput.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    textInputGroup: {
+      flexDirection: 'row',
+      borderRadius: cx(4),
+      backgroundColor: props.theme.textInput.background,
+      alignItems: 'center',
+    },
+    iconTouchable: {
+      marginEnd: cx(18),
+      padding: cx(4),
+    },
+    line: {
+      height: 1,
+      position: 'absolute',
+      start: cx(4),
+      end: cx(4),
+      bottom: 0,
+      backgroundColor: props.theme.textInput.line,
+    },
+    unitItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: cx(10),
+      alignItems: 'center',
+      height: cx(40),
+
+    }
+  })
 
   const getContent = () => {
     if (props.popupType === 'money') {
@@ -76,12 +120,12 @@ const EnergyModal = (props: EnergyModalProps) => {
           <Spacer />
           <Text style={styles.popupTip}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
           <Spacer height={cx(40)} />
-          <Text style={{ fontSize: cx(14), color: '#000' }}>{I18n.getLang('consumption_data_price_per_kwh_description_text')}</Text>
+          <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{I18n.getLang('consumption_data_price_per_kwh_description_text')}</Text>
           <Spacer height={cx(15)} />
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             <View style={{ flex: 3 }}>
               <Spacer height={cx(4)} />
-              <Text style={{ color: '#666', marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
+              <Text style={{ color: props.theme.global.secondFontColor, marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
               <View style={styles.textInputGroup}>
                 <TextInput
                   value={state.energyData?.price}
@@ -125,16 +169,16 @@ const EnergyModal = (props: EnergyModalProps) => {
               data={UnitList}
               renderItem={({ item }) => (
                 <View style={styles.unitItem}>
-                  <Text style={{ fontSize: cx(16), color: '#000' }}>{item}</Text>
+                  <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
                   {props.energyData && props.energyData.unit === item && <Image
-                    style={{ width: cx(16), height: cx(16) }}
-                    source={res.app_music_check}
-                    resizeMode="contain"
+                      style={{ width: cx(16), height: cx(16) }}
+                      source={res.app_music_check}
+                      resizeMode="contain"
                   />}
                 </View>
               )}
               ItemSeparatorComponent={() => (
-                <View style={{ flex: 1, height: 1, backgroundColor: '#ccc' }}></View>
+                <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
               )}
               keyExtractor={item => item}
             />
@@ -153,25 +197,83 @@ const EnergyModal = (props: EnergyModalProps) => {
     }
 
   }
+
+  const energyPopup = ({energyData, onItemClick}: {
+    energyData?: EnergyData,
+    onItemClick: (unit: string) => void
+  }) => {
+    return (
+      Popup.custom({
+        title: (
+          <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+            <TouchableOpacity onPress={() => Popup.close()}>
+              <Text style={{ color: props.theme.global.secondBrand, fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+            </TouchableOpacity>
+          </View>
+        ),
+        wrapperStyle: {
+          height: height - cx(40),
+          backgroundColor: props.theme.global.background
+        },
+        footer: (<View style={{ backgroundColor: props.theme.global.background}}></View>),
+        onMaskPress: () => { },
+        motionType: 'none',
+        useKeyboardView: true,
+        content: (
+          <View
+            style={{ backgroundColor: props.theme.global.background, paddingHorizontal: cx(16) }}>
+            <Spacer />
+            <Card>
+              <FlatList
+                data={UnitList}
+                renderItem={({ item }) => (
+                  <TouchableOpacity
+                    onPress={() => {
+                      onItemClick(item)
+                      Popup.close()
+                    }}
+                  >
+                    <View style={styles.unitItem}>
+                      <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
+                      {energyData && energyData.unit === item && <Image
+                          style={{ width: cx(16), height: cx(16) }}
+                          source={res.app_music_check}
+                          resizeMode="contain"
+                      />}
+                    </View>
+                  </TouchableOpacity>
+                )}
+                ItemSeparatorComponent={() => (
+                  <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+                )}
+                keyExtractor={item => item}
+              />
+            </Card>
+            <Spacer />
+          </View>
+        )
+      })
+    )
+  }
   return (
     <Modal
       visible={props.visible}
     >
       <ScrollView>
-        <View style={{ backgroundColor: '#DFDEDE', flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+        <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
           <TouchableOpacity onPress={() => {
             props.onCancel && props.onCancel()
           }}>
-            <Text style={{ color: '#FF6600', fontSize: cx(16) }}>{props.cancelText}</Text>
+            <Text style={{ color: props.theme.global.brand, fontSize: cx(16) }}>{props.cancelText}</Text>
           </TouchableOpacity>
-          <Text style={{ color: '#000', fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
+          <Text style={{ color: props.theme.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
           <TouchableOpacity onPress={() => {
             props.onConfirm && props.onConfirm(state.energyData)
           }}>
-            <Text style={{ color: '#FF6600', fontSize: cx(16) }}>{props.confirmText}</Text>
+            <Text style={{ color: props.theme.global.brand, fontSize: cx(16) }}>{props.confirmText}</Text>
           </TouchableOpacity>
         </View>
-        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: '#fff' }}>
+        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme.global.background }}>
           {getContent()}
         </View>
       </ScrollView>
@@ -179,104 +281,4 @@ const EnergyModal = (props: EnergyModalProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  popupTip: {
-    fontSize: cx(16),
-    color: '#000',
-    fontWeight: 'bold'
-  },
-  textInput: {
-    flex: 1,
-    height: cx(44),
-    marginStart: cx(16),
-    marginEnd: cx(6),
-    fontSize: cx(16),
-    color: '#000',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  textInputGroup: {
-    flexDirection: 'row',
-    borderRadius: cx(4),
-    backgroundColor: '#F6F6F6',
-    alignItems: 'center',
-  },
-  iconTouchable: {
-    marginEnd: cx(18),
-    padding: cx(4),
-  },
-  line: {
-    height: 1,
-    position: 'absolute',
-    start: cx(4),
-    end: cx(4),
-    bottom: 0,
-    backgroundColor: '#cbcbcb',
-  },
-  unitItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: cx(10),
-    alignItems: 'center',
-    height: cx(40),
-
-  }
-})
-
-const energyPopup = (props: {
-  energyData?: EnergyData,
-  onItemClick: (unit: string) => void
-}) => {
-  return (
-    Popup.custom({
-      title: (
-        <View style={{ backgroundColor: '#DFDEDE', flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
-          <TouchableOpacity onPress={() => Popup.close()}>
-            <Text style={{ color: '#FF6600', fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
-          </TouchableOpacity>
-        </View>
-      ),
-      wrapperStyle: {
-        height: height - cx(40)
-      },
-      footer: (<View></View>),
-      onMaskPress: () => { },
-      motionType: 'none',
-      useKeyboardView: true,
-      content: (
-        <View
-          style={{ paddingHorizontal: cx(16) }}>
-          <Spacer />
-          <Card>
-            <FlatList
-              data={UnitList}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  onPress={() => {
-                    props.onItemClick(item)
-                    Popup.close()
-                  }}
-                >
-                  <View style={styles.unitItem}>
-                    <Text style={{ fontSize: cx(16), color: '#000' }}>{item}</Text>
-                    {props.energyData && props.energyData.unit === item && <Image
-                      style={{ width: cx(16), height: cx(16) }}
-                      source={res.app_music_check}
-                      resizeMode="contain"
-                    />}
-                  </View>
-                </TouchableOpacity>
-              )}
-              ItemSeparatorComponent={() => (
-                <View style={{ flex: 1, height: 1, backgroundColor: '#ccc' }}></View>
-              )}
-              keyExtractor={item => item}
-            />
-          </Card>
-          <Spacer />
-        </View>
-      )
-    })
-  )
-}
-
-export default EnergyModal
+export default withTheme(EnergyModal)