@ledvance/base 1.0.1

package/src/components/ldvTopBar.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+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,
+    onRightButtonPress?: (() => void) | undefined,
+}
+
+const LDVTopBar = (props: TopBarProps) => {
+    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={{
+                            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={{ uri: props.rightButtonIcon }} />
+                    </View>
+                </TouchableOpacity>
+            }
+            <View style={{ width: cx(12) }} />
+        </View>
+    )
+}
+
+export default LDVTopBar

package/src/components/ldvTopName.d.ts

@@ -0,0 +1,7 @@
+interface LdvTopNameProps {
+    title: string;
+    rightIcon?: string | undefined;
+    rightIconClick?: () => void;
+}
+declare const LdvTopName: (props: LdvTopNameProps) => JSX.Element;
+export default LdvTopName;

package/src/components/ldvTopName.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+
+const cx = Utils.RatioUtils.convertX
+
+interface LdvTopNameProps {
+    title: string,
+    rightIcon?: string | undefined,
+    rightIconClick?: () => void
+}
+
+const LdvTopName = (props: LdvTopNameProps) => {
+    return (
+        <View style={styles.container}>
+            <View
+                style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginTop: cx(38),
+                }}>
+                <Text style={styles.title}>{props.title}</Text>
+                {props.rightIcon && <TouchableOpacity
+                    onPress={props.rightIconClick}>
+                    <Image
+                        style={{ width: cx(24), height: cx(24), tintColor: '#ff6600' }}
+                        source={{ uri: props.rightIcon }} />
+                </TouchableOpacity>}
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginHorizontal: cx(24),
+        marginBottom: cx(12),
+    },
+    title: {
+        flex: 1,
+        color: '#f60',
+        fontSize: cx(24),
+    },
+})
+
+export default LdvTopName

package/src/components/segmentControl.d.ts

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

package/src/components/segmentControl.tsx

@@ -0,0 +1,66 @@
+import { Text, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import { Utils } from 'tuya-panel-kit'
+
+const { convertX } = Utils.RatioUtils
+
+export default function SegmentControl(props) {
+
+    const { title1, title2, isFirst, setIsFirst, style } = props
+
+    return (<View style={{}}>
+        <View style={[{
+            backgroundColor: '#eeeeef',
+            marginHorizontal: convertX(24),
+            marginVertical: convertX(0),
+            borderRadius: convertX(8.9),
+            flexDirection: 'row',
+        }, style]}>
+            <TouchableOpacity style={
+                [{
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    margin: convertX(2),
+                    borderRadius: convertX(6.9),
+                }, isFirst ?
+                    { backgroundColor: '#fff', margin: convertX(2), borderRadius: 6.9 } :
+                    { backgroundColor: '#eeeeef' }]
+            } onPress={() => setIsFirst(true)}>
+                <Text
+                    style={{
+                        color: '#000',
+                        fontSize: convertX(12),
+                        fontFamily: isFirst ? 'helvetica_neue_lt_std_bd' : 'helvetica_neue_lt_std_roman',
+                        marginVertical: convertX(10),
+                    }}>
+                    {title1}
+                </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+                style={
+                    [{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        margin: convertX(2),
+                        borderRadius: convertX(6.9),
+                    },
+                        !isFirst ?
+                            { backgroundColor: '#fff' } :
+                            { backgroundColor: '#eeeeef' }]
+                }
+                onPress={() => setIsFirst(false)}>
+                <Text
+                    style={{
+                        color: '#000',
+                        fontSize: convertX(12),
+                        fontFamily: isFirst ? 'helvetica_neue_lt_std_roman' : 'helvetica_neue_lt_std_bd',
+                        marginVertical: convertX(10),
+                    }}>
+                    {title2}
+                </Text>
+            </TouchableOpacity>
+        </View>
+    </View>)
+}

package/src/components/weekSelect.d.ts

@@ -0,0 +1,7 @@
+export declare const setDataSource: (loop: any) => {
+    enabled: boolean;
+    index: number;
+    title: string;
+}[];
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/weekSelect.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import {Text, TouchableOpacity, View} from 'react-native'
+import {Utils} from 'tuya-panel-kit'
+import I18n from '../i18n/index'
+
+const cx = Utils.RatioUtils.convertX
+
+const repeatPeriod = [
+    {
+        index: 1,
+        title: I18n.getLang('timeschedule_add_schedule_weekday7_text'),
+        enabled: false,
+    }, {
+        index: 2,
+        title: I18n.getLang('timeschedule_add_schedule_weekday1_text'),
+        enabled: false,
+    }, {
+        index: 3,
+        title: I18n.getLang('timeschedule_add_schedule_weekday2_text'),
+        enabled: false,
+    }, {
+        index: 4,
+        title: I18n.getLang('timeschedule_add_schedule_weekday3_text'),
+        enabled: false,
+    }, {
+        index: 5,
+        title: I18n.getLang('timeschedule_add_schedule_weekday4_text'),
+        enabled: false,
+    }, {
+        index: 6,
+        title: I18n.getLang('timeschedule_add_schedule_weekday5_text'),
+        enabled: false,
+    }, {
+        index: 7,
+        title: I18n.getLang('timeschedule_add_schedule_weekday6_text'),
+        enabled: false,
+    },
+]
+
+export const setDataSource = (loop) => {
+    return repeatPeriod.map((item, index) => {
+        return {
+            ...item,
+            enabled: loop[index] === 1,
+        }
+    })
+}
+
+export default (props) => {
+
+    const {value, onSelect, style} = props
+    const dataSource = setDataSource(value)
+
+    return (<View style={{
+        height: 40,
+    }}>
+        <View
+            style={[{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                marginHorizontal: cx(20),
+            }, style]}>
+            {dataSource.map(period => {
+                return (
+                    <TouchableOpacity
+                        key={period.index}
+                        onPress={() => {
+                            onSelect(period.index)
+                        }}>
+                        <View
+                            style={{
+                                width: cx(40),
+                                height: cx(40),
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                borderRadius: cx(20),
+                                backgroundColor: period.enabled ? '#ffe0d4' : '#fff',
+                                borderWidth: cx(1),
+                                // borderColor: period.enabled ? "#fff" : 'rgba(120, 120, 128, 0.2)'
+                                borderColor: '#f60',
+                            }}>
+
+                            <Text
+                                style={{
+                                    color: '#f60',
+                                    textAlign: 'center',
+                                }}>{period.title}</Text>
+                        </View>
+                    </TouchableOpacity>
+                )
+            })}
+        </View>
+
+    </View>)
+}

package/src/composeLayout.tsx

@@ -0,0 +1,148 @@
+import _ from 'lodash'
+import React, {Component} from 'react'
+import {Provider} from 'react-redux'
+import {DevInfo, DpValue, Theme, TYSdk} from 'tuya-panel-kit'
+import {actions, store} from './models'
+import {addListener} from 'api/nativeEventEmitter'
+import {NativeApi} from 'api/native'
+import {setNativeProps} from './models/modules/NativePropsSlice'
+import {DpSchema, GlobalParams} from './models/GlobalParams'
+import Connect from './components/connect'
+
+interface Props {
+    devInfo: DevInfo;
+    preload?: boolean;
+    ldvDevInfo: any;
+}
+
+const TYEvent = TYSdk.event
+const TYDevice = TYSdk.device
+
+const theme = {
+    global: {
+        background: '#fff',
+    },
+    ldvMainBgColor: '#f60',
+    'slider.trackRadius': 15,
+}
+
+/**
+ *
+ * @param {} component - 需要连接到redux store的组件，通常为即为main
+ */
+const composeLayout = (component: React.ComponentType) => {
+    const NavigatorLayout = component
+    const {dispatch} = store
+
+    addListener(store)
+
+    /**
+     * 此处监听了`设备数据变更`事件，
+     * 每当dp点数据变更时，会将变更的dp点状态同步更新到`redux`中去。
+     * 同理当设备信息变更时，也会将变更的设备信息值同步更新到`redux`中去。
+     */
+    TYEvent.on('deviceDataChange', data => {
+        switch (data.type) {
+            case 'dpData':
+                dispatch(actions.common.responseUpdateDp(data.payload as Record<string, DpValue>))
+                break
+            case 'deviceOnline':
+                console.log('设备在线状态', data.payload)
+                break
+            default:
+                dispatch(actions.common.deviceChange(data.payload as DevInfo))
+                break
+        }
+    })
+
+    /**
+     * 此处监听了`网络状态变更事件`事件，
+     * 每当设备信息变更时，会将变更的设备信息值同步更新到`redux`中去。
+     */
+    TYSdk.event.on('networkStateChange', data => {
+        dispatch(actions.common.deviceChange(data as any))
+    })
+
+    class PanelComponent extends Component<Props> {
+        /**
+         * 如果面板进入时，`devInfo`已经存在(通常都会存在的)
+         * 这里会调用 setDeviceInfo 将原始的devInfo处理一下，并置入`redux`
+         *
+         * 如果面板进入时，`devInfo`不存在，
+         * 那么会调用 getDeviceInfo 异步获取处理好的`devInfo`，并置入`redux`
+         */
+        constructor(props: Props) {
+            super(props)
+            if (props && props.devInfo && props.devInfo.devId) {
+                TYDevice.setDeviceInfo(props.devInfo)
+                TYDevice.getDeviceInfo()
+                    .then(data => {
+                        dispatch(actions.common.devInfoChange(data))
+                        return Promise.all([TYDevice.getDeviceState(), data])
+                    })
+                    .then(([dpState, devInfo]) => {
+                        const isEqual = _.isEqual(dpState, devInfo.state)
+                        if (isEqual) return
+                        dispatch(actions.common.responseUpdateDp(dpState))
+                    })
+            } else if (props.preload) {
+                // do something
+            } else {
+                TYDevice.getDeviceInfo().then(data => dispatch(actions.common.devInfoChange(data)))
+            }
+
+            this.initReduxNativeProps(props.ldvDevInfo)
+        }
+
+        initReduxNativeProps(ldvDevInfo) {
+            console.log('原生数据：', JSON.stringify(ldvDevInfo))
+            NativeApi.log('原生数据: ' + JSON.stringify(ldvDevInfo))
+            // 处理物模型协议和dps
+            const dpSchemaMap: Record<string, DpSchema> = {}
+            const dps = {}
+            JSON.parse(this.props.ldvDevInfo.schema || [])
+                .forEach(schemaItem => {
+                    dpSchemaMap[schemaItem.code] = {
+                        name: schemaItem.name,
+                        dp: schemaItem.id,
+                        type: schemaItem.type,
+                        mode: schemaItem.mode,
+                        property: schemaItem.property,
+                    }
+                    dps[schemaItem.id] = null
+                })
+            const nativeProps = {
+                devId: ldvDevInfo.devId,
+                pId: ldvDevInfo.pId,
+                familyName: ldvDevInfo.familyName,
+                dps: {...dps, ...JSON.parse(ldvDevInfo.dps)},
+            }
+            GlobalParams.dpSchemaMap = dpSchemaMap
+            NativeApi.showObj(nativeProps)
+            console.log('Redux 初始数据：', JSON.stringify(nativeProps))
+            NativeApi.log('Redux 初始数据：' + JSON.stringify(nativeProps))
+            dispatch(setNativeProps(nativeProps))
+        }
+
+        render() {
+            return (
+                <Provider store={store}>
+                    <Theme theme={theme}>
+                        <Connect mapStateToProps={_.identity}>
+                            {({mapStateToProps, ...props}: { mapStateToProps: any; [_: string]: any }) => {
+                                const hasInit = Object.keys(props.dpState).length > 0
+                                // @ts-ignore
+                                return hasInit ? <NavigatorLayout {...props} /> : null
+                            }}
+                        </Connect>
+                    </Theme>
+                </Provider>
+            )
+        }
+    }
+
+    return PanelComponent
+}
+
+
+export default composeLayout

package/src/i18n/index.d.ts

@@ -0,0 +1,16 @@
+import { DpValue } from 'tuya-panel-kit';
+import Strings from './strings';
+declare type Key = keyof typeof Strings.en;
+declare function getLang(key: Key, defaultString?: string): string;
+declare function getDpLang(code: string, value?: DpValue): string;
+declare function formatString(key: string, values: string[]): string;
+declare function formatValue(key: Key, ...values: string[]): string;
+declare function getDpName(code: string, defaultName?: string): string;
+declare const I18n: {
+    getLang: typeof getLang;
+    getDpLang: typeof getDpLang;
+    formatString: typeof formatString;
+    formatValue: typeof formatValue;
+    getDpName: typeof getDpName;
+};
+export default I18n;

package/src/i18n/index.ts

@@ -0,0 +1,36 @@
+import {DpValue, I18N} from 'tuya-panel-kit'
+import Strings from './strings'
+
+type Key = keyof typeof Strings.en
+
+function getLang(key: Key, defaultString?: string): string {
+    // @ts-ignore
+    return new I18N(Strings).getLang(key, defaultString)
+}
+
+function getDpLang(code: string, value?: DpValue): string {
+    return new I18N(Strings).getDpLang(code, value)
+}
+
+function formatString(key: string, values: string[]): string {
+    return new I18N(Strings).formatString(key, ...values)
+}
+
+function formatValue(key: Key, ...values: string[]): string {
+    // @ts-ignore
+    return new I18N(Strings).formatValue(key, ...values)
+}
+
+function getDpName(code: string, defaultName?: string): string {
+    return new I18N(Strings).getDpName(code, defaultName)
+}
+
+const I18n = {
+    getLang,
+    getDpLang,
+    formatString,
+    formatValue,
+    getDpName,
+}
+
+export default I18n