@ledvance/ui-biz-bundle 1.0.2 → 1.0.4

package/src/modules/timeSchedule/TimeSchedulePage.tsx

@@ -0,0 +1,323 @@
+import React, { useCallback, useEffect } from 'react'
+import {RouteProp, useRoute} from '@react-navigation/core'
+import Page from '@ledvance/base/src/components/Page'
+import Tag from '@ledvance/base/src/components/Tag'
+import { useDeviceInfo, useTimeSchedule } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import { View, Text, FlatList, StyleSheet, ScrollView, Image, TouchableOpacity } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { useNavigation } from '@react-navigation/native'
+import { NativeApi } from '@ledvance/base/src/api/native'
+import LdvScheduleItem from './LdvScheduleItem'
+import { showDialog } from '@ledvance/base/src/utils/common'
+import { useReactive } from 'ahooks'
+import { cloneDeep } from 'lodash'
+
+const { convertX: cx } = Utils.RatioUtils
+
+export type dpItem = {
+    label: string
+    value: string
+    dpId: string
+}
+
+type TimeSchedulePageRouteParams = {
+    params: { dps: dpItem[], dpCodes: Record<string,string>}
+}
+
+type Props = {
+    route: RouteProp<TimeSchedulePageRouteParams, 'params'>
+}
+
+const TimeSchedulePage = () => {
+    const deviceInfo = useDeviceInfo()
+    const navigation = useNavigation()
+    const { dps, dpCodes } = useRoute<Props['route']>().params
+    const state = useReactive({
+        timeScheduleList: [] as any[],
+        filterScheduleList: [] as any[],
+        filterTags: dps ? dps.reduce((pre, cur) => {
+            if(cur.dpId){
+                pre[cur.dpId] = false 
+            }
+            return pre
+        }, {}) : {}
+    })
+    const [, setTimeSchedule] = useTimeSchedule()
+    
+
+    useEffect(() => {
+        getTimerScheduleList()
+    }, [])
+
+    useEffect(() => {
+        if (Object.values(state.filterTags).every(item => item) || Object.values(state.filterTags).every(item => !item)) {
+            state.filterScheduleList = cloneDeep(state.timeScheduleList)
+        } else {
+            const checkedTags = Object.keys(state.filterTags).filter(tag => state.filterTags[tag])
+            const newList = state.timeScheduleList.filter(item => checkedTags.every(tag => item.dps[tag] !== undefined))
+            state.filterScheduleList = newList
+        }
+    }, [state.filterTags])
+
+    const navigateToEdit = useCallback((item = undefined) => {
+        const path = dpCodes.time_schedule_edit
+        navigation.navigate(path, {
+            name: path,
+            scheduleItem: item,
+            dpCodes,
+            dps,
+            reloadData: getTimerScheduleList,
+            deleteDialog: (item:any) =>{
+                return deleteDialog(item)
+            }
+        })
+    }, [state.timeScheduleList])
+
+    const getTimerScheduleList = async () => {
+        const res: any = await NativeApi.timerList(deviceInfo.devId)
+        if (res.result && res.value) {
+            // 原生传过来的dps是json字符串。
+            const originList = res.value.map(item => {
+                const itemDps = JSON.parse(item.dps)
+
+                const dps = {}
+                Object.keys(itemDps).forEach((dpCode: string) => {
+                    if (Object.values(dpCodes).findIndex(item => item === dpCode) !== -1) {
+                        dps[dpCode] = itemDps[dpCode]
+                    }
+                })
+                return {
+                    ...item,
+                    dps: dps,
+                }
+            })
+            state.timeScheduleList = originList
+            state.filterScheduleList = originList
+            setTimeSchedule(Symbol())
+        }
+    }
+
+    const itemOnValueChange = item => {
+
+        const value = {
+            ...item,
+            status: !item.status,
+        }
+
+        NativeApi.editTimer(deviceInfo.devId, value, res => {
+            if (res.result) {
+                const newList = state.timeScheduleList.map(mItem => {
+                    return {
+                        ...mItem,
+                        status: mItem.id === item.id ? value.status : mItem.status,
+                    }
+                })
+                state.timeScheduleList = newList
+                state.filterScheduleList = newList
+                setTimeSchedule(Symbol())
+            }
+        })
+    }
+
+
+    const onDelete = (item) => {
+        NativeApi.deleteTimer(deviceInfo.devId, item, res => {
+            if (res.result) {
+                const newList = state.timeScheduleList.filter(nItem => item.id !== nItem.id)
+                state.timeScheduleList = newList
+                state.filterScheduleList = newList
+                setTimeSchedule(Symbol())
+            }
+        })
+    }
+
+    const changeFilter = useCallback((v:boolean, tag: string) =>{
+        state.filterTags = {
+            ...state.filterTags,
+            [tag]: v
+        }
+    }, [])
+
+    // 删除弹框
+    const deleteDialog = (item: any) =>{
+        return new Promise(resolve =>{
+            showDialog({
+                method: 'confirm',
+                title: I18n.getLang('cancel_dialog_delete_item_timeschedule_titel'),
+                subTitle: I18n.getLang('cancel_dialog_delete_item_timeschedule_description'),
+                onConfirm: (_, { close }) =>{
+                    onDelete(item)
+                    close()
+                    resolve(true)
+                }
+            })
+        })
+    }
+
+    const renderItem = ({item}) => {
+        return (
+            <LdvScheduleItem
+                item={item}
+                tags={dps}
+                onEnableChange={itemOnValueChange}
+                onPress={navigateToEdit}
+                onLongPress={(item) => {
+                    deleteDialog(item).then()
+                }}
+            />
+        )
+    }
+
+    const showTags = useCallback(() =>{
+        return Object.values(state.filterTags).length > 1 && state.timeScheduleList.length > 0
+    }, [state.filterTags, state.timeScheduleList])
+
+    const showScheduleList = useCallback(() =>{
+        return !!state.filterScheduleList.length
+    }, [state.filterScheduleList])
+
+    const getLabelByDp = (dp:string) =>{
+        const dpLabel = dps.reduce((pre, cur) => {
+            if(cur.dpId){
+                pre[cur.dpId] = cur.label 
+            }
+            return pre
+        }, {})
+        return dpLabel[dp]
+    }
+
+    return (
+        <Page
+            backText={deviceInfo.name}
+            onBackClick={navigation.goBack}
+            headlineText={I18n.getLang('timeschedule_overview_headline_text')}
+            headlineIcon={res.device_panel_schedule_add}
+            onHeadlineIconClick={() => {
+                navigateToEdit()
+            }}
+        >
+            <View style={styles.content}>
+                <ScrollView nestedScrollEnabled={true}>
+                    <Text style={{ color: '#000', marginLeft: cx(24) }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+                    <Spacer />
+                    {showTags() && <View style={styles.categoryList}>
+                        {Object.keys(state.filterTags).map(tag =>{
+                            return <Tag 
+                                key={tag}
+                                text={getLabelByDp(tag)}
+                                checked={state.filterTags[tag]}
+                                onCheckedChange={(v) => changeFilter(v, tag)}
+                                style={{ marginRight: cx(5) }}
+                            />
+                        })}
+                    </View>}
+                    {showScheduleList()
+                        ?
+                        <FlatList
+                            data={state.filterScheduleList}
+                            keyExtractor={(item: any) => item.id}
+                            renderItem={renderItem}
+                        />
+                        :
+                        <View style={styles.emptyListCon}>
+                            <Image
+                                style={styles.emptyImage}
+                                source={{ uri: res.ldv_timer_empty }}
+                                resizeMode="contain"
+                            />
+                            <View
+                                style={{
+                                    marginHorizontal: cx(24),
+                                    flexDirection: 'row',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    marginTop: cx(28),
+                                }}
+                            >
+                                <Image
+                                    source={{ uri: res.device_panel_schedule_alert }}
+                                    style={{ width: cx(16), height: cx(16) }}
+                                />
+                                <Text
+                                    style={{
+                                        color: '#000',
+                                        fontSize: cx(12),
+                                    }}
+                                >
+                                    {I18n.getLang(state.timeScheduleList.length ? 'sleepwakeschedule_empty_filtering_information_text' : 'timeschedule_overview_empty_information_text')}
+                                </Text>
+                            </View>
+                            {!showScheduleList()
+                                &&
+                                <View
+                                    style={{
+                                        height: cx(36),
+                                        width: cx(150),
+                                        marginVertical: cx(25),
+                                        marginHorizontal: cx(24),
+                                        borderRadius: cx(6),
+                                        backgroundColor: '#f60',
+                                    }}
+                                >
+                                    <TouchableOpacity
+                                        style={{
+                                            flex: 1,
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }}
+                                        onPress={() => navigateToEdit()}
+                                    >
+                                        <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#fff' }}>
+                                            {I18n.getLang('timeschedule_overview_empty_button_add_text')}
+                                        </Text>
+                                    </TouchableOpacity>
+                                </View>
+                            }
+                        </View>
+                    }
+                </ScrollView>
+            </View>
+        </Page>
+    )
+}
+
+const styles = StyleSheet.create({
+    content: {
+        // marginHorizontal: cx(20)
+        flex: 1
+    },
+    categoryList: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginHorizontal: cx(24)
+    },
+    emptyListCon: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: cx(60),
+    },
+    emptyImage: {
+        width: cx(225),
+        height: cx(198),
+    },
+    emptyNoTime: {
+        fontSize: cx(14),
+        lineHeight: cx(20),
+        marginTop: cx(30),
+        width: '76%',
+        textAlign: 'center',
+    },
+    emptyTimeTip: {
+        fontSize: cx(12),
+        lineHeight: cx(17),
+        marginTop: cx(6),
+        width: '76%',
+        textAlign: 'center',
+    },
+})
+
+export default TimeSchedulePage

package/src/modules/timeSchedule/mix/MixLightBean.ts

@@ -0,0 +1,10 @@
+export interface MixLightBean {
+    whiteLightSwitch: boolean,
+    colorLightSwitch: boolean,
+    mixRgbcwEnabled: boolean,
+    hue: number,    // 色相 0-360
+    sat: number,    // 饱和度 0-100
+    lightness: number,    // 明度 0-100
+    brightness: number,    // 亮度 0-100
+    colorTempPercent: number,    // 色温 0-100
+}

package/src/modules/timeSchedule/mix/MixLightView.tsx

@@ -0,0 +1,221 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
+import ldvStyles from 'config/ldvConfig'
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch'
+import I18n from '@ledvance/base/src/i18n'
+import LdvColorSlider from '@ledvance/base/src/components/ldvColorSlider'
+import LdvPresetView from '@ledvance/base/src/components/ldvPresetView'
+import { Utils } from 'tuya-panel-kit'
+import { useReactive } from 'ahooks'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import { hex2Hsv, hsv2Hex } from '@ledvance/base/src/utils'
+import LdvColorBrightness from '@ledvance/base/src/components/ldvColorBrightness'
+import LdvSaturation from '@ledvance/base/src/components/ldvSaturation'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import { mapFloatToRange } from '@ledvance/base/src/utils'
+import { Buffer } from 'buffer';
+import { dp2Obj, obj2Dp } from '../../mood/MixLightActions'
+
+const { convertX: cx } = Utils.RatioUtils
+
+interface MixLightViewProps {
+    scheduleItem: any
+    dpCodes: Record<string, string>
+    setEnable: (enable: boolean, idx: number) => void
+    setSendDps: (dp: Record<string, any>) => void
+}
+
+export default function MixLightView(props: MixLightViewProps) {
+    const { scheduleItem, dpCodes, setEnable, setSendDps } = props
+    const state = useReactive({
+        actionMix: {
+            whiteLightSwitch: true,
+            colorLightSwitch: false,
+            mixRgbcwEnabled: true,
+            hue: 360,
+            sat: 100,
+            lightness: 100,
+            brightness: 100,
+            colorTempPercent: 100,
+        },
+        flag: Symbol(),
+    })
+
+    useEffect(() => {
+        if (scheduleItem) {
+            if (scheduleItem.dps[dpCodes.mix_rgbcw] !== undefined) {
+                const base64String = Buffer.from(scheduleItem.dps[dpCodes.mix_rgbcw], 'base64').toString('hex')
+                state.actionMix = dp2Obj(base64String)
+            }
+        }
+    }, [])
+
+    useEffect(() =>{
+        const dp = getSendDps()
+        setSendDps(dp)
+    }, [state.flag])
+
+    const getSendDps = () =>{
+        const dpsString = obj2Dp(state.actionMix);
+        return {
+          [props.dpCodes.switch_led]: true,
+          [props.dpCodes.mix_rgbcw]: Buffer.from(dpsString, 'hex').toString('base64'),
+        };
+    }
+
+    return (
+        <View>
+            <View style={styles.container}>
+                <View style={[styles.contentBG, ldvStyles.shadow]}>
+                    <LdvSwitch
+                        title={I18n.getLang('light_sources_tile_main_lighting_headline')}
+                        color={cctToColor(state.actionMix.colorTempPercent.toFixed())}
+                        colorAlpha={1}
+                        enable={state.actionMix.whiteLightSwitch}
+                        setEnable={async value => {
+                            state.actionMix.whiteLightSwitch = value
+                        }} />
+                    {state.actionMix.whiteLightSwitch && (<View>
+                        <View style={[styles.shadeBg]}>
+                            <LdvColorSlider
+                                type={'temperature'}
+                                title={I18n.getLang('light_sources_tile_main_lighting_shade')}
+                                thumbColor={cctToColor(state.actionMix.colorTempPercent.toFixed())}
+                                value={state.actionMix.colorTempPercent}
+                                onValueChange={value => {
+                                    state.actionMix.colorTempPercent = value
+
+                                }}
+                                onSlidingComplete={value => {
+                                    state.actionMix.colorTempPercent = value
+                                    state.flag = Symbol()
+                                }} />
+                            <LdvPresetView
+                                type={'temperature'}
+                                style={styles.presetView}
+                                onPress={item => {
+                                    state.actionMix.colorTempPercent = item.value
+                                    // state.brightness = 100
+                                    state.flag = Symbol()
+                                }} />
+                        </View>
+                        <LdvSlider
+                            title={I18n.getLang('light_sources_tile_rgb_lighting_brightness')}
+                            value={Number(state.actionMix.brightness.toFixed())}
+                            onValueChange={value => {
+                                state.actionMix.brightness = value > 100 ? 100 : value
+                            }}
+                            onSlidingComplete={value => {
+                                state.actionMix.brightness = value > 100 ? 100 : value
+                                state.flag = Symbol()
+                            }} />
+                        <View style={{ height: cx(20) }} />
+                    </View>)}
+                </View>
+            </View>
+
+            <View style={[styles.container]}>
+                <View style={[styles.contentBG, ldvStyles.shadow]}>
+                    <LdvSwitch
+                        title={I18n.getLang('light_sources_tile_sec_lighting_headline')}
+                        color={hsv2Hex(state.actionMix.hue, Math.round(mapFloatToRange(state.actionMix.sat / 100, 30, 100)), 100)}
+                        colorAlpha={1}
+                        enable={state.actionMix.colorLightSwitch}
+                        setEnable={value => {
+                            state.actionMix.colorLightSwitch = value
+                        }} />
+
+                    {state.actionMix.colorLightSwitch && (
+                        <View>
+                            <View style={[styles.shadeBg]}>
+                                <LdvColorSlider
+                                    type={'color'}
+                                    title={I18n.getLang('light_sources_tile_sec_lighting_shade')}
+                                    thumbColor={hsv2Hex(state.actionMix.hue, 100, 100)}
+                                    value={state.actionMix.hue}
+                                    onValueChange={value => {
+                                        state.actionMix.hue = value
+
+                                    }}
+                                    onSlidingComplete={(value) => {
+                                        state.actionMix.hue = value
+                                        state.flag = Symbol()
+                                    }} />
+                                <LdvPresetView
+                                    type={'color'}
+                                    style={styles.presetView}
+                                    onPress={(item) => {
+                                        const hsv = hex2Hsv(item.color)
+                                        if (hsv) {
+                                            state.actionMix.hue = hsv.h
+                                        }
+                                        state.flag = Symbol()
+                                    }} />
+                            </View>
+                            <View>
+                                <LdvSaturation
+                                    value={state.actionMix.sat}
+                                    onValueChange={value => {
+                                        state.actionMix.sat = value
+
+                                    }}
+                                    onSlidingComplete={(value) => {
+                                        state.actionMix.sat = value
+                                        state.flag = Symbol()
+                                    }}
+
+                                />
+                            </View>
+                            <View style={{ height: cx(14) }} />
+                            <LdvColorBrightness
+                                value={state.actionMix.lightness}
+                                onValueChange={value => {
+                                    state.actionMix.lightness = value
+
+                                }}
+                                onSlidingComplete={(value) => {
+                                    state.actionMix.lightness = value
+                                    state.flag = Symbol()
+                                }} />
+                            <View style={{ height: cx(20) }} />
+                        </View>
+                    )}
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'column',
+    },
+    contentBG: {
+        flex: 1,
+        marginTop: cx(12),
+        marginBottom: cx(12),
+        marginLeft: cx(24),
+        marginRight: cx(24),
+    },
+    titleBGView: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    title: {
+        fontSize: cx(16),
+        fontWeight: 'bold',
+        marginVertical: cx(16),
+        marginLeft: cx(16),
+    },
+    switch: {
+        marginRight: cx(16),
+    },
+    shadeBg: {
+        height: cx(117),
+        flexDirection: 'column',
+    },
+    presetView: {
+        height: cx(60),
+    },
+})

package/src/modules/timeSchedule/utils.ts

@@ -0,0 +1,7 @@
+export function mapFloatToRange(value: number, min: number, max: number): number {
+    // 确保 value 在 [0, 1] 范围内
+    value = Math.max(0, Math.min(1, value))
+
+    // 计算插值后的值
+    return min + value * (max - min)
+}