@ledvance/ui-biz-bundle 1.1.68 → 1.1.69

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

@@ -1,284 +1,284 @@
-import React from "react";
-import Card from "@ledvance/base/src/components/Card";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import TextFieldStyleButton from "@ledvance/base/src/components/TextFieldStyleButton";
-import I18n from "@ledvance/base/src/i18n";
-import res from "@ledvance/base/src/res";
-import { TouchableOpacity, View, Text, TextInput, StyleSheet, Linking, FlatList, Image, ScrollView } from "react-native";
-import { Utils, Modal, Popup } from "tuya-panel-kit";
-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'),
-  I18n.getLang('consumption_data_price_per_kwh_currency_value2'),
-  I18n.getLang('consumption_data_price_per_kwh_currency_value3'),
-  I18n.getLang('consumption_data_price_per_kwh_currency_value4')
-]
-
-export interface EnergyData {
-  price: string
-  unit: string
-}
-interface EnergyModalProps {
-  theme?: any
-  visible: boolean
-  popupType: 'money' | 'co2' | 'unit'
-  title: string
-  confirmText?: string
-  cancelText?: string
-  energyData?: EnergyData
-  motionType?: 'none'
-  onConfirm?: (data?: EnergyData) => void
-  onCancel?: () => void
-}
-const EnergyModal = (props: EnergyModalProps) => {
-  const state = useReactive({
-    energyData: cloneDeep(props.energyData),
-    unitPopup: false
-  })
-
-
-  const openLink = (url: string) => {
-    Linking.openURL(url).catch((error) => console.error('无法打开链接:', error));
-  };
-
-  const getDescription = (string: string) => {
-    const separators = /[.:]/;
-    const text = string.split(separators)
-    const length = text.length - 1
-    return <View>
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 6] + '.'}</Text>
-      <Spacer />
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 5] + '.'}</Text>
-      <Spacer />
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
-      <Spacer />
-      <Text
-        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]}`}
-      </Text>
-    </View>
-  }
-
-  useUpdateEffect(() =>{
-    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') {
-      return (
-        <View>
-          <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: 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: 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}
-                  onChangeText={(t: string) => {
-                    const value = t.replace(/[^0-9.,]/g, '')
-                    if (Number(value) > 999999) {
-                      if (state.energyData) state.energyData.price = '999999'
-                    } else {
-                      if (state.energyData) state.energyData.price = value
-                    }
-                  }}
-                  style={styles.textInput}
-                  keyboardType="numeric"
-                />
-                <View style={styles.line} />
-              </View>
-            </View>
-            <View style={{ flex: 2, marginLeft: cx(20) }}>
-              <TextFieldStyleButton
-                text={state.energyData?.unit || ''}
-                placeholder={I18n.getLang('consumption_data_price_per_kwh_currency_headline_text')}
-                onPress={() => (
-                  energyPopup({
-                    energyData: state.energyData,
-                    onItemClick: (title) => {
-                      if (state.energyData) state.energyData.unit = title
-                    }
-                  })
-                )}
-              />
-            </View>
-          </View>
-        </View>
-      )
-    } else if (props.popupType === 'unit') {
-      return (
-        <View>
-          <Spacer />
-          <Card>
-            <FlatList
-              data={UnitList}
-              renderItem={({ item }) => (
-                <View style={styles.unitItem}>
-                  <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"
-                  />}
-                </View>
-              )}
-              ItemSeparatorComponent={() => (
-                <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
-              )}
-              keyExtractor={item => item}
-            />
-          </Card>
-        </View>
-      )
-    } else {
-      return (
-        <View>
-          <Spacer />
-          <Text style={styles.popupTip}>{I18n.getLang('consumption_data_field3_co2_topic_headline')}</Text>
-          <Spacer height={cx(40)} />
-          {getDescription(I18n.getLang('consumption_data_field3_co2_inforamtion_decription_text'))}
-        </View>
-      )
-    }
-
-  }
-
-  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: 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: props.theme.global.brand, fontSize: cx(16) }}>{props.cancelText}</Text>
-          </TouchableOpacity>
-          <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: props.theme.global.brand, fontSize: cx(16) }}>{props.confirmText}</Text>
-          </TouchableOpacity>
-        </View>
-        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme.global.background }}>
-          {getContent()}
-        </View>
-      </ScrollView>
-    </Modal>
-  )
-}
-
-export default withTheme(EnergyModal)
+import React from "react";
+import Card from "@ledvance/base/src/components/Card";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import TextFieldStyleButton from "@ledvance/base/src/components/TextFieldStyleButton";
+import I18n from "@ledvance/base/src/i18n";
+import res from "@ledvance/base/src/res";
+import { TouchableOpacity, View, Text, TextInput, StyleSheet, Linking, FlatList, Image, ScrollView } from "react-native";
+import { Utils, Modal, Popup } from "tuya-panel-kit";
+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'),
+  I18n.getLang('consumption_data_price_per_kwh_currency_value2'),
+  I18n.getLang('consumption_data_price_per_kwh_currency_value3'),
+  I18n.getLang('consumption_data_price_per_kwh_currency_value4')
+]
+
+export interface EnergyData {
+  price: string
+  unit: string
+}
+interface EnergyModalProps {
+  theme?: any
+  visible: boolean
+  popupType: 'money' | 'co2' | 'unit'
+  title: string
+  confirmText?: string
+  cancelText?: string
+  energyData?: EnergyData
+  motionType?: 'none'
+  onConfirm?: (data?: EnergyData) => void
+  onCancel?: () => void
+}
+const EnergyModal = (props: EnergyModalProps) => {
+  const state = useReactive({
+    energyData: cloneDeep(props.energyData),
+    unitPopup: false
+  })
+
+
+  const openLink = (url: string) => {
+    Linking.openURL(url).catch((error) => console.error('无法打开链接:', error));
+  };
+
+  const getDescription = (string: string) => {
+    const separators = /[.:]/;
+    const text = string.split(separators)
+    const length = text.length - 1
+    return <View>
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 6] + '.'}</Text>
+      <Spacer />
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 5] + '.'}</Text>
+      <Spacer />
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
+      <Spacer />
+      <Text
+        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]}`}
+      </Text>
+    </View>
+  }
+
+  useUpdateEffect(() =>{
+    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') {
+      return (
+        <View>
+          <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: 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: 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}
+                  onChangeText={(t: string) => {
+                    const value = t.replace(/[^0-9.,]/g, '')
+                    if (Number(value) > 999999) {
+                      if (state.energyData) state.energyData.price = '999999'
+                    } else {
+                      if (state.energyData) state.energyData.price = value
+                    }
+                  }}
+                  style={styles.textInput}
+                  keyboardType="numeric"
+                />
+                <View style={styles.line} />
+              </View>
+            </View>
+            <View style={{ flex: 2, marginLeft: cx(20) }}>
+              <TextFieldStyleButton
+                text={state.energyData?.unit || ''}
+                placeholder={I18n.getLang('consumption_data_price_per_kwh_currency_headline_text')}
+                onPress={() => (
+                  energyPopup({
+                    energyData: state.energyData,
+                    onItemClick: (title) => {
+                      if (state.energyData) state.energyData.unit = title
+                    }
+                  })
+                )}
+              />
+            </View>
+          </View>
+        </View>
+      )
+    } else if (props.popupType === 'unit') {
+      return (
+        <View>
+          <Spacer />
+          <Card>
+            <FlatList
+              data={UnitList}
+              renderItem={({ item }) => (
+                <View style={styles.unitItem}>
+                  <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"
+                  />}
+                </View>
+              )}
+              ItemSeparatorComponent={() => (
+                <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+              )}
+              keyExtractor={item => item}
+            />
+          </Card>
+        </View>
+      )
+    } else {
+      return (
+        <View>
+          <Spacer />
+          <Text style={styles.popupTip}>{I18n.getLang('consumption_data_field3_co2_topic_headline')}</Text>
+          <Spacer height={cx(40)} />
+          {getDescription(I18n.getLang('consumption_data_field3_co2_inforamtion_decription_text'))}
+        </View>
+      )
+    }
+
+  }
+
+  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: 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: props.theme.global.brand, fontSize: cx(16) }}>{props.cancelText}</Text>
+          </TouchableOpacity>
+          <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: props.theme.global.brand, fontSize: cx(16) }}>{props.confirmText}</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme.global.background }}>
+          {getContent()}
+        </View>
+      </ScrollView>
+    </Modal>
+  )
+}
+
+export default withTheme(EnergyModal)