@ledvance/ui-biz-bundle 1.1.68 → 1.1.69

package/src/modules/scene/SceneDetailPage.tsx

@@ -1,422 +1,422 @@
-import React, { useCallback } from 'react'
-import { FlatList, Image, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native'
-import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
-import { useNavigation, useRoute } from '@react-navigation/native'
-import { Dialog, Slider, SwitchButton, Tab, TabBar, TYSdk, Utils } from 'tuya-panel-kit'
-import { useReactive, useUpdate, useUpdateEffect } from 'ahooks'
-import ColorExtractor, { colorTemperatureToColor } from '@ledvance/base/src/components/ColorExtractor'
-import { SceneNodeTransitionMode, SceneUIState } from './SceneInfo'
-import ColorUtils from '@ledvance/base/src/utils/ColorUtils'
-import { saveScene, useScene } from './SceneAction'
-import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import Cell from '@ledvance/base/src/components/Cell'
-import Strings from '@ledvance/base/src/i18n'
-import res from '@ledvance/base/src/res'
-import LdvItemView from '@ledvance/base/src/components/ldvItemView'
-import LdvSlider from '@ledvance/base/src/components/ldvSlider'
-import dpCodes from 'config/dpCodes'
-
-const cx = Utils.RatioUtils.convertX
-
-interface SceneDetailPageParams {
-    scene: SceneUIState
-    sceneList: SceneUIState[],
-    onSave: () => void
-}
-
-export default function SceneDetailPage() {
-    const deviceId = useDeviceId()
-    const navigation = useNavigation()
-    const params = useRoute().params as SceneDetailPageParams
-    const scene: SceneUIState = JSON.parse(JSON.stringify(params.scene))
-    const update = useUpdate()
-    const sceneList = params.sceneList
-    const [, setScene] = useScene(dpCodes)
-    const state = useReactive({
-        name: scene.name,
-        fanEnable: scene.fanEnable,
-        fanSpeed: scene.fanSpeed,
-        nodes: scene.nodes,
-        transitionMode: scene.nodes[0].transitionMode,
-        transitionTime: scene.nodes[0].transitionTime,
-        currentNode: scene.nodes[scene.nodes.length - 1],
-        transitionModeSelections: [
-            {
-                key: SceneNodeTransitionMode.Static,
-                title: Strings.getLang('Static'),
-            },
-            {
-                key: SceneNodeTransitionMode.Jump,
-                title: Strings.getLang('Jump'),
-            },
-            {
-                key: SceneNodeTransitionMode.Gradient,
-                title: Strings.getLang('Gradient'),
-            },
-        ],
-        tabs: [
-            {
-                key: '0',
-                title: Strings.getLang('Colour'),
-            },
-            {
-                key: '1',
-                title: Strings.getLang('White'),
-            },
-        ],
-    })
-
-    useUpdateEffect(() => {
-        if (state.currentNode.isColorNode) {
-            TYSdk.event.emit('onColorChange', ColorUtils.hsv2Hex(state.currentNode.h, state.currentNode.s, state.currentNode.v))
-        } else {
-            TYSdk.event.emit('onColorTempChange', ColorUtils.hsv2Hex(0, state.currentNode.colorTemp, 100))
-        }
-    }, [state.currentNode, state.currentNode.isColorNode])
-
-    const getNodeListData = useCallback(() => {
-        if (state.transitionMode === SceneNodeTransitionMode.Static) {
-            if (state.currentNode !== state.nodes[0]) {
-                state.currentNode = state.nodes[0]
-            }
-            return [state.nodes[0]]
-        } else if (state.nodes.length >= 8) {
-            return [...state.nodes, 'remove']
-        } else if (state.nodes.length <= 1) {
-            return [...state.nodes, 'add']
-        } else {
-            return [...state.nodes, 'add', 'remove']
-        }
-    }, [])
-
-    const onTopBarRightBtnClick = useCallback(async () => {
-        const sceneObj = {
-            id: scene.id,
-            fanEnable: state.fanEnable,
-            fanSpeed: state.fanSpeed,
-            name: state.name,
-            image: scene.image,
-            nodes: scene.nodes,
-        }
-        const saveRes = await saveScene(deviceId, sceneObj, state.transitionMode, state.transitionTime, sceneList)
-        console.log('保存场景列表结果', saveRes)
-        if (saveRes.success) {
-            const setSceneRes = await setScene(deviceId, sceneObj,dpCodes)
-            console.log('设置修改后的场景结果', setSceneRes)
-            params.onSave()
-            navigation.goBack()
-        }
-    }, [])
-
-    return (
-        <View style={{ flex: 1 }}>
-            <LDVTopBar
-                title={Strings.getLang('Scene Edit')}
-                onBackPress={() => {
-                    navigation.goBack()
-                }}
-                rightButtonIcon={res.ic_check}
-                onRightButtonPress={onTopBarRightBtnClick} />
-            <ScrollView style={{ flex: 1 }} nestedScrollEnabled={true}>
-                <View style={{ flexDirection: 'column', flex: 1 }}>
-                    <Cell
-                        title={Strings.getLang('Scene name')}
-                        value={state.name}
-                        onPress={() => {
-                            Dialog.prompt({
-                                title: Strings.getLang('Modify the scene name'),
-                                cancelText: Strings.getLang('Cancel'),
-                                confirmText: Strings.getLang('Confirm'),
-                                defaultValue: state.name,
-                                placeholder: Strings.getLang('Scene name'),
-                                onConfirm: (text, { close }) => {
-                                    state.name = text
-                                    close()
-                                },
-                            })
-                        }} />
-                    <TabBar
-                        type="radio"
-                        activeKey={state.transitionMode}
-                        tabs={state.transitionModeSelections}
-                        onChange={value => {
-                            state.transitionMode = parseInt(value)
-                        }}
-                        style={{
-                            marginHorizontal: cx(24),
-                            height: cx(40),
-                            borderRadius: cx(20),
-                            backgroundColor: '#eee',
-                        }}
-                        tabTextStyle={{ fontSize: cx(11), color: '#666' }}
-                        tabActiveTextStyle={{
-                            fontSize: cx(11),
-                            color: '#f60',
-                        }} />
-                    {state.transitionMode !== SceneNodeTransitionMode.Static && <>
-                      <View style={{ height: cx(20) }} />
-                      <Text style={{
-                          marginStart: cx(24),
-                          fontSize: cx(14),
-                          color: '#000',
-                          fontFamily: 'helvetica_neue_lt_std_roman',
-                      }}>{Strings.getLang('Transform time')}</Text>
-                      <Slider.Horizontal
-                        value={state.transitionTime}
-                        minimumValue={0}
-                        maximumValue={100}
-                        theme={{
-                            trackRadius: cx(3),
-                            trackHeight: cx(6),
-                            thumbSize: cx(26),
-                            thumbRadius: cx(26),
-                            thumbTintColor: '#FFF',
-                            minimumTrackTintColor: '#f60',
-                            maximumTrackTintColor: '#eee',
-                        }}
-                        style={{ marginHorizontal: cx(24) }}
-                        onSlidingComplete={v => {
-                            state.transitionTime = Math.round(v)
-                        }} />
-                      <SafeAreaView>
-                        <FlatList
-                          style={{ marginStart: cx(6) }}
-                          numColumns={5}
-                          data={getNodeListData()}
-                          renderItem={({ item: node }) => {
-                              if (typeof node === 'string') {
-                                  return (
-                                      <TouchableOpacity
-                                          style={{
-                                              width: cx(50),
-                                              height: cx(50),
-                                              marginStart: cx(18),
-                                              marginTop: cx(10),
-                                              backgroundColor: '#ff660080',
-                                              borderColor: '#ffffffff',
-                                              borderWidth: cx(2),
-                                              borderRadius: cx(25),
-                                              justifyContent: 'center',
-                                              alignItems: 'center',
-                                          }}
-                                          onPress={() => {
-                                              if (node === 'add') {
-                                                  const newNode = {
-                                                      switchingInterval: state.transitionTime,
-                                                      transitionTime: state.transitionTime,
-                                                      transitionMode: state.transitionMode,
-                                                      h: 0,
-                                                      s: 100,
-                                                      v: 100,
-                                                      brightness: 0,
-                                                      colorTemp: 0,
-                                                      isColorNode: true,
-                                                  }
-                                                  state.nodes.push(newNode)
-                                                  state.currentNode = newNode
-                                              } else {
-                                                  const index = state.nodes.findIndex(item => item === state.currentNode)
-                                                  state.nodes.splice(index, 1)
-                                                  state.currentNode = state.nodes[index <= state.nodes.length - 1 ? index : index - 1]
-                                              }
-                                          }}>
-                                          <Image
-                                              style={{ width: 24, height: 24 }}
-                                              source={{ uri: node === 'add' ? res.add : res.delete }} />
-                                      </TouchableOpacity>
-                                  )
-                              }
-                              const ct = (node.colorTemp / 100) * (6500 - 2700) + 2700
-                              const color = colorTemperatureToColor(ct)
-                              return (
-                                  <TouchableOpacity
-                                      style={{
-                                          width: cx(50),
-                                          height: cx(50),
-                                          marginStart: cx(18),
-                                          marginTop: cx(10),
-                                          borderColor: state.currentNode === node ? '#f60' : '#ffffffff',
-                                          borderWidth: cx(2),
-                                          borderRadius: cx(25),
-                                          justifyContent: 'center',
-                                          alignItems: 'center',
-                                      }}
-                                      onPress={() => {
-                                          state.currentNode = node
-                                      }}>
-                                      <View style={{
-                                          width: cx(40),
-                                          height: cx(40),
-                                          borderRadius: cx(20),
-                                          backgroundColor: node.isColorNode ? ColorUtils.hsv2Hex(node.h, node.s, 100) : color,
-                                      }} />
-                                  </TouchableOpacity>
-                              )
-                          }}
-                          keyExtractor={(_item, index) => `${index}`} />
-                      </SafeAreaView>
-                    </>}
-                    <View style={{ height: cx(380) }}>
-                        <Tab
-                            activeKey={state.currentNode.isColorNode ? '0' : '1'}
-                            tabTextStyle={{
-                                fontSize: cx(14),
-                                color: '#666',
-                                fontFamily: 'helvetica_neue_lt_std_roman',
-                            }}
-                            tabActiveTextStyle={{ color: '#f60' }}
-                            tabBarUnderlineStyle={{ backgroundColor: '#f60' }}
-                            tabDefaultColor={'#666'}
-                            onChange={(value: string) => {
-                                state.currentNode.isColorNode = value === '0'
-                                update()
-                            }}>
-                            <Tab.TabPane style={{ flex: 1 }} key={state.tabs[0].key} tab={state.tabs[0].title}>
-                                <View style={{ flex: 1 }}>
-                                    <View style={{ height: cx(30) }} />
-                                    <ColorExtractor
-                                        radius={100}
-                                        color={ColorUtils.hsv2Hex(state.currentNode.h, state.currentNode.s, state.currentNode.v)}
-                                        onColorChange={(color, isFirst) => {
-                                            if (!isFirst) {
-                                                state.currentNode.h = Math.round(color.h)
-                                                state.currentNode.s = Math.round(color.s)
-                                                update()
-                                            }
-                                        }} />
-                                    <View style={{ height: cx(30) }} />
-                                    <View
-                                        style={{
-                                            flexDirection: 'row',
-                                            justifyContent: 'space-between',
-                                            marginHorizontal: cx(24),
-                                        }}>
-                                        <Text style={{
-                                            fontSize: cx(14),
-                                            color: '#000',
-                                            fontFamily: 'helvetica_neue_lt_std_roman',
-                                        }}>{'亮度'}</Text>
-                                        <Text style={{
-                                            fontSize: cx(14),
-                                            color: '#000',
-                                            fontFamily: 'helvetica_neue_lt_std_roman',
-                                        }}>{state.currentNode.v}%</Text>
-                                    </View>
-                                    <Slider.Horizontal
-                                        value={state.currentNode.v}
-                                        minimumValue={0}
-                                        maximumValue={100}
-                                        theme={{
-                                            trackRadius: cx(3),
-                                            trackHeight: cx(6),
-                                            thumbSize: cx(26),
-                                            thumbRadius: cx(26),
-                                            thumbTintColor: '#FFF',
-                                            minimumTrackTintColor: '#f60',
-                                            maximumTrackTintColor: '#eee',
-                                        }}
-                                        style={{ marginHorizontal: cx(24) }}
-                                        onValueChange={v => {
-                                            state.currentNode.v = Math.round(v)
-                                            update()
-                                        }}
-                                        onSlidingComplete={v => {
-                                            state.currentNode.v = Math.round(v)
-                                            update()
-                                        }} />
-                                </View>
-                            </Tab.TabPane>
-                            <Tab.TabPane style={{ flex: 1 }} key={state.tabs[1].key} tab={state.tabs[1].title}>
-                                <View style={{ flex: 1 }}>
-                                    <View style={{ height: cx(30) }} />
-                                    <ColorExtractor
-                                        radius={100}
-                                        color={ColorUtils.hsv2Hex(0, state.currentNode.colorTemp, 100)}
-                                        showColorTemperature={true}
-                                        colorTemperatureInterval={6500 - 2700}
-                                        miniColorTemperature={2700}
-                                        onColorChange={(color, isFirst) => {
-                                            if (!isFirst) {
-                                                state.currentNode.colorTemp = Math.round(color.s)
-                                                update()
-                                            }
-                                        }} />
-                                    <View style={{ height: cx(30) }} />
-                                    <View
-                                        style={{
-                                            flexDirection: 'row',
-                                            justifyContent: 'space-between',
-                                            marginHorizontal: cx(24),
-                                        }}>
-                                        <Text style={{
-                                            fontSize: cx(14),
-                                            color: '#000',
-                                            fontFamily: 'helvetica_neue_lt_std_roman',
-                                        }}>{Strings.getLang('add_new_trigger_time_field_brightness_text')}</Text>
-                                        <Text style={{
-                                            fontSize: cx(14),
-                                            color: '#000',
-                                            fontFamily: 'helvetica_neue_lt_std_roman',
-                                        }}>{state.currentNode.brightness}%</Text>
-                                    </View>
-                                    <Slider.Horizontal
-                                        value={state.currentNode.brightness}
-                                        minimumValue={0}
-                                        maximumValue={100}
-                                        theme={{
-                                            trackRadius: cx(3),
-                                            trackHeight: cx(6),
-                                            thumbSize: cx(26),
-                                            thumbRadius: cx(26),
-                                            thumbTintColor: '#FFF',
-                                            minimumTrackTintColor: '#f60',
-                                            maximumTrackTintColor: '#eee',
-                                        }}
-                                        style={{ marginHorizontal: cx(24) }}
-                                        onValueChange={v => {
-                                            state.currentNode.brightness = Math.round(v)
-                                            update()
-                                        }}
-                                        onSlidingComplete={v => {
-                                            state.currentNode.brightness = Math.round(v)
-                                            update()
-                                        }} />
-                                </View>
-                            </Tab.TabPane>
-                        </Tab>
-                    </View>
-                    <View style={{ height: cx(20) }} />
-                </View>
-                <View style={{}}>
-                    <LdvItemView title={Strings.getLang('timeschedule_add_schedule_ceiling_fan_selectionfield_text2')} />
-                    <LdvItemView
-                        title={Strings.getLang('Fan Switch')}
-                        textStyle={{ fontWeight: 'normal' }}
-                        disabled={false}
-                        rightComponent={() => {
-                            return (<SwitchButton
-                                value={state.fanEnable}
-                                onValueChange={() => {
-                                    state.fanEnable = !state.fanEnable
-                                }} />)
-                        }}
-                    />
-
-                    <LdvSlider
-                        style={{ paddingHorizontal: cx(20) }}
-                        titleStyle={{ fontSize: cx(16) }}
-                        title={Strings.getLang('ceiling_fan_tile_uvc_fan_speed')}
-                        min={1}
-                        max={3}
-                        value={state.fanSpeed}
-                        subTitleStr={state.fanSpeed + '/3'}
-                        onValueChange={() => {
-                        }}
-                        onSlidingComplete={value => state.fanSpeed = value}
-                    />
-                </View>
-                <View style={{ height: cx(100) }} />
-            </ScrollView>
-        </View>
-    )
+import React, { useCallback } from 'react'
+import { FlatList, Image, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native'
+import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import { Dialog, Slider, SwitchButton, Tab, TabBar, TYSdk, Utils } from 'tuya-panel-kit'
+import { useReactive, useUpdate, useUpdateEffect } from 'ahooks'
+import ColorExtractor, { colorTemperatureToColor } from '@ledvance/base/src/components/ColorExtractor'
+import { SceneNodeTransitionMode, SceneUIState } from './SceneInfo'
+import ColorUtils from '@ledvance/base/src/utils/ColorUtils'
+import { saveScene, useScene } from './SceneAction'
+import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import Cell from '@ledvance/base/src/components/Cell'
+import Strings from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import LdvItemView from '@ledvance/base/src/components/ldvItemView'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import dpCodes from 'config/dpCodes'
+
+const cx = Utils.RatioUtils.convertX
+
+interface SceneDetailPageParams {
+    scene: SceneUIState
+    sceneList: SceneUIState[],
+    onSave: () => void
+}
+
+export default function SceneDetailPage() {
+    const deviceId = useDeviceId()
+    const navigation = useNavigation()
+    const params = useRoute().params as SceneDetailPageParams
+    const scene: SceneUIState = JSON.parse(JSON.stringify(params.scene))
+    const update = useUpdate()
+    const sceneList = params.sceneList
+    const [, setScene] = useScene(dpCodes)
+    const state = useReactive({
+        name: scene.name,
+        fanEnable: scene.fanEnable,
+        fanSpeed: scene.fanSpeed,
+        nodes: scene.nodes,
+        transitionMode: scene.nodes[0].transitionMode,
+        transitionTime: scene.nodes[0].transitionTime,
+        currentNode: scene.nodes[scene.nodes.length - 1],
+        transitionModeSelections: [
+            {
+                key: SceneNodeTransitionMode.Static,
+                title: Strings.getLang('Static'),
+            },
+            {
+                key: SceneNodeTransitionMode.Jump,
+                title: Strings.getLang('Jump'),
+            },
+            {
+                key: SceneNodeTransitionMode.Gradient,
+                title: Strings.getLang('Gradient'),
+            },
+        ],
+        tabs: [
+            {
+                key: '0',
+                title: Strings.getLang('Colour'),
+            },
+            {
+                key: '1',
+                title: Strings.getLang('White'),
+            },
+        ],
+    })
+
+    useUpdateEffect(() => {
+        if (state.currentNode.isColorNode) {
+            TYSdk.event.emit('onColorChange', ColorUtils.hsv2Hex(state.currentNode.h, state.currentNode.s, state.currentNode.v))
+        } else {
+            TYSdk.event.emit('onColorTempChange', ColorUtils.hsv2Hex(0, state.currentNode.colorTemp, 100))
+        }
+    }, [state.currentNode, state.currentNode.isColorNode])
+
+    const getNodeListData = useCallback(() => {
+        if (state.transitionMode === SceneNodeTransitionMode.Static) {
+            if (state.currentNode !== state.nodes[0]) {
+                state.currentNode = state.nodes[0]
+            }
+            return [state.nodes[0]]
+        } else if (state.nodes.length >= 8) {
+            return [...state.nodes, 'remove']
+        } else if (state.nodes.length <= 1) {
+            return [...state.nodes, 'add']
+        } else {
+            return [...state.nodes, 'add', 'remove']
+        }
+    }, [])
+
+    const onTopBarRightBtnClick = useCallback(async () => {
+        const sceneObj = {
+            id: scene.id,
+            fanEnable: state.fanEnable,
+            fanSpeed: state.fanSpeed,
+            name: state.name,
+            image: scene.image,
+            nodes: scene.nodes,
+        }
+        const saveRes = await saveScene(deviceId, sceneObj, state.transitionMode, state.transitionTime, sceneList)
+        console.log('保存场景列表结果', saveRes)
+        if (saveRes.success) {
+            const setSceneRes = await setScene(deviceId, sceneObj,dpCodes)
+            console.log('设置修改后的场景结果', setSceneRes)
+            params.onSave()
+            navigation.goBack()
+        }
+    }, [])
+
+    return (
+        <View style={{ flex: 1 }}>
+            <LDVTopBar
+                title={Strings.getLang('Scene Edit')}
+                onBackPress={() => {
+                    navigation.goBack()
+                }}
+                rightButtonIcon={res.ic_check}
+                onRightButtonPress={onTopBarRightBtnClick} />
+            <ScrollView style={{ flex: 1 }} nestedScrollEnabled={true}>
+                <View style={{ flexDirection: 'column', flex: 1 }}>
+                    <Cell
+                        title={Strings.getLang('Scene name')}
+                        value={state.name}
+                        onPress={() => {
+                            Dialog.prompt({
+                                title: Strings.getLang('Modify the scene name'),
+                                cancelText: Strings.getLang('Cancel'),
+                                confirmText: Strings.getLang('Confirm'),
+                                defaultValue: state.name,
+                                placeholder: Strings.getLang('Scene name'),
+                                onConfirm: (text, { close }) => {
+                                    state.name = text
+                                    close()
+                                },
+                            })
+                        }} />
+                    <TabBar
+                        type="radio"
+                        activeKey={state.transitionMode}
+                        tabs={state.transitionModeSelections}
+                        onChange={value => {
+                            state.transitionMode = parseInt(value)
+                        }}
+                        style={{
+                            marginHorizontal: cx(24),
+                            height: cx(40),
+                            borderRadius: cx(20),
+                            backgroundColor: '#eee',
+                        }}
+                        tabTextStyle={{ fontSize: cx(11), color: '#666' }}
+                        tabActiveTextStyle={{
+                            fontSize: cx(11),
+                            color: '#f60',
+                        }} />
+                    {state.transitionMode !== SceneNodeTransitionMode.Static && <>
+                      <View style={{ height: cx(20) }} />
+                      <Text style={{
+                          marginStart: cx(24),
+                          fontSize: cx(14),
+                          color: '#000',
+                          fontFamily: 'helvetica_neue_lt_std_roman',
+                      }}>{Strings.getLang('Transform time')}</Text>
+                      <Slider.Horizontal
+                        value={state.transitionTime}
+                        minimumValue={0}
+                        maximumValue={100}
+                        theme={{
+                            trackRadius: cx(3),
+                            trackHeight: cx(6),
+                            thumbSize: cx(26),
+                            thumbRadius: cx(26),
+                            thumbTintColor: '#FFF',
+                            minimumTrackTintColor: '#f60',
+                            maximumTrackTintColor: '#eee',
+                        }}
+                        style={{ marginHorizontal: cx(24) }}
+                        onSlidingComplete={v => {
+                            state.transitionTime = Math.round(v)
+                        }} />
+                      <SafeAreaView>
+                        <FlatList
+                          style={{ marginStart: cx(6) }}
+                          numColumns={5}
+                          data={getNodeListData()}
+                          renderItem={({ item: node }) => {
+                              if (typeof node === 'string') {
+                                  return (
+                                      <TouchableOpacity
+                                          style={{
+                                              width: cx(50),
+                                              height: cx(50),
+                                              marginStart: cx(18),
+                                              marginTop: cx(10),
+                                              backgroundColor: '#ff660080',
+                                              borderColor: '#ffffffff',
+                                              borderWidth: cx(2),
+                                              borderRadius: cx(25),
+                                              justifyContent: 'center',
+                                              alignItems: 'center',
+                                          }}
+                                          onPress={() => {
+                                              if (node === 'add') {
+                                                  const newNode = {
+                                                      switchingInterval: state.transitionTime,
+                                                      transitionTime: state.transitionTime,
+                                                      transitionMode: state.transitionMode,
+                                                      h: 0,
+                                                      s: 100,
+                                                      v: 100,
+                                                      brightness: 0,
+                                                      colorTemp: 0,
+                                                      isColorNode: true,
+                                                  }
+                                                  state.nodes.push(newNode)
+                                                  state.currentNode = newNode
+                                              } else {
+                                                  const index = state.nodes.findIndex(item => item === state.currentNode)
+                                                  state.nodes.splice(index, 1)
+                                                  state.currentNode = state.nodes[index <= state.nodes.length - 1 ? index : index - 1]
+                                              }
+                                          }}>
+                                          <Image
+                                              style={{ width: 24, height: 24 }}
+                                              source={{ uri: node === 'add' ? res.add : res.delete }} />
+                                      </TouchableOpacity>
+                                  )
+                              }
+                              const ct = (node.colorTemp / 100) * (6500 - 2700) + 2700
+                              const color = colorTemperatureToColor(ct)
+                              return (
+                                  <TouchableOpacity
+                                      style={{
+                                          width: cx(50),
+                                          height: cx(50),
+                                          marginStart: cx(18),
+                                          marginTop: cx(10),
+                                          borderColor: state.currentNode === node ? '#f60' : '#ffffffff',
+                                          borderWidth: cx(2),
+                                          borderRadius: cx(25),
+                                          justifyContent: 'center',
+                                          alignItems: 'center',
+                                      }}
+                                      onPress={() => {
+                                          state.currentNode = node
+                                      }}>
+                                      <View style={{
+                                          width: cx(40),
+                                          height: cx(40),
+                                          borderRadius: cx(20),
+                                          backgroundColor: node.isColorNode ? ColorUtils.hsv2Hex(node.h, node.s, 100) : color,
+                                      }} />
+                                  </TouchableOpacity>
+                              )
+                          }}
+                          keyExtractor={(_item, index) => `${index}`} />
+                      </SafeAreaView>
+                    </>}
+                    <View style={{ height: cx(380) }}>
+                        <Tab
+                            activeKey={state.currentNode.isColorNode ? '0' : '1'}
+                            tabTextStyle={{
+                                fontSize: cx(14),
+                                color: '#666',
+                                fontFamily: 'helvetica_neue_lt_std_roman',
+                            }}
+                            tabActiveTextStyle={{ color: '#f60' }}
+                            tabBarUnderlineStyle={{ backgroundColor: '#f60' }}
+                            tabDefaultColor={'#666'}
+                            onChange={(value: string) => {
+                                state.currentNode.isColorNode = value === '0'
+                                update()
+                            }}>
+                            <Tab.TabPane style={{ flex: 1 }} key={state.tabs[0].key} tab={state.tabs[0].title}>
+                                <View style={{ flex: 1 }}>
+                                    <View style={{ height: cx(30) }} />
+                                    <ColorExtractor
+                                        radius={100}
+                                        color={ColorUtils.hsv2Hex(state.currentNode.h, state.currentNode.s, state.currentNode.v)}
+                                        onColorChange={(color, isFirst) => {
+                                            if (!isFirst) {
+                                                state.currentNode.h = Math.round(color.h)
+                                                state.currentNode.s = Math.round(color.s)
+                                                update()
+                                            }
+                                        }} />
+                                    <View style={{ height: cx(30) }} />
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            justifyContent: 'space-between',
+                                            marginHorizontal: cx(24),
+                                        }}>
+                                        <Text style={{
+                                            fontSize: cx(14),
+                                            color: '#000',
+                                            fontFamily: 'helvetica_neue_lt_std_roman',
+                                        }}>{'亮度'}</Text>
+                                        <Text style={{
+                                            fontSize: cx(14),
+                                            color: '#000',
+                                            fontFamily: 'helvetica_neue_lt_std_roman',
+                                        }}>{state.currentNode.v}%</Text>
+                                    </View>
+                                    <Slider.Horizontal
+                                        value={state.currentNode.v}
+                                        minimumValue={0}
+                                        maximumValue={100}
+                                        theme={{
+                                            trackRadius: cx(3),
+                                            trackHeight: cx(6),
+                                            thumbSize: cx(26),
+                                            thumbRadius: cx(26),
+                                            thumbTintColor: '#FFF',
+                                            minimumTrackTintColor: '#f60',
+                                            maximumTrackTintColor: '#eee',
+                                        }}
+                                        style={{ marginHorizontal: cx(24) }}
+                                        onValueChange={v => {
+                                            state.currentNode.v = Math.round(v)
+                                            update()
+                                        }}
+                                        onSlidingComplete={v => {
+                                            state.currentNode.v = Math.round(v)
+                                            update()
+                                        }} />
+                                </View>
+                            </Tab.TabPane>
+                            <Tab.TabPane style={{ flex: 1 }} key={state.tabs[1].key} tab={state.tabs[1].title}>
+                                <View style={{ flex: 1 }}>
+                                    <View style={{ height: cx(30) }} />
+                                    <ColorExtractor
+                                        radius={100}
+                                        color={ColorUtils.hsv2Hex(0, state.currentNode.colorTemp, 100)}
+                                        showColorTemperature={true}
+                                        colorTemperatureInterval={6500 - 2700}
+                                        miniColorTemperature={2700}
+                                        onColorChange={(color, isFirst) => {
+                                            if (!isFirst) {
+                                                state.currentNode.colorTemp = Math.round(color.s)
+                                                update()
+                                            }
+                                        }} />
+                                    <View style={{ height: cx(30) }} />
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            justifyContent: 'space-between',
+                                            marginHorizontal: cx(24),
+                                        }}>
+                                        <Text style={{
+                                            fontSize: cx(14),
+                                            color: '#000',
+                                            fontFamily: 'helvetica_neue_lt_std_roman',
+                                        }}>{Strings.getLang('add_new_trigger_time_field_brightness_text')}</Text>
+                                        <Text style={{
+                                            fontSize: cx(14),
+                                            color: '#000',
+                                            fontFamily: 'helvetica_neue_lt_std_roman',
+                                        }}>{state.currentNode.brightness}%</Text>
+                                    </View>
+                                    <Slider.Horizontal
+                                        value={state.currentNode.brightness}
+                                        minimumValue={0}
+                                        maximumValue={100}
+                                        theme={{
+                                            trackRadius: cx(3),
+                                            trackHeight: cx(6),
+                                            thumbSize: cx(26),
+                                            thumbRadius: cx(26),
+                                            thumbTintColor: '#FFF',
+                                            minimumTrackTintColor: '#f60',
+                                            maximumTrackTintColor: '#eee',
+                                        }}
+                                        style={{ marginHorizontal: cx(24) }}
+                                        onValueChange={v => {
+                                            state.currentNode.brightness = Math.round(v)
+                                            update()
+                                        }}
+                                        onSlidingComplete={v => {
+                                            state.currentNode.brightness = Math.round(v)
+                                            update()
+                                        }} />
+                                </View>
+                            </Tab.TabPane>
+                        </Tab>
+                    </View>
+                    <View style={{ height: cx(20) }} />
+                </View>
+                <View style={{}}>
+                    <LdvItemView title={Strings.getLang('timeschedule_add_schedule_ceiling_fan_selectionfield_text2')} />
+                    <LdvItemView
+                        title={Strings.getLang('Fan Switch')}
+                        textStyle={{ fontWeight: 'normal' }}
+                        disabled={false}
+                        rightComponent={() => {
+                            return (<SwitchButton
+                                value={state.fanEnable}
+                                onValueChange={() => {
+                                    state.fanEnable = !state.fanEnable
+                                }} />)
+                        }}
+                    />
+
+                    <LdvSlider
+                        style={{ paddingHorizontal: cx(20) }}
+                        titleStyle={{ fontSize: cx(16) }}
+                        title={Strings.getLang('ceiling_fan_tile_uvc_fan_speed')}
+                        min={1}
+                        max={3}
+                        value={state.fanSpeed}
+                        subTitleStr={state.fanSpeed + '/3'}
+                        onValueChange={() => {
+                        }}
+                        onSlidingComplete={value => state.fanSpeed = value}
+                    />
+                </View>
+                <View style={{ height: cx(100) }} />
+            </ScrollView>
+        </View>
+    )
 }