@ledvance/base 1.3.4 → 1.3.6

package/localazy.keys.json

@@ -1,4 +1,5 @@
 {
-  "writeKey": "",
-  "readKey": "a7349213573288779040-d092b120e7d6d90c7e9528ddf2aa600659f60631bd4a5c2d55de0aa2b081af1b"
-}
+    "writeKey": "",
+    "readKey": "a7349213573288779040-d092b120e7d6d90c7e9528ddf2aa600659f60631bd4a5c2d55de0aa2b081af1b"
+}
+

package/package.json

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

package/src/components/DrawToolView.tsx

@@ -15,6 +15,7 @@ import StripLightView from './StripLightView'
 import { nativeEventEmitter } from '../api/nativeEventEmitter'
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export type Node = {
   color: string,
@@ -22,6 +23,7 @@ export type Node = {
 }
 
 interface DrawToolViewProps extends PropsWithChildren<ViewProps> {
+  theme?: any
   title?: string
   switchLed?: boolean
   showEnable?: boolean
@@ -103,134 +105,157 @@ const DrawToolView = (props: DrawToolViewProps) => {
       const s = Math.round(mapFloatToRange(props.s / 100, 30, 100))
       return hsv2Hex(props.h, s, 100)
     }
-    return '#ffffff'
+    return props.theme.card.background
   }, [props.isColorMode, props.h, props.s])
 
   const ledNumValidator = (num?: number) => {
     return num && Number.isInteger(num) && num >= 5 && num <= 48;
   }
 
+
+  const styles = StyleSheet.create({
+    container: {
+      paddingLeft: cx(10),
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      marginLeft: cx(10),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      fontWeight: 'bold',
+    },
+    adjustButtons: {
+      width: cx(50),
+    },
+    adjustButton: {
+      width: cx(44),
+      height: cx(44),
+    },
+  })
+
   return (
     <Card style={{ marginHorizontal: cx(24) }}>
       <LdvSwitch
         title={props.title || I18n.getLang('light_sources_tile_tw_lighting_headline')}
-        color={'#fff'}
+        color={props.theme.card.background}
         colorAlpha={1}
         enable={!!props.switchLed}
         showSwitch={!!props.showEnable}
         setEnable={props.setEnable} />
       {(props.showEnable && props.switchLed || !props.showEnable) && <>
-        <View style={styles.container}>
-          <View style={styles.adjustButtons}>
-            <TouchableOpacity
-              onPress={() => {
-                props.setAdjustType(1)
-              }}>
-              <Image
-                style={[styles.adjustButton, { tintColor: props.adjustType === 1 ? '#f60' : '#666' }]}
-                source={res.ic_paint_bucket} />
-            </TouchableOpacity>
-            {!props.hideDisableLight && <TouchableOpacity
-              onPress={() => {
-                props.setAdjustType(3)
-              }}>
-              <Image
-                style={[styles.adjustButton, { tintColor: props.adjustType === 3 ? '#f60' : '#666' }]}
-                source={res.ic_disabled_light} />
-            </TouchableOpacity>}
-            {!props.hideColorize && <TouchableOpacity
-              onPress={() => {
-                props.setAdjustType(2)
-              }}>
-              <Image
-                style={[styles.adjustButton, { tintColor: props.adjustType === 2 ? '#f60' : '#666' }]}
-                source={res.ic_colorize} />
-            </TouchableOpacity>}
-            {!props.hideLedNum && <TouchableOpacity
-              onPress={() => {
-                state.visible = true
-              }}
-              style={[styles.adjustButton, {
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: '#f60',
-                borderRadius: cx(5),
-              }]}>
-              <Text style={{ color: '#fff', fontSize: cx(18), fontWeight: 'bold' }}>{props.ledNum || 5}</Text>
-            </TouchableOpacity>}
+          <View style={styles.container}>
+              <View style={styles.adjustButtons}>
+                  <TouchableOpacity
+                      onPress={() => {
+                        props.setAdjustType(1)
+                      }}>
+                      <Image
+                          style={[styles.adjustButton, { tintColor: props.adjustType === 1 ? props.theme.icon.primary : props.theme.icon.normal }]}
+                          source={res.ic_paint_bucket} />
+                  </TouchableOpacity>
+                {!props.hideDisableLight && <TouchableOpacity
+                    onPress={() => {
+                      props.setAdjustType(3)
+                    }}>
+                    <Image
+                        style={[styles.adjustButton, { tintColor: props.adjustType === 3 ? props.theme.icon.primary : props.theme.icon.normal }]}
+                        source={res.ic_disabled_light} />
+                </TouchableOpacity>}
+                {!props.hideColorize && <TouchableOpacity
+                    onPress={() => {
+                      props.setAdjustType(2)
+                    }}>
+                    <Image
+                        style={[styles.adjustButton, { tintColor: props.adjustType === 2 ? props.theme.icon.primary : props.theme.icon.normal }]}
+                        source={res.ic_colorize} />
+                </TouchableOpacity>}
+                {!props.hideLedNum && <TouchableOpacity
+                    onPress={() => {
+                      state.visible = true
+                    }}
+                    style={[styles.adjustButton, {
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      backgroundColor: props.theme.icon.primary,
+                      borderRadius: cx(5),
+                    }]}>
+                    <Text style={{ color: props.theme.global.fontColor, fontSize: cx(18), fontWeight: 'bold' }}>{props.ledNum || 5}</Text>
+                </TouchableOpacity>}
+              </View>
+              <StripLightView
+                  style={{ height, flex: 1 }}
+                  nodes={props.nodes}
+                  fixCount={props.fixCount || 5}
+                  stripStyle={props.stripStyle || 'WITH_BEAD'}
+                  touchingMode={props.touchingMode || 'TOUCH'}
+                  width={state.width}
+                  onLayout={onLayout} />
           </View>
-          <StripLightView
-            style={{ height, flex: 1 }}
-            nodes={props.nodes}
-            fixCount={props.fixCount || 5}
-            stripStyle={props.stripStyle || 'WITH_BEAD'}
-            touchingMode={props.touchingMode || 'TOUCH'}
-            width={state.width}
-            onLayout={onLayout} />
-        </View>
-        <LdvSwitch
-          title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-          color={props.blockColor || getBlockColor()}
-          colorAlpha={1}
-          enable={false}
-          showSwitch={false}
-          setEnable={() => {
-          }} />
+          <LdvSwitch
+              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+              color={props.blockColor || getBlockColor()}
+              colorAlpha={1}
+              enable={false}
+              showSwitch={false}
+              setEnable={() => {
+              }} />
         {!props.hidLampAdjustView && <LampAdjustView
-          isSupportColor={!!props.isSupportColor}
-          isSupportTemperature={!!props.isSupportTemperature}
-          isSupportBrightness={!!props.isSupportBrightness}
-          isColorMode={!!props.isColorMode}
-          reserveSV={true}
-          minSaturation={1}
-          setIsColorMode={props.setIsColorMode}
-          h={props.h} s={props.s} v={props.v}
-          onHSVChange={props.onHSVChange}
-          onHSVChangeComplete={props.onHSVChangeComplete}
-          colorTemp={props.temperature}
-          brightness={props.brightness}
-          onCCTChange={props.onCCTChange}
-          onCCTChangeComplete={props.onCCTChangeComplete}
-          onBrightnessChange={props.onBrightnessChange}
-          onBrightnessChangeComplete={props.onBrightnessChangeComplete} />}
+            isSupportColor={!!props.isSupportColor}
+            isSupportTemperature={!!props.isSupportTemperature}
+            isSupportBrightness={!!props.isSupportBrightness}
+            isColorMode={!!props.isColorMode}
+            reserveSV={true}
+            minSaturation={1}
+            setIsColorMode={props.setIsColorMode}
+            h={props.h} s={props.s} v={props.v}
+            onHSVChange={props.onHSVChange}
+            onHSVChangeComplete={props.onHSVChangeComplete}
+            colorTemp={props.temperature}
+            brightness={props.brightness}
+            onCCTChange={props.onCCTChange}
+            onCCTChangeComplete={props.onCCTChangeComplete}
+            onBrightnessChange={props.onBrightnessChange}
+            onBrightnessChangeComplete={props.onBrightnessChangeComplete} />}
         {!props.hideLedNum && <Modal
-          visible={state.visible}
-          onMaskPress={() => {
-            state.visible = false
-          }}
-          alignContainer="center"
-          style={{ width: '100%', height: cx(150) }}>
-          <Card
-            containerStyle={{ marginHorizontal: cx(16), alignItems: 'center' }}
-            style={{ marginHorizontal: cx(16), marginTop: cx(50) }}>
-            <Spacer />
-            <Text style={{ color: '#000', fontSize: cx(14) }}>{I18n.getLang('string_lights_set_bulbs_title')}</Text>
-            <Spacer height={cx(10)}/>
-            <Text style={{color: '#999'}}>{I18n.getLang('string_lights_set_bulbs_description_text')}</Text>
-            <Spacer />
-            <Stepper
-              min={5}
-              max={48}
-              isBeyond={true}
-              stepValue={1}
-              editable={true}
-              value={state.ledNum}
-              isRealTime={true}
-              onValueChange={(v) => {
-                state.ledNum = v
-              }} />
-            <Spacer />
-            <DeleteButton
-              text={I18n.getLang('auto_scan_system_wifi_confirm')}
-              style={{ width: cx(150), height: cx(40), backgroundColor: ledNumValidator(state.ledNum) ? '#f60' : '#666' }}
-              textStyle={{ fontSize: cx(14) }}
-              onPress={() => {
-                if (!ledNumValidator(state.ledNum)) return
-                props.setLedNum(state.ledNum)
-                state.visible = false
-              }} />
-            <Spacer />
-          </Card>
+            visible={state.visible}
+            onMaskPress={() => {
+              state.visible = false
+            }}
+            alignContainer="center"
+            style={{ width: '100%', height: cx(150) }}>
+            <Card
+                containerStyle={{ marginHorizontal: cx(16), alignItems: 'center' }}
+                style={{ marginHorizontal: cx(16), marginTop: cx(50) }}>
+                <Spacer />
+                <Text style={{ color: props.theme.global.fontColor, fontSize: cx(14) }}>{I18n.getLang('string_lights_set_bulbs_title')}</Text>
+                <Spacer height={cx(10)}/>
+                <Text style={{color: props.theme.global.secondFontColor}}>{I18n.getLang('string_lights_set_bulbs_description_text')}</Text>
+                <Spacer />
+                <Stepper
+                    min={5}
+                    max={48}
+                    isBeyond={true}
+                    stepValue={1}
+                    editable={true}
+                    value={state.ledNum}
+                    isRealTime={true}
+                    onValueChange={(v) => {
+                      state.ledNum = v
+                    }} />
+                <Spacer />
+                <DeleteButton
+                    text={I18n.getLang('auto_scan_system_wifi_confirm')}
+                    style={{ width: cx(150), height: cx(40), backgroundColor: ledNumValidator(state.ledNum) ? props.theme.button.primary : props.theme.button.disabled }}
+                    textStyle={{ fontSize: cx(14) }}
+                    onPress={() => {
+                      if (!ledNumValidator(state.ledNum)) return
+                      props.setLedNum(state.ledNum)
+                      state.visible = false
+                    }} />
+                <Spacer />
+            </Card>
         </Modal>}
         {props.children}
       </>}
@@ -239,26 +264,5 @@ const DrawToolView = (props: DrawToolViewProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    paddingLeft: cx(10),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(16),
-    marginLeft: cx(10),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    fontWeight: 'bold',
-  },
-  adjustButtons: {
-    width: cx(50),
-  },
-  adjustButton: {
-    width: cx(44),
-    height: cx(44),
-  },
-})
 
-export default DrawToolView
+export default withTheme(DrawToolView)

package/src/components/FanAdjustView.tsx

@@ -11,8 +11,10 @@ import Segmented from './Segmented'
 import Popup from './Popup'
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 interface FanAdjustViewProps extends ViewProps {
+  theme?: any
   hideEnable?: boolean
   fanEnable: boolean
   fanSpeed: number
@@ -45,11 +47,11 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
   return (
     <View>
       {!props.hideEnable && <LdvSwitch
-        title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
-        enable={props.fanEnable}
-        setEnable={props.onFanSwitch}
-        color={''}
-        colorAlpha={1}/>}
+          title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
+          enable={props.fanEnable}
+          setEnable={props.onFanSwitch}
+          color={''}
+          colorAlpha={1}/>}
       {props.fanEnable && (
         <View>
           <LdvSlider
@@ -67,7 +69,7 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
           <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
               <Text style={{
                 marginRight: cx(5),
-                color: '#000',
+                color: props.theme.global.fontColor,
               }}>{I18n.getLang('ceiling_fan_tile_uvc_fan_direction')}</Text>
               <TouchableOpacity onPress={() => Popup({
                 title: I18n.getLang('ceiling_fan_direction_info_headline'),
@@ -75,17 +77,17 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
                 content: <View>
                   <Text style={{
                     fontWeight: 'bold',
-                    color: '#000',
+                    color: props.theme.global.fontColor,
                   }}>{I18n.getLang('ceiling_fan_direction_info_description_text')}</Text>
                   <Spacer/>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_headline')}</Text>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_text')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_1_headline')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_1_text')}</Text>
                   <Spacer/>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_headline')}</Text>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_text')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_2_headline')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_2_text')}</Text>
                 </View>,
               })}>
-                  <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={res.ic_info}/>
+                  <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.icon.primary}} source={res.ic_info}/>
               </TouchableOpacity>
           </View>
           <Segmented
@@ -98,24 +100,24 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
 
       {props.fanEnable && props.isSupportMode && <View style={{marginHorizontal: cx(16)}}>
           <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
-              <Text style={{marginRight: cx(5), color: '#000'}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
+              <Text style={{marginRight: cx(5), color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
               <TouchableOpacity onPress={() => Popup({
                 title: I18n.getLang('ceiling_fan_mode_info_headline'),
                 confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
                 content: <View>
                   <Text style={{
                     fontWeight: 'bold',
-                    color: '#000',
+                    color: props.theme.global.fontColor,
                   }}>{I18n.getLang('ceiling_fan_mode_info_description_text')}</Text>
                   <Spacer/>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
                   <Spacer/>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
-                  <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
+                  <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
                 </View>,
               })}>
-                  <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={res.ic_info}/>
+                  <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.icon.primary}} source={res.ic_info}/>
               </TouchableOpacity>
           </View>
           <Segmented
@@ -139,4 +141,4 @@ export function FanAdjustViewContent(props: FanAdjustViewProps) {
   )
 }
 
-export default FanAdjustView
+export default withTheme(FanAdjustView)

package/src/components/Popup.tsx

@@ -3,6 +3,7 @@ import {Text, TouchableOpacity, View} from 'react-native'
 import {Popup, Utils} from 'tuya-panel-kit'
 
 const {convertX: cx, height} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 interface InformationPopupProps {
   title: string
@@ -11,16 +12,14 @@ interface InformationPopupProps {
 }
 
 const InformationPopup = (props: InformationPopupProps) => {
-  console.log(props, '< --- props')
-
-  const titleNode = () => {
+  const TitleNode = withTheme(({theme}: {theme?: any}) => {
     return (
       <View style={{flexDirection: 'row', height: cx(80), justifyContent: 'space-between'}}>
         <View style={{flexDirection: 'column-reverse', flex: 1, alignItems: 'center', paddingLeft: cx(12)}}>
           <Text style={{
             fontSize: cx(16),
             fontWeight: 'bold',
-            color: '#000000',
+            color: theme.global.fontColor,
             paddingBottom: cx(12),
 
           }}>{props.title}</Text>
@@ -37,7 +36,7 @@ const InformationPopup = (props: InformationPopupProps) => {
           <Text
             style={{
               fontSize: cx(12),
-              color: '#FF6600',
+              color: theme.button.primary,
             }}
           >
             {props.confirmText}
@@ -45,13 +44,13 @@ const InformationPopup = (props: InformationPopupProps) => {
         </TouchableOpacity>
       </View>
     )
-  }
+  })
 
   Popup.custom({
     content: <View style={{height: height - cx(80), padding: cx(24)}}>
       {props.content}
     </View>,
-    title: titleNode(),
+    title: <TitleNode />,
     footer: null,
     confirmText: '',
     cancelText: '',
@@ -65,8 +64,6 @@ const InformationPopup = (props: InformationPopupProps) => {
       display: 'none',
     },
   })
-
-
 }
 
-export default InformationPopup
+export default InformationPopup

package/src/components/Segmented.tsx

@@ -3,6 +3,7 @@ import {StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native'
 import {Utils} from 'tuya-panel-kit'
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 interface SegmentedItem {
   label: ReactNode
@@ -10,6 +11,7 @@ interface SegmentedItem {
 }
 
 interface SegmentedProps {
+  theme?: any
   value?: string | number
   options?: SegmentedItem[]
   onChange?: (v: string | number) => void
@@ -17,6 +19,39 @@ interface SegmentedProps {
 }
 
 const Segmented = (props: SegmentedProps) => {
+  const styles = StyleSheet.create({
+    wrap_container: {
+      flexDirection: 'row',
+      height: cx(42),
+      backgroundColor: props.theme.segment.background,
+      padding: cx(2),
+      borderRadius: cx(8),
+    },
+    segmented_item: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: props.theme.container.background,
+    },
+    segmented_item_first: {
+      borderBottomLeftRadius: cx(8),
+      borderTopLeftRadius: cx(8),
+    },
+    segmented_item_last: {
+      borderBottomRightRadius: cx(8),
+      borderTopRightRadius: cx(8),
+    },
+    segmented_item_check: {
+      backgroundColor: props.theme.button.primary,
+    },
+    segmented_text: {
+      fontSize: cx(16),
+      color: props.theme.global.secondFontColor,
+    },
+    segmented_text_check: {
+      color: props.theme.button.fontColor,
+    },
+  })
   return (
     <View style={[styles.wrap_container, props.style]}>
       {props.options && props.options.map((item, idx) => (
@@ -40,38 +75,4 @@ const Segmented = (props: SegmentedProps) => {
   )
 }
 
-export default Segmented
-
-const styles = StyleSheet.create({
-  wrap_container: {
-    flexDirection: 'row',
-    height: cx(42),
-    backgroundColor: '#f6f6f6',
-    padding: cx(2),
-    borderRadius: cx(8),
-  },
-  segmented_item: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#fff',
-  },
-  segmented_item_first: {
-    borderBottomLeftRadius: cx(8),
-    borderTopLeftRadius: cx(8),
-  },
-  segmented_item_last: {
-    borderBottomRightRadius: cx(8),
-    borderTopRightRadius: cx(8),
-  },
-  segmented_item_check: {
-    backgroundColor: '#f60',
-  },
-  segmented_text: {
-    fontSize: cx(16),
-    color: '#999',
-  },
-  segmented_text_check: {
-    color: '#fff',
-  },
-})
+export default withTheme(Segmented)