@ledvance/group-ui-biz-bundle 1.0.0

package/src/modules/mood/DynamicMoodEditorPage.tsx

@@ -0,0 +1,547 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import { useReactive } from 'ahooks'
+import { cloneDeep, find, isEqual } from 'lodash'
+import Page from '@ledvance/base/src/components/Page'
+import Strings from '@ledvance/base/src/i18n'
+import { StaticMoodEditorPageParams, StaticMoodEditorPageState } from './StaticMoodEditorPage'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import res from '@ledvance/base/src/res'
+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 LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import { useFanMaxSpeed, useRole } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { SceneNodeInfo, SceneNodeTransitionMode, stripLightSceneMode, stringLightSceneMode, lightSceneMode, StripLightSceneMode } from './SceneInfo'
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
+import FanAdjustView from '@ledvance/base/src/components/FanAdjustView'
+import { showDeleteMoodDialog } from './tools'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { SelectPageParams } from '../select/SelectPage'
+import I18n from '@ledvance/base/src/i18n'
+import Segmented from '@ledvance/base/src/components/Segmented'
+
+const cx = Utils.RatioUtils.convertX
+interface DynamicMoodEditorPageState extends StaticMoodEditorPageState {
+  paintBucketSelected: boolean
+  sceneMode: StripLightSceneMode
+}
+const DynamicMoodEditorPage = () => {
+  const navigation = useNavigation()
+  const routeParams = useRoute().params as StaticMoodEditorPageParams
+  const params = cloneDeep(routeParams)
+  const moduleParams = params.moduleParams
+
+  const role = useRole()
+  const state = useReactive<DynamicMoodEditorPageState>({
+    headline: '',
+    mood: params.currentMood,
+    currentNode: params.currentMood.nodes[params.currentMood.nodes.length - 1],
+    paintBucketSelected: false,
+    loading: false,
+    sceneMode: moduleParams.isStringLight ? stringLightSceneMode : moduleParams.isStripLight ? stripLightSceneMode : lightSceneMode
+  })
+
+  const canDelete = useMemo(() => (role === 0 || role === 2), [role])
+  useEffect(() => {
+    state.headline = Strings.getLang(params.mode ? 'add_new_dynamic_mood_headline_text' : 'edit_static_mood_headline_text')
+  }, [params.mode])
+
+  const getColorBlockColor = useCallback(() => {
+    return '#fff'
+  }, [state.currentNode, state.currentNode.colorTemp])
+
+  const getNodeColor = useCallback((node: SceneNodeInfo) => {
+    if (node.isColorNode) {
+      const s = Math.round(mapFloatToRange(node.s / 100, 30, 100))
+      return hsv2Hex(node.h, s, 100)
+    }
+    return cctToColor(node.colorTemp.toFixed())
+  }, [])
+
+  const getButtonStatus = () => {
+    return (params.mode === 'edit' && isEqual(state.mood, routeParams.currentMood)) ||
+      !(!!state.mood.name) ||
+      nameRepeat ||
+      state.mood.name.length > 32 ||
+      state.mood.nodes.length < 2
+  }
+
+  const createSelectModeData = useCallback(() => {
+    return Object.values(state.sceneMode).map(scene => {
+      return {
+        text: scene.title,
+        selected: scene.mode === state.mood.mode,
+        value: scene.mode,
+      }
+    })
+  }, [state.mood.mode, state.sceneMode])
+
+  const createSelectOtherData = useCallback((otherData) => {
+    return otherData.map(other => {
+      return {
+        text: other.label,
+        selected: other.value === state.mood.expand,
+        value: other.value,
+      }
+    })
+  }, [state.mood.expand])
+
+  const getSelectOther = useCallback((otherData) => {
+    const currentOther = otherData.find(other => other.value === state.mood.expand)
+    return currentOther.label
+  }, [state.mood.expand])
+
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
+  }, [state.mood.name])
+
+  return (
+    <Page
+      backText={Strings.getLang('mesh_device_detail_mode')}
+      showBackDialog={true}
+      backDialogTitle={
+        Strings.getLang(params.mode === 'add' ?
+          'string_light_pp_dialog_sm_add_headline_c' :
+          'manage_user_unsaved_changes_dialog_headline')
+      }
+      backDialogContent={
+        Strings.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.modDeleteMood(params.mode, cloneDeep(state.mood))
+        if (res.success) {
+          navigation.navigate(ui_biz_routerKey.group_ui_biz_mood)
+        }
+        state.loading = false
+      }}
+      loading={state.loading}>
+      <ScrollView
+        style={{ flex: 1 }}
+        nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.mood.name}
+            placeholder={Strings.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={Strings.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')} />
+          <Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {Strings.getLang('light_sources_tile_tw_lighting_headline')}
+              </Text>
+            </View>
+            <Spacer height={cx(18)} />
+            <TextFieldStyleButton
+              style={styles.transitionMode}
+              text={state.sceneMode[state.mood.mode]?.title}
+              placeholder={Strings.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: createSelectModeData(),
+                  onSelect: selectPageData => {
+                    state.mood.mode = selectPageData.value
+                  },
+                }
+                navigation.navigate(ui_biz_routerKey.group_ui_biz_select_page, paramsSelect)
+              }} />
+            <Spacer height={cx(10)} />
+            <LdvSlider
+              title={Strings.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+              value={state.mood.speed}
+              onValueChange={() => { }}
+              onSlidingComplete={value => {
+                state.mood.speed = value
+              }} />
+            <Spacer height={cx(16)} />
+            {state.sceneMode[state.mood.mode]?.turnOn && <View style={styles.transitionMode}>
+              <Segmented
+                value={state.mood.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.mood.direction = Number(v)}
+              />
+              <Spacer />
+            </View>}
+            {state.sceneMode[state.mood.mode]?.paragraph && <View style={styles.transitionMode}>
+              <Segmented
+                value={state.mood.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.mood.segmented = Number(v)}
+              />
+              <Spacer />
+            </View>}
+            {state.sceneMode[state.mood.mode]?.other && <>
+              <TextFieldStyleButton
+                style={styles.transitionMode}
+                text={getSelectOther(state.sceneMode[state.mood.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.mood.mode]?.other),
+                    onSelect: selectPageData => {
+                      state.mood.expand = selectPageData.value
+                    },
+                  }
+                  navigation.navigate(ui_biz_routerKey.group_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.mood.nodes}
+                style={styles.nodeList}
+                renderItem={({ item, index }) => {
+                  return (
+                    <View style={styles.nodeItem}>
+                      <TouchableOpacity
+                        style={[
+                          styles.nodeBlock,
+                          {
+                            backgroundColor: getNodeColor(item),
+                          },
+                        ]}
+                        onPress={() => {
+                          state.currentNode = item
+                        }} />
+                      <TouchableOpacity
+                        style={styles.nodeDeleteBtn}
+                        disabled={state.mood.nodes.length < 3}
+                        onPress={() => {
+                          state.mood.nodes.splice(index, 1)
+                          state.currentNode = state.mood.nodes[state.mood.nodes.length - 1]
+                        }}>
+                        <Image
+                          style={[
+                            styles.nodeDeleteIcon,
+                            {
+                              tintColor: state.mood.nodes.length < 3 ? '#ccc' : '#666',
+                            },
+                          ]}
+                          source={res.ic_mood_del} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }}
+                keyExtractor={(_, index) => `${index}`}
+                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                ListFooterComponent={() => {
+                  if (state.mood.nodes.length >= 8) {
+                    return (<></>)
+                  }
+                  return (
+                    <View>
+                      <Spacer height={cx(12)} />
+                      <TouchableOpacity
+                        style={styles.nodeAddBtn}
+                        onPress={() => {
+                          const node = {
+                            ...state.currentNode,
+                          }
+                          state.mood.nodes.push(node)
+                          state.currentNode = node
+                        }}>
+                        <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}>
+                {Strings.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor() }]} />
+            </View>
+            <Spacer />
+            <LampAdjustView
+              isSupportColor={moduleParams.isSupportColor}
+              isSupportBrightness={moduleParams.isSupportBrightness}
+              isSupportTemperature={moduleParams.isSupportTemperature}
+              isColorMode={state.currentNode.isColorNode}
+              reserveSV={true}
+              setIsColorMode={isColorMode => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = isColorMode
+                  })
+                } else {
+                  state.currentNode.isColorNode = isColorMode
+                }
+              }}
+              h={state.currentNode.h}
+              s={state.currentNode.s}
+              v={state.currentNode.v}
+              onHSVChange={(h, s, v) => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = true
+                    node.h = h
+                    node.s = s
+                    node.v = v
+                  })
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              onHSVChangeComplete={(h, s, v) => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = true
+                    node.h = h
+                    node.s = s
+                    node.v = v
+                  })
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              colorTemp={state.currentNode.colorTemp}
+              brightness={state.currentNode.brightness}
+              onCCTChange={cct => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.colorTemp = cct
+                  })
+                } else {
+                  state.currentNode.colorTemp = cct
+                }
+              }}
+              onCCTChangeComplete={cct => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.colorTemp = cct
+                  })
+                } else {
+                  state.currentNode.colorTemp = cct
+                }
+              }}
+              onBrightnessChange={brightness => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.brightness = brightness
+                  })
+                } else {
+                  state.currentNode.brightness = brightness
+                }
+              }}
+              onBrightnessChangeComplete={brightness => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.brightness = brightness
+                  })
+                } else {
+                  state.currentNode.brightness = brightness
+                }
+              }} />
+          </Card>
+          <Spacer />
+          {moduleParams.isSupportFan &&
+            <FanAdjustView
+              fanEnable={!!state.mood.fanEnable}
+              fanSpeed={state.mood.fanSpeed || 1}
+              maxFanSpeed={useFanMaxSpeed()}
+              onFanSwitch={fanEnable => {
+                state.mood.fanEnable = fanEnable
+              }}
+              onFanSpeedChange={fanSpeed => {
+                state.mood.fanSpeed = fanSpeed
+              }}
+              onFanSpeedChangeComplete={fanSpeed => {
+                state.mood.fanSpeed = fanSpeed
+              }}
+              style={styles.fanAdjustCard} />}
+          {params.mode === 'edit' && canDelete &&
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={Strings.getLang('edit_static_mood_button_delete_text')}
+                onPress={() => {
+                  showDeleteMoodDialog(async (_, { close }) => {
+                    state.loading = true
+                    close()
+                    const res = await params.modDeleteMood('del', state.mood)
+                    if (res.success) {
+                      navigation.navigate(ui_biz_routerKey.group_ui_biz_mood)
+                    }
+                    state.loading = false
+                  })
+                }} />
+            </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 default DynamicMoodEditorPage
+export function getTransitionModeString(transitionMode: SceneNodeTransitionMode): string {
+  if (transitionMode === SceneNodeTransitionMode.Jump) {
+    return Strings.getLang('other_lights_modes_jump_text')
+  }
+  return Strings.getLang('other_lights_modes_gradient_text')
+}

package/src/modules/mood/MoodItem.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, Text, View, ViewProps, ViewStyle } from 'react-native'
+import { SceneUIState, StripSceneUIState } from './SceneInfo'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import Strings from '@ledvance/base/src/i18n'
+import { useReactive } from 'ahooks'
+import { hsv2Hex } from '@ledvance/base/src/utils'
+import {cctToColor} from '@ledvance/base/src/utils/cctUtils'
+import {mapFloatToRange} from '@ledvance/base/src/utils'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
+
+const cx = Utils.RatioUtils.convertX
+
+interface MoodItemProps extends ViewProps {
+    enable: boolean
+    mood: SceneUIState | StripSceneUIState
+    type: 'gradient' | 'separate'
+    style?: ViewStyle
+    onPress?: () => void
+    onSwitch: (enable: boolean) => void
+}
+
+const MoodItem = (props: MoodItemProps) => {
+    const { mood } = props
+    const state = useReactive<{ colors: string[] }>({
+        colors: [],
+    })
+
+    useEffect(() => {
+        state.colors = props.mood.nodes.map(node => {
+            if (node.isColorNode) {
+                return hsv2Hex(node.h, Math.round(node.s), Math.round(mapFloatToRange(node.v / 100, 50, 100)))
+            }
+            return cctToColor(node.colorTemp.toFixed())
+        })
+    }, [props.mood.nodes])
+
+    return (
+        <Card
+            style={[styles.card, props.style]}
+            onPress={props.onPress}>
+            <View>
+                <Spacer height={cx(16)} />
+                <View style={styles.headline}>
+                    <Text style={styles.headText}>{mood.name}</Text>
+                    <SwitchButton
+                        thumbStyle={{ elevation: 0 }}
+                        value={props.enable}
+                        onValueChange={props.onSwitch} />
+                </View>
+                <Spacer />
+                <View style={styles.gradientItem}>
+                    <MoodColorsLine
+                        type={props.type}
+                        colors={state.colors} />
+                </View>
+                <Spacer height={cx(12)} />
+                <View style={styles.moodTypeItem}>
+                    <View style={styles.moodTypeLabel}>
+                        <Text style={styles.moodTypeLabelText}>
+                            {Strings.getLang(mood.nodes.length > 1 ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text')}
+                        </Text>
+                    </View>
+                </View>
+                <Spacer height={cx(16)} />
+            </View>
+        </Card>
+    )
+}
+
+export default MoodItem
+
+const styles = StyleSheet.create({
+    card: {
+        marginHorizontal: cx(24),
+    },
+    headline: {
+        flexDirection: 'row',
+        marginHorizontal: cx(16),
+    },
+    headText: {
+        flex: 1,
+        color: '#000',
+        fontSize: cx(16),
+        fontFamily: 'helvetica_neue_lt_std_bd',
+        lineHeight: cx(20),
+    },
+    gradientItem: {
+        alignItems: 'center',
+    },
+    gradient: {
+        borderRadius: cx(8),
+    },
+    moodTypeItem: {
+        flexDirection: 'row',
+    },
+    moodTypeLabel: {
+        marginStart: cx(16),
+        paddingHorizontal: cx(12.5),
+        backgroundColor: '#E6E7E8',
+        borderRadius: cx(8),
+    },
+    moodTypeLabelText: {
+        height: cx(16),
+        color: '#000000DD',
+        fontSize: cx(10),
+        textAlignVertical: 'center',
+        fontFamily: 'helvetica_neue_lt_std_roman',
+        lineHeight: cx(16),
+    },
+})
+