@ledvance/base 1.3.3 → 1.3.5

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "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/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/Stepper.tsx

@@ -8,8 +8,10 @@ import { Utils } from "tuya-panel-kit";
 const { add, subtract, inMaxMin } = Utils.NumberUtils
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface StepperProps {
+  theme?: any
   value: number | string
   stepValue?: number  // 1
   min?: number  // 0
@@ -70,13 +72,48 @@ const Stepper = (props: StepperProps) => {
 
   }, [])
 
+
+  const styles = StyleSheet.create({
+    stepperContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: props.theme.container.background,
+      padding: cx(2),
+      borderRadius: cx(12),
+      width: cx(150),
+    },
+    stepperButton: {
+      width: cx(52),
+      height: cx(28),
+      backgroundColor: props.theme.global.background,
+      borderRadius: cx(10),
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    stepperIcon: {
+      width: cx(20),
+      height: cx(20),
+      tintColor: props.theme.global.fontColor
+    },
+    stepperInput: {
+      width: cx(42),
+      height: cx(22),
+      color: props.theme.global.secondFontColor,
+      fontSize: cx(16),
+      padding: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+    }
+  })
+
   return (
     <View style={[styles.stepperContainer, props.style]}>
       <TouchableOpacity
         style={[styles.stepperButton, props.buttonStyle]}
         onPress={() => handlePress(false)}
       >
-        <Image width={cx(16)} height={cx(16)} source={res.ic_minus} />
+        <Image style={styles.stepperIcon} source={res.ic_minus} />
       </TouchableOpacity>
       <TextInput
         style={[styles.stepperInput, props.inputStyle]}
@@ -92,39 +129,10 @@ const Stepper = (props: StepperProps) => {
         style={[styles.stepperButton, props.buttonStyle]}
         onPress={() => handlePress(true)}
       >
-        <Image style={{ width: cx(20), height: cx(20) }} source={res.ic_plus} />
+        <Image style={styles.stepperIcon} source={res.ic_plus} />
       </TouchableOpacity>
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  stepperContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-    padding: cx(2),
-    borderRadius: cx(12),
-    width: cx(150),
-  },
-  stepperButton: {
-    width: cx(52),
-    height: cx(28),
-    backgroundColor: '#fff',
-    borderRadius: cx(10),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  stepperInput: {
-    width: cx(42),
-    height: cx(22),
-    color: '#333',
-    fontSize: cx(16),
-    padding: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    textAlign: 'center',
-  }
-})
-
-export default memo(Stepper)
+export default memo(withTheme(Stepper))

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/ldvTopName.tsx

@@ -1,25 +1,26 @@
 import Spacer from '@ledvance/base/src/components/Spacer'
 import React from 'react'
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-import {Utils} from 'tuya-panel-kit'
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 interface LdvTopNameProps {
   theme?: any
-  title: string,
+  title?: string,
   rightIcon?: string | undefined | number,
   rightIconClick?: () => void
   showGreenery?: boolean
   greeneryIcon?: string | undefined | number
-  headlineContent?: React.ReactNode
+  headlineIconContent?: React.ReactNode
   headlineTopContent?: React.ReactNode
+  headlineContent?: React.ReactNode
 }
 
 const LdvTopName = (props: LdvTopNameProps) => {
-  const rightIcon = typeof props.rightIcon === 'number' ? props.rightIcon : {uri: props.rightIcon}
-  const greeneryIcon = typeof props.greeneryIcon === 'number' ? props.greeneryIcon : {uri: props.greeneryIcon}
+  const rightIcon = typeof props.rightIcon === 'number' ? props.rightIcon : { uri: props.rightIcon }
+  const greeneryIcon = typeof props.greeneryIcon === 'number' ? props.greeneryIcon : { uri: props.greeneryIcon }
 
   const styles = StyleSheet.create({
     container: {
@@ -34,30 +35,30 @@ const LdvTopName = (props: LdvTopNameProps) => {
   return (
     <View style={styles.container}>
       {props.headlineTopContent && props.headlineTopContent}
-      {!props.headlineTopContent && <Spacer height={cx(38)}/>}
+      {!props.headlineTopContent && <Spacer height={cx(38)} />}
       <View
         style={{
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
         }}>
-        <View style={{flexDirection: 'row', flex: 1}}>
+        {props.headlineContent ? props.headlineContent : <View style={{ flexDirection: 'row', flex: 1 }}>
           <Text style={styles.title}>
             {props.title}
           </Text>
           {props.showGreenery && <Image
-              source={greeneryIcon}
-              resizeMode="contain"
-              style={{height: cx(16), width: cx(16), left: 0}}
+            source={greeneryIcon}
+            resizeMode="contain"
+            style={{ height: cx(16), width: cx(16), left: 0 }}
           /> || null}
-        </View>
+        </View>}
         {props.rightIcon && <TouchableOpacity
-            onPress={props.rightIconClick}>
-            <Image
-                style={{width: cx(24), height: cx(24), tintColor: props.theme.global.brand}}
-                source={rightIcon}/>
+          onPress={props.rightIconClick}>
+          <Image
+            style={{ width: cx(24), height: cx(24), tintColor: props.theme.global.brand }}
+            source={rightIcon} />
         </TouchableOpacity>}
-        {props.headlineContent && props.headlineContent}
+        {props.headlineIconContent && props.headlineIconContent}
       </View>
     </View>
   )

package/src/components/segmentControl.tsx

@@ -3,14 +3,15 @@ import React from 'react'
 import {Utils} from 'tuya-panel-kit'
 
 const {convertX} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
-export default function SegmentControl(props) {
+const SegmentControl = (props) => {
 
   const {title1, title2, isFirst, setIsFirst, style, tabStyle} = props
 
   return (<View style={{}}>
     <View style={[{
-      backgroundColor: '#eeeeef',
+      backgroundColor: props.theme.segment.background,
       marginHorizontal: convertX(24),
       marginVertical: convertX(0),
       borderRadius: convertX(8.9),
@@ -24,12 +25,12 @@ export default function SegmentControl(props) {
           margin: convertX(2),
           borderRadius: convertX(6.9),
         }, isFirst ?
-          {backgroundColor: '#fff', margin: convertX(2), borderRadius: 6.9} :
-          {backgroundColor: '#eeeeef'}, tabStyle]
+          {backgroundColor: props.theme.segment.active, margin: convertX(2), borderRadius: 6.9} :
+          {backgroundColor: props.theme.segment.background}, tabStyle]
       } onPress={() => setIsFirst(true)}>
         <Text
           style={{
-            color: '#000',
+            color: props.theme.segment.fontColor,
             fontSize: convertX(12),
             fontFamily: isFirst ? 'helvetica_neue_lt_std_bd' : 'helvetica_neue_lt_std_roman',
             marginVertical: convertX(10),
@@ -47,13 +48,13 @@ export default function SegmentControl(props) {
             borderRadius: convertX(6.9),
           },
             !isFirst ?
-              {backgroundColor: '#fff'} :
-              {backgroundColor: '#eeeeef'}, tabStyle]
+              {backgroundColor: props.theme.segment.active} :
+              {backgroundColor: props.theme.segment.background}, tabStyle]
         }
         onPress={() => setIsFirst(false)}>
         <Text
           style={{
-            color: '#000',
+            color: props.theme.segment.fontColor,
             fontSize: convertX(12),
             fontFamily: isFirst ? 'helvetica_neue_lt_std_roman' : 'helvetica_neue_lt_std_bd',
             marginVertical: convertX(10),
@@ -63,4 +64,6 @@ export default function SegmentControl(props) {
       </TouchableOpacity>
     </View>
   </View>)
-}
+}
+
+export default withTheme(SegmentControl)

package/src/config/dark-theme.ts

@@ -19,7 +19,7 @@ export default {
   card: {
     head: '#666',
     background: '#2a2a2a',
-    board: '#f6f6f6',
+    border: '#f6f6f6',
     fontColor: '#ffffff',
     shadowColor: '#ffffff'
   },
@@ -39,10 +39,25 @@ export default {
     fontColor: '#fff',
     line: '#fff'
   },
+  icon: {
+    primary: '#f60',  /* 明亮的橙色，保持足够的突出 */
+    normal: '#a6a6a6',   /* 中性灰，适合在深色背景上 */
+    disable: '#555555',  /* 更深的灰色，表示禁用状态 */
+  },
   tag: {
     background: '#737373',
     fontColor: '#fff'
   },
+  segment: {
+    background: '#3a3a3c',
+    active: '#4a4a4c',
+    fontColor: '#ffffff',
+  },
+  addNode: {
+    background: '#4a4a4a',
+    border: '#888888',
+    fontColor: '#fff',
+  },
   dialog: {
     width: cx(315), // 弹窗容器宽度
     bg: "#2a2a2a", // 弹窗背景色

package/src/config/light-theme.ts

@@ -1,6 +1,6 @@
 import {Utils} from "tuya-panel-kit";
 
-const { convertX: cx } = Utils.RatioUtils
+const {convertX: cx} = Utils.RatioUtils
 
 export default {
   type: 'light',
@@ -19,7 +19,7 @@ export default {
   card: {
     head: '#DFDEDE',
     background: '#fff',
-    board: '#f6f6f6',
+    border: '#f6f6f6',
     fontColor: '#000',
     shadowColor: '#000'
   },
@@ -39,10 +39,25 @@ export default {
     fontColor: '#000',
     line: '#cbcbcb'
   },
+  icon: {
+    primary: '#f60',
+    normal: '#666',
+    disable: '#ccc',
+  },
   tag: {
     background: '#E6E7E8',
     fontColor: '#000'
   },
+  segment: {
+    background: '#eeeeef',
+    active: '#fff',
+    fontColor: '#000',
+  },
+  addNode: {
+    background: '#f6f6f6',
+    border: '#666',
+    fontColor: '#000',
+  },
   dialog: {
     width: cx(315), // 弹窗容器宽度
     bg: "#fff", // 弹窗背景色