@ledvance/base 1.0.1

package/src/components/InfoText.d.ts

@@ -0,0 +1,10 @@
+import { ImageStyle, StyleProp, TextStyle, ViewProps } from 'react-native';
+interface InfoTextProps extends ViewProps {
+    icon: string;
+    text: string;
+    contentColor?: string;
+    iconStyle?: StyleProp<ImageStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+declare const InfoText: (props: InfoTextProps) => JSX.Element;
+export default InfoText;

package/src/components/InfoText.tsx

@@ -0,0 +1,44 @@
+import { Image, ImageStyle, StyleProp, StyleSheet, Text, TextStyle, View, ViewProps } from 'react-native'
+import React from 'react'
+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>
+}
+
+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 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',
+    },
+})
+
+export default InfoText

package/src/components/LampAdjustView.d.ts

@@ -0,0 +1,13 @@
+import { ColorAdjustViewProps } from './ColorAdjustView';
+import { ColorTempAdjustViewProps } from './ColorTempAdjustView';
+interface LampConfigViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
+    isRGBWLamp: boolean;
+    isRGBLamp: boolean;
+    isOnlyRGBLamp: boolean;
+    isTWLamp: boolean;
+    isDIMLamp: boolean;
+    isColorMode: boolean;
+    setIsColorMode: (isColorMode: boolean) => void;
+}
+declare const LampAdjustView: (props: LampConfigViewProps) => JSX.Element;
+export default LampAdjustView;

package/src/components/LampAdjustView.tsx

@@ -0,0 +1,76 @@
+import {StyleSheet, View} from 'react-native'
+import React from 'react'
+import {Utils} from 'tuya-panel-kit'
+import {useReactive} from 'ahooks'
+import Spacer from './Spacer'
+import ColorAdjustView, {ColorAdjustViewProps} from './ColorAdjustView'
+import ColorTempAdjustView, {ColorTempAdjustViewProps} from './ColorTempAdjustView'
+import SegmentControl from './segmentControl'
+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
+}
+
+const LampAdjustView = (props: LampConfigViewProps) => {
+
+    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>
+    )
+}
+
+const styles = StyleSheet.create({
+    segmentControl: {
+        marginHorizontal: cx(16),
+    },
+})
+
+export default LampAdjustView

package/src/components/LinearGradientLine.d.ts

@@ -0,0 +1,9 @@
+import { StyleProp } from 'react-native';
+interface LinearGradientLineProps extends StyleProp<any> {
+    width: number;
+    height: number;
+    colors: string[];
+    orientation?: 'vertical' | 'horizontal';
+}
+declare const LinearGradientLine: (props: LinearGradientLineProps) => JSX.Element;
+export default LinearGradientLine;

package/src/components/LinearGradientLine.tsx

@@ -0,0 +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'
+
+interface LinearGradientLineProps extends StyleProp<any> {
+    width: number
+    height: number
+    colors: string[]
+    orientation?: 'vertical' | 'horizontal'
+}
+
+const LinearGradientLine = (props: LinearGradientLineProps) => {
+    const { width, height } = props
+
+    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(() => {
+        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>
+    )
+}
+
+export default LinearGradientLine

package/src/components/Page.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+interface PageProps extends PropsWithChildren<ViewProps> {
+    backText: string;
+    onBackClick?: () => void;
+    headlineText?: string;
+    headlineIcon?: string;
+    onHeadlineIconClick?: () => void;
+}
+declare const Page: (props: PageProps) => JSX.Element;
+export default Page;

package/src/components/Page.tsx

@@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react'
+import { View, ViewProps } from 'react-native'
+import LDVTopBar from './ldvTopBar'
+import { useNavigation } from '@react-navigation/native'
+import LdvTopName from './ldvTopName'
+
+interface PageProps extends PropsWithChildren<ViewProps> {
+    backText: string
+    onBackClick?: () => void
+    headlineText?: string
+    headlineIcon?: string
+    onHeadlineIconClick?: () => void
+}
+
+const Page = (props: PageProps) => {
+    const navigation = useNavigation()
+
+    return (
+        <View style={[{ flex: 1 }, props.style]}>
+            <LDVTopBar
+                title={props.backText}
+                onBackPress={props.onBackClick || (() => {
+                    navigation.goBack()
+                })} />
+            {props.headlineText &&
+                <LdvTopName
+                    title={props.headlineText}
+                    rightIcon={props.headlineIcon}
+                    rightIconClick={props.onHeadlineIconClick} />}
+            {props.children}
+        </View>
+    )
+}
+
+export default Page

package/src/components/Spacer.d.ts

@@ -0,0 +1,7 @@
+import { ViewProps } from 'react-native';
+interface SpacerProps extends ViewProps {
+    width?: number;
+    height?: number;
+}
+export default function Spacer(props: SpacerProps): JSX.Element;
+export {};

package/src/components/Spacer.tsx

@@ -0,0 +1,14 @@
+import { View, ViewProps } from 'react-native'
+import React from 'react'
+import { Utils } from 'tuya-panel-kit'
+
+const cx = Utils.RatioUtils.convertX
+
+interface SpacerProps extends ViewProps {
+    width?: number
+    height?: number
+}
+
+export default function Spacer(props: SpacerProps) {
+    return <View style={[{ width: props.width, height: props.height || cx(20) }, props.style]} />
+}

package/src/components/Tag.d.ts

@@ -0,0 +1,8 @@
+import { ViewProps } from 'react-native';
+interface TagProps extends ViewProps {
+    checked: boolean;
+    text: string;
+    onCheckedChange: (boolean: any) => void;
+}
+declare const Tag: (props: TagProps) => JSX.Element;
+export default Tag;

package/src/components/Tag.tsx

@@ -0,0 +1,57 @@
+import { Image, StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
+import React from 'react'
+import { Utils } from 'tuya-panel-kit'
+import res from '../res'
+
+const cx = Utils.RatioUtils.convertX
+
+interface TagProps extends ViewProps {
+    checked: boolean
+    text: string
+    onCheckedChange: (boolean) => void
+}
+
+const Tag = (props: TagProps) => {
+    return (
+        <TouchableOpacity
+            onPress={() => {
+                props.onCheckedChange(!props.checked)
+            }}>
+            <View style={[styles.root, props.checked ? { backgroundColor: '#ffe0d4' } : {}, props.style]}>
+                <Text style={[styles.text, { marginEnd: cx(props.checked ? 4 : 12) }]}>{props.text}</Text>
+                {
+                    props.checked &&
+                    <Image
+                        source={{ uri: res.ic_arrows_nav_clear }}
+                        style={styles.icon} />
+                }
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+const styles = StyleSheet.create({
+    root: {
+        height: cx(24),
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: cx(1),
+        borderColor: '#ff6600',
+        borderRadius: cx(12),
+    },
+    text: {
+        marginStart: cx(12),
+        color: '#ff6600',
+        fontSize: cx(14),
+        fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    icon: {
+        width: cx(12),
+        height: cx(12),
+        marginEnd: cx(6),
+        tintColor: '#F60',
+    },
+})
+
+export default Tag

package/src/components/TextButton.d.ts

@@ -0,0 +1,9 @@
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+interface TextButtonProps {
+    text: string;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+export default function TextButton(props: TextButtonProps): JSX.Element;
+export {};

package/src/components/TextButton.tsx

@@ -0,0 +1,32 @@
+import { TouchableOpacity, Text, StyleProp, ViewStyle, TextStyle } from 'react-native'
+import React from 'react'
+import { Utils } from 'tuya-panel-kit'
+
+const cx = Utils.RatioUtils.convertX
+
+interface TextButtonProps {
+    text: string,
+    onPress: () => void,
+    style?: StyleProp<ViewStyle>
+    textStyle?: StyleProp<TextStyle>
+}
+
+export default function TextButton(props: TextButtonProps) {
+    return (
+        <TouchableOpacity
+            style={[{
+                justifyContent: 'center',
+                alignItems: 'center',
+                alignSelf: 'center',
+                paddingVertical: cx(8),
+                paddingHorizontal: cx(12),
+            }, props.style]}
+            onPress={props.onPress}>
+            <Text style={[{
+                color: '#f60',
+                fontSize: cx(14),
+                fontFamily: 'helvetica_neue_lt_std_roman',
+            }, props.textStyle]}>{props.text}</Text>
+        </TouchableOpacity>
+    )
+}

package/src/components/TextField.d.ts

@@ -0,0 +1,5 @@
+import { TextInputProps } from 'react-native';
+interface TextFieldProps extends TextInputProps {
+}
+declare const TextField: (props: TextFieldProps) => JSX.Element;
+export default TextField;

package/src/components/TextField.tsx

@@ -0,0 +1,74 @@
+import { Image, StyleSheet, Text, TextInput, TextInputProps, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import { Utils } from 'tuya-panel-kit'
+import res from '../res'
+
+const cx = Utils.RatioUtils.convertX
+
+interface TextFieldProps extends TextInputProps {
+
+}
+
+const TextField = (props: TextFieldProps) => {
+    return (
+        <View style={props.style}>
+            <Text style={[styles.topTip, { opacity: (!!props.value) ? 1 : 0 }]}>{props.placeholder}</Text>
+            <View style={styles.textInputGroup}>
+                <TextInput{...props} style={styles.textInput} />
+                {!!props.value &&
+                    <TouchableOpacity
+                        style={styles.iconTouchable}
+                        onPress={() => {
+                            props.onChangeText && props.onChangeText('')
+                        }}>
+                        <Image source={{ uri: res.ic_cancel }} style={styles.icon} />
+                    </TouchableOpacity>
+                }
+                <View style={styles.line} />
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    topTip: {
+        marginTop: cx(5),
+        fontSize: cx(12),
+        marginStart: cx(13),
+        color: '#666',
+        fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    textInputGroup: {
+        flexDirection: 'row',
+        borderRadius: cx(4),
+        backgroundColor: '#f6f6f6',
+        alignItems: 'center',
+    },
+    textInput: {
+        flex: 1,
+        height: cx(44),
+        marginStart: cx(16),
+        marginEnd: cx(6),
+        fontSize: cx(16),
+        color: '#000',
+        fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    iconTouchable: {
+        marginEnd: cx(18),
+        padding: cx(4),
+    },
+    icon: {
+        width: cx(16),
+        height: cx(16),
+    },
+    line: {
+        height: 1,
+        position: 'absolute',
+        start: cx(4),
+        end: cx(4),
+        bottom: 0,
+        backgroundColor: '#cbcbcb',
+    },
+})
+
+export default TextField

package/src/components/connect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type ChildrenType = (props: any) => React.ReactElement | null;
+declare const _default: import("react-redux").ConnectedComponent<({ children, ...props }: {
+    children: ChildrenType;
+}) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null, Pick<{
+    children: ChildrenType;
+}, "children"> & {
+    mapStateToProps: any;
+}>;
+export default _default;

package/src/components/connect.tsx

@@ -0,0 +1,20 @@
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import React from 'react'
+
+type ChildrenType = (props: any) => React.ReactElement | null;
+
+const Connect = ({children, ...props}: { children: ChildrenType }) => children(props)
+
+export default connect(
+    (state: any, {mapStateToProps}: { mapStateToProps: any }) => mapStateToProps(state),
+    (dispatch: any, {mapDispatchToProps}: { mapDispatchToProps: any }) => {
+        if (typeof mapDispatchToProps === 'object') {
+            return bindActionCreators(mapDispatchToProps, dispatch)
+        }
+        if (typeof mapDispatchToProps === 'function') {
+            return mapDispatchToProps(dispatch)
+        }
+        return {}
+    },
+)(Connect)

package/src/components/ldvColorBrightness.d.ts

@@ -0,0 +1 @@
+export default function LdvColorBrightness(props: any): JSX.Element;

package/src/components/ldvColorBrightness.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+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()
+}

package/src/components/ldvColorSlider.d.ts

@@ -0,0 +1,14 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export declare const TEMP_KEY = "temperature";
+interface LdvColorSliderProps {
+    title: string;
+    type: string;
+    onValueChange?: (number: any) => void | undefined;
+    onSlidingComplete: (number: any) => void;
+    thumbColor: string;
+    value: number;
+    width?: number | undefined;
+    style?: StyleProp<ViewStyle> | undefined;
+}
+declare const LdvColorSlider: (props: LdvColorSliderProps) => JSX.Element;
+export default LdvColorSlider;