@ledvance/ui-biz-bundle 1.1.56 → 1.1.58

package/src/newModules/mood/MoodItem.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, ViewProps, ViewStyle, Image } from 'react-native';
+import { SwitchButton, Utils } from 'tuya-panel-kit';
+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';
+import { MoodLampInfo, MoodUIInfo } from './Interface';
+import I18n from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+
+const cx = Utils.RatioUtils.convertX;
+
+interface MoodItemProps extends ViewProps {
+  enable: boolean;
+  isMix: boolean;
+  mood: MoodUIInfo;
+  style?: ViewStyle;
+  onPress?: () => void;
+  onSwitch: (enable: boolean) => void;
+}
+
+const MoodItem = (props: MoodItemProps) => {
+  const { mood, isMix } = props;
+  const isDynamic = useMemo(() => {
+    return mood.mainLamp.nodes?.length > 1 || mood.secondaryLamp.nodes?.length > 1;
+  }, [mood.mainLamp.nodes, mood.secondaryLamp.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 />
+        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} />
+        {isMix && (
+          <>
+            <Spacer height={cx(7)} />
+            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} />
+          </>
+        )}
+        <Spacer height={cx(12)} />
+        <View style={styles.moodTypeItem}>
+          <View style={styles.moodTypeLabel}>
+            <Text style={styles.moodTypeLabelText}>
+              {I18n.getLang(
+                isDynamic ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text'
+              )}
+            </Text>
+          </View>
+        </View>
+        <Spacer height={cx(16)} />
+      </View>
+    </Card>
+  );
+};
+
+export default MoodItem;
+
+export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boolean }) {
+  const { mixSubLight, isMix } = props;
+  const lightColors = !!(mixSubLight.enable && mixSubLight.nodes.length) ? mixSubLight.nodes?.map(n => {
+    return n.isColorNode
+      ? hsv2Hex(n.h, Math.round(n.s), Math.round(mapFloatToRange(n.v / 100, 50, 100)))
+      : cctToColor(n.colorTemp.toFixed());
+  }) : ['#eee'];
+  return (
+    <View style={styles.gradientItem}>
+      <Spacer height={0} width={cx(16)} />
+      <MoodColorsLine
+        nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
+        width={isMix ? cx(264) : undefined}
+        type={'separate'}
+        colors={lightColors}
+      />
+      {isMix && (
+        <>
+          <Spacer height={0} width={cx(7)} />
+          <View style={styles.gradientItemIconView}>
+            <Image style={styles.gradientItemIcon} source={mixSubLight.enable ? res.light_on : res.light_off} />
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+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: {
+    flexDirection: 'row',
+  },
+  gradientItemIconView: {
+    width: cx(24),
+    height: cx(24),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#aaa',
+    borderRadius: cx(8),
+  },
+  gradientItemIcon: {
+    width: cx(16),
+    height: cx(16),
+    tintColor: '#fff',
+  },
+  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),
+  },
+});

package/src/newModules/mood/MoodPage.tsx

@@ -0,0 +1,385 @@
+import React, { useCallback, useEffect } from 'react';
+import Page from '@ledvance/base/src/components/Page';
+import { Utils } from 'tuya-panel-kit';
+import { saveMoodList, useWorkMode } from './MoodActions';
+import {
+  useDeviceId,
+  useDeviceInfo,
+  useFlagMode,
+  useMoods,
+} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { useReactive } from 'ahooks';
+import Strings from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import { FlatList, StyleSheet, View, Platform } from 'react-native';
+import Tag from '@ledvance/base/src/components/Tag';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import InfoText from '@ledvance/base/src/components/InfoText';
+import CustomListDialog from '@ledvance/base/src/components/CustomListDialog';
+import MoodItem from './MoodItem';
+import { useNavigation } from '@react-navigation/core';
+import { MoodPageParams, MoodPageState, MoodUIInfo } from './Interface';
+import { getRemoteMoodList, useMoodScene } from './MoodActions';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import { RouterKey } from 'navigation/Router';
+import { cloneDeep } from 'lodash';
+import { saveFlagMode } from '@ledvance/ui-biz-bundle/src/modules/flags/FlagActions';
+import { WorkMode } from '@ledvance/base/src/utils/interface';
+
+const cx = Utils.RatioUtils.convertX;
+
+const MAX_MOOD_COUNT = 255;
+
+const MoodPage = () => {
+  const params = useParams<MoodPageParams>();
+  const deviceInfo = useDeviceInfo();
+  const devId = useDeviceId();
+  const navigation = useNavigation();
+  const option = {
+    isCeilingLight: params.isCeilingLight,
+    isStripLight: params.isStripLight,
+    isStringLight: params.isStringLight,
+    isFanLight: params.isFanLight,
+    isMixLight: params.isMixLight,
+    isUVCFan: params.isUVCFan,
+    isMatterLight: params.isMatterLight,
+  };
+  const [moodInfo, setMoodInfo] = useMoodScene(params.mainDp, option, params.secondaryDp);
+  const [moods, setMoods] = useMoods();
+  const [mainWork, setMainWork] = useWorkMode(params.mainWorkMode);
+  const [secondaryWork, setSecondaryWork] = useWorkMode(params.secondaryWorkMode!);
+  const [flagMode, setFlagMode] = useFlagMode();
+  const state = useReactive<MoodPageState>({
+    currentMood: undefined,
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    showAddMoodPopover: false,
+    originMoods: cloneDeep(moods),
+    filterMoods: [],
+    loading: false,
+    timerId: undefined as any,
+    flag: Symbol(),
+  });
+  useEffect(() => {
+    state.timerId = setTimeout(() => {
+      getRemoteMoodList(
+        devId,
+        {
+          ...option,
+          isSupportBrightness: params.isSupportBrightness,
+          isSupportColor: params.isSupportColor,
+          isSupportTemperature: params.isSupportTemperature,
+        },
+        params.featureId
+      ).then(res => {
+        if (res.success && Array.isArray(res.data)) {
+          state.originMoods = cloneDeep(res.data);
+        }
+      });
+    }, 400);
+
+    return () => {
+      clearTimeout(state.timerId);
+    };
+  }, []);
+
+  useEffect(() => {
+    state.filterMoods = state.originMoods.filter(item => {
+      return (
+        (state.staticTagChecked && state.dynamicTagChecked) ||
+        (!state.staticTagChecked && !state.dynamicTagChecked) ||
+        (state.staticTagChecked && item.mainLamp.nodes.length < 2) ||
+        (state.dynamicTagChecked &&
+          (item.secondaryLamp.nodes.length > 1 || item.mainLamp.nodes.length > 1))
+      );
+    });
+  }, [state.staticTagChecked, state.dynamicTagChecked, state.originMoods]);
+
+  const navigationRoute = (isStatic: boolean, mode: 'add' | 'edit', currentMood?: MoodUIInfo) => {
+    const path =
+      mode === 'add'
+        ? RouterKey.ui_biz_mood_add
+        : isStatic
+        ? RouterKey.ui_biz_static_mood_edit
+        : !!(params.isMixLight || params.isCeilingLight)
+        ? RouterKey.ui_biz_dynamic_mix_mood_edit
+        : RouterKey.ui_biz_dynamic_mood_edit;
+    navigation.navigate(path, {
+      mode,
+      isStatic,
+      moods: state.originMoods,
+      currentMood,
+      moduleParams: params,
+      modDeleteMood,
+    });
+  };
+
+  const modDeleteMood = async (mode: 'add' | 'edit' | 'del' | 'set', currentMood: MoodUIInfo) => {
+    const checkedMood: MoodUIInfo = {
+      ...currentMood,
+      mainLamp: {
+        ...currentMood.mainLamp,
+        nodes: currentMood.mainLamp.nodes.map(node => {
+          if (mode !== 'del') {
+            if (node.isColorNode) {
+              node.brightness = 0;
+              node.colorTemp = 0;
+            } else {
+              node.h = 0;
+              node.s = 0;
+              node.v = 0;
+              if (!params.isSupportTemperature) {
+                node.colorTemp = 100; // 适配dim灯
+              }
+            }
+            return node;
+          }
+          return node;
+        }),
+      },
+      secondaryLamp: {
+        ...currentMood.secondaryLamp,
+        nodes: currentMood.secondaryLamp
+          ? currentMood.secondaryLamp.nodes.map(node => {
+              if (mode !== 'del') {
+                if (node.isColorNode) {
+                  node.brightness = 0;
+                  node.colorTemp = 0;
+                } else {
+                  node.h = 0;
+                  node.s = 0;
+                  node.v = 0;
+                  if (!params.isSupportTemperature) {
+                    node.colorTemp = 100; // 适配dim灯
+                  }
+                }
+                return node;
+              }
+              return node;
+            })
+          : [],
+      },
+    };
+    if (mode === 'set') {
+      return setMoodInfo(checkedMood, params);
+    }
+    let newScene: MoodUIInfo[] = [];
+    if (mode === 'add') {
+      newScene = [checkedMood, ...state.originMoods];
+    } else if (mode === 'del') {
+      newScene = state.originMoods.filter(item => item.id !== checkedMood.id);
+    } else {
+      newScene = state.originMoods.map(item => {
+        if (item.id === checkedMood.id) {
+          return checkedMood;
+        }
+        return item;
+      });
+    }
+    const mood = mode === 'del' ? (newScene.length === 0 ? undefined : newScene[0]) : checkedMood;
+    const res = await saveMoodList(devId, newScene, option, params.featureId);
+    if (res.success) {
+      state.originMoods = cloneDeep(newScene);
+      setMoods(cloneDeep(newScene));
+      updateFlagMode();
+      if (mood) {
+        if (mode === 'del') {
+          if (
+            (mainWork !== WorkMode.Scene && secondaryWork !== WorkMode.Scene) ||
+            (params.isCeilingLight
+              ? currentMood.mainLamp.id !== moodInfo.mainLamp.id &&
+                currentMood.secondaryLamp.id !== moodInfo.secondaryLamp.id
+              : currentMood.id !== moodInfo.id)
+          ) {
+            return {
+              success: true,
+            };
+          }
+        }
+        setMoodInfo(mood, params).then();
+      } else {
+        if (mainWork === WorkMode.Scene) {
+          if (params.isCeilingLight) {
+            setMainWork(WorkMode.White).then();
+          } else {
+            const work = getWorkMode(undefined, params);
+            setMainWork(work).then();
+          }
+        }
+        if (params.isCeilingLight && params.secondaryWorkMode && secondaryWork === WorkMode.Scene) {
+          setSecondaryWork(WorkMode.Colour).then();
+        }
+      }
+      return {
+        success: true,
+      };
+    } else {
+      return {
+        success: false,
+      };
+    }
+  };
+
+  function getWorkMode(mood: MoodUIInfo | undefined, params: MoodPageParams): WorkMode {
+    if (mood) return WorkMode.Scene;
+    if (params.isFanLight || params.isUVCFan) return WorkMode.Control;
+    if (params.isSupportColor) return WorkMode.Colour;
+    return WorkMode.White;
+  }
+
+  const updateFlagMode = () => {
+    if (flagMode?.flagMode) {
+      saveFlagMode(
+        devId,
+        JSON.stringify({
+          flagMode: false,
+          flagId: undefined,
+        })
+      ).then();
+      setFlagMode({
+        flagMode: false,
+        flagId: undefined,
+      });
+    }
+  };
+
+  const onAddMoodDialogItemClick = useCallback(
+    (isStatic: boolean, _: number) => {
+      if (!!state.originMoods) {
+        navigationRoute(isStatic, 'add');
+      }
+      state.showAddMoodPopover = false;
+    },
+    [state.originMoods]
+  );
+
+  const getItemEnable = useCallback(
+    (moodItem: MoodUIInfo) => {
+      if (option.isCeilingLight) {
+        return (
+          moodInfo.mainLamp.id === moodItem.mainLamp.id &&
+          moodInfo.secondaryLamp.id === moodItem.secondaryLamp.id &&
+          (mainWork === WorkMode.Scene || secondaryWork === WorkMode.Scene)
+        );
+      } else {
+        return moodInfo.id === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode;
+      }
+    },
+    [moodInfo, mainWork]
+  );
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        headlineText={Strings.getLang('mood_overview_headline_text')}
+        headlineIcon={state.originMoods.length < MAX_MOOD_COUNT ? res.add : undefined}
+        onHeadlineIconClick={() => {
+          if (params.isStringLight || params.isStripLight) {
+            onAddMoodDialogItemClick(false, 1);
+          } else {
+            state.showAddMoodPopover = !state.showAddMoodPopover;
+          }
+        }}
+        loading={state.loading}
+      >
+        <View style={styles.tagLine}>
+          <Tag
+            checked={state.staticTagChecked}
+            text={Strings.getLang('mood_overview_filter_name_text1')}
+            onCheckedChange={checked => {
+              state.staticTagChecked = checked;
+            }}
+          />
+          <Spacer width={cx(8)} height={0} />
+          <Tag
+            checked={state.dynamicTagChecked}
+            text={Strings.getLang('mood_overview_filter_name_text2')}
+            onCheckedChange={checked => {
+              state.dynamicTagChecked = checked;
+            }}
+          />
+        </View>
+        <Spacer height={cx(10)} />
+        {state.originMoods.length >= MAX_MOOD_COUNT && (
+          <View style={styles.infoLine}>
+            <Spacer height={cx(10)} />
+            <InfoText
+              icon={res.ic_warning_amber}
+              text={Strings.getLang('mood_overview_warning_max_number_text')}
+              contentColor={'#ff9500'}
+            />
+            <Spacer height={cx(6)} />
+          </View>
+        )}
+        <FlatList
+          data={state.filterMoods}
+          renderItem={({ item }) => {
+            return (
+              <MoodItem
+                enable={getItemEnable(item)}
+                isMix={!!(params.isMixLight || params.isCeilingLight)}
+                mood={item}
+                onPress={() => {
+                  navigationRoute(item.mainLamp.nodes.length === 1, 'edit', item);
+                }}
+                onSwitch={async _ => {
+                  state.loading = true;
+                  await modDeleteMood('set', item);
+                  updateFlagMode();
+                  state.loading = false;
+                }}
+              />
+            );
+          }}
+          ListHeaderComponent={() => <Spacer height={cx(10)} />}
+          ItemSeparatorComponent={() => <Spacer />}
+          ListFooterComponent={() => <Spacer />}
+          keyExtractor={item => `${item.name}`}
+        />
+      </Page>
+      <CustomListDialog
+        show={state.showAddMoodPopover}
+        style={styles.addMoodPopover}
+        itemStyle={styles.popoverItem}
+        onDismiss={() => {
+          state.showAddMoodPopover = false;
+        }}
+        data={[
+          {
+            text: Strings.getLang('mood_overview_add_mood_text'),
+            value: true,
+          },
+          {
+            text: Strings.getLang('mood_overview_add_mood_text2'),
+            value: false,
+          },
+        ]}
+        onItemPress={onAddMoodDialogItemClick}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  tagLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(24),
+  },
+  infoLine: {
+    marginHorizontal: cx(24),
+  },
+  addMoodPopover: {
+    position: 'absolute',
+    right: cx(60),
+    top: Platform.OS === 'android' ? cx(90) : cx(130),
+    maxWidth: cx(200),
+    backgroundColor: '#fff',
+  },
+  popoverItem: {
+    padding: cx(5),
+    alignItems: 'flex-start',
+  },
+});
+
+export default MoodPage;