@ledvance/base 1.2.77 → 1.2.79

package/src/components/ldvTopName.tsx

@@ -3,8 +3,10 @@ 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,
   rightIcon?: string | undefined | number,
   rightIconClick?: () => void
@@ -16,6 +18,17 @@ interface LdvTopNameProps {
 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 styles = StyleSheet.create({
+    container: {
+      marginHorizontal: cx(24),
+      marginBottom: cx(12),
+    },
+    title: {
+      color: props.theme.global.brand,
+      fontSize: cx(24),
+    },
+  })
   return (
     <View style={styles.container}>
       <View
@@ -38,7 +51,7 @@ const LdvTopName = (props: LdvTopNameProps) => {
         {props.rightIcon && <TouchableOpacity
             onPress={props.rightIconClick}>
             <Image
-                style={{width: cx(24), height: cx(24), tintColor: '#ff6600'}}
+                style={{width: cx(24), height: cx(24), tintColor: props.theme.global.brand}}
                 source={rightIcon}/>
         </TouchableOpacity>}
         {props.headlineContent && props.headlineContent}
@@ -47,15 +60,4 @@ const LdvTopName = (props: LdvTopNameProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: cx(24),
-    marginBottom: cx(12),
-  },
-  title: {
-    color: '#f60',
-    fontSize: cx(24),
-  },
-})
-
-export default LdvTopName
+export default withTheme(LdvTopName)

package/src/components/weekSelect.tsx

@@ -4,6 +4,7 @@ import {Utils} from 'tuya-panel-kit'
 import I18n from '../i18n/index'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 const repeatPeriod = [
   {
@@ -46,7 +47,7 @@ export const setDataSource = (loop) => {
   })
 }
 
-export default (props) => {
+const WeekSelect = (props) => {
 
   const {value, onSelect, style} = props
   const dataSource = setDataSource(value)
@@ -74,15 +75,15 @@ export default (props) => {
                 justifyContent: 'center',
                 alignItems: 'center',
                 borderRadius: cx(20),
-                backgroundColor: period.enabled ? '#ffe0d4' : '#fff',
+                backgroundColor: period.enabled ? props.theme.global.thirdBrand : props.theme.global.background,
                 borderWidth: cx(1),
                 // borderColor: period.enabled ? "#fff" : 'rgba(120, 120, 128, 0.2)'
-                borderColor: '#f60',
+                borderColor: props.theme.global.brand,
               }}>
 
               <Text
                 style={{
-                  color: '#f60',
+                  color: props.theme.global.brand,
                   textAlign: 'center',
                 }}>{period.title}</Text>
             </View>
@@ -92,4 +93,6 @@ export default (props) => {
     </View>
 
   </View>)
-}
+}
+
+export default withTheme(WeekSelect)

package/src/composeLayout.tsx

@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 import { DevInfo, DpValue, Theme, TYSdk } from 'tuya-panel-kit'
 import { actions, store } from './models'
-import { addListener, removeListener } from 'api/nativeEventEmitter'
+import {addListener, nativeEventEmitter, removeListener} from 'api/nativeEventEmitter'
 import {getSystemTimeFormat, getTimeZone, NativeApi} from 'api/native'
 import {
   DeviceInfo,
@@ -17,12 +17,15 @@ import {
 } from './models/modules/NativePropsSlice'
 import { DpSchema, GlobalParams } from './models/GlobalParams'
 import Connect from './components/connect'
+import darkTheme from "./config/dark-theme";
+import lightTheme from "./config/light-theme";
 
 interface Props {
   devInfo: DevInfo
   preload?: boolean
   ldvDevInfo: LdvDevInfo
   uaGroupInfo: UAGroupInfoProps
+  colorScheme?: string
 }
 
 interface LdvDevInfo extends DeviceInfo {
@@ -40,14 +43,6 @@ interface UAGroupInfoProps extends UAGroupInfo {
 const TYEvent = TYSdk.event
 const TYDevice = TYSdk.device
 
-const theme = {
-  global: {
-    background: '#fff',
-  },
-  ldvMainBgColor: '#f60',
-  'slider.trackRadius': 15,
-}
-
 /**
  *
  * @param {} component - 需要连接到redux store的组件，通常为即为main
@@ -93,6 +88,9 @@ const composeLayout = (component: React.ComponentType) => {
      * 如果面板进入时，`devInfo`不存在，
      * 那么会调用 getDeviceInfo 异步获取处理好的`devInfo`，并置入`redux`
      */
+    state = {
+      colorScheme: 'light'
+    }
     constructor(props: Props) {
       super(props)
       if (props && props.devInfo && props.devInfo.devId) {
@@ -119,6 +117,12 @@ const composeLayout = (component: React.ComponentType) => {
         this.initReduxGroupNativeProps(props.uaGroupInfo)
         this.initGroupDevices(props.uaGroupInfo?.tyGroupId)
       }
+
+      if (!!props.colorScheme) {
+        this.state = {
+          colorScheme: props.colorScheme || 'light'
+        }
+      }
       getSystemTimeFormat().then(time => {
         dispatch(setSystemTimeFormat(time === 24))
       })
@@ -213,10 +217,32 @@ const composeLayout = (component: React.ComponentType) => {
       return dps
     }
 
+    componentDidMount() {
+      nativeEventEmitter.addListener('ColorSchemeUpdate', this.handleColorSchemeUpdate)
+    }
+
+    componentWillUnmount() {
+      removeListener()
+      nativeEventEmitter.removeListener('ColorSchemeUpdate', this.handleColorSchemeUpdate)
+    }
+
+    handleColorSchemeUpdate = (event: { colorScheme: string }) => {
+      this.updateColorScheme(event.colorScheme)
+    }
+
+    updateColorScheme(colorScheme: string) {
+      this.setState({
+        colorScheme: colorScheme
+      })
+    }
+
     render() {
+      // const { colorScheme } = this.state
+      const colorScheme = 'light'
+      console.log('colorScheme', colorScheme)
       return (
         <Provider store={store}>
-          <Theme theme={theme}>
+          <Theme theme={colorScheme === 'dark' ? darkTheme : lightTheme}>
             <Connect mapStateToProps={_.identity}>
               {({ mapStateToProps, ...props }: { mapStateToProps: any; [_: string]: any }) => {
                 return <NavigatorLayout {...props} />
@@ -226,10 +252,6 @@ const composeLayout = (component: React.ComponentType) => {
         </Provider>
       )
     }
-
-    componentWillUnmount() {
-      removeListener()
-    }
   }
 
   return PanelComponent

package/src/config/dark-theme.ts

@@ -0,0 +1,60 @@
+import {Utils} from "tuya-panel-kit";
+
+const { convertX: cx } = Utils.RatioUtils
+
+export default {
+  type: 'dark',
+  global: {
+    brand: '#fff',
+    secondBrand: '#fff',
+    thirdBrand: '#FFE0D4',
+    background: '#000',
+    fontColor: '#fff',
+    secondFontColor: '#cccccc',
+    disabledFontColor: '#555555',
+    success: '#00C931',
+    warning: '#ff9500',
+    error: '#ff0015',
+  },
+  card: {
+    head: '#666',
+    background: '#2a2a2a',
+    fontColor: '#ffffff',
+    shadowColor: '#444444'
+  },
+  button: {
+    active: '#f60',
+    disabled: '#f60',
+    fontColor: '#fff'
+  },
+  textInput: {
+    background: '#737373',
+    fontColor: '#fff',
+    line: '#fff'
+  },
+  tag: {
+    background: '#737373',
+    fontColor: '#fff'
+  },
+  dialog: {
+    width: cx(315), // 弹窗容器宽度
+    bg: "#2a2a2a", // 弹窗背景色
+    radius: cx(8), // 弹窗容器圆角
+    cellHeight: 56, // 列表高度（头部、底部）
+    lineColor: "#e5e5e5", // 分隔线颜色
+    titleFontSize: 18, // 标题字体大小
+    titleFontColor: "#fff", // 头部栏标题颜色
+    subTitleFontSize: 16, // 副标题字体大小
+    subTitleFontColor: "#cccccc", // 头部栏副标题颜色
+    cancelFontSize: 16, // 底部栏取消字体大小
+    cancelFontColor: "#cccccc", // 底部栏取消字体颜色
+    confirmFontSize: 16, // 底部栏确认字体大小
+    confirmFontColor: "#f60", // 底部栏确认字体颜色
+    prompt: {
+      bg: "#737373", // 输入框背景色
+      radius: cx(4), // 输入框圆角
+      padding: "12px 16px", // 输入框边距
+      placeholder: "#fff", // 占位符字体颜色
+    },
+  },
+}

package/src/config/light-theme.ts

@@ -0,0 +1,60 @@
+import {Utils} from "tuya-panel-kit";
+
+const { convertX: cx } = Utils.RatioUtils
+
+export default {
+  type: 'light',
+  global: {
+    brand: '#f60',
+    secondBrand: '#ff8555',
+    thirdBrand: '#FFE0D4',
+    background: '#fff',
+    fontColor: '#000',
+    secondFontColor: '#666666',
+    disabledFontColor: '#CBCBCB',
+    success: '#00C931',
+    warning: '#ff9500',
+    error: '#ff0015',
+  },
+  card: {
+    head: '#DFDEDE',
+    background: '#fff',
+    fontColor: '#000',
+    shadowColor: '#000'
+  },
+  button: {
+    active: '#f60',
+    disabled: '#666666',
+    fontColor: '#fff'
+  },
+  textInput: {
+    background: '#F6F6F6',
+    fontColor: '#000',
+    line: '#cbcbcb'
+  },
+  tag: {
+    background: '#E6E7E8',
+    fontColor: '#000'
+  },
+  dialog: {
+    width: cx(315), // 弹窗容器宽度
+    bg: "#fff", // 弹窗背景色
+    radius: cx(8), // 弹窗容器圆角
+    cellHeight: 56, // 列表高度（头部、底部）
+    lineColor: "#e5e5e5", // 分隔线颜色
+    titleFontSize: 18, // 标题字体大小
+    titleFontColor: "#333", // 头部栏标题颜色
+    subTitleFontSize: 16, // 副标题字体大小
+    subTitleFontColor: "#999", // 头部栏副标题颜色
+    cancelFontSize: 16, // 底部栏取消字体大小
+    cancelFontColor: "#666", // 底部栏取消字体颜色
+    confirmFontSize: 16, // 底部栏确认字体大小
+    confirmFontColor: "#f60", // 底部栏确认字体颜色
+    prompt: {
+      bg: "#f8f8f8", // 输入框背景色
+      radius: cx(4), // 输入框圆角
+      padding: "12px 16px", // 输入框边距
+      placeholder: "#d6d6de", // 占位符字体颜色
+    },
+  },
+}