@ledvance/ui-biz-bundle 1.1.55 → 1.1.57

package/src/newModules/mood/DynamicMoodEditorPage.tsx

@@ -0,0 +1,653 @@
+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 } 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 } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import TextButton from '@ledvance/base/src/components/TextButton';
+import {
+  MoodNodeTransitionMode,
+  stripLightMoodMode,
+  stringLightMoodMode,
+  lightMoodMode,
+  StripLightMoodMode,
+  MoodUIInfo,
+} from './Interface';
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton';
+import FanAdjustView from '@ledvance/base/src/components/FanAdjustView';
+import { RouterKey } from 'navigation/Router';
+import { SelectPageParams } from '@ledvance/ui-biz-bundle/src/modules/select/SelectPage';
+import I18n from '@ledvance/base/src/i18n';
+import Segmented from '@ledvance/base/src/components/Segmented';
+import { MoodNodeInfo } from './Interface';
+import { showDialog } from '@ledvance/base/src/utils/common';
+
+const cx = Utils.RatioUtils.convertX;
+interface DynamicMoodEditorPageState {
+  headline: string;
+  mood: MoodUIInfo;
+  mainNode: MoodNodeInfo;
+  mainBucketSelected: boolean;
+  sceneMode: StripLightMoodMode;
+  loading: boolean;
+}
+const DynamicMoodEditorPage = () => {
+  const navigation = useNavigation();
+  const routeParams = useRoute().params as StaticMoodEditorPageParams;
+  const params = cloneDeep(routeParams);
+  const moduleParams = params.moduleParams;
+  const state = useReactive<DynamicMoodEditorPageState>({
+    headline: '',
+    mood: params.currentMood,
+    mainNode: params.currentMood.mainLamp.nodes[params.currentMood.mainLamp.nodes.length - 1],
+    mainBucketSelected: false,
+    loading: false,
+    sceneMode: moduleParams.isStringLight
+      ? stringLightMoodMode
+      : moduleParams.isStripLight
+      ? stripLightMoodMode
+      : lightMoodMode,
+  });
+
+  useEffect(() => {
+    state.headline = Strings.getLang(
+      params.mode === 'add'
+        ? 'add_new_dynamic_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 getNodeColor = useCallback((node: MoodNodeInfo) => {
+    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
+    );
+  };
+
+  const createSelectModeData = useCallback(
+    (mode: number, moodMode?: StripLightMoodMode) => {
+      return Object.values(moodMode ? moodMode : state.sceneMode).map(scene => {
+        return {
+          text: scene.title,
+          selected: scene.mode === mode,
+          value: scene.mode,
+        };
+      });
+    },
+    [state.sceneMode]
+  );
+
+  const createSelectOtherData = useCallback((otherData, expand) => {
+    return otherData.map(other => {
+      return {
+        text: other.label,
+        selected: other.value === expand,
+        value: other.value,
+      };
+    });
+  }, []);
+
+  const getSelectOther = useCallback((otherData, expand) => {
+    const currentOther = otherData.find(other => other.value === expand);
+    return currentOther.label;
+  }, []);
+
+  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(RouterKey.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.mainLamp.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(state.mood.mainLamp.mode),
+                  onSelect: selectPageData => {
+                    state.mood.mainLamp.mode = selectPageData.value;
+                  },
+                };
+                navigation.navigate(RouterKey.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.mainLamp.speed}
+              onValueChange={() => {}}
+              onSlidingComplete={value => {
+                state.mood.mainLamp.speed = value;
+              }}
+            />
+            <Spacer height={cx(16)} />
+            {state.sceneMode[state.mood.mainLamp.mode]?.turnOn && (
+              <View style={styles.transitionMode}>
+                <Segmented
+                  value={state.mood.mainLamp.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.mainLamp.direction = Number(v))}
+                />
+                <Spacer />
+              </View>
+            )}
+            {state.sceneMode[state.mood.mainLamp.mode]?.paragraph && (
+              <View style={styles.transitionMode}>
+                <Segmented
+                  value={state.mood.mainLamp.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.mainLamp.segmented = Number(v))}
+                />
+                <Spacer />
+              </View>
+            )}
+            {state.sceneMode[state.mood.mainLamp.mode]?.other && (
+              <>
+                <TextFieldStyleButton
+                  style={styles.transitionMode}
+                  text={getSelectOther(
+                    state.sceneMode[state.mood.mainLamp.mode]?.other,
+                    state.mood.mainLamp.expand
+                  )}
+                  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.mainLamp.mode]?.other,
+                        state.mood.mainLamp.expand
+                      ),
+                      onSelect: selectPageData => {
+                        state.mood.mainLamp.expand = selectPageData.value;
+                      },
+                    };
+                    navigation.navigate(RouterKey.ui_biz_select_page, paramsSelect);
+                  }}
+                />
+                <Spacer />
+              </>
+            )}
+            <View style={styles.nodesAdjust}>
+              <View style={styles.adjustButtons}>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.mainBucketSelected = true;
+                  }}
+                >
+                  <Image
+                    style={[
+                      styles.adjustButton,
+                      { tintColor: state.mainBucketSelected ? '#f60' : '#666' },
+                    ]}
+                    source={res.ic_paint_bucket}
+                  />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.mainBucketSelected = false;
+                  }}
+                >
+                  <Image
+                    style={[
+                      styles.adjustButton,
+                      { tintColor: state.mainBucketSelected ? '#666' : '#f60' },
+                    ]}
+                    source={res.ic_colorize}
+                  />
+                </TouchableOpacity>
+              </View>
+              <FlatList
+                data={state.mood.mainLamp.nodes}
+                style={styles.nodeList}
+                renderItem={({ item, index }) => {
+                  return (
+                    <View style={styles.nodeItem}>
+                      <TouchableOpacity
+                        style={[
+                          styles.nodeBlock,
+                          {
+                            backgroundColor: getNodeColor(item),
+                          },
+                        ]}
+                        onPress={() => {
+                          state.mainNode = item;
+                        }}
+                      />
+                      <TouchableOpacity
+                        style={styles.nodeDeleteBtn}
+                        disabled={state.mood.mainLamp.nodes.length < 3}
+                        onPress={() => {
+                          state.mood.mainLamp.nodes.splice(index, 1);
+                          state.mainNode = state.mood.mainLamp.nodes[state.mood.mainLamp.nodes.length - 1];
+                        }}
+                      >
+                        <Image
+                          style={[
+                            styles.nodeDeleteIcon,
+                            {
+                              tintColor: state.mood.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                            },
+                          ]}
+                          source={res.ic_mood_del}
+                        />
+                      </TouchableOpacity>
+                    </View>
+                  );
+                }}
+                keyExtractor={(_, index) => `${index}`}
+                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                ListFooterComponent={() => {
+                  if (state.mood.mainLamp.nodes.length >= 8) {
+                    return <></>;
+                  }
+                  return (
+                    <View>
+                      <Spacer height={cx(12)} />
+                      <TouchableOpacity
+                        style={styles.nodeAddBtn}
+                        onPress={() => {
+                          const node = {
+                            ...state.mainNode,
+                          };
+                          state.mood.mainLamp.nodes.push(node);
+                          state.mainNode = 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(state.mainNode) }]}
+              />
+            </View>
+            <Spacer />
+            <LampAdjustView
+              isSupportColor={moduleParams.isSupportColor}
+              isSupportBrightness={moduleParams.isSupportBrightness}
+              isSupportTemperature={moduleParams.isSupportTemperature}
+              isColorMode={state.mainNode.isColorNode}
+              reserveSV={true}
+              setIsColorMode={isColorMode => {
+                if (state.mainBucketSelected) {
+                  state.mood.mainLamp.nodes.forEach(node => {
+                    node.isColorNode = isColorMode;
+                    if (isColorMode && node.h === 0 && node.s === 0 && node.v === 0) {
+                      node.s = 100;
+                      node.v = 100;
+                    } else {
+                      if (node.brightness === 0 && node.colorTemp === 0) {
+                        node.brightness = 100;
+                      }
+                    }
+                  });
+                } else {
+                  state.mainNode.isColorNode = isColorMode;
+                  if (
+                    isColorMode &&
+                    state.mainNode.h === 0 &&
+                    state.mainNode.s === 0 &&
+                    state.mainNode.v === 0
+                  ) {
+                    state.mainNode.s = 100;
+                    state.mainNode.v = 100;
+                  } else {
+                    if (state.mainNode.brightness === 0 && state.mainNode.colorTemp === 0) {
+                      state.mainNode.brightness = 100;
+                    }
+                  }
+                }
+              }}
+              h={state.mainNode.h}
+              s={state.mainNode.s}
+              v={state.mainNode.v}
+              onHSVChange={(h, s, v) => {
+                if (state.mainBucketSelected) {
+                  state.mood.mainLamp.nodes.forEach(node => {
+                    node.isColorNode = true;
+                    node.h = h;
+                    node.s = s;
+                    node.v = v;
+                  });
+                } else {
+                  state.mainNode.h = h;
+                  state.mainNode.s = s;
+                  state.mainNode.v = v;
+                }
+              }}
+              onHSVChangeComplete={(h, s, v) => {
+                if (state.mainBucketSelected) {
+                  state.mood.mainLamp.nodes.forEach(node => {
+                    node.isColorNode = true;
+                    node.h = h;
+                    node.s = s;
+                    node.v = v;
+                  });
+                } else {
+                  state.mainNode.h = h;
+                  state.mainNode.s = s || 1;
+                  state.mainNode.v = v;
+                }
+              }}
+              colorTemp={state.mainNode.colorTemp}
+              brightness={state.mainNode.brightness}
+              onCCTChange={cct => {
+                if (state.mainBucketSelected) {
+                  state.mood.mainLamp.nodes.forEach(node => {
+                    node.isColorNode = false;
+                    node.colorTemp = cct;
+                  });
+                } else {
+                  state.mainNode.colorTemp = cct;
+                }
+              }}
+              onCCTChangeComplete={cct => {
+                if (state.mainBucketSelected) {
+                  state.mood.mainLamp.nodes.forEach(node => {
+                    node.isColorNode = false;
+                    node.colorTemp = cct;
+                  });
+                } else {
+                  state.mainNode.colorTemp = cct;
+                }
+              }}
+              onBrightnessChange={brightness => {
+                if (state.mainBucketSelected) {
+                  state.mood.mainLamp.nodes.forEach(node => {
+                    node.isColorNode = false;
+                    node.brightness = brightness;
+                  });
+                } else {
+                  state.mainNode.brightness = brightness;
+                }
+              }}
+              onBrightnessChangeComplete={brightness => {
+                if (state.mainBucketSelected) {
+                  state.mood.mainLamp.nodes.forEach(node => {
+                    node.isColorNode = false;
+                    node.brightness = brightness;
+                  });
+                } else {
+                  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={Strings.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()
+                      if (state.loading) return
+                      state.loading = true
+                      const res = await params.modDeleteMood('del', state.mood);
+                      state.loading = false
+                      if (res.success) {
+                        navigation.navigate(RouterKey.ui_biz_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 default DynamicMoodEditorPage;
+export function getTransitionModeString(transitionMode: MoodNodeTransitionMode): string {
+  if (transitionMode === MoodNodeTransitionMode.Jump) {
+    return Strings.getLang('other_lights_modes_jump_text');
+  }
+  return Strings.getLang('other_lights_modes_gradient_text');
+}