@ledvance/base 1.3.2 → 1.3.4

package/src/components/ldvSlider.tsx

@@ -4,8 +4,10 @@ import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-nat
 import {Slider, Utils} from 'tuya-panel-kit'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface LdvSliderProps {
+  theme?: any
   title: string,
   value: number,
   min?: number | undefined,
@@ -29,6 +31,49 @@ const LdvSlider = (props: LdvSliderProps) => {
   useEffect(() => {
     state.value = value
   }, [value])
+
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'column',
+      paddingHorizontal: cx(16),
+    },
+    titleBg: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    valueText: {
+      marginTop: cx(10),
+      fontSize: cx(14),
+      color: props.theme.global.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    title: {
+      marginTop: cx(10),
+      fontSize: cx(14),
+      color: props.theme.global.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    slider: {
+      marginTop: cx(8),
+      height: cx(28),
+      justifyContent: 'center',
+    },
+    thumb: {
+      backgroundColor: '#fff',
+      width: cx(28),
+      height: cx(28),
+      borderRadius: cx(14),
+      shadowColor: '#000000',
+      shadowOpacity: 0.2,
+      elevation: cx(8),
+      shadowRadius: cx(8),
+      shadowOffset: {
+        width: 0,
+        height: cx(4),
+      },
+    },
+  })
+
   return (
     <View style={[styles.container, props.style]}>
       <View style={styles.titleBg}>
@@ -59,46 +104,4 @@ const LdvSlider = (props: LdvSliderProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-    paddingHorizontal: cx(16),
-  },
-  titleBg: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  valueText: {
-    marginTop: cx(10),
-    fontSize: cx(14),
-    color: '#000',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  title: {
-    marginTop: cx(10),
-    fontSize: cx(14),
-    color: '#000',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  slider: {
-    marginTop: cx(8),
-    height: cx(28),
-    justifyContent: 'center',
-  },
-  thumb: {
-    backgroundColor: '#fff',
-    width: cx(28),
-    height: cx(28),
-    borderRadius: cx(14),
-    shadowColor: '#000000',
-    shadowOpacity: 0.2,
-    elevation: cx(8),
-    shadowRadius: cx(8),
-    shadowOffset: {
-      width: 0,
-      height: cx(4),
-    },
-  },
-})
-
-export default LdvSlider
+export default withTheme(LdvSlider)

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

@@ -8,7 +8,7 @@ export default {
     brand: '#fff',
     secondBrand: '#fff',
     thirdBrand: '#FFE0D4',
-    background: '#000',
+    background: '#121212',
     fontColor: '#fff',
     secondFontColor: '#cccccc',
     disabledFontColor: '#555555',
@@ -19,13 +19,19 @@ export default {
   card: {
     head: '#666',
     background: '#2a2a2a',
-    board: '#f6f6f6',
+    border: '#f6f6f6',
     fontColor: '#ffffff',
-    shadowColor: '#444444'
+    shadowColor: '#ffffff'
+  },
+  container: {
+    background: '#444444',
+    divider: '#fff'
   },
   button: {
-    active: '#f60',
-    disabled: '#f60',
+    primary: '#f60',
+    delete: '#f60',
+    cancel: '#f60',
+    disabled: '#FFE0D4',
     fontColor: '#fff'
   },
   textInput: {
@@ -33,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", // 弹窗背景色
@@ -52,7 +73,7 @@ export default {
     confirmFontSize: 16, // 底部栏确认字体大小
     confirmFontColor: "#f60", // 底部栏确认字体颜色
     prompt: {
-      bg: "#737373", // 输入框背景色
+      bg: '#737373', // 输入框背景色
       radius: cx(4), // 输入框圆角
       padding: "12px 16px", // 输入框边距
       placeholder: "#fff", // 占位符字体颜色

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,13 +19,19 @@ export default {
   card: {
     head: '#DFDEDE',
     background: '#fff',
-    board: '#f6f6f6',
+    border: '#f6f6f6',
     fontColor: '#000',
     shadowColor: '#000'
   },
+  container: {
+    background: '#f6f6f6',
+    divider: '#cbcbcb'
+  },
   button: {
-    active: '#f60',
-    disabled: '#666666',
+    primary: '#f60',
+    delete: '#666',
+    cancel: '#666',
+    disabled: '#FFE0D4',
     fontColor: '#fff'
   },
   textInput: {
@@ -33,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", // 弹窗背景色
@@ -52,7 +73,7 @@ export default {
     confirmFontSize: 16, // 底部栏确认字体大小
     confirmFontColor: "#f60", // 底部栏确认字体颜色
     prompt: {
-      bg: "#f8f8f8", // 输入框背景色
+      bg: "#F6F6F6", // 输入框背景色
       radius: cx(4), // 输入框圆角
       padding: "12px 16px", // 输入框边距
       placeholder: "#d6d6de", // 占位符字体颜色