@ledvance/base 1.1.13 → 1.1.15

package/src/components/FanAdjustView.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Utils } from 'tuya-panel-kit'
+import {Utils} from 'tuya-panel-kit'
 import Card from './Card'
-import {View, Text, ViewProps, Image, TouchableOpacity} from 'react-native'
+import {Image, Text, TouchableOpacity, View, ViewProps} from 'react-native'
 import LdvSwitch from './ldvSwitch'
 import I18n from '@i18n'
 import LdvSlider from './ldvSlider'
@@ -9,116 +9,126 @@ import Spacer from './Spacer'
 import res from '../res'
 import Segmented from './Segmented'
 import Popup from './Popup'
-const { convertX: cx } = Utils.RatioUtils
+
+const {convertX: cx} = Utils.RatioUtils
 
 interface FanAdjustViewProps extends ViewProps {
-    fanEnable: boolean
-    fanSpeed: number
-    maxFanSpeed?: number
-    isSupportDirection?: boolean
-    isSupportDisinfect?: boolean
-    isSupportMode?: boolean
-    directValue?: string
-    modeValue?: string 
-    disinfect?: boolean
-    directOptions?:any[]
-    modeOptions?: any[]
-    directChange?: (direct:string) => void
-    modeChange?: (mode: string) => void
-    disinfectChange?: (disinfect: boolean) => void
-    onFanSwitch: (fanEnable: boolean) => void
-    onFanSpeedChange?: (fanSpeed: number) => void
-    onFanSpeedChangeComplete: (fanSpeed: number) => void
+  fanEnable: boolean
+  fanSpeed: number
+  maxFanSpeed?: number
+  isSupportDirection?: boolean
+  isSupportDisinfect?: boolean
+  isSupportMode?: boolean
+  directValue?: string
+  modeValue?: string
+  disinfect?: boolean
+  directOptions?: any[]
+  modeOptions?: any[]
+  directChange?: (direct: string) => void
+  modeChange?: (mode: string) => void
+  disinfectChange?: (disinfect: boolean) => void
+  onFanSwitch: (fanEnable: boolean) => void
+  onFanSpeedChange?: (fanSpeed: number) => void
+  onFanSpeedChangeComplete: (fanSpeed: number) => void
 }
 
 const FanAdjustView = (props: FanAdjustViewProps) => {
-    return (
-        <Card
-            style={props.style}>
-            <LdvSwitch
-                title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
-                enable={props.fanEnable}
-                setEnable={props.onFanSwitch}
-                color={''}
-                colorAlpha={1}/>
-            {props.fanEnable && (
-                <View>
-                    <LdvSlider
-                        title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
-                        value={props.fanSpeed}
-                        min={1}
-                        max={props.maxFanSpeed}
-                        onValueChange={props.onFanSpeedChange}
-                        onSlidingComplete={props.onFanSpeedChangeComplete}
-                        subTitleStr={props.fanSpeed + `/${props.maxFanSpeed}`}/>
-                    <Spacer/>
-                </View>
-            )}
-            {props.fanEnable && props.isSupportDirection && <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_direction')}</Text>
-                    <TouchableOpacity onPress={() => Popup({
-                        title: I18n.getLang('ceiling_fan_direction_info_headline'),
-                        confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
-                        content: <View>
-                            <Text style={{fontWeight: 'bold', color: '#000'}}>{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>
-                            <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>
-                        </View>
-                    })}>
-                        <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
-                    </TouchableOpacity>
-                </View>
-                <Segmented 
-                    options={props.directOptions}
-                    value={props.directValue}
-                    onChange={props.directChange}
-                />
-                <Spacer />
-            </View>}
+  return (
+    <Card
+      style={props.style}>
+      <LdvSwitch
+        title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
+        enable={props.fanEnable}
+        setEnable={props.onFanSwitch}
+        color={''}
+        colorAlpha={1}/>
+      {props.fanEnable && (
+        <View>
+          <LdvSlider
+            title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
+            value={props.fanSpeed}
+            min={1}
+            max={props.maxFanSpeed}
+            onValueChange={props.onFanSpeedChange}
+            onSlidingComplete={props.onFanSpeedChangeComplete}
+            subTitleStr={props.fanSpeed + `/${props.maxFanSpeed}`}/>
+          <Spacer/>
+        </View>
+      )}
+      {props.fanEnable && props.isSupportDirection && <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_direction')}</Text>
+              <TouchableOpacity onPress={() => Popup({
+                title: I18n.getLang('ceiling_fan_direction_info_headline'),
+                confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
+                content: <View>
+                  <Text style={{
+                    fontWeight: 'bold',
+                    color: '#000',
+                  }}>{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>
+                  <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>
+                </View>,
+              })}>
+                  <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
+              </TouchableOpacity>
+          </View>
+          <Segmented
+              options={props.directOptions}
+              value={props.directValue}
+              onChange={props.directChange}
+          />
+          <Spacer/>
+      </View>}
 
-            {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>
-                    <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'}}>{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>
-                            <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>
-                        </View>
-                    })}>
-                        <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
-                    </TouchableOpacity>
-                </View>
-                <Segmented 
-                    options={props.modeOptions}
-                    value={props.modeValue}
-                    onChange={props.modeChange}
-                />
-                <Spacer />
-            </View>}
+      {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>
+              <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',
+                  }}>{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>
+                  <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>
+                </View>,
+              })}>
+                  <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
+              </TouchableOpacity>
+          </View>
+          <Segmented
+              options={props.modeOptions}
+              value={props.modeValue}
+              onChange={props.modeChange}
+          />
+          <Spacer/>
+      </View>}
 
-            {props.fanEnable && props.isSupportDisinfect && <>
-                <LdvSwitch 
-                    enable={props.disinfect || false}
-                    setEnable={props.disinfectChange}
-                    color={''}
-                    colorAlpha={1}
-                    title={'1'}/>
-                <Spacer height={cx(16)}/>
-            </>}
-        </Card>
-    )
+      {props.fanEnable && props.isSupportDisinfect && <>
+          <LdvSwitch
+              enable={props.disinfect || false}
+              setEnable={props.disinfectChange}
+              color={''}
+              colorAlpha={1}
+              title={'1'}/>
+          <Spacer height={cx(16)}/>
+      </>}
+    </Card>
+  )
 }
 
 export default FanAdjustView

package/src/components/InfoText.tsx

@@ -1,44 +1,44 @@
-import { Image, ImageStyle, StyleProp, StyleSheet, Text, TextStyle, View, ViewProps } from 'react-native'
+import {Image, ImageStyle, StyleProp, StyleSheet, Text, TextStyle, View, ViewProps} from 'react-native'
 import React from 'react'
-import { Utils } from 'tuya-panel-kit'
+import {Utils} from 'tuya-panel-kit'
 import Spacer from './Spacer'
 
 const cx = Utils.RatioUtils.convertX
 
 interface InfoTextProps extends ViewProps {
-    icon: string
-    text: string
-    contentColor?: string
-    iconStyle?: StyleProp<ImageStyle>
-    textStyle?: StyleProp<TextStyle>
+  icon: string
+  text: string
+  contentColor?: string
+  iconStyle?: StyleProp<ImageStyle>
+  textStyle?: StyleProp<TextStyle>
 }
 
 const InfoText = (props: InfoTextProps) => {
-    const contentColor = props.contentColor || '#666666'
-    return (
-        <View style={styles.root}>
-            <Image style={[styles.icon, props.iconStyle, { tintColor: contentColor }]}
-                   source={{ uri: props.icon }} />
-            <Spacer width={cx(4)} height={0} />
-            <Text style={[styles.text, props.textStyle, { color: contentColor }]}>{props.text}</Text>
-        </View>
-    )
+  const contentColor = props.contentColor || '#666666'
+  return (
+    <View style={styles.root}>
+      <Image style={[styles.icon, props.iconStyle, {tintColor: contentColor}]}
+             source={{uri: props.icon}}/>
+      <Spacer width={cx(4)} height={0}/>
+      <Text style={[styles.text, props.textStyle, {color: contentColor}]}>{props.text}</Text>
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
-    root: {
-        flexDirection: 'row',
-    },
-    icon: {
-        width: cx(16),
-        height: cx(16),
-    },
-    text: {
-        flex: 1,
-        marginTop: cx(2.5),
-        fontSize: cx(12),
-        fontFamily: 'helvetica_neue_lt_std_roman',
-    },
+  root: {
+    flexDirection: 'row',
+  },
+  icon: {
+    width: cx(16),
+    height: cx(16),
+  },
+  text: {
+    flex: 1,
+    marginTop: cx(2.5),
+    fontSize: cx(12),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
 })
 
 export default InfoText

package/src/components/LampAdjustView.tsx

@@ -11,66 +11,66 @@ import I18n from '../i18n/index'
 const {convertX: cx} = Utils.RatioUtils
 
 interface LampConfigViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
-    isRGBWLamp: boolean
-    isRGBLamp: boolean
-    isOnlyRGBLamp: boolean
-    isTWLamp: boolean
-    isDIMLamp: boolean
-    isColorMode: boolean
-    setIsColorMode: (isColorMode: boolean) => void
+  isRGBWLamp: boolean
+  isRGBLamp: boolean
+  isOnlyRGBLamp: boolean
+  isTWLamp: boolean
+  isDIMLamp: boolean
+  isColorMode: boolean
+  setIsColorMode: (isColorMode: boolean) => void
 }
 
 const LampAdjustView = (props: LampConfigViewProps) => {
 
-    const state = useReactive({
-        hasSegmentControl: props.isRGBWLamp || props.isRGBLamp,
-    })
+  const state = useReactive({
+    hasSegmentControl: props.isRGBWLamp || props.isRGBLamp,
+  })
 
-    return (
-        <View>
-            {state.hasSegmentControl &&
-                <SegmentControl
-                    style={styles.segmentControl}
-                    title1={I18n.getLang('light_sources_tile_rgb_lighting_tab_color')}
-                    title2={I18n.getLang('light_sources_tile_rgb_lighting_tab_white')}
-                    isFirst={props.isColorMode}
-                    setIsFirst={props.setIsColorMode}/>
-            }
-            {(props.isOnlyRGBLamp || (state.hasSegmentControl && props.isColorMode)) &&
-                <>
-                    {state.hasSegmentControl && <Spacer height={cx(10)}/>}
-                    <ColorAdjustView
-                        h={props.h}
-                        s={props.s}
-                        v={props.v}
-                        onHSVChange={props.onHSVChange}
-                        onHSVChangeComplete={props.onHSVChangeComplete}/>
-                    <Spacer/>
-                </>
-            }
-            {(props.isTWLamp || props.isDIMLamp || (!props.isColorMode)) &&
-                <>
-                    {state.hasSegmentControl && <Spacer height={cx(10)}/>}
-                    <ColorTempAdjustView
-                        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/>
-                </>
-            }
-        </View>
-    )
+  return (
+    <View>
+      {state.hasSegmentControl &&
+          <SegmentControl
+              style={styles.segmentControl}
+              title1={I18n.getLang('light_sources_tile_rgb_lighting_tab_color')}
+              title2={I18n.getLang('light_sources_tile_rgb_lighting_tab_white')}
+              isFirst={props.isColorMode}
+              setIsFirst={props.setIsColorMode}/>
+      }
+      {(props.isOnlyRGBLamp || (state.hasSegmentControl && props.isColorMode)) &&
+          <>
+            {state.hasSegmentControl && <Spacer height={cx(10)}/>}
+              <ColorAdjustView
+                  h={props.h}
+                  s={props.s}
+                  v={props.v}
+                  onHSVChange={props.onHSVChange}
+                  onHSVChangeComplete={props.onHSVChangeComplete}/>
+              <Spacer/>
+          </>
+      }
+      {(props.isTWLamp || props.isDIMLamp || (!props.isColorMode)) &&
+          <>
+            {state.hasSegmentControl && <Spacer height={cx(10)}/>}
+              <ColorTempAdjustView
+                  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/>
+          </>
+      }
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
-    segmentControl: {
-        marginHorizontal: cx(16),
-    },
+  segmentControl: {
+    marginHorizontal: cx(16),
+  },
 })
 
 export default LampAdjustView

package/src/components/LinearGradientLine.tsx

@@ -1,65 +1,65 @@
-import { LinearGradient } from 'tuya-panel-kit'
-import React, { useEffect } from 'react'
-import { Rect } from 'react-native-svg'
-import { StyleProp, View } from 'react-native'
-import { useReactive } from 'ahooks'
+import {LinearGradient} from 'tuya-panel-kit'
+import React, {useEffect} from 'react'
+import {Rect} from 'react-native-svg'
+import {StyleProp, View} from 'react-native'
+import {useReactive} from 'ahooks'
 
 interface LinearGradientLineProps extends StyleProp<any> {
-    width: number
-    height: number
-    colors: string[]
-    orientation?: 'vertical' | 'horizontal'
+  width: number
+  height: number
+  colors: string[]
+  orientation?: 'vertical' | 'horizontal'
 }
 
 const LinearGradientLine = (props: LinearGradientLineProps) => {
-    const { width, height } = props
+  const {width, height} = props
 
-    const state = useReactive({
-        x1: '0%',
-        y1: '50%',
-        x2: '100%',
-        y2: '50%',
-        stops: {},
-    })
+  const state = useReactive({
+    x1: '0%',
+    y1: '50%',
+    x2: '100%',
+    y2: '50%',
+    stops: {},
+  })
 
-    useEffect(() => {
-        if (props.orientation === 'vertical') {
-            state.x1 = '50%'
-            state.y1 = '0%'
-            state.x2 = '50%'
-            state.y2 = '100%'
-        } else {
-            state.x1 = '0%'
-            state.y1 = '50%'
-            state.x2 = '100%'
-            state.y2 = '50%'
-        }
-    }, [props.orientation])
+  useEffect(() => {
+    if (props.orientation === 'vertical') {
+      state.x1 = '50%'
+      state.y1 = '0%'
+      state.x2 = '50%'
+      state.y2 = '100%'
+    } else {
+      state.x1 = '0%'
+      state.y1 = '50%'
+      state.x2 = '100%'
+      state.y2 = '50%'
+    }
+  }, [props.orientation])
 
-    useEffect(() => {
-        const p = (1 / (props.colors.length - 1)) * 100
-        let pc = 0
-        props.colors.forEach(color => {
-            state.stops[`${pc}%`] = color
-            pc += p
-        })
-        console.log('LinearGradientLine colors', JSON.stringify(state.stops))
-    }, [props.colors])
+  useEffect(() => {
+    const p = (1 / (props.colors.length - 1)) * 100
+    let pc = 0
+    props.colors.forEach(color => {
+      state.stops[`${pc}%`] = color
+      pc += p
+    })
+    console.log('LinearGradientLine colors', JSON.stringify(state.stops))
+  }, [props.colors])
 
-    return (
-        <View style={[{ width, height, overflow: 'hidden' }, props.style]}>
-            <LinearGradient
-                gradientId="Gradient"
-                style={{ width, height }}
-                x1={state.x1}
-                y1={state.y1}
-                x2={state.x2}
-                y2={state.y2}
-                stops={state.stops}>
-                <Rect width={width} height={height} />
-            </LinearGradient>
-        </View>
-    )
+  return (
+    <View style={[{width, height, overflow: 'hidden'}, props.style]}>
+      <LinearGradient
+        gradientId="Gradient"
+        style={{width, height}}
+        x1={state.x1}
+        y1={state.y1}
+        x2={state.x2}
+        y2={state.y2}
+        stops={state.stops}>
+        <Rect width={width} height={height}/>
+      </LinearGradient>
+    </View>
+  )
 }
 
 export default LinearGradientLine

package/src/components/MoodColorsLine.d.ts

@@ -0,0 +1,9 @@
+export declare type MoodColorsLineType = 'gradient' | 'separate';
+interface MoodColorsLineProps {
+    width?: number;
+    height?: number;
+    type: MoodColorsLineType;
+    colors: string[];
+}
+export default function MoodColorsLine(props: MoodColorsLineProps): JSX.Element;
+export {};

package/src/components/MoodColorsLine.tsx

@@ -0,0 +1,38 @@
+import LinearGradientLine from './LinearGradientLine'
+import React from 'react'
+import {Utils} from 'tuya-panel-kit'
+import {StyleSheet} from 'react-native'
+import ColorsLine from './ColorsLine'
+
+const cx = Utils.RatioUtils.convertX
+
+export type MoodColorsLineType = 'gradient' | 'separate'
+
+interface MoodColorsLineProps {
+  width?: number
+  height?: number
+  type: MoodColorsLineType
+  colors: string[]
+}
+
+export default function MoodColorsLine(props: MoodColorsLineProps) {
+  const width = props.width || cx(295)
+  const height = props.height || cx(24)
+  if (props.type === 'separate' || props.colors.length < 2) {
+    return (<ColorsLine colors={props.colors} style={{width, height}}/>)
+  } else {
+    return (
+      <LinearGradientLine
+        width={width}
+        height={height}
+        style={styles.gradient}
+        colors={props.colors}/>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  gradient: {
+    borderRadius: cx(8),
+  },
+})