@ledvance/base 1.3.2 → 1.3.3

package/package.json

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

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/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/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)

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/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',
@@ -21,11 +21,17 @@ export default {
     background: '#2a2a2a',
     board: '#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: {
@@ -52,7 +58,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

@@ -23,9 +23,15 @@ export default {
     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: {
@@ -52,7 +58,7 @@ export default {
     confirmFontSize: 16, // 底部栏确认字体大小
     confirmFontColor: "#f60", // 底部栏确认字体颜色
     prompt: {
-      bg: "#f8f8f8", // 输入框背景色
+      bg: "#F6F6F6", // 输入框背景色
       radius: cx(4), // 输入框圆角
       padding: "12px 16px", // 输入框边距
       placeholder: "#d6d6de", // 占位符字体颜色