@ledvance/ui-biz-bundle 1.1.68 → 1.1.69

package/src/newModules/mood/StaticMoodEditorPage.tsx

@@ -1,290 +1,290 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-import { cloneDeep, isEqual } from 'lodash';
-import { useReactive } from 'ahooks';
-import Page from '@ledvance/base/src/components/Page';
-import I18n from '@ledvance/base/src/i18n';
-import { useNavigation } from '@react-navigation/native';
-import TextField from '@ledvance/base/src/components/TextField';
-import { Utils } from 'tuya-panel-kit';
-import Card from '@ledvance/base/src/components/Card';
-import Spacer from '@ledvance/base/src/components/Spacer';
-import res from '@ledvance/base/src/res';
-import TextButton from '@ledvance/base/src/components/TextButton';
-import { useFanMaxSpeed } from '@ledvance/base/src/models/modules/NativePropsSlice';
-import FanAdjustView from '@ledvance/base/src/components/FanAdjustView';
-import { MoodNodeInfo, MoodPageParams, MoodUIInfo } from './Interface';
-import { Result } from '@ledvance/base/src/models/modules/Result';
-import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
-import { useParams } from '@ledvance/base/src/hooks/Hooks';
-import LampAdjustView2 from '@ledvance/base/src/components/LampAdjustView2';
-import { ui_biz_routerKey } from '../../navigation/Routers'
-import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
-import { showDialog } from '@ledvance/base/src/utils/common';
-
-const cx = Utils.RatioUtils.convertX;
-
-export interface StaticMoodEditorPageParams {
-  mode: 'add' | 'edit';
-  currentMood: MoodUIInfo;
-  moduleParams: MoodPageParams;
-  nameRepeat: (mood: MoodUIInfo) => boolean
-  modDeleteMood: (mode: 'add' | 'edit' | 'del', currentMood: MoodUIInfo) => Promise<Result<any>>;
-}
-
-export interface StaticMoodEditorPageState {
-  headline: string;
-  mood: MoodUIInfo;
-  mainNode: MoodNodeInfo;
-  secondaryNode: MoodNodeInfo;
-  loading: boolean;
-}
-
-const StaticMoodEditorPage = () => {
-  const navigation = useNavigation();
-  const routeParams = useParams<StaticMoodEditorPageParams>();
-  const params = cloneDeep(routeParams);
-  const moduleParams = params.moduleParams;
-  const isMix = !!(moduleParams.isCeilingLight || moduleParams.isMixLight);
-  const state = useReactive<StaticMoodEditorPageState>({
-    headline: '',
-    mood: params.currentMood,
-    mainNode: params.currentMood.mainLamp.nodes[0],
-    secondaryNode: params.currentMood?.secondaryLamp?.nodes?.[0],
-    loading: false,
-  });
-  
-  useEffect(() => {
-    state.headline = I18n.getLang(
-      params.mode === 'add' ? 'add_new_static_mood_headline_text' : 'edit_static_mood_headline_text'
-    );
-  }, [params.mode]);
-
-  const getColorBlockColor = useCallback((node: MoodNodeInfo) => {
-    const s = Math.round(mapFloatToRange(node.s / 100, 30, 100));
-    if (node.isColorNode) {
-      return hsv2Hex(node.h, s, 100);
-    } else {
-      return cctToColor(node.colorTemp.toFixed());
-    }
-  }, []);
-
-  const onRightClick = async () => {
-    if (state.loading || !canSaveMoodData) return;
-    state.loading = true;
-    const newMood: MoodUIInfo = {
-      ...state.mood,
-      mainLamp: {
-        ...state.mood.mainLamp,
-        nodes: [cloneDeep(state.mainNode)],
-      },
-      secondaryLamp: {
-        ...state.mood.secondaryLamp,
-        id: undefined
-      }
-    };
-    if (isMix && moduleParams.isMixLight) {
-      newMood.secondaryLamp = {
-        ...newMood.secondaryLamp,
-        nodes: [cloneDeep(state.secondaryNode)],
-      };
-      newMood.mainLamp.type = 2
-      if(moduleParams.isSupportBrightness && !moduleParams.isSupportTemperature){
-        newMood.mainLamp.type = 1
-      }
-      if(moduleParams.isSupportColor){
-        newMood.secondaryLamp.type = 3
-      }
-    }
-    const res = await params.modDeleteMood(params.mode, newMood);
-    state.loading = false;
-    if (res.success) {
-      navigation.navigate(ui_biz_routerKey.ui_biz_mood);
-    }
-  };
-
-  const nameRepeat = useMemo(() => {
-    return params.nameRepeat(state.mood)
-  }, [state.mood.name]);
-
-  const checkMoodChanged = useMemo(() =>{
-    return isEqual(state.mood, params.currentMood)
-  }, [JSON.stringify(state.mood), params.currentMood])
-
-  const canSaveMoodData = useMemo(() =>{
-    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
-  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
-
-  return (
-    <Page
-      backText={I18n.getLang('mesh_device_detail_mode')}
-      showBackDialog={!checkMoodChanged}
-      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={canSaveMoodData ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={onRightClick}
-      loading={state.loading}
-    >
-      <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'
-            )}
-          />
-          <Card style={styles.adjustCard}>
-            <LdvSwitch
-              title={I18n.getLang(
-                isMix
-                  ? 'light_sources_tile_main_lighting_headline'
-                  : 'light_sources_tile_tw_lighting_headline'
-              )}
-              color={getColorBlockColor(state.mainNode)}
-              colorAlpha={1}
-              enable={!!state.mood.mainLamp.enable}
-              setEnable={v => {
-                state.mood.mainLamp.enable = v;
-              }}
-              showSwitch={!!moduleParams.isMixLight}
-            />
-            {(!moduleParams.isMixLight || state.mood.mainLamp.enable) && (
-              <LampAdjustView2
-                isSupportColor={isMix ? false : moduleParams.isSupportColor}
-                isSupportBrightness={moduleParams.isSupportBrightness}
-                isSupportCCT={moduleParams.isSupportTemperature}
-                isColorMode={state.mainNode.isColorNode}
-                reserveSV={true}
-                setIsColorMode={isColorMode => {
-                  state.mainNode.isColorNode = isColorMode;
-                }}
-                hsv={state.mainNode}
-                onHSVChange={(hsv) => {
-                  state.mainNode.h = hsv.h
-                  state.mainNode.s = hsv.s
-                  state.mainNode.v = hsv.v
-                }}
-                cct={state.mainNode.colorTemp}
-                brightness={state.mainNode.brightness}
-                onCCTChange={(cct) => {
-                  state.mainNode.colorTemp = cct;
-                }}
-                onBrightnessChange={(brightness) => {
-                  state.mainNode.brightness = brightness;
-                }}
-              />
-            )}
-          </Card>
-          <Spacer />
-          {!!(moduleParams.isFanLight || moduleParams.isUVCFan) && (
-            <FanAdjustView
-              fanEnable={!!state.mood.mainLamp.fanEnable}
-              fanSpeed={state.mood.mainLamp.fanSpeed || 1}
-              maxFanSpeed={useFanMaxSpeed()}
-              onFanSwitch={fanEnable => {
-                state.mood.mainLamp.fanEnable = fanEnable;
-              }}
-              onFanSpeedChange={fanSpeed => {
-                state.mood.mainLamp.fanSpeed = fanSpeed;
-              }}
-              onFanSpeedChangeComplete={fanSpeed => {
-                state.mood.mainLamp.fanSpeed = fanSpeed;
-              }}
-              style={styles.fanAdjustCard}
-            />
-          )}
-          {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={() => {
-                  showDialog({
-                    method: 'confirm',
-                    title: I18n.getLang('string_light_pp_dialog_sm_ed_headline_d'),
-                    subTitle: I18n.getLang(`strip_light_static_mood_edit_dialog_text`),
-                    onConfirm: async (_, {close})=>{
-                      close();
-                      state.loading = true;
-                      const res = await params.modDeleteMood('del', state.mood);
-                      state.loading = false;
-                      if (res.success) {
-                        navigation.navigate(ui_biz_routerKey.ui_biz_mood);
-                      }
-                    }
-                  })
-                }}
-              />
-            </View>
-          )}
-          <Spacer />
-        </View>
-      </ScrollView>
-    </Page>
-  );
-};
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginTop: 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',
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  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 StaticMoodEditorPage;
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { cloneDeep, isEqual } from 'lodash';
+import { useReactive } from 'ahooks';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import { useNavigation } from '@react-navigation/native';
+import TextField from '@ledvance/base/src/components/TextField';
+import { Utils } from 'tuya-panel-kit';
+import Card from '@ledvance/base/src/components/Card';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import res from '@ledvance/base/src/res';
+import TextButton from '@ledvance/base/src/components/TextButton';
+import { useFanMaxSpeed } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import FanAdjustView from '@ledvance/base/src/components/FanAdjustView';
+import { MoodNodeInfo, MoodPageParams, MoodUIInfo } from './Interface';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import LampAdjustView2 from '@ledvance/base/src/components/LampAdjustView2';
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import { showDialog } from '@ledvance/base/src/utils/common';
+
+const cx = Utils.RatioUtils.convertX;
+
+export interface StaticMoodEditorPageParams {
+  mode: 'add' | 'edit';
+  currentMood: MoodUIInfo;
+  moduleParams: MoodPageParams;
+  nameRepeat: (mood: MoodUIInfo) => boolean
+  modDeleteMood: (mode: 'add' | 'edit' | 'del', currentMood: MoodUIInfo) => Promise<Result<any>>;
+}
+
+export interface StaticMoodEditorPageState {
+  headline: string;
+  mood: MoodUIInfo;
+  mainNode: MoodNodeInfo;
+  secondaryNode: MoodNodeInfo;
+  loading: boolean;
+}
+
+const StaticMoodEditorPage = () => {
+  const navigation = useNavigation();
+  const routeParams = useParams<StaticMoodEditorPageParams>();
+  const params = cloneDeep(routeParams);
+  const moduleParams = params.moduleParams;
+  const isMix = !!(moduleParams.isCeilingLight || moduleParams.isMixLight);
+  const state = useReactive<StaticMoodEditorPageState>({
+    headline: '',
+    mood: params.currentMood,
+    mainNode: params.currentMood.mainLamp.nodes[0],
+    secondaryNode: params.currentMood?.secondaryLamp?.nodes?.[0],
+    loading: false,
+  });
+  
+  useEffect(() => {
+    state.headline = I18n.getLang(
+      params.mode === 'add' ? 'add_new_static_mood_headline_text' : 'edit_static_mood_headline_text'
+    );
+  }, [params.mode]);
+
+  const getColorBlockColor = useCallback((node: MoodNodeInfo) => {
+    const s = Math.round(mapFloatToRange(node.s / 100, 30, 100));
+    if (node.isColorNode) {
+      return hsv2Hex(node.h, s, 100);
+    } else {
+      return cctToColor(node.colorTemp.toFixed());
+    }
+  }, []);
+
+  const onRightClick = async () => {
+    if (state.loading || !canSaveMoodData) return;
+    state.loading = true;
+    const newMood: MoodUIInfo = {
+      ...state.mood,
+      mainLamp: {
+        ...state.mood.mainLamp,
+        nodes: [cloneDeep(state.mainNode)],
+      },
+      secondaryLamp: {
+        ...state.mood.secondaryLamp,
+        id: undefined
+      }
+    };
+    if (isMix && moduleParams.isMixLight) {
+      newMood.secondaryLamp = {
+        ...newMood.secondaryLamp,
+        nodes: [cloneDeep(state.secondaryNode)],
+      };
+      newMood.mainLamp.type = 2
+      if(moduleParams.isSupportBrightness && !moduleParams.isSupportTemperature){
+        newMood.mainLamp.type = 1
+      }
+      if(moduleParams.isSupportColor){
+        newMood.secondaryLamp.type = 3
+      }
+    }
+    const res = await params.modDeleteMood(params.mode, newMood);
+    state.loading = false;
+    if (res.success) {
+      navigation.navigate(ui_biz_routerKey.ui_biz_mood);
+    }
+  };
+
+  const nameRepeat = useMemo(() => {
+    return params.nameRepeat(state.mood)
+  }, [state.mood.name]);
+
+  const checkMoodChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [JSON.stringify(state.mood), params.currentMood])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
+  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
+
+  return (
+    <Page
+      backText={I18n.getLang('mesh_device_detail_mode')}
+      showBackDialog={!checkMoodChanged}
+      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={canSaveMoodData ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={onRightClick}
+      loading={state.loading}
+    >
+      <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'
+            )}
+          />
+          <Card style={styles.adjustCard}>
+            <LdvSwitch
+              title={I18n.getLang(
+                isMix
+                  ? 'light_sources_tile_main_lighting_headline'
+                  : 'light_sources_tile_tw_lighting_headline'
+              )}
+              color={getColorBlockColor(state.mainNode)}
+              colorAlpha={1}
+              enable={!!state.mood.mainLamp.enable}
+              setEnable={v => {
+                state.mood.mainLamp.enable = v;
+              }}
+              showSwitch={!!moduleParams.isMixLight}
+            />
+            {(!moduleParams.isMixLight || state.mood.mainLamp.enable) && (
+              <LampAdjustView2
+                isSupportColor={isMix ? false : moduleParams.isSupportColor}
+                isSupportBrightness={moduleParams.isSupportBrightness}
+                isSupportCCT={moduleParams.isSupportTemperature}
+                isColorMode={state.mainNode.isColorNode}
+                reserveSV={true}
+                setIsColorMode={isColorMode => {
+                  state.mainNode.isColorNode = isColorMode;
+                }}
+                hsv={state.mainNode}
+                onHSVChange={(hsv) => {
+                  state.mainNode.h = hsv.h
+                  state.mainNode.s = hsv.s
+                  state.mainNode.v = hsv.v
+                }}
+                cct={state.mainNode.colorTemp}
+                brightness={state.mainNode.brightness}
+                onCCTChange={(cct) => {
+                  state.mainNode.colorTemp = cct;
+                }}
+                onBrightnessChange={(brightness) => {
+                  state.mainNode.brightness = brightness;
+                }}
+              />
+            )}
+          </Card>
+          <Spacer />
+          {!!(moduleParams.isFanLight || moduleParams.isUVCFan) && (
+            <FanAdjustView
+              fanEnable={!!state.mood.mainLamp.fanEnable}
+              fanSpeed={state.mood.mainLamp.fanSpeed || 1}
+              maxFanSpeed={useFanMaxSpeed()}
+              onFanSwitch={fanEnable => {
+                state.mood.mainLamp.fanEnable = fanEnable;
+              }}
+              onFanSpeedChange={fanSpeed => {
+                state.mood.mainLamp.fanSpeed = fanSpeed;
+              }}
+              onFanSpeedChangeComplete={fanSpeed => {
+                state.mood.mainLamp.fanSpeed = fanSpeed;
+              }}
+              style={styles.fanAdjustCard}
+            />
+          )}
+          {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={() => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('string_light_pp_dialog_sm_ed_headline_d'),
+                    subTitle: I18n.getLang(`strip_light_static_mood_edit_dialog_text`),
+                    onConfirm: async (_, {close})=>{
+                      close();
+                      state.loading = true;
+                      const res = await params.modDeleteMood('del', state.mood);
+                      state.loading = false;
+                      if (res.success) {
+                        navigation.navigate(ui_biz_routerKey.ui_biz_mood);
+                      }
+                    }
+                  })
+                }}
+              />
+            </View>
+          )}
+          <Spacer />
+        </View>
+      </ScrollView>
+    </Page>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  name: {
+    marginHorizontal: cx(24),
+  },
+  adjustCard: {
+    marginTop: 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',
+  },
+  preview: {
+    width: cx(20),
+    height: cx(20),
+    marginStart: cx(12),
+    borderRadius: cx(4),
+  },
+  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 StaticMoodEditorPage;