@ledvance/base 1.1.13 → 1.1.15

package/src/components/ldvColorBrightness.tsx

@@ -3,16 +3,16 @@ import LdvSlider from 'components/ldvSlider'
 import I18n from '../i18n/index'
 
 export default function LdvColorBrightness(props) {
-    const {value, onSlidingComplete} = props
-    const renderBrightness = () => {
-        return (
-            <LdvSlider
-                style={props.style}
-                title={I18n.getLang('light_sources_tile_dim_lighting_brightness')}
-                value={value}
-                onSlidingComplete={onSlidingComplete}
-                onValueChange={props.onValueChange}/>
-        )
-    }
-    return renderBrightness()
+  const {value, onSlidingComplete} = props
+  const renderBrightness = () => {
+    return (
+      <LdvSlider
+        style={props.style}
+        title={I18n.getLang('light_sources_tile_dim_lighting_brightness')}
+        value={value}
+        onSlidingComplete={onSlidingComplete}
+        onValueChange={props.onValueChange}/>
+    )
+  }
+  return renderBrightness()
 }

package/src/components/ldvColorSlider.tsx

@@ -1,132 +1,132 @@
 import React from 'react'
-import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
-import { LinearGradient, Slider, Utils } from 'tuya-panel-kit'
-import { Rect } from 'react-native-svg'
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
+import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
+import {Rect} from 'react-native-svg'
 
 const cx = Utils.RatioUtils.convertX
 
 const temperatures = {
-    '0%': 'rgb(254, 172, 90)',
-    '22%': 'rgb(249, 209, 164)',
-    '41%': 'rgb(254, 244, 223)',
-    '60%': 'rgb(252, 250, 242)',
-    '80%': 'rgb(226, 235, 248)',
-    '100%': 'rgb(194, 217, 254)',
+  '0%': 'rgb(254, 172, 90)',
+  '22%': 'rgb(249, 209, 164)',
+  '41%': 'rgb(254, 244, 223)',
+  '60%': 'rgb(252, 250, 242)',
+  '80%': 'rgb(226, 235, 248)',
+  '100%': 'rgb(194, 217, 254)',
 }
 
 const colors = {
-    '0%': 'rgb(255, 0, 0)',
-    '17%': 'rgb(249, 238, 0)',
-    '35%': 'rgb(96, 255, 66)',
-    '55%': 'rgb(0, 249, 255)',
-    '65%': 'rgb(43, 0, 255)',
-    '80%': 'rgb(180, 0, 255)',
-    '100%': 'rgb(255, 0, 0)',
+  '0%': 'rgb(255, 0, 0)',
+  '17%': 'rgb(249, 238, 0)',
+  '35%': 'rgb(96, 255, 66)',
+  '55%': 'rgb(0, 249, 255)',
+  '65%': 'rgb(43, 0, 255)',
+  '80%': 'rgb(180, 0, 255)',
+  '100%': 'rgb(255, 0, 0)',
 }
 
 export const TEMP_KEY = 'temperature'
 
 interface LdvColorSliderProps {
-    title: string,
-    type: string,
-    onValueChange?: (number) => void | undefined,
-    onSlidingComplete: (number) => void,
-    thumbColor: string,
-    value: number,
-    width?: number | undefined,
-    style?: StyleProp<ViewStyle> | undefined
+  title: string,
+  type: string,
+  onValueChange?: (number) => void | undefined,
+  onSlidingComplete: (number) => void,
+  thumbColor: string,
+  value: number,
+  width?: number | undefined,
+  style?: StyleProp<ViewStyle> | undefined
 }
 
 const LdvColorSlider = (props: LdvColorSliderProps) => {
-    const { title, type, onSlidingComplete, thumbColor, value } = props
-    let dataSource = type === TEMP_KEY ? temperatures : colors
-    let max = type === TEMP_KEY ? 100 : 359
-    let min = type === TEMP_KEY ? 0 : 0
-    const width = props.width || (Utils.RatioUtils.width - cx(80))
-    return (
-        <View style={[styles.container, props.style]}>
-            <Text style={styles.title}>
-                {title}
-            </Text>
-            <Slider.Horizontal
-                style={{ ...styles.shadeSlider, width }}
-                styles={{ track: styles.sliderTrack, thumb: { ...styles.shadeThumb, backgroundColor: thumbColor } }}
-                maximumValue={max}
-                minimumValue={min}
-                value={value}
-                stepValue={1}
-                canTouchTrack={true}
-                theme={{
-                    trackRadius: cx(15),
-                }}
-                onlyMaximumTrack={true}
-                renderMaximumTrack={() => {
-                    return (
-                        <View style={{ flex: 1, borderRadius: cx(15) }}>
-                            <LinearGradient
-                                style={{ ...styles.sliderLinearGradient, width }}
-                                x1="0%"
-                                y1="0%"
-                                x2="100%"
-                                y2="0%"
-                                stops={dataSource}>
-                                <Rect {...styles.sliderLinearGradient} width={width} />
-                            </LinearGradient>
-                        </View>
-                    )
-                }}
-                onValueChange={props.onValueChange}
-                onSlidingComplete={onSlidingComplete}
-            />
-        </View>
-    )
+  const {title, type, onSlidingComplete, thumbColor, value} = props
+  let dataSource = type === TEMP_KEY ? temperatures : colors
+  let max = type === TEMP_KEY ? 100 : 359
+  let min = type === TEMP_KEY ? 0 : 0
+  const width = props.width || (Utils.RatioUtils.width - cx(80))
+  return (
+    <View style={[styles.container, props.style]}>
+      <Text style={styles.title}>
+        {title}
+      </Text>
+      <Slider.Horizontal
+        style={{...styles.shadeSlider, width}}
+        styles={{track: styles.sliderTrack, thumb: {...styles.shadeThumb, backgroundColor: thumbColor}}}
+        maximumValue={max}
+        minimumValue={min}
+        value={value}
+        stepValue={1}
+        canTouchTrack={true}
+        theme={{
+          trackRadius: cx(15),
+        }}
+        onlyMaximumTrack={true}
+        renderMaximumTrack={() => {
+          return (
+            <View style={{flex: 1, borderRadius: cx(15)}}>
+              <LinearGradient
+                style={{...styles.sliderLinearGradient, width}}
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="0%"
+                stops={dataSource}>
+                <Rect {...styles.sliderLinearGradient} width={width}/>
+              </LinearGradient>
+            </View>
+          )
+        }}
+        onValueChange={props.onValueChange}
+        onSlidingComplete={onSlidingComplete}
+      />
+    </View>
+  )
 }
 
 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),
+  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

package/src/components/ldvPickerView.tsx

@@ -1,91 +1,91 @@
 import React from 'react'
-import { StyleProp, StyleSheet, View, ViewStyle, Text } from 'react-native'
-import { Picker, Utils } from 'tuya-panel-kit'
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
+import {Picker, Utils} from 'tuya-panel-kit'
 import _ from 'lodash'
 
-const { convertX } = Utils.RatioUtils
+const {convertX} = Utils.RatioUtils
 
 const hours = _.times(24, (n) => _.padStart(n.toString(), 2, '0'))
 const minutes = _.times(60, (n) => _.padStart(n.toString(), 2, '0'))
 const pickerTheme = {
-    fontSize: 20,
+  fontSize: 20,
 }
 
 interface LdvPickerViewProps {
-    hour: string,
-    minute: string,
-    setHour: (string) => void,
-    setMinute: (string) => void,
-    style?: StyleProp<ViewStyle> | undefined,
-    unit?:string[]
+  hour: string,
+  minute: string,
+  setHour: (string) => void,
+  setMinute: (string) => void,
+  style?: StyleProp<ViewStyle> | undefined,
+  unit?: string[]
 }
 
 const LdvPickerView = (props: LdvPickerViewProps) => {
 
-    const { hour, minute, unit, setHour, setMinute } = props
+  const {hour, minute, unit, setHour, setMinute} = props
 
-    return (
-        <View style={[styles.pickerContainer, props.style]}>
-            <View style={styles.picContainer}>
-            <Picker
-                style={[styles.picker, styles.pickerLeft]}
-                theme={pickerTheme}
-                itemStyle={styles.pickerItem}
-                textSize={convertX(14)}
-                selectedValue={hour}
-                itemAlign={'center'}
-                onValueChange={value => setHour(value as string)}>
-                {hours.map((value) => (
-                    <Picker.Item key={value} value={value} label={value} />
-                ))}
-            </Picker>
-            {unit ? <View style={styles.pickerUnit}>
-                    <Text style={{ color: '#000', fontSize: convertX(18) }}>
-                        {unit[0]}
-                    </Text>
-                </View> : null}
-            </View>
-            <View style={styles.picContainer}>
-            <Picker
-                style={[styles.picker, styles.pickerLeft]}
-                theme={pickerTheme}
-                itemStyle={styles.pickerItem}
-                textSize={convertX(14)}
-                selectedValue={minute}
-                onValueChange={value => setMinute(value as string)}>
-                {minutes.map((value) => (
-                    <Picker.Item key={value} value={value} label={value} />
-                ))}   
-            </Picker>
-            {unit ? <View style={styles.pickerUnit}>
-                    <Text style={{ color: '#000', fontSize: convertX(18) }}>
-                        {unit[1]}
-                    </Text>
-                </View> : null}
-            </View>
-        </View>
-    )
+  return (
+    <View style={[styles.pickerContainer, props.style]}>
+      <View style={styles.picContainer}>
+        <Picker
+          style={[styles.picker, styles.pickerLeft]}
+          theme={pickerTheme}
+          itemStyle={styles.pickerItem}
+          textSize={convertX(14)}
+          selectedValue={hour}
+          itemAlign={'center'}
+          onValueChange={value => setHour(value as string)}>
+          {hours.map((value) => (
+            <Picker.Item key={value} value={value} label={value}/>
+          ))}
+        </Picker>
+        {unit ? <View style={styles.pickerUnit}>
+          <Text style={{color: '#000', fontSize: convertX(18)}}>
+            {unit[0]}
+          </Text>
+        </View> : null}
+      </View>
+      <View style={styles.picContainer}>
+        <Picker
+          style={[styles.picker, styles.pickerLeft]}
+          theme={pickerTheme}
+          itemStyle={styles.pickerItem}
+          textSize={convertX(14)}
+          selectedValue={minute}
+          onValueChange={value => setMinute(value as string)}>
+          {minutes.map((value) => (
+            <Picker.Item key={value} value={value} label={value}/>
+          ))}
+        </Picker>
+        {unit ? <View style={styles.pickerUnit}>
+          <Text style={{color: '#000', fontSize: convertX(18)}}>
+            {unit[1]}
+          </Text>
+        </View> : null}
+      </View>
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
-    pickerContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    picker: {
-        flex: 1,
-    },
-    pickerLeft: {},
-    pickerItem: {},
-    picContainer:{
-        flex: 1,
-        position: 'relative'
-    },
-    pickerUnit: {
-        position: 'absolute',
-        right: convertX(20),
-        top: '44%'
-    },
+  pickerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  picker: {
+    flex: 1,
+  },
+  pickerLeft: {},
+  pickerItem: {},
+  picContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  pickerUnit: {
+    position: 'absolute',
+    right: convertX(20),
+    top: '44%',
+  },
 })
 
 export default LdvPickerView

package/src/components/ldvPresetView.tsx

@@ -5,83 +5,83 @@ import {Utils} from 'tuya-panel-kit'
 const {convertX: cx} = Utils.RatioUtils
 
 const temperatures = [
-    {
-        color: 'rgb(253, 176, 97)',
-        value: 0,
-    },
-    {
-        color: 'rgb(249, 208, 162)',
-        value: 20,
-    },
-    {
-        color: 'rgb(254, 243, 221)',
-        value: 40,
-    },
-    {
-        color: 'rgb(246, 247, 244)',
-        value: 60,
-    },
-    {
-        color: 'rgb(231, 238, 247)',
-        value: 80,
-    },
-    {
-        color: 'rgb(194, 216, 251)',
-        value: 100,
-    },
+  {
+    color: 'rgb(253, 176, 97)',
+    value: 0,
+  },
+  {
+    color: 'rgb(249, 208, 162)',
+    value: 20,
+  },
+  {
+    color: 'rgb(254, 243, 221)',
+    value: 40,
+  },
+  {
+    color: 'rgb(246, 247, 244)',
+    value: 60,
+  },
+  {
+    color: 'rgb(231, 238, 247)',
+    value: 80,
+  },
+  {
+    color: 'rgb(194, 216, 251)',
+    value: 100,
+  },
 ]
 
 const colors = [
-    {
-        color: '#ff0000',
-    },
-    {
-        color: '#ff8700',
-    },
-    {
-        color: '#fff100',
-    },
-    {
-        color: '#00c931',
-    },
-    {
-        color: '#0025ff',
-    },
-    {
-        color: '#bb00ff',
-    },
+  {
+    color: '#ff0000',
+  },
+  {
+    color: '#ff8700',
+  },
+  {
+    color: '#fff100',
+  },
+  {
+    color: '#00c931',
+  },
+  {
+    color: '#0025ff',
+  },
+  {
+    color: '#bb00ff',
+  },
 ]
 
 const LdvPresetView = (props) => {
-    const {type, onPress} = props
-    let dataSource = type == 'temperature' ? temperatures : colors
-    return (
-        <View style={styles.container}>
-            {dataSource.map((item, index) =>
-                <TouchableOpacity
-                    key={index}
-                    style={[styles.item, {backgroundColor: item.color}]}
-                    onPress={() => {
-                        onPress(item)
-                    }}/>)}
-        </View>
-    )
+  const {type, onPress} = props
+  let dataSource = type == 'temperature' ? temperatures : colors
+  return (
+    <View style={styles.container}>
+      {dataSource.map((item, index) =>
+        <TouchableOpacity
+          key={index}
+          style={[styles.item, {backgroundColor: item.color}]}
+          onPress={() => {
+            onPress(item)
+          }}/>)}
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginHorizontal: cx(16),
-    },
-    item: {
-        width: cx(28),
-        height: cx(28),
-        borderRadius: cx(14),
-        borderWidth: cx(1),
-        borderColor: 'rgb(230, 231, 232)',
-    },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginHorizontal: cx(16),
+  },
+  item: {
+    width: cx(28),
+    height: cx(28),
+    borderRadius: cx(14),
+    borderWidth: cx(1),
+    borderColor: 'rgb(230, 231, 232)',
+  },
 })
 
 export default LdvPresetView

package/src/components/ldvSaturation.tsx

@@ -3,21 +3,21 @@ import LdvSlider from 'components/ldvSlider'
 import I18n from '../i18n/index'
 
 const LdvSaturation = (props) => {
-    const {value, onSlidingComplete} = props
+  const {value, onSlidingComplete} = props
 
-    const renderBrightness = () => {
-        return (
-            <LdvSlider
-                style={props.style}
-                title={I18n.getLang('light_sources_tile_rgb_lighting_saturation')}
-                value={value}
-                max={100}
-                min={0}
-                onSlidingComplete={onSlidingComplete}
-                onValueChange={props.onValueChange}/>
-        )
-    }
-    return renderBrightness()
+  const renderBrightness = () => {
+    return (
+      <LdvSlider
+        style={props.style}
+        title={I18n.getLang('light_sources_tile_rgb_lighting_saturation')}
+        value={value}
+        max={100}
+        min={0}
+        onSlidingComplete={onSlidingComplete}
+        onValueChange={props.onValueChange}/>
+    )
+  }
+  return renderBrightness()
 }
 
 export default LdvSaturation

package/src/components/ldvSlider.d.ts

@@ -1,11 +1,11 @@
-import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 interface LdvSliderProps {
     title: string;
     value: number;
     min?: number | undefined;
     max?: number | undefined;
-    onValueChange?: (number: any) => void | undefined;
-    onSlidingComplete: (number: any) => void;
+    onValueChange?: (v: number) => void | undefined;
+    onSlidingComplete: (v: number) => void;
     style?: StyleProp<ViewStyle> | undefined;
     sliderStyle?: StyleProp<ViewStyle> | undefined;
     subTitleStr?: string;