@ledvance/base 1.1.13 → 1.1.15

package/src/components/ldvSlider.tsx

@@ -1,104 +1,104 @@
-import { useReactive } from "ahooks";
-import React, { useEffect } from "react";
-import { StyleSheet, View, Text, StyleProp, ViewStyle, TextStyle } from 'react-native'
-import { Slider, Utils } from "tuya-panel-kit";
+import {useReactive} from 'ahooks'
+import React, {useEffect} from 'react'
+import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native'
+import {Slider, Utils} from 'tuya-panel-kit'
 
-const cx = Utils.RatioUtils.convertX;
+const cx = Utils.RatioUtils.convertX
 
 interface LdvSliderProps {
-    title: string,
-    value: number,
-    min?: number | undefined,
-    max?: number | undefined,
-    onValueChange?: (number) => void | undefined,
-    onSlidingComplete: (number) => void,
-    style?: StyleProp<ViewStyle> | undefined,
-    sliderStyle?: StyleProp<ViewStyle> | undefined
-    subTitleStr?: string
-    titleStyle?: StyleProp<TextStyle> | undefined
+  title: string,
+  value: number,
+  min?: number | undefined,
+  max?: number | undefined,
+  onValueChange?: (v: number) => void | undefined,
+  onSlidingComplete: (v: number) => void,
+  style?: StyleProp<ViewStyle> | undefined,
+  sliderStyle?: StyleProp<ViewStyle> | undefined
+  subTitleStr?: string
+  titleStyle?: StyleProp<TextStyle> | undefined
 }
 
 const LdvSlider = (props: LdvSliderProps) => {
-    const { value, onSlidingComplete, min, max, sliderStyle, subTitleStr, titleStyle, onValueChange } = props;
+  const {value, onSlidingComplete, min, max, sliderStyle, subTitleStr, titleStyle, onValueChange} = props
 
-    const mMax = max || 100;
-    const mMin = min || 1;
-    const state = useReactive({
-        value: value,
-    })
-    useEffect(() => {
-        state.value = value
-    }, [value])
-    return (
-        <View style={[styles.container, props.style]}>
-            <View style={styles.titleBg}>
-                <Text style={[styles.title, titleStyle]}>
-                    {props.title}
-                </Text>
-                <Text style={styles.valueText}>
-                    {subTitleStr ? subTitleStr : state.value + "%"}
-                </Text>
-            </View>
-            <Slider.Horizontal
-                style={[styles.slider, sliderStyle]}
-                styles={{ thumb: styles.thumb }}
-                maximumValue={mMax}
-                minimumValue={mMin}
-                value={state.value}
-                stepValue={1}
-                canTouchTrack={true}
-                minimumTrackTintColor={"#666"}
-                maximumTrackTintColor={"rgba(120, 120, 128, 0.2)"}
-                onValueChange={(value) => {
-                    state.value = value
-                    onValueChange && onValueChange(value);
-                }}
-                onSlidingComplete={onSlidingComplete}
-            />
-        </View>
-    );
-};
+  const mMax = max || 100
+  const mMin = min || 1
+  const state = useReactive({
+    value: value,
+  })
+  useEffect(() => {
+    state.value = value
+  }, [value])
+  return (
+    <View style={[styles.container, props.style]}>
+      <View style={styles.titleBg}>
+        <Text style={[styles.title, titleStyle]}>
+          {props.title}
+        </Text>
+        <Text style={styles.valueText}>
+          {subTitleStr ? subTitleStr : state.value + '%'}
+        </Text>
+      </View>
+      <Slider.Horizontal
+        style={[styles.slider, sliderStyle]}
+        styles={{thumb: styles.thumb}}
+        maximumValue={mMax}
+        minimumValue={mMin}
+        value={state.value}
+        stepValue={1}
+        canTouchTrack={true}
+        minimumTrackTintColor={'#666'}
+        maximumTrackTintColor={'rgba(120, 120, 128, 0.2)'}
+        onValueChange={(value) => {
+          state.value = value
+          onValueChange && onValueChange(value)
+        }}
+        onSlidingComplete={onSlidingComplete}
+      />
+    </View>
+  )
+}
 
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: "column",
-        paddingHorizontal: cx(16)
-    },
-    titleBg: {
-        flexDirection: "row",
-        justifyContent: "space-between"
-    },
-    valueText: {
-        marginTop: cx(10),
-        fontSize: cx(14),
-        color: "#000",
-        fontFamily: "helvetica_neue_lt_std_roman"
-    },
-    title: {
-        marginTop: cx(10),
-        fontSize: cx(14),
-        color: "#000",
-        fontFamily: "helvetica_neue_lt_std_roman"
-    },
-    slider: {
-        marginTop: cx(8),
-        height: cx(28),
-        justifyContent: "center"
+  container: {
+    flexDirection: 'column',
+    paddingHorizontal: cx(16),
+  },
+  titleBg: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  valueText: {
+    marginTop: cx(10),
+    fontSize: cx(14),
+    color: '#000',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  title: {
+    marginTop: cx(10),
+    fontSize: cx(14),
+    color: '#000',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  slider: {
+    marginTop: cx(8),
+    height: cx(28),
+    justifyContent: 'center',
+  },
+  thumb: {
+    backgroundColor: '#fff',
+    width: cx(28),
+    height: cx(28),
+    borderRadius: cx(14),
+    shadowColor: '#000000',
+    shadowOpacity: 0.2,
+    elevation: cx(8),
+    shadowRadius: cx(8),
+    shadowOffset: {
+      width: 0,
+      height: cx(4),
     },
-    thumb: {
-        backgroundColor: "#fff",
-        width: cx(28),
-        height: cx(28),
-        borderRadius: cx(14),
-        shadowColor: "#000000",
-        shadowOpacity: 0.2,
-        elevation: cx(8),
-        shadowRadius: cx(8),
-        shadowOffset: {
-            width: 0,
-            height: cx(4)
-        }
-    }
-});
+  },
+})
 
-export default LdvSlider;
+export default LdvSlider

package/src/components/ldvSwitch.tsx

@@ -1,49 +1,49 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { SwitchButton, Utils } from 'tuya-panel-kit'
+import {StyleSheet, Text, View} from 'react-native'
+import {SwitchButton, Utils} from 'tuya-panel-kit'
 import Spacer from './Spacer'
 
-const { convertX: cx } = Utils.RatioUtils
+const {convertX: cx} = Utils.RatioUtils
 
 interface Prop {
-    title: string
-    color: string
-    colorAlpha: number
-    enable: boolean
-    setEnable: any
+  title: string
+  color: string
+  colorAlpha: number
+  enable: boolean
+  setEnable: any
 }
 
 const LdvSwitch = (props: Prop) => {
-    const { title, color, colorAlpha, enable, setEnable } = props
-    return (
-        <View style={styles.titleBGView}>
-            <Text style={styles.title}>{title}</Text>
-            <View style={[styles.colorBlock, { backgroundColor: color, opacity: colorAlpha }]} />
-            <Spacer style={{ flex: 1 }} height={0} width={0} />
-            <SwitchButton value={enable} onValueChange={setEnable} />
-        </View>
-    )
+  const {title, color, colorAlpha, enable, setEnable} = props
+  return (
+    <View style={styles.titleBGView}>
+      <Text style={styles.title}>{title}</Text>
+      <View style={[styles.colorBlock, {backgroundColor: color, opacity: colorAlpha}]}/>
+      <Spacer style={{flex: 1}} height={0} width={0}/>
+      <SwitchButton value={enable} onValueChange={setEnable}/>
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
-    titleBGView: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: cx(16),
-    },
-    colorBlock: {
-        width: cx(20),
-        height: cx(20),
-        marginStart: cx(12),
-        borderRadius: cx(4),
-    },
-    title: {
-        color: '#000',
-        fontSize: cx(16),
-        // fontFamily: 'helvetica_neue_lt_std_bd',
-        fontWeight:'bold',
-        paddingVertical: cx(16),
-    },
+  titleBGView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: cx(16),
+  },
+  colorBlock: {
+    width: cx(20),
+    height: cx(20),
+    marginStart: cx(12),
+    borderRadius: cx(4),
+  },
+  title: {
+    color: '#000',
+    fontSize: cx(16),
+    // fontFamily: 'helvetica_neue_lt_std_bd',
+    fontWeight: 'bold',
+    paddingVertical: cx(16),
+  },
 })
 
 export default LdvSwitch

package/src/components/ldvTemperatureSlider.tsx

@@ -1,140 +1,140 @@
-import React, { useEffect } from 'react'
-import { StyleProp, StyleSheet, Text, TextProps, View, ViewStyle } from 'react-native'
-import { LinearGradient, Slider, Utils } from 'tuya-panel-kit'
-import { Rect } from 'react-native-svg'
-import { useReactive } from 'ahooks'
+import React, {useEffect} from 'react'
+import {StyleProp, StyleSheet, Text, TextProps, View, ViewStyle} from 'react-native'
+import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
+import {Rect} from 'react-native-svg'
+import {useReactive} from 'ahooks'
 
 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)',
 }
 
 interface LdvTemperatureSliderProps {
-    title: string
-    onSlidingComplete: (number) => void
-    thumbColor: string
-    value: number
-    width?: number | undefined
-    style?: StyleProp<ViewStyle> | undefined
-    titleStyle?: StyleProp<TextProps> | undefined
-    subTitleStr?: string | undefined
+  title: string
+  onSlidingComplete: (number) => void
+  thumbColor: string
+  value: number
+  width?: number | undefined
+  style?: StyleProp<ViewStyle> | undefined
+  titleStyle?: StyleProp<TextProps> | undefined
+  subTitleStr?: string | undefined
 }
 
 const LdvTemperatureSlider = (props: LdvTemperatureSliderProps) => {
-    const { title, onSlidingComplete, thumbColor, value, titleStyle } = props
-    let dataSource = temperatures
-    let max = 100
-    let min = 0
-    const width = props.width || (Utils.RatioUtils.width - cx(80))
+  const {title, onSlidingComplete, thumbColor, value, titleStyle} = props
+  let dataSource = temperatures
+  let max = 100
+  let min = 0
+  const width = props.width || (Utils.RatioUtils.width - cx(80))
 
-    const state = useReactive({
-        value: value,
-    })
-    useEffect(() => {
-        state.value = value
-    }, [value])
+  const state = useReactive({
+    value: value,
+  })
+  useEffect(() => {
+    state.value = value
+  }, [value])
 
-    return (
-        <View style={[styles.container, props.style]}>
-            <View style={styles.titleBg}>
-                <Text style={[styles.title, titleStyle]}>
-                    {title}
-                </Text>
+  return (
+    <View style={[styles.container, props.style]}>
+      <View style={styles.titleBg}>
+        <Text style={[styles.title, titleStyle]}>
+          {title}
+        </Text>
+      </View>
+      <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>
-            <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={(value) => {
-                    state.value = value
-                }}
-                onSlidingComplete={onSlidingComplete}
-            />
-        </View>
-    )
+          )
+        }}
+        onValueChange={(value) => {
+          state.value = value
+        }}
+        onSlidingComplete={onSlidingComplete}
+      />
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
-    container: {
-        height: cx(57),
-        flexDirection: 'column',
-        paddingHorizontal: cx(16),
-    },
-    titleBg: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-    },
-    valueText: {
-        marginTop: cx(10),
-        fontSize: cx(14),
-        color: '#000',
-        fontFamily: 'helvetica_neue_lt_std_roman',
-    },
-    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),
+  container: {
+    height: cx(57),
+    flexDirection: 'column',
+    paddingHorizontal: cx(16),
+  },
+  titleBg: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  valueText: {
+    marginTop: cx(10),
+    fontSize: cx(14),
+    color: '#000',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  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),
+  },
 })
 
 export default LdvTemperatureSlider

package/src/components/ldvTopBar.tsx

@@ -1,65 +1,65 @@
 import React from 'react'
-import { Image, Platform, Text, TouchableOpacity, View } from 'react-native'
-import { IconFont, Utils } from 'tuya-panel-kit'
+import {Image, Platform, Text, TouchableOpacity, View} from 'react-native'
+import {IconFont, Utils} from 'tuya-panel-kit'
 
 const backIcon = Platform.OS === 'ios' ? 'backIos' : 'backAndroid'
 
 const cx = Utils.RatioUtils.convertX
 
 interface TopBarProps {
-    title: string,
-    onBackPress: () => void,
-    rightButtonIcon?: any | {},
-    rightButtonStyle?: any | undefined | number,
-    onRightButtonPress?: (() => void) | undefined,
+  title: string,
+  onBackPress: () => void,
+  rightButtonIcon?: any | {},
+  rightButtonStyle?: any | undefined | number,
+  onRightButtonPress?: (() => void) | undefined,
 }
 
 const LDVTopBar = (props: TopBarProps) => {
-    const icon = typeof props.rightButtonIcon === 'number' ? props.rightButtonIcon : { uri: props.rightButtonIcon }
-    return (
-        <View
+  const icon = typeof props.rightButtonIcon === 'number' ? props.rightButtonIcon : {uri: props.rightButtonIcon}
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        height: cx(46),
+        alignItems: 'center',
+        marginTop: Platform.OS === 'ios' ? Utils.RatioUtils.statusBarHeight : 0,
+      }}>
+      <TouchableOpacity onPress={props.onBackPress}>
+        <View style={{flexDirection: 'row', height: cx(46), marginHorizontal: cx(20), alignItems: 'center'}}>
+          <IconFont size={cx(16)} color={'#f60'} name={backIcon}/>
+          <View style={{width: cx(5)}}/>
+          <Text
             style={{
-                flexDirection: 'row',
-                height: cx(46),
-                alignItems: 'center',
-                marginTop: Platform.OS === 'ios' ? Utils.RatioUtils.statusBarHeight : 0,
-            }}>
-            <TouchableOpacity onPress={props.onBackPress}>
-                <View style={{ flexDirection: 'row', height: cx(46), marginHorizontal: cx(20), alignItems: 'center' }}>
-                    <IconFont size={cx(16)} color={'#f60'} name={backIcon} />
-                    <View style={{ width: cx(5) }} />
-                    <Text
-                        style={{
-                            maxWidth: cx(290),
-                            color: '#f60',
-                            fontSize: cx(16),
-                            fontFamily: 'helvetica_neue_lt_std_roman',
-                        }}>{props.title}</Text>
-                </View>
-            </TouchableOpacity>
-            <View style={{ flex: 1 }} />
-            {!!props.rightButtonIcon &&
-                <TouchableOpacity
-                    onPress={props.onRightButtonPress}>
-                    <View
-                        style={{
-                            width: cx(44),
-                            height: cx(44),
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                        }}>
-                        <Image
-                            style={[
-                                { width: cx(28), height: cx(28) },
-                                props.rightButtonStyle,
-                            ]}
-                            source={icon} />
-                    </View>
-                </TouchableOpacity>
-            }
-            <View style={{ width: cx(12) }} />
+              maxWidth: cx(290),
+              color: '#f60',
+              fontSize: cx(16),
+              fontFamily: 'helvetica_neue_lt_std_roman',
+            }}>{props.title}</Text>
         </View>
-    )
+      </TouchableOpacity>
+      <View style={{flex: 1}}/>
+      {!!props.rightButtonIcon &&
+          <TouchableOpacity
+              onPress={props.onRightButtonPress}>
+              <View
+                  style={{
+                    width: cx(44),
+                    height: cx(44),
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}>
+                  <Image
+                      style={[
+                        {width: cx(28), height: cx(28)},
+                        props.rightButtonStyle,
+                      ]}
+                      source={icon}/>
+              </View>
+          </TouchableOpacity>
+      }
+      <View style={{width: cx(12)}}/>
+    </View>
+  )
 }
 
 export default LDVTopBar