@ledvance/base 1.0.1

package/src/components/ldvColorSlider.tsx

@@ -0,0 +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'
+
+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)',
+}
+
+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)',
+}
+
+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
+}
+
+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 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),
+    },
+})
+
+export default LdvColorSlider

package/src/components/ldvPickerView.d.ts

@@ -0,0 +1,10 @@
+import { StyleProp, ViewStyle } from 'react-native';
+interface LdvPickerViewProps {
+    hour: string;
+    minute: string;
+    setHour: (string: any) => void;
+    setMinute: (string: any) => void;
+    style?: StyleProp<ViewStyle> | undefined;
+}
+declare const LdvPickerView: (props: LdvPickerViewProps) => JSX.Element;
+export default LdvPickerView;

package/src/components/ldvPickerView.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { Picker, Utils } from 'tuya-panel-kit'
+import _ from 'lodash'
+
+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,
+}
+
+interface LdvPickerViewProps {
+    hour: string,
+    minute: string,
+    setHour: (string) => void,
+    setMinute: (string) => void,
+    style?: StyleProp<ViewStyle> | undefined
+}
+
+const LdvPickerView = (props: LdvPickerViewProps) => {
+
+    const { hour, minute, setHour, setMinute } = props
+
+    return (
+        <View style={[styles.pickerContainer, props.style]}>
+            <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>
+            <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>
+
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    pickerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    picker: {
+        flex: 1,
+    },
+    pickerLeft: {},
+    pickerItem: {},
+})
+
+export default LdvPickerView

package/src/components/ldvPresetView.d.ts

@@ -0,0 +1,2 @@
+declare const LdvPresetView: (props: any) => JSX.Element;
+export default LdvPresetView;

package/src/components/ldvPresetView.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { StyleSheet, View, TouchableOpacity } from 'react-native'
+
+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,
+    },
+]
+
+const colors = [
+    {
+        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) => {
+            return (
+                <TouchableOpacity
+                    key={index}
+                    style={[styles.item, { backgroundColor: item.color }]}
+                    onPress={() => {
+                        console.log('LdvPresetView')
+                        onPress(item)
+                    }} />
+            )
+        })}
+    </View>)
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginHorizontal: 16,
+    },
+
+    item: {
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: 'rgb(230, 231, 232)',
+    },
+})
+
+export default LdvPresetView

package/src/components/ldvSaturation.d.ts

@@ -0,0 +1,2 @@
+declare const LdvSaturation: (props: any) => JSX.Element;
+export default LdvSaturation;

package/src/components/ldvSaturation.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import LdvSlider from 'components/ldvSlider'
+import I18n from '../i18n/index'
+
+const LdvSaturation = (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()
+}
+
+export default LdvSaturation

package/src/components/ldvSlider.d.ts

@@ -0,0 +1,15 @@
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+interface LdvSliderProps {
+    title: string;
+    value: number;
+    min?: number | undefined;
+    max?: number | undefined;
+    onValueChange?: (number: any) => void | undefined;
+    onSlidingComplete: (number: any) => void;
+    style?: StyleProp<ViewStyle> | undefined;
+    sliderStyle?: StyleProp<ViewStyle> | undefined;
+    subTitleStr?: string;
+    titleStyle?: StyleProp<TextStyle> | undefined;
+}
+declare const LdvSlider: (props: LdvSliderProps) => JSX.Element;
+export default LdvSlider;

package/src/components/ldvSlider.tsx

@@ -0,0 +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";
+
+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
+}
+
+const LdvSlider = (props: LdvSliderProps) => {
+    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 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"
+    },
+    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;

package/src/components/ldvSwitch.d.ts

@@ -0,0 +1,9 @@
+interface Prop {
+    title: string;
+    color: string;
+    colorAlpha: number;
+    enable: boolean;
+    setEnable: any;
+}
+declare const LdvSwitch: (props: Prop) => JSX.Element;
+export default LdvSwitch;

package/src/components/ldvSwitch.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import Spacer from './Spacer'
+
+const { convertX: cx } = Utils.RatioUtils
+
+interface Prop {
+    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 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',
+        paddingVertical: cx(16),
+    },
+})
+
+export default LdvSwitch

package/src/components/ldvTemperatureSlider.d.ts

@@ -0,0 +1,13 @@
+import { StyleProp, TextProps, ViewStyle } from 'react-native';
+interface LdvTemperatureSliderProps {
+    title: string;
+    onSlidingComplete: (number: any) => void;
+    thumbColor: string;
+    value: number;
+    width?: number | undefined;
+    style?: StyleProp<ViewStyle> | undefined;
+    titleStyle?: StyleProp<TextProps> | undefined;
+    subTitleStr?: string | undefined;
+}
+declare const LdvTemperatureSlider: (props: LdvTemperatureSliderProps) => JSX.Element;
+export default LdvTemperatureSlider;

package/src/components/ldvTemperatureSlider.tsx

@@ -0,0 +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'
+
+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)',
+}
+
+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
+}
+
+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 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>
+            </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>
+    )
+}
+
+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),
+    },
+})
+
+export default LdvTemperatureSlider

package/src/components/ldvTopBar.d.ts

@@ -0,0 +1,9 @@
+interface TopBarProps {
+    title: string;
+    onBackPress: () => void;
+    rightButtonIcon?: any | {};
+    rightButtonStyle?: any | undefined;
+    onRightButtonPress?: (() => void) | undefined;
+}
+declare const LDVTopBar: (props: TopBarProps) => JSX.Element;
+export default LDVTopBar;