@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/flags/FlagEditPage.tsx

@@ -1,442 +1,442 @@
-import React, { useCallback, useMemo } from 'react'
-import I18n from '@ledvance/base/src/i18n'
-import { useNavigation, useRoute } from '@react-navigation/native'
-import Page from '@ledvance/base/src/components/Page'
-import res from '@ledvance/base/src/res'
-import { ScrollView, View, FlatList, StyleSheet, Image, TouchableOpacity, Text } from 'react-native'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import { useReactive, useUpdateEffect } from 'ahooks'
-import { Utils } from 'tuya-panel-kit'
-import TextField from '@ledvance/base/src/components/TextField'
-import Card from '@ledvance/base/src/components/Card'
-import LdvSlider from '@ledvance/base/src/components/ldvSlider'
-import TextButton from '@ledvance/base/src/components/TextButton'
-import { hsv2Hex } from '@ledvance/base/src/utils'
-import { cloneDeep, find, isEqual } from 'lodash'
-import { FlagUiInfo } from './FlagInfo'
-import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView'
-import { Result } from '@ledvance/base/src/models/modules/Result'
-import { FlagOption } from './FlagActions'
-import { FlagPageProps } from './FlagPage'
-import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
-import { showDialog } from '@ledvance/base/src/utils/common'
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
-
-const cx = Utils.RatioUtils.convertX
-
-export interface FlagEditParams {
-  mode: 'add' | 'edit'
-  currentMood: FlagUiInfo
-  moods: FlagUiInfo[]
-  moduleParams: FlagPageProps
-  modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo, options?: FlagOption) => Promise<Result<any>>
-}
-
-const FlagEditPage = () => {
-  const navigation = useNavigation()
-  const params = cloneDeep(useRoute().params as FlagEditParams)
-  const state = useReactive({
-    showAddMoodPopover: true,
-    mood: params.currentMood,
-    currentWhiteNode: params.currentMood.whiteColors[params.currentMood.whiteColors.length - 1]!,
-    currentNode: params.currentMood.colors[params.currentMood.colors.length - 1],
-    whitePaintBucketIdx: params.currentMood.whiteColors.length - 1,
-    colorPaintBucketIdx: params.currentMood.colors.length - 1,
-    whitePaintBucketSelected: true,
-    colorPaintBucketSelected: false,
-    loading: false
-  })
-  
-  const getColorBlockColor = useCallback((isMainLight?: boolean) => {
-    if (isMainLight) {
-      return cctToColor(state.currentWhiteNode.colorTemp, Math.max(...[state.currentWhiteNode.brightness, 50]))
-    }
-    const { h, s, v } = state.currentNode
-    return hsv2Hex(h, s, v)
-  }, [state.currentNode, state.currentWhiteNode])
-
-  useUpdateEffect(() =>{
-    state.currentNode = state.mood.colors[state.colorPaintBucketIdx]
-  }, [JSON.stringify(state.mood.colors), state.colorPaintBucketIdx])
-
-  useUpdateEffect(() =>{
-    state.currentWhiteNode = state.mood.whiteColors[state.whitePaintBucketIdx]
-  }, [JSON.stringify(state.mood.whiteColors), state.whitePaintBucketIdx])
-
-  const checkMoodDataChanged = useMemo(() =>{
-    return isEqual(state.mood, params.currentMood)
-  }, [params.currentMood, state.mood])
-
-  const nameRepeat = useMemo(() => {
-    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name && state.mood.name !== ''))
-  }, [state.mood.name])
-
-  const canSaveMoodData = useMemo(() =>{
-    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodDataChanged)
-  }, [nameRepeat, state.mood.name, checkMoodDataChanged, params.mode])
-
-  return (
-    <Page
-      backText={I18n.getLang('Feature_devicepanel_flags')}
-      showBackDialog={!checkMoodDataChanged}
-      loading={state.loading}
-      backDialogTitle={
-        I18n.getLang(params.mode === 'add' ?
-          'flag_canceladding' :
-          'flag_canceledit')
-      }
-      backDialogContent={
-        I18n.getLang('flag_cancelinfo')
-      }
-      headlineText={I18n.getLang(params.mode === 'add' ? 'flag_addanewflag' : 'flag_edittheflag')}
-      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={async () => {
-        if (state.loading || !canSaveMoodData) return
-        state.loading = true
-        const res = await params.modDeleteFlag(params.mode, state.mood)
-        if (res.success) {
-          state.loading = false
-          navigation.goBack()
-        }
-      }}>
-      <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
-            }}
-            maxLength={33}
-            showError={state.mood.name.length > 32 || nameRepeat}
-            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.moduleParams.isSupportMixScene || params.moduleParams.isCeilingLight) && <><Card style={styles.adjustCard}>
-            <Spacer height={cx(16)} />
-            <View style={styles.lightLine}>
-              <Text style={styles.light}>
-                {I18n.getLang('light_sources_tile_main_lighting_headline')}
-              </Text>
-              <View style={[styles.preview, { backgroundColor: getColorBlockColor(true) }]} />
-            </View>
-            <Spacer />
-            <ColorTempAdjustView
-              isSupportBrightness={!!params.moduleParams.isSupportTemperature}
-              isSupportTemperature={!!params.moduleParams.isSupportTemperature}
-              colorTemp={state.currentWhiteNode.colorTemp}
-              brightness={state.currentWhiteNode.brightness}
-              onCCTChange={(cct) => {
-                state.currentWhiteNode.colorTemp = cct
-              }}
-              onCCTChangeComplete={(cct) => {
-                state.currentWhiteNode.colorTemp = cct
-                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
-                  if (idx === state.whitePaintBucketIdx) {
-                    return {
-                      ...state.mood.whiteColors[idx],
-                      colorTemp: cct
-                    }
-                  }
-                  return item
-                })
-              }}
-              onBrightnessChange={() => { }}
-              onBrightnessChangeComplete={(bright) => {
-                state.currentWhiteNode.brightness = bright
-                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
-                  if (idx === state.whitePaintBucketIdx) {
-                    return {
-                      ...state.mood.whiteColors[idx],
-                      brightness: bright
-                    }
-                  }
-                  return item
-                })
-              }}
-            />
-            <Spacer height={cx(16)} />
-          </Card>
-            <Spacer />
-          </>}
-          <Card style={styles.adjustCard}>
-            <Spacer height={cx(16)} />
-            <View style={styles.lightLine}>
-              <Text style={styles.light}>
-                {I18n.getLang((params.moduleParams.isSupportMixScene || params.moduleParams.isCeilingLight) ? 'light_sources_tile_sec_lighting_headline' : 'light_sources_tile_tw_lighting_headline')}
-              </Text>
-            </View>
-            <Spacer height={cx(10)} />
-            {(!params.moduleParams.isStripLight && !params.moduleParams.isCeilingLight) && <>
-              <LdvSlider
-                title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
-                value={state.mood.speed}
-                onValueChange={value => {
-                  state.mood.speed = value
-                }}
-                onSlidingComplete={value => {
-                  state.mood.speed = value
-                }} />
-              <Spacer height={cx(16)} />
-            </>}
-            <View style={styles.nodesAdjust}>
-              <View style={styles.adjustButtons}>
-                <TouchableOpacity
-                  onPress={() => {
-                    state.colorPaintBucketSelected = true
-                  }}>
-                  <Image
-                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#f60' : '#666' }]}
-                    source={res.ic_paint_bucket} />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={() => {
-                    state.colorPaintBucketSelected = false
-                  }}>
-                  <Image
-                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#666' : '#f60' }]}
-                    source={res.ic_colorize} />
-                </TouchableOpacity>
-              </View>
-              <FlatList
-                data={state.mood.colors}
-                style={styles.nodeList}
-                renderItem={({ item, index }) => {
-                  return (
-                    <View style={styles.nodeItem}>
-                      <TouchableOpacity
-                        style={[
-                          styles.nodeBlock,
-                          {
-                            backgroundColor: hsv2Hex(item.h, item.s, item.v),
-                          },
-                        ]}
-                        onPress={() => {
-                          state.currentNode = item
-                          state.colorPaintBucketIdx = index
-                        }} />
-                      <TouchableOpacity
-                        style={styles.nodeDeleteBtn}
-                        disabled={state.mood.colors.length < 3}
-                        onPress={() => {
-                          state.mood.colors.splice(index, 1)
-                          state.currentNode = state.mood.colors[state.mood.colors.length - 1]
-                        }}>
-                        <Image
-                          style={[
-                            styles.nodeDeleteIcon,
-                            {
-                              tintColor: state.mood.colors.length < 3 ? '#ccc' : '#666',
-                            },
-                          ]}
-                          source={res.ic_mood_del} />
-                      </TouchableOpacity>
-                    </View>
-                  )
-                }}
-                keyExtractor={(_, index) => `${index}`}
-                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
-                ListFooterComponent={() => {
-                  if (state.mood.colors.length >= 8) {
-                    return (<></>)
-                  }
-                  return (
-                    <View>
-                      <Spacer height={cx(12)} />
-                      <TouchableOpacity
-                        style={styles.nodeAddBtn}
-                        onPress={() => {
-                          const node = {
-                            ...state.currentNode,
-                          }
-                          state.mood.colors.push(node)
-                          state.currentNode = node
-                          state.colorPaintBucketIdx = state.mood.colors.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.currentNode.h}
-              s={state.currentNode.s}
-              v={state.currentNode.v}
-              reserveSV={true}
-              minBrightness={0}
-              onHSVChange={(h, s, v) => {
-                if (state.colorPaintBucketSelected) {
-                  state.mood.colors = state.mood.colors.map(() => (
-                    { h, s, v }
-                  ))
-                } else {
-                  state.currentNode.h = h
-                  state.currentNode.s = s
-                  state.currentNode.v = v
-                }
-              }}
-              onHSVChangeComplete={(h, s, v) => {
-                if (state.colorPaintBucketSelected) {
-                  state.mood.colors = state.mood.colors.map(() => (
-                    { h, s, v }
-                  ))
-                } else {
-                  state.currentNode.h = h
-                  state.currentNode.s = s
-                  state.currentNode.v = v
-                  state.mood.colors = state.mood.colors.map((item, idx) => {
-                    if (idx === state.colorPaintBucketIdx) {
-                      return { h, s, v }
-                    }
-                    return item
-                  })
-                }
-              }}
-            />
-            <Spacer height={cx(16)} />
-          </Card>
-          <Spacer />
-          {params.mode === 'edit' &&
-            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
-              <TextButton
-                style={styles.deleteBtn}
-                textStyle={styles.deleteBtnText}
-                text={I18n.getLang('flag_deleteflag')}
-                onPress={() => {
-                  showDialog({
-                    method: 'confirm',
-                    title: I18n.getLang('flag_deletepopup'),
-                    subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
-                    onConfirm: async (_, { close }) => {
-                      close()
-                      if (state.loading) return
-                      state.loading = true
-                      const res = await params.modDeleteFlag('del', state.mood)
-                      if (res.success) {
-                        state.loading = false
-                        navigation.goBack()
-                      }
-                    }
-                  })
-                }} />
-            </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),
-    borderWidth: 1,
-    borderColor: '#ccc'
-  },
-  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',
-  },
-})
-
+import React, { useCallback, useMemo } from 'react'
+import I18n from '@ledvance/base/src/i18n'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import Page from '@ledvance/base/src/components/Page'
+import res from '@ledvance/base/src/res'
+import { ScrollView, View, FlatList, StyleSheet, Image, TouchableOpacity, Text } from 'react-native'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import { Utils } from 'tuya-panel-kit'
+import TextField from '@ledvance/base/src/components/TextField'
+import Card from '@ledvance/base/src/components/Card'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { hsv2Hex } from '@ledvance/base/src/utils'
+import { cloneDeep, find, isEqual } from 'lodash'
+import { FlagUiInfo } from './FlagInfo'
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+import { FlagOption } from './FlagActions'
+import { FlagPageProps } from './FlagPage'
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
+import { showDialog } from '@ledvance/base/src/utils/common'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+
+const cx = Utils.RatioUtils.convertX
+
+export interface FlagEditParams {
+  mode: 'add' | 'edit'
+  currentMood: FlagUiInfo
+  moods: FlagUiInfo[]
+  moduleParams: FlagPageProps
+  modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo, options?: FlagOption) => Promise<Result<any>>
+}
+
+const FlagEditPage = () => {
+  const navigation = useNavigation()
+  const params = cloneDeep(useRoute().params as FlagEditParams)
+  const state = useReactive({
+    showAddMoodPopover: true,
+    mood: params.currentMood,
+    currentWhiteNode: params.currentMood.whiteColors[params.currentMood.whiteColors.length - 1]!,
+    currentNode: params.currentMood.colors[params.currentMood.colors.length - 1],
+    whitePaintBucketIdx: params.currentMood.whiteColors.length - 1,
+    colorPaintBucketIdx: params.currentMood.colors.length - 1,
+    whitePaintBucketSelected: true,
+    colorPaintBucketSelected: false,
+    loading: false
+  })
+  
+  const getColorBlockColor = useCallback((isMainLight?: boolean) => {
+    if (isMainLight) {
+      return cctToColor(state.currentWhiteNode.colorTemp, Math.max(...[state.currentWhiteNode.brightness, 50]))
+    }
+    const { h, s, v } = state.currentNode
+    return hsv2Hex(h, s, v)
+  }, [state.currentNode, state.currentWhiteNode])
+
+  useUpdateEffect(() =>{
+    state.currentNode = state.mood.colors[state.colorPaintBucketIdx]
+  }, [JSON.stringify(state.mood.colors), state.colorPaintBucketIdx])
+
+  useUpdateEffect(() =>{
+    state.currentWhiteNode = state.mood.whiteColors[state.whitePaintBucketIdx]
+  }, [JSON.stringify(state.mood.whiteColors), state.whitePaintBucketIdx])
+
+  const checkMoodDataChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [params.currentMood, state.mood])
+
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name && state.mood.name !== ''))
+  }, [state.mood.name])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodDataChanged)
+  }, [nameRepeat, state.mood.name, checkMoodDataChanged, params.mode])
+
+  return (
+    <Page
+      backText={I18n.getLang('Feature_devicepanel_flags')}
+      showBackDialog={!checkMoodDataChanged}
+      loading={state.loading}
+      backDialogTitle={
+        I18n.getLang(params.mode === 'add' ?
+          'flag_canceladding' :
+          'flag_canceledit')
+      }
+      backDialogContent={
+        I18n.getLang('flag_cancelinfo')
+      }
+      headlineText={I18n.getLang(params.mode === 'add' ? 'flag_addanewflag' : 'flag_edittheflag')}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (state.loading || !canSaveMoodData) return
+        state.loading = true
+        const res = await params.modDeleteFlag(params.mode, state.mood)
+        if (res.success) {
+          state.loading = false
+          navigation.goBack()
+        }
+      }}>
+      <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
+            }}
+            maxLength={33}
+            showError={state.mood.name.length > 32 || nameRepeat}
+            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.moduleParams.isSupportMixScene || params.moduleParams.isCeilingLight) && <><Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang('light_sources_tile_main_lighting_headline')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor(true) }]} />
+            </View>
+            <Spacer />
+            <ColorTempAdjustView
+              isSupportBrightness={!!params.moduleParams.isSupportTemperature}
+              isSupportTemperature={!!params.moduleParams.isSupportTemperature}
+              colorTemp={state.currentWhiteNode.colorTemp}
+              brightness={state.currentWhiteNode.brightness}
+              onCCTChange={(cct) => {
+                state.currentWhiteNode.colorTemp = cct
+              }}
+              onCCTChangeComplete={(cct) => {
+                state.currentWhiteNode.colorTemp = cct
+                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                  if (idx === state.whitePaintBucketIdx) {
+                    return {
+                      ...state.mood.whiteColors[idx],
+                      colorTemp: cct
+                    }
+                  }
+                  return item
+                })
+              }}
+              onBrightnessChange={() => { }}
+              onBrightnessChangeComplete={(bright) => {
+                state.currentWhiteNode.brightness = bright
+                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                  if (idx === state.whitePaintBucketIdx) {
+                    return {
+                      ...state.mood.whiteColors[idx],
+                      brightness: bright
+                    }
+                  }
+                  return item
+                })
+              }}
+            />
+            <Spacer height={cx(16)} />
+          </Card>
+            <Spacer />
+          </>}
+          <Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang((params.moduleParams.isSupportMixScene || params.moduleParams.isCeilingLight) ? 'light_sources_tile_sec_lighting_headline' : 'light_sources_tile_tw_lighting_headline')}
+              </Text>
+            </View>
+            <Spacer height={cx(10)} />
+            {(!params.moduleParams.isStripLight && !params.moduleParams.isCeilingLight) && <>
+              <LdvSlider
+                title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+                value={state.mood.speed}
+                onValueChange={value => {
+                  state.mood.speed = value
+                }}
+                onSlidingComplete={value => {
+                  state.mood.speed = value
+                }} />
+              <Spacer height={cx(16)} />
+            </>}
+            <View style={styles.nodesAdjust}>
+              <View style={styles.adjustButtons}>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.colorPaintBucketSelected = true
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#f60' : '#666' }]}
+                    source={res.ic_paint_bucket} />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.colorPaintBucketSelected = false
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#666' : '#f60' }]}
+                    source={res.ic_colorize} />
+                </TouchableOpacity>
+              </View>
+              <FlatList
+                data={state.mood.colors}
+                style={styles.nodeList}
+                renderItem={({ item, index }) => {
+                  return (
+                    <View style={styles.nodeItem}>
+                      <TouchableOpacity
+                        style={[
+                          styles.nodeBlock,
+                          {
+                            backgroundColor: hsv2Hex(item.h, item.s, item.v),
+                          },
+                        ]}
+                        onPress={() => {
+                          state.currentNode = item
+                          state.colorPaintBucketIdx = index
+                        }} />
+                      <TouchableOpacity
+                        style={styles.nodeDeleteBtn}
+                        disabled={state.mood.colors.length < 3}
+                        onPress={() => {
+                          state.mood.colors.splice(index, 1)
+                          state.currentNode = state.mood.colors[state.mood.colors.length - 1]
+                        }}>
+                        <Image
+                          style={[
+                            styles.nodeDeleteIcon,
+                            {
+                              tintColor: state.mood.colors.length < 3 ? '#ccc' : '#666',
+                            },
+                          ]}
+                          source={res.ic_mood_del} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }}
+                keyExtractor={(_, index) => `${index}`}
+                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                ListFooterComponent={() => {
+                  if (state.mood.colors.length >= 8) {
+                    return (<></>)
+                  }
+                  return (
+                    <View>
+                      <Spacer height={cx(12)} />
+                      <TouchableOpacity
+                        style={styles.nodeAddBtn}
+                        onPress={() => {
+                          const node = {
+                            ...state.currentNode,
+                          }
+                          state.mood.colors.push(node)
+                          state.currentNode = node
+                          state.colorPaintBucketIdx = state.mood.colors.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.currentNode.h}
+              s={state.currentNode.s}
+              v={state.currentNode.v}
+              reserveSV={true}
+              minBrightness={0}
+              onHSVChange={(h, s, v) => {
+                if (state.colorPaintBucketSelected) {
+                  state.mood.colors = state.mood.colors.map(() => (
+                    { h, s, v }
+                  ))
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              onHSVChangeComplete={(h, s, v) => {
+                if (state.colorPaintBucketSelected) {
+                  state.mood.colors = state.mood.colors.map(() => (
+                    { h, s, v }
+                  ))
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                  state.mood.colors = state.mood.colors.map((item, idx) => {
+                    if (idx === state.colorPaintBucketIdx) {
+                      return { h, s, v }
+                    }
+                    return item
+                  })
+                }
+              }}
+            />
+            <Spacer height={cx(16)} />
+          </Card>
+          <Spacer />
+          {params.mode === 'edit' &&
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={I18n.getLang('flag_deleteflag')}
+                onPress={() => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('flag_deletepopup'),
+                    subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
+                    onConfirm: async (_, { close }) => {
+                      close()
+                      if (state.loading) return
+                      state.loading = true
+                      const res = await params.modDeleteFlag('del', state.mood)
+                      if (res.success) {
+                        state.loading = false
+                        navigation.goBack()
+                      }
+                    }
+                  })
+                }} />
+            </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),
+    borderWidth: 1,
+    borderColor: '#ccc'
+  },
+  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 default FlagEditPage