@ledvance/ui-biz-bundle 1.1.36 → 1.1.37

package/src/modules/mood/MixMood/MixMoodEditPage.tsx

@@ -0,0 +1,709 @@
+import Page from '@ledvance/base/src/components/Page'
+import I18n from '@ledvance/base/src/i18n'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { useReactive } from 'ahooks'
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import res from '@ledvance/base/src/res'
+import { cloneDeep, find, isEqual } from 'lodash'
+import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import TextField from '@ledvance/base/src/components/TextField'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { Utils } from 'tuya-panel-kit'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { stripLightSceneMode, StripNodeInfo, SceneNodeInfo, StripLightSceneMode, CeilingLightSceneMode, StripSceneInfo } from '../../scene/SceneInfo'
+import { MixSceneInfo, MixMainLampInfo, MixSceneNodeInfo } from './MixSceneBeans'
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
+import { SelectPageParams } from '../../select/SelectPage'
+import { showDeleteMoodDialog } from '../tools'
+import { ui_biz_routerKey } from '../../../navigation/Routers'
+import { MixMoodPageProps } from '@ledvance/ui-biz-bundle/src/modules/mood/MixMood/MixMoodPage'
+import Segmented from '@ledvance/base/src/components/Segmented'
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch'
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+const cx = Utils.RatioUtils.convertX
+
+interface MixMoodEditPageState {
+  headline: string
+  mood: MixSceneInfo
+  currentColorNodeIdx: number
+  currentWhiteNodeIdx: number
+  paintBucketSelected: boolean
+  paintWhiteBucketSelected: boolean
+  sceneMode: StripLightSceneMode
+  mainLamp: MixMainLampInfo
+  secondlyLamp: StripSceneInfo
+  loading: boolean
+}
+
+export interface MixMoodEditParams {
+  mode: 'add' | 'edit'
+  isStatic: boolean
+  currentMood: MixSceneInfo
+  moods: MixSceneInfo[]
+  modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: MixSceneInfo) => Promise<Result<any>>
+  onSave: () => void
+  moduleParams: MixMoodPageProps
+}
+const RgbcMoodEditPage = () => {
+  const navigation = useNavigation<StackNavigationProp<any>>()
+  const routeParams = useRoute().params as MixMoodEditParams
+  const params = cloneDeep(routeParams)
+  const moduleParams = params.moduleParams
+  const { mainLamp, secondlyLamp } = params.currentMood
+  const state = useReactive<MixMoodEditPageState>({
+    headline: '',
+    mood: params.currentMood,
+    mainLamp,
+    secondlyLamp,
+    currentWhiteNodeIdx: mainLamp.nodes?.length ? mainLamp.nodes.length - 1 : 1,
+    currentColorNodeIdx: secondlyLamp.nodes?.length ? secondlyLamp.nodes?.length - 1 : 1,
+    paintBucketSelected: false,
+    paintWhiteBucketSelected: false,
+    sceneMode: stripLightSceneMode,
+    loading: false
+  })
+
+  useEffect(() => {
+    state.headline = I18n.getLang(params.mode === 'add' ?
+      (params.isStatic ? 'add_new_static_mood_headline_text' : 'add_new_dynamic_mood_headline_text') :
+      (params.isStatic ? 'edit_static_mood_headline_text' : 'edit_static_mood_headline_text'))
+  }, [params.mode, params.isStatic])
+
+  const getColorBlockColor = useCallback(() => {
+    if (state.secondlyLamp?.nodes?.length) {
+      const currentNode = state.secondlyLamp?.nodes[state.currentColorNodeIdx]
+      const s = Math.round(mapFloatToRange(currentNode.s / 100, 30, 100))
+      if (currentNode.isColorNode) {
+        return hsv2Hex(currentNode.h, s, 100)
+      }
+    }
+    return '#fff'
+  }, [state.currentColorNodeIdx, state.secondlyLamp?.nodes])
+
+  const getNodeColor = useCallback((node: MixSceneNodeInfo, isColorNode) => {
+    if (isColorNode) {
+      return hsv2Hex(node.h, node.s, node.v)
+    } else {
+      return cctToColor(node.colorTemp)
+    }
+  }, [])
+
+  const createSecondlySelectModeData = useCallback(() => {
+    return Object.values(state.sceneMode).map(scene => {
+      return {
+        text: scene.title,
+        selected: scene.mode === state.secondlyLamp.mode,
+        value: scene.mode,
+      }
+    })
+  }, [state.secondlyLamp.mode, state.sceneMode])
+
+  const createMainSelectModeData = useCallback(() => {
+    return Object.values(CeilingLightSceneMode).map(scene => {
+      return {
+        text: scene.title,
+        selected: scene.mode === state.mainLamp.mode,
+        value: scene.mode,
+      }
+    })
+  }, [state.mainLamp.mode])
+
+  const createSelectOtherData = useCallback((otherData) => {
+    return otherData.map(other => {
+      return {
+        text: other.label,
+        selected: other.value === state.secondlyLamp.expand,
+        value: other.value,
+      }
+    })
+  }, [state.secondlyLamp.expand])
+
+  const getSelectOther = useCallback((otherData) => {
+    const currentOther = otherData.find(other => other.value === state.secondlyLamp.expand)
+    return currentOther.label
+  }, [state.secondlyLamp.expand])
+
+  const getButtonStatus = () => {
+    return isEqual({
+      ...state.mood,
+      mainLamp: state.mainLamp,
+      secondlyLamp: state.secondlyLamp
+    }, params.currentMood)
+  }
+
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => ((m.mainLamp.id !== state.mood.mainLamp.id && (params.isStatic ? params.isStatic : m.secondlyLamp.id !== state.mood.secondlyLamp.id)) && m.name === state.mood.name))
+  }, [state.mood.name, params.isStatic])
+
+  useEffect(() =>{
+    console.log(nameRepeat, '< --- anmeRepeat')
+  }, [nameRepeat])
+  return (
+    <Page
+      backText={I18n.getLang('mesh_device_detail_mode')}
+      showBackDialog={true}
+      loading={state.loading}
+      backDialogTitle={
+        I18n.getLang(params.mode === 'add' ?
+          'string_light_pp_dialog_sm_add_headline_c' :
+          'manage_user_unsaved_changes_dialog_headline')
+      }
+      backDialogContent={
+        I18n.getLang(params.mode === 'add' ?
+          'strip_light_static_mood_add_step_2_dialog_text' :
+          'strip_light_static_mood_editor_step_2_dialog_text')
+      }
+      headlineText={state.headline}
+      rightButtonIcon={getButtonStatus() ? res.ic_uncheck : res.ic_check}
+      rightButtonDisabled={getButtonStatus()}
+      rightButtonIconClick={async () => {
+        if(state.loading) return
+        state.loading = true
+        const res = await params.modDeleteFlag(params.mode, {
+          ...state.mood,
+          mainLamp: state.mainLamp,
+          secondlyLamp: state.secondlyLamp
+        })
+        state.loading = false
+        if (res.success) {
+          navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood)
+        }
+      }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.mood.name}
+            placeholder={I18n.getLang('edit_static_mood_inputfield_topic_text')}
+            onChangeText={text => {
+              state.mood.name = text
+            }}
+            showError={state.mood.name.length > 32 || nameRepeat}
+            maxLength={33}
+            tipColor={nameRepeat ? '#f00' : undefined}
+            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
+            errorText={I18n.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')} />
+          {params.isStatic ? <Card style={styles.adjustCard}>
+            <LdvSwitch
+              title={I18n.getLang('light_sources_tile_main_lighting_headline')}
+              color="#fff"
+              colorAlpha={1}
+              enable={false}
+              setEnable={() => { }}
+              showSwitch={false}
+            />
+            <ColorTempAdjustView
+              isSupportBrightness={moduleParams.isSupportBrightness}
+              isSupportTemperature={moduleParams.isSupportTemperature}
+              colorTemp={state.mainLamp.nodes[state.currentWhiteNodeIdx].colorTemp}
+              brightness={state.mainLamp.nodes[state.currentWhiteNodeIdx].brightness}
+              onBrightnessChangeComplete={(bright) => {
+                state.mainLamp.nodes.forEach(node => {
+                  node.brightness = bright
+                })
+              }}
+              onCCTChangeComplete={(cct) => {
+                state.mainLamp.nodes.forEach(node => {
+                  node.colorTemp = cct
+                })
+              }}
+            />
+            <Spacer height={cx(16)}/>
+          </Card> :
+            <>
+              <Card style={styles.adjustCard}>
+                <LdvSwitch
+                  title={I18n.getLang('light_sources_tile_main_lighting_headline')}
+                  color="#fff"
+                  colorAlpha={1}
+                  enable={false}
+                  setEnable={() => { }}
+                  showSwitch={false}
+                />
+                <TextFieldStyleButton
+                  style={styles.transitionMode}
+                  text={CeilingLightSceneMode[state.mainLamp.mode]?.title}
+                  placeholder={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
+                  onPress={() => {
+                    const paramsSelect: SelectPageParams<number> = {
+                      title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
+                      data: createMainSelectModeData(),
+                      onSelect: selectPageData => {
+                        state.mainLamp.mode = selectPageData.value
+                      },
+                    }
+                    navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+                  }} />
+                <Spacer height={cx(10)} />
+                <LdvSlider
+                  title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+                  value={state.mainLamp.speed}
+                  onValueChange={() => { }}
+                  onSlidingComplete={value => {
+                    state.mainLamp.speed = value
+                  }} />
+                <Spacer height={cx(16)} />
+                <View style={styles.nodesAdjust}>
+                  <View style={styles.adjustButtons}>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.paintWhiteBucketSelected = true
+                      }}>
+                      <Image
+                        style={[styles.adjustButton, { tintColor: state.paintWhiteBucketSelected ? '#f60' : '#666' }]}
+                        source={res.ic_paint_bucket} />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.paintWhiteBucketSelected = false
+                      }}>
+                      <Image
+                        style={[styles.adjustButton, { tintColor: state.paintWhiteBucketSelected ? '#666' : '#f60' }]}
+                        source={res.ic_colorize} />
+                    </TouchableOpacity>
+                  </View>
+                  <FlatList
+                    data={state.mainLamp.nodes}
+                    style={styles.nodeList}
+                    renderItem={({ item, index }) => {
+                      return (
+                        <View style={styles.nodeItem}>
+                          <TouchableOpacity
+                            style={[
+                              styles.nodeBlock,
+                              {
+                                backgroundColor: getNodeColor(item, false),
+                              },
+                            ]}
+                            onPress={() => {
+                              state.currentWhiteNodeIdx = index
+                            }} />
+                          <TouchableOpacity
+                            style={styles.nodeDeleteBtn}
+                            disabled={state.mainLamp.nodes.length < 3}
+                            onPress={() => {
+                              state.mainLamp.nodes.splice(index, 1)
+                              state.currentWhiteNodeIdx = state.mainLamp.nodes.length - 1
+                            }}>
+                            <Image
+                              style={[
+                                styles.nodeDeleteIcon,
+                                {
+                                  tintColor: state.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                },
+                              ]}
+                              source={res.ic_mood_del} />
+                          </TouchableOpacity>
+                        </View>
+                      )
+                    }}
+                    keyExtractor={(_, index) => `${index}`}
+                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                    ListFooterComponent={() => {
+                      if (state.mainLamp.nodes.length >= 8) {
+                        return (<></>)
+                      }
+                      return (
+                        <View>
+                          <Spacer height={cx(12)} />
+                          <TouchableOpacity
+                            style={styles.nodeAddBtn}
+                            onPress={() => {
+                              const node = {
+                                ...state.mainLamp.nodes[state.currentWhiteNodeIdx],
+                              }
+                              state.mainLamp.nodes.push(node)
+                              state.currentWhiteNodeIdx = state.mainLamp.nodes.length - 1
+                            }}>
+                            <Image
+                              style={{
+                                width: cx(18),
+                                height: cx(18),
+                                tintColor: '#000',
+                              }}
+                              source={{ uri: res.add }} />
+                          </TouchableOpacity>
+                        </View>
+                      )
+                    }} />
+                </View>
+                <Spacer />
+                <ColorTempAdjustView
+                  isSupportBrightness={moduleParams.isSupportBrightness}
+                  isSupportTemperature={moduleParams.isSupportTemperature}
+                  colorTemp={state.mainLamp.nodes[state.currentWhiteNodeIdx].colorTemp}
+                  brightness={state.mainLamp.nodes[state.currentWhiteNodeIdx].brightness}
+                  onBrightnessChangeComplete={(bright) => {
+                    state.mainLamp.nodes.forEach((node, idx) => {
+                      if (state.paintWhiteBucketSelected) {
+                        node.brightness = bright
+                      }
+                      if (state.currentWhiteNodeIdx === idx) {
+                        node.brightness = bright
+                      }
+                    })
+                  }}
+                  onCCTChangeComplete={(cct) => {
+                    state.mainLamp.nodes.forEach((node, idx) => {
+                      if (state.paintWhiteBucketSelected) {
+                        node.colorTemp = cct
+                      }
+                      if (state.currentWhiteNodeIdx === idx) {
+                        node.colorTemp = cct
+                      }
+                    })
+                  }}
+                />
+                <Spacer height={cx(10)} />
+              </Card>
+              <Card style={styles.adjustCard}>
+                <LdvSwitch
+                  title={I18n.getLang('light_sources_tile_sec_lighting_headline')}
+                  color={'#fff'}
+                  colorAlpha={1}
+                  enable={false}
+                  setEnable={() => { }}
+                  showSwitch={false}
+                />
+                <TextFieldStyleButton
+                  style={styles.transitionMode}
+                  text={state.sceneMode[state.secondlyLamp.mode]?.title}
+                  placeholder={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
+                  onPress={() => {
+                    const paramsSelect: SelectPageParams<number> = {
+                      title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
+                      data: createSecondlySelectModeData(),
+                      onSelect: selectPageData => {
+                        state.secondlyLamp.mode = selectPageData.value
+                      },
+                    }
+                    navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+                  }} />
+                <Spacer height={cx(10)} />
+                <LdvSlider
+                  title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+                  value={state.secondlyLamp.speed}
+                  onValueChange={() => { }}
+                  onSlidingComplete={value => {
+                    state.secondlyLamp.speed = value
+                  }} />
+                <Spacer height={cx(16)} />
+                {state.sceneMode[state.secondlyLamp.mode]?.turnOn && <View style={styles.transitionMode}>
+                  <Segmented
+                    value={state.secondlyLamp.direction}
+                    options={[
+                      {
+                        label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text1'),
+                        value: 0
+                      },
+                      {
+                        label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text2'),
+                        value: 1
+                      },
+                    ]}
+                    onChange={(v) => state.secondlyLamp.direction = Number(v)}
+                  />
+                  <Spacer />
+                </View>}
+                {state.sceneMode[state.secondlyLamp.mode]?.paragraph && <View style={styles.transitionMode}>
+                  <Segmented
+                    value={state.secondlyLamp.segmented}
+                    options={[
+                      {
+                        label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text3'),
+                        value: 0
+                      },
+                      {
+                        label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text4'),
+                        value: 1
+                      },
+                    ]}
+                    onChange={(v) => state.secondlyLamp.segmented = Number(v)}
+                  />
+                  <Spacer />
+                </View>}
+                {state.sceneMode[state.secondlyLamp.mode]?.other && <>
+                  <TextFieldStyleButton
+                    style={styles.transitionMode}
+                    text={getSelectOther(state.sceneMode[state.secondlyLamp.mode]?.other)}
+                    placeholder={I18n.getLang('add_new_dynamic_mood_strip_lights_selectionfield2_topic_text')}
+                    onPress={() => {
+                      const paramsSelect: SelectPageParams<number> = {
+                        title: I18n.getLang('add_new_dynamic_mood_strip_lights_selectionfield2_topic_text'),
+                        data: createSelectOtherData(state.sceneMode[state.secondlyLamp.mode]?.other),
+                        onSelect: selectPageData => {
+                          state.secondlyLamp.expand = selectPageData.value
+                        },
+                      }
+                      navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+                    }} />
+                  <Spacer />
+                </>}
+                <View style={styles.nodesAdjust}>
+                  <View style={styles.adjustButtons}>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.paintBucketSelected = true
+                      }}>
+                      <Image
+                        style={[styles.adjustButton, { tintColor: state.paintBucketSelected ? '#f60' : '#666' }]}
+                        source={res.ic_paint_bucket} />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.paintBucketSelected = false
+                      }}>
+                      <Image
+                        style={[styles.adjustButton, { tintColor: state.paintBucketSelected ? '#666' : '#f60' }]}
+                        source={res.ic_colorize} />
+                    </TouchableOpacity>
+                  </View>
+                  <FlatList
+                    data={state.secondlyLamp.nodes}
+                    style={styles.nodeList}
+                    renderItem={({ item, index }) => {
+                      return (
+                        <View style={styles.nodeItem}>
+                          <TouchableOpacity
+                            style={[
+                              styles.nodeBlock,
+                              {
+                                backgroundColor: getNodeColor(item, true),
+                              },
+                            ]}
+                            onPress={() => {
+                              state.currentColorNodeIdx = index
+                            }} />
+                          <TouchableOpacity
+                            style={styles.nodeDeleteBtn}
+                            disabled={state.secondlyLamp.nodes.length < 3}
+                            onPress={() => {
+                              state.secondlyLamp.nodes.splice(index, 1)
+                              state.currentColorNodeIdx = state.secondlyLamp.nodes.length - 1
+                            }}>
+                            <Image
+                              style={[
+                                styles.nodeDeleteIcon,
+                                {
+                                  tintColor: state.secondlyLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                },
+                              ]}
+                              source={res.ic_mood_del} />
+                          </TouchableOpacity>
+                        </View>
+                      )
+                    }}
+                    keyExtractor={(_, index) => `${index}`}
+                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                    ListFooterComponent={() => {
+                      if (state.secondlyLamp.nodes.length >= 8) {
+                        return (<></>)
+                      }
+                      return (
+                        <View>
+                          <Spacer height={cx(12)} />
+                          <TouchableOpacity
+                            style={styles.nodeAddBtn}
+                            onPress={() => {
+                              const node = {
+                                ...state.secondlyLamp.nodes[state.currentWhiteNodeIdx],
+                              }
+                              state.secondlyLamp.nodes.push(node)
+                              state.currentWhiteNodeIdx = state.secondlyLamp.nodes.length - 1
+                            }}>
+                            <Image
+                              style={{
+                                width: cx(18),
+                                height: cx(18),
+                                tintColor: '#000',
+                              }}
+                              source={{ uri: res.add }} />
+                          </TouchableOpacity>
+                        </View>
+                      )
+                    }} />
+                </View>
+                <Spacer />
+                <View style={styles.lightLine}>
+                  <Text style={styles.light}>
+                    {I18n.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
+                  </Text>
+                  <View style={[styles.preview, { backgroundColor: getColorBlockColor() }]} />
+                </View>
+                <Spacer />
+                <ColorAdjustView
+                  h={state.secondlyLamp.nodes[state.currentColorNodeIdx].h}
+                  s={state.secondlyLamp.nodes[state.currentColorNodeIdx].s}
+                  v={state.secondlyLamp.nodes[state.currentColorNodeIdx].v}
+                  onHSVChange={() => { }}
+                  onHSVChangeComplete={(h, s, v) => {
+                    state.secondlyLamp.nodes.forEach((node, idx) => {
+                      if (state.paintBucketSelected) {
+                        node.h = h
+                        node.s = s
+                        node.v = v
+                      }
+                      if (state.currentColorNodeIdx === idx) {
+                        node.h = h
+                        node.s = s
+                        node.v = v
+                      }
+                    })
+                  }}
+                />
+                <Spacer height={cx(10)} />
+              </Card>
+            </>}
+
+          <Spacer />
+          {params.mode === 'edit' &&
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={I18n.getLang('edit_static_mood_button_delete_text')}
+                onPress={() => {
+                  showDeleteMoodDialog(async (_, { close }) => {
+                    close()
+                    params.modDeleteFlag('del', state.mood)
+                  })
+                }} />
+            </View>}
+          <Spacer />
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  name: {
+    marginHorizontal: cx(24),
+  },
+  adjustCard: {
+    marginVertical: cx(12),
+    marginHorizontal: cx(24),
+  },
+  fanAdjustCard: {
+    marginHorizontal: cx(24),
+  },
+  lightLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(16),
+  },
+  light: {
+    color: '#000',
+    fontSize: cx(18),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  transitionMode: {
+    marginHorizontal: cx(16),
+  },
+  preview: {
+    width: cx(20),
+    height: cx(20),
+    marginStart: cx(12),
+    borderRadius: cx(4),
+  },
+  nodesAdjust: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  adjustButtons: {
+    width: cx(44),
+    marginStart: cx(16),
+  },
+  adjustButton: {
+    width: cx(44),
+    height: cx(44),
+  },
+  nodeList: {
+    flex: 1,
+    marginHorizontal: cx(16),
+  },
+  nodeItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  nodeBlock: {
+    flex: 1,
+    height: cx(40),
+    borderRadius: cx(8),
+  },
+  nodeDeleteBtn: {
+    width: cx(24),
+    height: cx(30),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  nodeDeleteIcon: {
+    width: cx(16),
+    height: cx(16),
+  },
+  nodeAddBtn: {
+    height: cx(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginEnd: cx(26),
+    borderRadius: cx(8),
+    borderWidth: cx(1),
+    borderStyle: 'dashed',
+    borderColor: '#666',
+    backgroundColor: '#f6f6f6',
+  },
+  deleteBtn: {
+    width: '100%',
+    height: cx(50),
+    backgroundColor: '#666',
+    borderRadius: cx(8),
+  },
+  deleteBtnText: {
+    color: '#fff',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+})
+
+export const defWhiteNode: SceneNodeInfo[] = [
+  {
+    h: 0,
+    s: 0,
+    v: 0,
+    brightness: 100,
+    colorTemp: 0,
+    switchingInterval: 50,
+    transitionTime: 50,
+    transitionMode: 1,
+    isColorNode: false
+  },
+  {
+    h: 0,
+    s: 0,
+    v: 0,
+    brightness: 100,
+    colorTemp: 0,
+    switchingInterval: 50,
+    transitionTime: 50,
+    transitionMode: 1,
+    isColorNode: false
+  },
+]
+
+export const defColorNode: StripNodeInfo[] = [
+  { h: 0, s: 100, v: 100, brightness: 0, colorTemp: 0, isColorNode: true },
+  { h: 0, s: 100, v: 100, brightness: 0, colorTemp: 0, isColorNode: true },
+]
+
+export default RgbcMoodEditPage