@ledvance/ui-biz-bundle 1.0.2 → 1.0.4

package/src/modules/timeSchedule/SingleLightView.tsx

@@ -0,0 +1,254 @@
+import React, { useCallback, useEffect } from 'react'
+import { View } from 'react-native'
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch'
+
+import { Utils as lampUtils } from "@tuya/tuya-panel-lamp-sdk"
+import { isDIMLamp, isGARDOT, isGlassRGBWLamp, isOnlyRGBLamp, isRGBLamp, isRGBWLamp, isTWLamp } from '@ledvance/base/src/utils/Support'
+import { Utils } from 'tuya-panel-kit'
+import { useReactive } from 'ahooks'
+import { getHSVByHex, getHexByHSV, hsv2Hex } from '@ledvance/base/src/utils'
+import I18n from '@ledvance/base/src/i18n'
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import Card from '@ledvance/base/src/components/Card'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import { mapFloatToRange } from '@ledvance/base/src/utils'
+import { COLOUR, WHITE } from '../hooks/DeviceDpStateHooks'
+const { isSupportBright, isSupportTemp } = lampUtils.SupportUtils
+
+const { convertX: cx } = Utils.RatioUtils
+
+interface SingleLightViewProps {
+    scheduleItem: any
+    dpCodes: Record<string, string>
+    setEnable: (enable: boolean) => void
+    setSendDps: (dp: Record<string, any>) => void
+}
+
+export default function SingleLightView(props: SingleLightViewProps) {
+    const { scheduleItem, dpCodes } = props
+    const state = useReactive({
+        enable: true,
+        isColor: true,
+        h: 0,
+        s: 100,
+        v: 100,
+        temperature: 50,
+        brightness: 50,
+        putControl: Symbol(),
+        flag: Symbol()
+    })
+
+    useEffect(() => {
+        if (props.scheduleItem) {
+            if (scheduleItem.dps[dpCodes.switch_led] !== undefined) {
+                state.enable = scheduleItem.dps[dpCodes.switch_led]
+            }
+            if (scheduleItem.dps[dpCodes.work_mode] !== undefined) {
+                state.isColor = scheduleItem.dps[dpCodes.work_mode] === COLOUR
+            }
+            const hsv = getHSVByHex(props.scheduleItem.dps[props.dpCodes.colour_data] || '0000000003e8');
+            state.h = hsv.h;
+            state.s = Math.round(hsv.s / 10);
+            state.v = Math.round(hsv.v / 10);
+        }
+    }, [])
+
+    useEffect(() => {
+        const dpRecord = getSendDps()
+        props.setSendDps(dpRecord)
+    }, [state.flag])
+
+    const getSendDps = () => {
+        if (isDIMLamp(dpCodes)) {
+            return {
+                [dpCodes.bright_value]: state.brightness * 10,
+            };
+        }else if (isTWLamp(dpCodes)) {
+            return {
+                [dpCodes.work_mode]: WHITE,
+                [dpCodes.bright_value]: state.brightness * 10,
+                [dpCodes.temp_value]: state.temperature * 10,
+            };
+        }else if (isRGBWLamp(dpCodes)) {
+            if (state.isColor) {
+                const colorString = getHexByHSV({
+                    h: state.h,
+                    s: state.s * 10,
+                    v: state.v * 10,
+                });
+                return {
+                    [dpCodes.work_mode]: COLOUR,
+                    [dpCodes.colour_data]: colorString,
+                };
+            }
+            return {
+                [dpCodes.work_mode]: WHITE,
+                [dpCodes.temp_value]: state.temperature * 10,
+                [dpCodes.bright_value]: state.brightness * 10,
+            };
+
+        } else if (isGlassRGBWLamp(dpCodes)) {
+            const colorString = getHexByHSV({
+              h: state.h,
+              s: state.s * 10,
+              v: state.v * 10,
+            });
+            return {
+              [dpCodes.work_mode]: COLOUR,
+              [dpCodes.colour_data]: colorString,
+            };
+          } else if (isGARDOT(dpCodes)) {
+            const colorString = getHexByHSV({
+              h: state.h,
+              s: state.s * 10,
+              v: state.v * 10,
+            });
+            return {
+              [dpCodes.work_mode]: COLOUR,
+              [dpCodes.colour_data]: colorString,
+            };
+          } else {
+            const colorString = getHexByHSV({
+              h: state.h,
+              s: state.s * 10,
+              v: state.v * 10,
+            });
+            return {
+              [dpCodes.switch_led]: true,
+              [dpCodes.colour_data]: colorString,
+            };
+          }
+    }
+
+    const setHSVState = useCallback((h, s, v) => {
+        state.h = h
+        state.s = s
+        state.v = v
+        state.putControl = Symbol()
+    }, [])
+
+    const setTemperatureState = useCallback(temperature => {
+        state.temperature = temperature
+        state.putControl = Symbol()
+    }, [])
+
+    const setBrightnessState = useCallback(brightness => {
+        state.brightness = brightness
+        state.putControl = Symbol()
+    }, [])
+
+    // useEffect(() =>{
+    //     putControlDataAction()
+    // }, [state.putControl])
+
+
+    const setEnableStateAction = useCallback(async (enable) => {
+        state.enable = enable
+        props.setEnable(enable)
+        // await userOperation(deviceId, true)
+        // await setEnable(deviceId, state.enable)
+        // if (!enable) await setWorkMode(deviceId, state.isColor ? COLOUR : WHITE)
+    }, [])
+
+    const setWorkModeStateAction = useCallback(async isColorMode => {
+        state.isColor = isColorMode
+        state.flag = Symbol()
+        // await userOperation(deviceId, true)
+        // await setWorkMode(deviceId, state.isColor ? COLOUR : WHITE)
+    }, [])
+
+    const setColourStateAction = useCallback(async (h, s, v) => {
+        setHSVState(h, s, v)
+        state.flag = Symbol()
+        // await userOperation(deviceId, true)
+    }, [])
+
+    const setTemperatureStateAction = useCallback(async (cct: number) => {
+        setTemperatureState(cct)
+        state.flag = Symbol()
+        // await userOperation(deviceId, true)
+        // await setTemperature(deviceId, state.temperature * 10)
+    }, [])
+
+    const setBrightnessStateAction = useCallback(async brightness => {
+        setBrightnessState(brightness)
+        state.flag = Symbol()
+        // await userOperation(deviceId, true)
+        // await setBrightness(deviceId, state.brightness * 10)
+    }, [])
+
+    /* // 调节预览
+    const putControlDataAction = () =>{
+        const mode = 1 // 0: 直接 1: 渐变
+        const hasColorMode = isRGBLamp() || isRGBWLamp() // 是否支持color mode
+        const isColorMode = isOnlyRGBLamp() || (hasColorMode && workMode === COLOUR) // 当前是否是color mode
+
+        let colorData = !isColorMode ? '000000000000' : getHexByHSV({
+            h: state.h,
+            s: state.s * 10,
+            v: state.v * 10,
+        })
+        let whiteData = isColorMode ? '00000000' : getHexByBT({
+            b: isSupportBrightness() ? state.brightness * 10 : (hasColorMode ? state.v * 10 : '0000'),
+            t: isSupportTemperature() ? state.temperature * 10 : (hasColorMode ? state.s * 10 : '0000')
+        })
+        const hex = mode + colorData + whiteData
+        putControlData(deviceId, hex)
+    } */
+
+    const getColorBlockColor = useCallback(() => {
+        const s = Math.round(mapFloatToRange(state.s / 100, 30, 100))
+        if (isOnlyRGBLamp(props.dpCodes)) {
+            return hsv2Hex(state.h, s, 100)
+        }
+        if (isTWLamp(props.dpCodes)) {
+            return cctToColor(state.temperature.toFixed())
+        }
+        if (isDIMLamp(props.dpCodes)) {
+            return '#fff'
+        }
+        if (state.isColor) {
+            return hsv2Hex(state.h, s, 100)
+        }
+        if (isSupportTemp()) {
+            return cctToColor(state.temperature.toFixed())
+        }
+    }, [state.temperature])
+
+    return (
+        <Card style={{ marginVertical: cx(12) }}>
+            <View>
+                <LdvSwitch
+                    title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                    color={getColorBlockColor()}
+                    colorAlpha={1}
+                    enable={state.enable}
+                    setEnable={setEnableStateAction} />
+                {state.enable &&
+                    <LampAdjustView
+                        isDIMLamp={isDIMLamp(props.dpCodes)}
+                        isRGBLamp={isRGBLamp(props.dpCodes)}
+                        isOnlyRGBLamp={isOnlyRGBLamp(props.dpCodes)}
+                        isTWLamp={isTWLamp(props.dpCodes)}
+                        isRGBWLamp={isRGBWLamp(props.dpCodes)}
+                        isSupportBrightness={isSupportBright()}
+                        isSupportTemperature={isSupportTemp()}
+                        isColorMode={state.isColor}
+                        setIsColorMode={setWorkModeStateAction}
+                        h={state.h}
+                        s={state.s}
+                        v={state.v}
+                        onHSVChange={setHSVState}
+                        onHSVChangeComplete={setColourStateAction}
+                        colorTemp={state.temperature}
+                        brightness={state.brightness}
+                        onCCTChange={setTemperatureState}
+                        onCCTChangeComplete={setTemperatureStateAction}
+                        onBrightnessChange={setBrightnessState}
+                        onBrightnessChangeComplete={setBrightnessStateAction}
+                    // min={1}
+                    />}
+            </View>
+        </Card>
+    )
+}