@ledvance/base 1.3.2 → 1.3.4

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "scripts": {
     "prepublishOnly": "python update-localazy.py"
   },

package/src/api/native.ts

@@ -24,6 +24,7 @@ interface LDVDevicePanelManager {
   getGroupDevices: (tyGroupId: number) => Promise<NativeResult<string>>
   getSystemTimeFormat: () => Promise<number>
   getMicrophoneAccess: (res:any) => Promise<Result<any>>
+  firebaseEvent: (dimensions:Record<any, any>) => Promise<NativeResult<any>>
 }
 
 export enum UADeviceCategory {
@@ -351,6 +352,16 @@ export class NativeApi {
     }
   }
 
+  static async putFlagFirebase(dimensions: Record<any, any>){
+    const nativeResult = await devicePanel.firebaseEvent({
+      eventName: 'select_country_flag',
+      dimensions
+    })
+    return {
+      success: nativeResult.result,
+      msg: nativeResult.msg,
+    }
+  }
 }
 
 // 打开下载文件

package/src/components/ApplyForDeviceItem.tsx

@@ -6,12 +6,63 @@ import Spacer from './Spacer'
 import res from '../res'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface ApplyForDeviceItemProps {
+  theme?: any
   deviceInfo: DeviceInfo
 }
 
 const ApplyForDeviceItem = (props: ApplyForDeviceItemProps) => {
+
+  const styles = StyleSheet.create({
+    root: {
+      marginHorizontal: cx(8),
+      backgroundColor: props.theme.global.background,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    deviceInfo: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: cx(4),
+    },
+    deviceIcon: {
+      width: cx(24),
+      height: cx(24),
+      marginStart: cx(6),
+    },
+    deviceName: {
+      flex: 1,
+      marginStart: cx(8),
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    deviceRoomInfo: {
+      marginStart: cx(38),
+      flexDirection: 'row',
+    },
+    roomNameTag: {
+      height: cx(16),
+      display: 'flex',
+      justifyContent: 'center',
+      backgroundColor: props.theme.tag.background,
+      borderRadius: cx(8),
+    },
+    roomName: {
+      marginHorizontal: cx(12),
+      color: props.theme.tag.fontColor,
+      fontSize: cx(10),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    offlineIcon: {
+      width: cx(24),
+      height: cx(24)
+    }
+  })
+
   return (
     <View style={styles.root}>
       <View style={{ flex: 1 }}>
@@ -33,52 +84,4 @@ const ApplyForDeviceItem = (props: ApplyForDeviceItemProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    marginHorizontal: cx(8),
-    backgroundColor: '#fff',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  deviceInfo: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: cx(4),
-  },
-  deviceIcon: {
-    width: cx(24),
-    height: cx(24),
-    marginStart: cx(6),
-  },
-  deviceName: {
-    flex: 1,
-    marginStart: cx(8),
-    color: '#666',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  deviceRoomInfo: {
-    marginStart: cx(38),
-    flexDirection: 'row',
-  },
-  roomNameTag: {
-    height: cx(16),
-    display: 'flex',
-    justifyContent: 'center',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(8),
-  },
-  roomName: {
-    marginHorizontal: cx(12),
-    color: '#000',
-    fontSize: cx(10),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  offlineIcon: {
-    width: cx(24),
-    height: cx(24)
-  }
-})
-
-export default ApplyForDeviceItem
+export default withTheme(ApplyForDeviceItem)

package/src/components/ApplyForDeviceList.tsx

@@ -8,14 +8,16 @@ import { Utils } from 'tuya-panel-kit'
 import { useReactive, useUpdateEffect } from 'ahooks'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface ApplyForDeviceListProps {
+  theme?: any
   devices: DeviceInfo[]
   expand?: boolean
   onExpandChange?: (expand: boolean) => void
 }
 
-export default function ApplyForDeviceList(props: ApplyForDeviceListProps) {
+const ApplyForDeviceList = (props: ApplyForDeviceListProps) => {
   const state = useReactive({
     expand: props.expand || false
   })
@@ -24,6 +26,17 @@ export default function ApplyForDeviceList(props: ApplyForDeviceListProps) {
     state.expand = props.expand || false
   }, [props.expand])
 
+  const styles = StyleSheet.create({
+    deviceList: {
+      marginHorizontal: cx(16),
+      paddingVertical: cx(8),
+      backgroundColor: props.theme.container.background,
+    },
+    spacer: {
+      backgroundColor: props.theme.container.background,
+    }
+  })
+
   return <View>
     <ApplyForText
       expand={state.expand}
@@ -36,27 +49,19 @@ export default function ApplyForDeviceList(props: ApplyForDeviceListProps) {
       }}/>
     <Spacer height={cx(2)}/>
     {state.expand &&
-      <FlatList
-        style={styles.deviceList}
-        data={props.devices}
-        renderItem={({ item }) => <ApplyForDeviceItem deviceInfo={item}/>}
-        keyExtractor={item => item.deviceId}
-        ItemSeparatorComponent={() => {
-          return (
-            <Spacer
-              style={{
-                backgroundColor: 'rgb(241,241,241)',
-              }}
-              height={cx(8)}/>
-          )
-        }}/>}
+        <FlatList
+            style={styles.deviceList}
+            data={props.devices}
+            renderItem={({ item }) => <ApplyForDeviceItem deviceInfo={item}/>}
+            keyExtractor={item => item.deviceId}
+            ItemSeparatorComponent={() => {
+              return (
+                <Spacer
+                  style={styles.spacer}
+                  height={cx(8)}/>
+              )
+            }}/>}
   </View>
 }
 
-const styles = StyleSheet.create({
-  deviceList: {
-    marginHorizontal: cx(16),
-    paddingVertical: cx(8),
-    backgroundColor: 'rgb(241,241,241)',
-  },
-})
+export default withTheme(ApplyForDeviceList)

package/src/components/ApplyForText.tsx

@@ -5,13 +5,33 @@ import res from '../res/index'
 import I18n from '../i18n/index'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface ApplyForTextProps {
+  theme?: any
   expand: boolean
   onExpandChange: (expand: boolean) => void
 }
 
 const ApplyForText = (props: ApplyForTextProps) => {
+  const styles = StyleSheet.create({
+    root: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginStart: cx(16),
+    },
+    text: {
+      color: props.theme.global.secondFontColor,
+      fontSize: cx(16),
+      letterSpacing: cx(0.12),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    icon: {
+      tintColor: props.theme.global.secondFontColor,
+      width: cx(24),
+      height: cx(24),
+    },
+  })
   return (
     <TouchableOpacity
       onPress={() => {
@@ -32,22 +52,5 @@ const ApplyForText = (props: ApplyForTextProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginStart: cx(16),
-  },
-  text: {
-    color: '#666',
-    fontSize: cx(16),
-    letterSpacing: cx(0.12),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  icon: {
-    width: cx(24),
-    height: cx(24),
-  },
-})
 
-export default ApplyForText
+export default withTheme(ApplyForText)

package/src/components/ColorTempAdjustView.tsx

@@ -9,8 +9,10 @@ import I18n from '../i18n/index'
 import {cctToColor} from '../utils/cctUtils'
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface ColorTempAdjustViewProps {
+  theme?: any
   colorTemp: number
   brightness: number
   minBrightness?: number
@@ -55,4 +57,4 @@ const ColorTempAdjustView = (props: ColorTempAdjustViewProps) => {
   )
 }
 
-export default ColorTempAdjustView
+export default withTheme(ColorTempAdjustView)

package/src/components/DeleteButton.tsx

@@ -23,7 +23,7 @@ const DeleteButton = (props: DeleteButtonProps) => {
       style={[{
         width: '100%',
         height: cx(50),
-        backgroundColor: props.theme.button.disabled,
+        backgroundColor: props.theme.button.delete,
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: cx(8),

package/src/components/InfoText.tsx

@@ -4,8 +4,10 @@ import {Utils} from 'tuya-panel-kit'
 import Spacer from './Spacer'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface InfoTextProps extends ViewProps {
+  theme?: any
   icon: string | number
   text: string
   contentColor?: string
@@ -15,7 +17,7 @@ interface InfoTextProps extends ViewProps {
 }
 
 const InfoText = (props: InfoTextProps) => {
-  const contentColor = props.contentColor || '#666666'
+  const contentColor = props.contentColor || props.theme.global.secondFontColor
   const source = typeof props.icon === 'string' ? {uri: props.icon} : props.icon
   return (
     <View style={[styles.root, props.style]}>
@@ -43,4 +45,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default InfoText
+export default withTheme(InfoText)

package/src/components/Page.tsx

@@ -22,8 +22,9 @@ interface PageProps extends PropsWithChildren<ViewProps> {
   headlineText?: string
   headlineIcon?: string | number
   onHeadlineIconClick?: () => void
-  headlineContent?: React.ReactNode
+  headlineIconContent?: React.ReactNode
   headlineTopContent?: React.ReactNode
+  headlineContent?: React.ReactNode
   showGreenery?: boolean
   greeneryIcon?: string | undefined | number
   loading?: boolean
@@ -81,15 +82,16 @@ const Page = (props: PageProps) => {
           rightButtonStyle={props.rightButtonStyle}
           onRightButtonPress={props.rightButtonIconClick}
           rightButtonDisabled={disabled}/>
-        {(!!props.headlineText) &&
+        {(!!props.headlineText || !!props.headlineContent) &&
           <LdvTopName
             title={props.headlineText}
             rightIcon={props.headlineIcon}
             rightIconClick={props.onHeadlineIconClick}
             showGreenery={props.showGreenery}
             greeneryIcon={props.greeneryIcon}
-            headlineContent={props.headlineContent}
+            headlineIconContent={props.headlineIconContent}
             headlineTopContent={props.headlineTopContent}
+            headlineContent={props.headlineContent}
             />}
         {props.children}
       </View>

package/src/components/SocketItem.tsx

@@ -1,13 +1,15 @@
 import React, { PropsWithChildren } from "react";
 import { View, Image, StyleSheet, Text, TouchableOpacity, ViewProps } from "react-native";
-import Card from "@ledvance/base/src/components/Card";
-import Spacer from "@ledvance/base/src/components/Spacer";
+import Card from "components/Card";
+import Spacer from "components/Spacer";
 import { Dialog, SwitchButton, Utils } from "tuya-panel-kit";
-import I18n from "@ledvance/base/src/i18n";
+import I18n from "../i18n";
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface SocketItemProps extends PropsWithChildren<ViewProps>{
+  theme?: any
   title: string
   name: string
   icon: any
@@ -18,6 +20,34 @@ interface SocketItemProps extends PropsWithChildren<ViewProps>{
 }
 
 function SocketItem(props: SocketItemProps) {
+
+  const styles = StyleSheet.create({
+    switchLine: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginHorizontal: cx(16),
+    },
+    title: {
+      fontSize: cx(16),
+      color: props.theme.global.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      fontWeight: 'bold',
+    },
+    icon: {
+      width: cx(60),
+      height: cx(20),
+    },
+    nameLine: {
+      flex: 1,
+      marginHorizontal: cx(16),
+    },
+    name: {
+      fontSize: cx(14),
+      color: props.theme.global.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+  })
+
   return (
     <Card style={{ marginHorizontal: cx(24) }}>
       <View>
@@ -58,31 +88,4 @@ function SocketItem(props: SocketItemProps) {
   )
 }
 
-const styles = StyleSheet.create({
-  switchLine: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: cx(16),
-  },
-  title: {
-    fontSize: cx(16),
-    color: '#000',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    fontWeight: 'bold',
-  },
-  icon: {
-    width: cx(60),
-    height: cx(20),
-  },
-  nameLine: {
-    flex: 1,
-    marginHorizontal: cx(16),
-  },
-  name: {
-    fontSize: cx(14),
-    color: '#000',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-})
-
-export default SocketItem
+export default withTheme(SocketItem)

package/src/components/Tag.tsx

@@ -4,20 +4,47 @@ import {Utils} from 'tuya-panel-kit'
 import res from '../res'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface TagProps extends ViewProps {
+  theme?: any
   checked: boolean
   text: string
   onCheckedChange: (boolean) => void
 }
 
 const Tag = (props: TagProps) => {
+
+  const styles = StyleSheet.create({
+    root: {
+      height: cx(24),
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: cx(1),
+      borderColor: props.theme.global.brand,
+      borderRadius: cx(12),
+    },
+    text: {
+      marginStart: cx(12),
+      color: props.theme.global.brand,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    icon: {
+      width: cx(12),
+      height: cx(12),
+      marginEnd: cx(6),
+      tintColor: props.theme.global.brand,
+    },
+  })
+
   return (
     <TouchableOpacity
       onPress={() => {
         props.onCheckedChange(!props.checked)
       }}>
-      <View style={[styles.root, props.checked ? {backgroundColor: '#ffe0d4'} : {}, props.style]}>
+      <View style={[styles.root, props.checked ? {backgroundColor: props.theme.global.thirdBrand} : {}, props.style]}>
         <Text style={[styles.text, {marginEnd: cx(props.checked ? 4 : 12)}]}>{props.text}</Text>
         {
           props.checked &&
@@ -30,28 +57,4 @@ const Tag = (props: TagProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    height: cx(24),
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: cx(1),
-    borderColor: '#ff6600',
-    borderRadius: cx(12),
-  },
-  text: {
-    marginStart: cx(12),
-    color: '#ff6600',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  icon: {
-    width: cx(12),
-    height: cx(12),
-    marginEnd: cx(6),
-    tintColor: '#F60',
-  },
-})
-
-export default Tag
+export default withTheme(Tag)

package/src/components/ldvColorSlider.tsx

@@ -4,6 +4,7 @@ import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
 import {Rect} from 'react-native-svg'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 const temperatures = {
   '0%': 'rgb(254, 172, 90)',
@@ -27,6 +28,7 @@ const colors = {
 export const TEMP_KEY = 'temperature'
 
 interface LdvColorSliderProps {
+  theme?: any
   title: string,
   type: string,
   onValueChange?: (number) => void | undefined,
@@ -43,6 +45,54 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
   let max = type === TEMP_KEY ? 100 : 359
   let min = type === TEMP_KEY ? 0 : 0
   const width = props.width || (Utils.RatioUtils.width - cx(80))
+
+  const styles = StyleSheet.create({
+    container: {
+      height: cx(57),
+      flexDirection: 'column',
+      paddingStart: cx(16),
+    },
+    title: {
+      marginTop: cx(4),
+      fontSize: cx(14),
+      color: props.theme.global.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    shadeSlider: {
+      marginTop: cx(8),
+      height: cx(28),
+      justifyContent: 'center',
+    },
+    sliderTrack: {
+      marginTop: cx(9),
+      marginBottom: cx(9),
+      flex: 1,
+      borderRadius: cx(15),
+    },
+    shadeThumb: {
+      backgroundColor: 'rgb(0, 249, 255)',
+      width: cx(28),
+      height: cx(28),
+      borderRadius: cx(14),
+      borderColor: 'white',
+      borderWidth: 1,
+      shadowColor: '#000000',
+      shadowOpacity: 0.2,
+      shadowRadius: cx(8),
+      elevation: cx(8),
+      shadowOffset: {
+        width: 0,
+        height: cx(4),
+      },
+    },
+    sliderLinearGradient: {
+      height: cx(12),
+    },
+    presetView: {
+      height: cx(60),
+    },
+  })
+
   return (
     <View style={[styles.container, props.style]}>
       <Text style={styles.title}>
@@ -82,51 +132,4 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    height: cx(57),
-    flexDirection: 'column',
-    paddingStart: cx(16),
-  },
-  title: {
-    marginTop: cx(4),
-    fontSize: cx(14),
-    color: '#000',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  shadeSlider: {
-    marginTop: cx(8),
-    height: cx(28),
-    justifyContent: 'center',
-  },
-  sliderTrack: {
-    marginTop: cx(9),
-    marginBottom: cx(9),
-    flex: 1,
-    borderRadius: cx(15),
-  },
-  shadeThumb: {
-    backgroundColor: 'rgb(0, 249, 255)',
-    width: cx(28),
-    height: cx(28),
-    borderRadius: cx(14),
-    borderColor: 'white',
-    borderWidth: 1,
-    shadowColor: '#000000',
-    shadowOpacity: 0.2,
-    shadowRadius: cx(8),
-    elevation: cx(8),
-    shadowOffset: {
-      width: 0,
-      height: cx(4),
-    },
-  },
-  sliderLinearGradient: {
-    height: cx(12),
-  },
-  presetView: {
-    height: cx(60),
-  },
-})
-
-export default LdvColorSlider
+export default withTheme(LdvColorSlider)