@ledvance/ui-biz-bundle 1.0.2 → 1.0.4

package/src/modules/timeSchedule/DeviceState.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Utils as lampUtils } from "@tuya/tuya-panel-lamp-sdk"
+import { View } from "react-native";
+import { Utils } from 'tuya-panel-kit'
+import SegmentControl from "@ledvance/base/src/components/segmentControl";
+import I18n from "@ledvance/base/src/i18n";
+import ManualSetting from "./ManualSetting";
+import { ScheduleItemDp } from "./TimeScheduleEditpage";
+import MoodSetting from "./MoodSetting";
+import { isPlug } from "@ledvance/base/src/utils/Support";
+const { convertX: cx } = Utils.RatioUtils
+const { isSupportScene } = lampUtils.SupportUtils
+interface DeviceStateProps{
+    scheduleItem: any
+    dps: ScheduleItemDp[]
+    dpCodes: Record<string,string>
+    isManual: boolean
+    setIsManual?: (isManual: boolean) => void
+    setSendDps: (dp: Record<string,any>) => void
+    changeSkillEnable: (enable: boolean, index: number) => void
+}
+
+const DeviceState = (props: DeviceStateProps) =>{
+
+    return(
+        <View>
+            {isSupportScene() && !isPlug(props.dpCodes) && <SegmentControl
+                title1={I18n.getLang('timeschedule_add_schedule_switch_tab_manual_text')}
+                title2={I18n.getLang('timeschedule_add_schedule_switch_tab_mood_text')}
+                isFirst={props.isManual}
+                setIsFirst={(v: boolean) => props.setIsManual && props.setIsManual(v)}
+                style={{marginHorizontal: cx(0)}}
+            />}
+            {props.isManual ?
+                <ManualSetting 
+                    dpCodes={props.dpCodes}
+                    dps={props.dps}
+                    scheduleItem={props.scheduleItem}
+                    setSendDps={props.setSendDps}
+                    changeSkillEnable={props.changeSkillEnable}
+                /> :
+                <MoodSetting 
+                    dpCodes={props.dpCodes}
+                    dps={props.dps}
+                    scheduleItem={props.scheduleItem}
+                    setSendDps={props.setSendDps}
+                    changeSkillEnable={props.changeSkillEnable}
+                />
+            }
+        </View>
+    )
+}
+
+export default DeviceState

package/src/modules/timeSchedule/LdvScheduleItem.tsx

@@ -0,0 +1,125 @@
+import React, { useCallback } from 'react';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { SwitchButton, Utils } from 'tuya-panel-kit';
+import { loopText } from '@ledvance/base/src/utils/common';
+import Card from '@ledvance/base/src/components/Card';
+const { convertX } = Utils.RatioUtils;
+
+interface LdvScheduleItemProps {
+    item: any
+    tags?: {
+        label: string
+        value: string
+        dpId: string
+    } []
+    style?: ViewStyle
+    onEnableChange: (enable: boolean) => void
+    onPress: (item: any) => void
+    onLongPress: (item:any) => void 
+}
+
+const LdvScheduleItem = (props: LdvScheduleItemProps) => {
+    const { item, tags, style, onEnableChange, onPress, onLongPress } = props;
+
+    const renderTag = useCallback(() => {
+        const tagList = Array.isArray(tags) ? tags.filter(tag => item.dps[tag.dpId] !== undefined) : []
+        return tagList.map(t => (
+            <Text key={t.dpId} style={styles.typeText}>{t.label}</Text>
+        ))
+    }, [tags])
+
+    const showTags = useCallback(() =>{
+        return tags && tags?.length > 1
+    }, [tags])
+
+    return (
+        <Card
+            style={styles.card}
+            containerStyle={[styles.container, style]}
+            onPress={() => {
+                onPress(item);
+            }}
+            onLongPress={() => {
+                onLongPress(item);
+            }}>
+            <View style={styles.infoContainer}>
+                <Text style={styles.time}>{item.time}</Text>
+                <Text style={styles.loop}>
+                    {loopText(item.loops.split('').map(loop => parseInt(loop)))}
+                </Text>
+                <Text style={styles.name}>{item.aliasName}</Text>
+                {showTags() && <View style={styles.typeContainer}>
+                    {renderTag()}
+                </View>}
+            </View>
+            <View style={styles.switchContainer}>
+                <SwitchButton
+                    value={!!item.status}
+                    thumbStyle={{ elevation: 0 }}
+                    onValueChange={() => {
+                        onEnableChange(item);
+                    }}
+                />
+            </View>
+        </Card>
+    );
+};
+
+const styles = StyleSheet.create({
+    card: {
+        marginHorizontal: convertX(24),
+        marginTop: convertX(8),
+        marginBottom: convertX(15),
+        borderRadius: convertX(8),
+    },
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    infoContainer: {
+        flex: 1,
+        marginTop: convertX(16),
+        marginBottom: convertX(16),
+        flexDirection: 'column',
+        marginLeft: convertX(16),
+    },
+    time: {
+        marginBottom: convertX(5),
+        fontSize: 16,
+        fontFamily: 'helvetica_neue_lt_std_bd',
+        fontWeight: 'bold',
+    },
+    loop: {
+        color: '#000',
+        fontSize: convertX(14),
+        fontFamily: 'helvetica_neue_lt_std_bd',
+        marginTop: convertX(8),
+    },
+    name: {
+        color: '#000',
+        fontSize: convertX(14),
+        fontFamily: 'helvetica_neue_lt_std_bd',
+        marginTop: convertX(8),
+    },
+    switchContainer: {
+        marginRight: convertX(16),
+        // backgroundColor: 'red',
+        marginTop: convertX(16),
+    },
+    switch: {},
+    typeContainer: {
+        flexDirection: 'row',
+        marginTop: convertX(8),
+    },
+    typeText: {
+        fontSize: convertX(12),
+        backgroundColor: '#E6E7E8',
+        color: '#000',
+        marginRight: convertX(10),
+        borderRadius: convertX(10),
+        paddingHorizontal: convertX(8),
+        paddingVertical: convertX(2)
+    }
+});
+
+export default LdvScheduleItem;

package/src/modules/timeSchedule/ManualSetting.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { View } from "react-native";
+import { Utils } from 'tuya-panel-kit'
+import { isMixRGBWLamp } from '@ledvance/base/src/utils/Support'
+import SingleLightView from "./SingleLightView";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import { ScheduleItemDp } from "./TimeScheduleEditpage";
+import Card from "@ledvance/base/src/components/Card";
+import MixLightView from "./mix/MixLightView";
+
+
+const { convertX: cx } = Utils.RatioUtils
+interface ManualSettingProps {
+    scheduleItem: any
+    dps: ScheduleItemDp[]
+    dpCodes: Record<string, string>
+    setSendDps: (dp: Record<string, any>) => void
+    changeSkillEnable: (enable: boolean, index: number) => void
+}
+
+const ManualSetting = (props: ManualSettingProps) => {
+    const renderContent = () => {
+        if (isMixRGBWLamp(props.dpCodes)) {
+            return (
+                <MixLightView
+                    dpCodes={props.dpCodes}
+                    setSendDps={props.setSendDps}
+                    scheduleItem={props.scheduleItem}
+                    setEnable={props.changeSkillEnable}
+                />
+            )
+        }
+        return (
+            props.dps.map((item, idx) => (
+                !item.value.includes('light') ?
+                    <View key={item.dpId}>
+                        <Spacer width={cx(12)} />
+                        <Card>
+                            <LdvSwitch
+                                title={item.label}
+                                enable={item.enable}
+                                setEnable={(v: boolean) => { props.changeSkillEnable(v, idx) }}
+                                color={''}
+                                colorAlpha={1}
+                            />
+                        </Card>
+                        <Spacer width={cx(12)} />
+                    </View> :
+                    <View key={item.dpId}>
+                        <SingleLightView
+                            dpCodes={props.dpCodes}
+                            scheduleItem={props.scheduleItem}
+                            setEnable={(v: boolean) => { props.changeSkillEnable(v, idx) }}
+                            setSendDps={props.setSendDps}
+                        />
+                    </View>
+            ))
+        )
+
+    }
+    return (
+        <View>
+            {renderContent()}
+        </View>
+    )
+}
+
+export default ManualSetting

package/src/modules/timeSchedule/MoodSetting.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from "react";
+import { ScheduleItemDp } from "./TimeScheduleEditpage";
+import { isMixRGBWLamp } from '@ledvance/base/src/utils/Support';
+import { obj2Dp as senceObj2Dp, dp2Obj as sencePp2Obj } from "../mood/MoodAction";
+import ScheduleScene from "./ScheduleScene";
+import MixMoodScene from "../mood/MixScene";
+import { useReactive } from 'ahooks'
+import { Buffer } from 'buffer';
+import { SCENE } from "../hooks/DeviceDpStateHooks";
+
+interface MoodSettingProps{
+    scheduleItem: any
+    dps: ScheduleItemDp[]
+    dpCodes: Record<string, string>
+    setSendDps: (dp: Record<string, any>) => void
+    changeSkillEnable: (enable: boolean, index: number) => void
+}
+
+const MoodSetting = (props: MoodSettingProps) =>{
+    const { scheduleItem, dpCodes, setSendDps} = props
+    const state = useReactive({
+        actionScene: { id: '', nodes: [] } as any,
+    })
+
+    useEffect(() =>{
+        if(scheduleItem){
+            if(scheduleItem.dps[dpCodes.scene_data] !== undefined){
+                state.actionScene = sencePp2Obj(scheduleItem.dps[dpCodes.scene_data], dpCodes)
+            }
+            if (scheduleItem.dps[dpCodes.mix_light_scene] !== undefined) {
+                const sceneDp = scheduleItem.dps[dpCodes.mix_light_scene]
+                state.actionScene = Buffer.from(sceneDp, 'base64').toString('hex')
+              }
+        }
+    }, [])
+
+    useEffect(() =>{
+        const dp = getSendDps()
+        setSendDps(dp)
+    }, [state.actionScene])
+
+    const getSendDps = () =>{
+        if (isMixRGBWLamp(dpCodes)) {
+            return {
+              [dpCodes.mix_light_scene]: Buffer.from(state.actionScene?.value, 'hex').toString('base64'),
+              [dpCodes.switch_led]: true,
+              [dpCodes.work_mode]: SCENE
+            }
+          } else {
+            return {
+              [dpCodes.switch_led]: true,
+              [dpCodes.scene_data]: senceObj2Dp({ id: Number(state?.actionScene?.id), nodes: state?.actionScene?.nodes }),
+              [dpCodes.work_mode]: SCENE,
+            };
+          }
+    }
+
+    return (
+        isMixRGBWLamp(dpCodes) ?
+        <MixMoodScene setActionScene={v => state.actionScene = v} mixScene={state.actionScene} /> : 
+        <ScheduleScene dpCodes={dpCodes} scene={state.actionScene} setScene={s => (state.actionScene = s)} />
+    )
+
+}
+
+export default MoodSetting

package/src/modules/timeSchedule/ScheduleScene.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect } from 'react'
+import I18n from '@ledvance/base/src/i18n'
+import { getRemoteSceneList } from '../mood/ MoodAction'
+import { useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { useReactive } from 'ahooks'
+import { ScenePageUIState, SceneUIState } from '../mood/SceneInfo'
+import res from '@res'
+import { FlatList, StyleSheet, View } from 'react-native'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import Tag from '@ledvance/base/src/components/Tag'
+import { Utils } from 'tuya-panel-kit'
+import InfoText from '@ledvance/base/src/components/InfoText'
+import MoodItem from '../mood/MoodItem'
+
+const cx = Utils.RatioUtils.convertX
+
+interface MoodUIState extends ScenePageUIState {
+    staticTagChecked: boolean
+    dynamicTagChecked: boolean
+    filteredMoods: SceneUIState[]
+    // dpCodes: Record<string, string>
+}
+
+
+const ScheduleScene = ({ scene, setScene, dpCodes }) => {
+    const deviceInfo = useDeviceInfo()
+
+    const state = useReactive<MoodUIState>({
+        currentScene: undefined,
+        staticTagChecked: true,
+        dynamicTagChecked: true,
+        scenes: [],
+        flag: Symbol(),
+        originScene: [],
+        filteredMoods: [],
+    })
+
+    const getSceneList = useCallback(async () => {
+        const res = await getRemoteSceneList(deviceInfo.devId, dpCodes)
+        if (res.success) {
+            state.scenes = res.data || []
+            state.currentScene = scene || state.scenes[0]
+            setScene(state.currentScene)
+        }
+    }, [])
+
+    useEffect(() => {
+        state.filteredMoods = state.scenes.filter(item => {
+            return (state.staticTagChecked && state.dynamicTagChecked) ||
+                (state.staticTagChecked && item.nodes.length < 2) ||
+                (state.dynamicTagChecked && item.nodes.length > 1)
+        })
+    }, [state.staticTagChecked, state.dynamicTagChecked, state.scenes])
+
+
+    useEffect(() => {
+        getSceneList().then()
+    }, [state.flag])
+
+    return (
+        <>
+            <View style={styles.tagLine}>
+                <Tag
+                    checked={state.staticTagChecked}
+                    text={I18n.getLang('mood_overview_filter_name_text1')}
+                    onCheckedChange={checked => {
+                        state.staticTagChecked = checked
+                    }} />
+                <Spacer width={cx(8)} height={0} />
+                <Tag
+                    checked={state.dynamicTagChecked}
+                    text={I18n.getLang('mood_overview_filter_name_text2')}
+                    onCheckedChange={checked => {
+                        state.dynamicTagChecked = checked
+                    }} />
+            </View>
+            <Spacer height={cx(10)} />
+            <FlatList
+                data={state.filteredMoods}
+                renderItem={({ item }) => {
+                    return (
+                        <MoodItem
+                            enable={state.currentScene?.id === item.id}
+                            mood={item}
+                            onSwitch={async _ => {
+                                state.currentScene = item
+                                setScene(item)
+                            }} />
+                    )
+                }}
+                ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+                ItemSeparatorComponent={() => (<Spacer />)}
+                ListFooterComponent={() => (
+                    <View style={styles.infoLine}>
+                        <Spacer />
+                        <InfoText
+                            icon={res.ic_info}
+                            text={I18n.getLang('mood_overview_information_text')} />
+                        <Spacer height={cx(40)} />
+                    </View>
+                )}
+                keyExtractor={item => `${item.id}`} />
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    tagLine: {
+        flexDirection: 'row',
+        marginHorizontal: cx(24),
+        marginTop: cx(16)
+    },
+    infoLine: {
+        marginHorizontal: cx(24),
+    },
+    addMoodPopover: {
+        width: cx(171),
+        height: cx(90.5),
+        marginStart: cx(156),
+        marginTop: cx(105),
+        backgroundColor: '#fff',
+    },
+    popoverItem: {
+        width: cx(171),
+        height: cx(45),
+        alignItems: 'flex-start',
+    },
+    popoverItemText: {
+        color: '#000',
+        fontSize: cx(16),
+    },
+    line: {
+        height: .5,
+        backgroundColor: 'rgba(60,60,67,.36)',
+    },
+})
+
+export default ScheduleScene