@ledvance/base 1.3.4 → 1.3.6

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

@@ -1,12 +1,13 @@
 import React from "react";
 import { FlatList, TouchableOpacity, View, Image } from "react-native";
-import ColorAdjustView, { ColorAdjustViewProps } from "@ledvance/base/src/components/ColorAdjustView";
-import ColorTempAdjustView, { ColorTempAdjustViewProps } from "@ledvance/base/src/components/ColorTempAdjustView";
-import Spacer from "@ledvance/base/src/components/Spacer";
+import ColorAdjustView, { ColorAdjustViewProps } from "./ColorAdjustView";
+import ColorTempAdjustView, { ColorTempAdjustViewProps } from "./ColorTempAdjustView";
+import Spacer from "./Spacer";
 import { TabBar, Utils } from "tuya-panel-kit";
 import { ColorDisk } from "@tuya/tuya-panel-lamp-sdk";
-import res from "@ledvance/base/src/res";
+import res from "../res";
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 type TabsNode = {
   key: number | string
@@ -26,83 +27,84 @@ const StripAdjustView = (props: StripAdjustViewProps) => {
       <TabBar
         type='radio'
         tabs={props.lampTabs}
-        style={{ borderRadius: cx(8), backgroundColor: '#f6f6f6', height: cx(40), marginHorizontal: cx(16) }}
-        tabTextStyle={{ color: '#000' }}
-        tabActiveTextStyle={{ color: '#000', fontWeight: 'bold' }}
+        style={{ borderRadius: cx(8), backgroundColor: props.theme.segment.background, height: cx(40), marginHorizontal: cx(16) }}
+        tabTextStyle={{ color: props.theme.segment.fontColor }}
+        tabActiveTextStyle={{ color: props.theme.segment.fontColor, fontWeight: 'bold' }}
+        activeColor={props.theme.segment.active}
         activeKey={props.activeKey}
         onChange={props.onActiveKeyChange}
       />
       {
         props.activeKey === 1 &&
-        <>
-          <Spacer height={cx(10)} />
-          <ColorAdjustView
-            h={props.h}
-            s={props.s}
-            v={props.v}
-            minSaturation={1}
-            reserveSV={true}
-            onHSVChange={props.onHSVChange}
-            onHSVChangeComplete={props.onHSVChangeComplete} />
-          <Spacer />
-        </>
+          <>
+              <Spacer height={cx(10)} />
+              <ColorAdjustView
+                  h={props.h}
+                  s={props.s}
+                  v={props.v}
+                  minSaturation={1}
+                  reserveSV={true}
+                  onHSVChange={props.onHSVChange}
+                  onHSVChangeComplete={props.onHSVChangeComplete} />
+              <Spacer />
+          </>
       }
       {
         props.activeKey === 0 &&
-        <>
-          <Spacer height={cx(10)} />
-          <ColorTempAdjustView
-            minBrightness={1}
-            isSupportTemperature={props.isSupportTemperature}
-            isSupportBrightness={props.isSupportBrightness}
-            colorTemp={props.colorTemp}
-            brightness={props.brightness}
-            onCCTChange={props.onCCTChange}
-            onCCTChangeComplete={props.onCCTChangeComplete}
-            onBrightnessChange={props.onBrightnessChange}
-            onBrightnessChangeComplete={props.onBrightnessChangeComplete} />
-          <Spacer />
-        </>
+          <>
+              <Spacer height={cx(10)} />
+              <ColorTempAdjustView
+                  minBrightness={1}
+                  isSupportTemperature={props.isSupportTemperature}
+                  isSupportBrightness={props.isSupportBrightness}
+                  colorTemp={props.colorTemp}
+                  brightness={props.brightness}
+                  onCCTChange={props.onCCTChange}
+                  onCCTChangeComplete={props.onCCTChangeComplete}
+                  onBrightnessChange={props.onBrightnessChange}
+                  onBrightnessChangeComplete={props.onBrightnessChangeComplete} />
+              <Spacer />
+          </>
       }
       {
         props.activeKey === 3 &&
-        <FlatList
-          numColumns={6}
-          style={{
-            marginHorizontal: cx(16),
-          }}
-          data={ColorList}
-          renderItem={({ item, index }) => {
-            return (
-              <TouchableOpacity
-                onPress={() => {
-                  props.onColorDiskChange && props.onColorDiskChange(item, index)
-                }}
-                style={{
-                  width: '16.66%', alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <ColorDisk
-                  radius={cx(20)}
-                  colors={item}
-                />
-                {props.colorDiskActiveKey === index && <View style={{ width: cx(44), height: cx(44), borderRadius: cx(44), borderColor: '#f60', borderWidth: cx(2), alignItems: 'center', justifyContent: 'center', position: 'absolute' }}>
-                  <Image source={{ uri: res.ic_check }} style={{ width: cx(40), height: cx(40), tintColor: '#fff' }} />
-                </View>}
-              </TouchableOpacity>
-            )
-          }}
-          ListHeaderComponent={() => <Spacer height={cx(10)} />}
-          ItemSeparatorComponent={() => <Spacer height={cx(10)} />}
-          ListFooterComponent={() => <Spacer height={cx(10)} />}
-          keyExtractor={(_, idx) => idx.toString()}
-        />
+          <FlatList
+              numColumns={6}
+              style={{
+                marginHorizontal: cx(16),
+              }}
+              data={ColorList}
+              renderItem={({ item, index }) => {
+                return (
+                  <TouchableOpacity
+                    onPress={() => {
+                      props.onColorDiskChange && props.onColorDiskChange(item, index)
+                    }}
+                    style={{
+                      width: '16.66%', alignItems: 'center',
+                      justifyContent: 'center',
+                    }}>
+                    <ColorDisk
+                      radius={cx(20)}
+                      colors={item}
+                    />
+                    {props.colorDiskActiveKey === index && <View style={{ width: cx(44), height: cx(44), borderRadius: cx(44), borderColor: props.theme.button.primary, borderWidth: cx(2), alignItems: 'center', justifyContent: 'center', position: 'absolute' }}>
+                        <Image source={{ uri: res.ic_check }} style={{ width: cx(40), height: cx(40), tintColor: props.theme.button.fontColor }} />
+                    </View>}
+                  </TouchableOpacity>
+                )
+              }}
+              ListHeaderComponent={() => <Spacer height={cx(10)} />}
+              ItemSeparatorComponent={() => <Spacer height={cx(10)} />}
+              ListFooterComponent={() => <Spacer height={cx(10)} />}
+              keyExtractor={(_, idx) => idx.toString()}
+          />
       }
     </View>
   )
 }
 
-export default StripAdjustView
+export default withTheme(StripAdjustView)
 
 export const ColorList = [
   ['#F4A4BF', '#F65997','#F5075A','#F52071'],
@@ -127,4 +129,4 @@ export const ColorList = [
   ['#76BC41','#95D35F','#B2DD8D','#D9EC39','#E8F291'],
   ['#52D6FB','#F9B241','#F66B05','#D356FC','#9A2ABD'],
   ['#F9AEC7','#F88ABA','#F65590','#F65C79','#F64A49', '#F50803'],
-]
+]

package/src/components/StripLightView.tsx

@@ -1,6 +1,8 @@
 import { requireNativeComponent, ViewProps } from 'react-native'
 import React from 'react'
+import { Utils } from 'tuya-panel-kit'
 
+const { withTheme } = Utils.ThemeUtils
 const NativeStripLightView = requireNativeComponent('StripLightView')
 
 export interface LightNode {
@@ -9,6 +11,7 @@ export interface LightNode {
 }
 
 export interface StripLightViewProps extends ViewProps {
+  theme?: any
   nodes: LightNode[]
   fixCount: number
   stripStyle: 'ONLY_LINE' | 'WITH_BEAD'
@@ -17,9 +20,10 @@ export interface StripLightViewProps extends ViewProps {
 }
 
 const StripLightView = (props: StripLightViewProps) => {
+  const newNodes = props.nodes.map(node => ({...node, backgroundColor: props.theme.card.background}))
   return (
-    <NativeStripLightView {...props} nodes={JSON.stringify(props.nodes)}/>
+    <NativeStripLightView {...props} nodes={JSON.stringify(newNodes)}/>
   )
 }
 
-export default StripLightView
+export default withTheme(StripLightView)

package/src/components/Summary.tsx

@@ -1,14 +1,16 @@
 import React, { ReactElement, memo } from "react";
 import { Text, ViewStyle, View, StyleSheet } from 'react-native'
-import res from "@ledvance/base/src/res"
-import I18n from "@ledvance/base/src/i18n";
+import res from "../res"
+import I18n from "../i18n";
 import { Utils } from "tuya-panel-kit";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import InfoText from "@ledvance/base/src/components/InfoText";
+import Spacer from "../components/Spacer";
+import InfoText from "../components/InfoText";
 
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 
 interface SummaryProps {
+  theme?: any
   style?: ViewStyle
   frequency?: string | ReactElement
   time?: string | ReactElement
@@ -17,6 +19,53 @@ interface SummaryProps {
 }
 
 const Summary = (props: SummaryProps) => {
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      marginHorizontal: cx(24),
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    summaryContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      marginBottom: cx(10),
+    },
+    summaryLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      minWidth: cx(100)
+    },
+    summaryImg: {
+      tintColor: props.theme.global.fontColor,
+      width: cx(12),
+      height: cx(12),
+      marginRight: cx(6)
+    },
+    leftTitle: {
+      fontSize: cx(14),
+      color: props.theme.global.fontColor
+    },
+    summaryRight: {
+      flex: 1,
+      flexDirection: 'column',
+      marginLeft: cx(15),
+      marginTop: cx(5)
+    },
+    rightWrap: {
+      borderRadius: cx(16),
+      paddingHorizontal: cx(12),
+      alignSelf: 'flex-start',
+      backgroundColor: props.theme.tag.background,
+    },
+    rightItem: {
+      color: props.theme.tag.fontColor,
+    },
+  })
   return (
     <View style={styles.cardContainer}>
       <Text style={styles.itemTitle}>{I18n.getLang('add_sleepschedule_one_source_subheadline4_text')}</Text>
@@ -51,66 +100,20 @@ const Summary = (props: SummaryProps) => {
           </View>
         </View>
         {!props.hideActions && <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
-          <InfoText
-            icon={res.summary_icon3}
-            text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
-            iconStyle={styles.summaryImg}
-            textStyle={styles.leftTitle}
-            style={styles.summaryLeft}
-          />
-          <View style={styles.summaryRight}>
-            {props.actions}
-          </View>
+            <InfoText
+                icon={res.summary_icon3}
+                text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
+                iconStyle={styles.summaryImg}
+                textStyle={styles.leftTitle}
+                style={styles.summaryLeft}
+            />
+            <View style={styles.summaryRight}>
+              {props.actions}
+            </View>
         </View>}
       </View>
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24),
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  summaryContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    marginBottom: cx(10),
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: cx(100)
-  },
-  summaryImg: {
-    width: cx(12),
-    height: cx(12),
-    marginRight: cx(6)
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000'
-  },
-  summaryRight: {
-    flex: 1,
-    flexDirection: 'column',
-    marginLeft: cx(15),
-    marginTop: cx(5)
-  },
-  rightWrap: {
-    borderRadius: cx(16),
-    paddingHorizontal: cx(12),
-    alignSelf: 'flex-start',
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    color: '#000',
-  },
-})
-
-export default memo(Summary)
+export default memo(withTheme(Summary))

package/src/components/TextFieldStyleButton.tsx

@@ -58,6 +58,7 @@ const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
             width: cx(16),
             height: cx(16),
             marginStart: cx(4),
+            tintColor: props.theme.icon.primary
         }
     })
 

package/src/components/UATabTitle.tsx

@@ -5,28 +5,33 @@ import { Utils } from 'tuya-panel-kit'
 import res from '../res/index'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface UATabTitleProps extends ViewProps {
+  theme?: any
   text: string
   onIconClick: () => void
 }
 
-export default function UATabTitle(props: UATabTitleProps) {
+const UATabTitle = (props: UATabTitleProps) => {
+  const styles = StyleSheet.create({
+    tabsTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+  })
+
   return (
     <View style={[{ flex: 1, flexDirection: 'row', alignItems: 'center' }, props.style]}>
       <Text style={styles.tabsTitle}>{props.text}</Text>
       <Spacer height={cx(0)} width={cx(4)}/>
       <TouchableOpacity onPress={props.onIconClick}>
-        <Image style={{ width: cx(16), height: cx(16), tintColor: '#f60' }} source={res.ic_info}/>
+        <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.icon.primary }} source={res.ic_info}/>
       </TouchableOpacity>
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  tabsTitle: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-})
+export default withTheme(UATabTitle)
+

package/src/components/UATabs.tsx

@@ -3,8 +3,10 @@ import { StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-nativ
 import { Utils } from 'tuya-panel-kit'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface UATabsProps extends ViewProps {
+  theme?: any
   active: any
   data: UATabData[]
   onSelectChange: (value: UATabData, index: number) => void
@@ -16,6 +18,33 @@ export interface UATabData {
 }
 
 const UATabs = (props: UATabsProps) => {
+
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      height: cx(32),
+      paddingVertical: cx(2),
+      paddingHorizontal: cx(3),
+      backgroundColor: props.theme.segment.background,
+      borderRadius: cx(9),
+    },
+    tabs: {
+      flex: 1,
+      flexDirection: 'row',
+      overflow: 'hidden',
+      borderRadius: cx(7),
+    },
+    tab: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    tabText: {
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+  })
+
   return (
     <View style={[styles.root, props.style]}>
       <View style={styles.tabs}>
@@ -32,13 +61,13 @@ const UATabs = (props: UATabsProps) => {
             <View style={[
               styles.tab,
               {
-                backgroundColor: active ? '#f60' : '#f6f6f6',
+                backgroundColor: active ? props.theme.button.primary : props.theme.container.background,
               },
             ]}>
               <Text style={[
                 styles.tabText,
                 {
-                  color: active ? '#fff' : '#999',
+                  color: active ? props.theme.button.fontColor : props.theme.global.secondFontColor,
                 },
               ]}>{item.title}</Text>
             </View>
@@ -49,30 +78,4 @@ const UATabs = (props: UATabsProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    height: cx(32),
-    paddingVertical: cx(2),
-    paddingHorizontal: cx(3),
-    backgroundColor: '#f6f6f6',
-    borderRadius: cx(9),
-  },
-  tabs: {
-    flex: 1,
-    flexDirection: 'row',
-    overflow: 'hidden',
-    borderRadius: cx(7),
-  },
-  tab: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  tabText: {
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-})
-
-export default UATabs
+export default withTheme(UATabs)

package/src/components/ldvPickerView.tsx

@@ -41,7 +41,8 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
     pickerItem: {},
     picContainer: {
       flex: 1,
-      position: 'relative',
+      alignItems: 'center',
+      flexDirection: 'row',
     },
     pickerUnit: {
       position: 'absolute',

package/src/config/dark-theme.ts

@@ -79,4 +79,26 @@ export default {
       placeholder: "#fff", // 占位符字体颜色
     },
   },
+  /**
+   * Popup 弹出层变量
+   */
+  popup: {
+    cellHeight: 48, // 列表项的高度
+    cellBg: "#2a2a2a", // 列表底色
+    titleRadius: cx(8), // 头部圆角
+    footerRadius: 0, // 底部圆角
+    titleBg: "#2a2a2a",
+    bottomBg: "#2a2a2a", // 底部栏底色
+    lineColor: "#e5e5e5", // 分隔线颜色
+    tintColor: '#f60',
+    titleFontSize: 14, // 头部栏标题大小
+    titleFontColor: "#fff", // 头部栏标题颜色
+    cancelFontSize: 16, // 底部栏取消字体大小
+    cancelFontColor: "#cccccc", // 底部栏取消字体颜色
+    confirmFontSize: 16, // 底部栏确认字体大小
+    confirmFontColor: "#f60", // 底部栏确认字体颜色
+    list: {
+      cellFontColor: '#fff',
+    }
+  },
 }

package/src/config/light-theme.ts

@@ -79,4 +79,26 @@ export default {
       placeholder: "#d6d6de", // 占位符字体颜色
     },
   },
+  /**
+   * Popup 弹出层变量
+   */
+  popup: {
+    cellHeight: 48, // 列表项的高度
+    cellBg: "#2a2a2a", // 列表底色
+    titleRadius: cx(8), // 头部圆角
+    footerRadius: 0, // 底部圆角
+    titleBg: "#fff",
+    bottomBg: "#fff", // 底部栏底色
+    lineColor: "#e5e5e5", // 分隔线颜色
+    tintColor: '#f60',
+    titleFontSize: 14, // 头部栏标题大小
+    titleFontColor: "#333", // 头部栏标题颜色
+    cancelFontSize: 16, // 底部栏取消字体大小
+    cancelFontColor: "#666", // 底部栏取消字体颜色
+    confirmFontSize: 16, // 底部栏确认字体大小
+    confirmFontColor: "#f60", // 底部栏确认字体颜色
+    list: {
+      cellFontColor: '#333',
+    }
+  },
 }