@ledvance/group-ui-biz-bundle 1.0.91 → 1.0.92

package/src/modules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -37,13 +37,16 @@ import DeleteButton from '@ledvance/base/src/components/DeleteButton';
 import SegmentControl from '@ledvance/base/src/components/segmentControl';
 import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import ManualSettings from './components/ManuaSettings';
-import { defDeviceData, defMixDeviceData, defStripDeviceData, defFanLightDeviceData } from './TimeScheduleActions';
+import { defDeviceData, defMixDeviceData, defStripDeviceData, defFanLightDeviceData, defMoodStripDeviceData } from './TimeScheduleActions';
 import MoodItem from '../mood_new/MoodItem';
 import Summary from './components/Summary'
 import { getRemoteMoodList } from '../mood_new/MoodActions'
-import { MoodUIInfo } from '../mood_new/Interface';
+import {MoodInfo, MoodUIInfo } from '../mood_new/Interface';
 import InfoText from '@ledvance/base/src/components/InfoText';
 import ThemeType from '@ledvance/base/src/config/themeType'
+import Tag from '@ledvance/base/src/components/Tag';
+import { DiySceneInfo } from '@ledvance/base/src/utils/interface';
+import DiySceneItem from '@ledvance/base/src/components/DiySceneItem';
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
@@ -61,6 +64,7 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   const uaGroupInfo = useUAGroupInfo()
   const is24HourClock = useSystemTimeFormate();
   const [moods, setMoods] = useMoods();
+  type MoodsType = typeof params.isMoodStrip extends true ? DiySceneInfo[] : MoodUIInfo[]
   const state = useReactive<TimeScheduleDetailState>({
     timeSchedule: params.mode === 'add' ? newTimeSchedule() : cloneDeep(params.timeSchedule),
     dps: params.mode === 'add' ? {} : params.timeSchedule.dps,
@@ -76,6 +80,10 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
         : params.manualDataDp2Obj(params.timeSchedule.dps)?.deviceData,
     mood: params.mode === 'add' ? undefined : params.manualDataDp2Obj(params.timeSchedule.dps)?.mood,
     moods: cloneDeep(moods),
+    filterMoods: cloneDeep(moods),
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    diyTagChecked: true,
     timerId: undefined,
     moodName: '',
   });
@@ -145,15 +153,37 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   useEffect(() => {
     if (state.moods?.length) {
       state.moodName =
-        state.moods.find(m =>
+        (state.moods as MoodsType).find(m =>
           params.isCeilingLight
-            ? m.mainLamp.id === state.mood?.mainLamp.id &&
-            m.secondaryLamp.id === state.mood?.secondaryLamp.id
+            ? m.mainLamp.id === (state.mood as MoodInfo)?.mainLamp.id &&
+            m.secondaryLamp.id === (state.mood as MoodInfo)?.secondaryLamp.id
             : m.id === state.mood?.id
         )?.name || '';
     }
   }, [state.mood, state.moods]);
 
+  useEffect(() => {
+    if (params.isMoodStrip) {
+      state.filterMoods = (state.moods as DiySceneInfo[]).filter(item => {
+        return [state.staticTagChecked, state.dynamicTagChecked, state.diyTagChecked].every(it => !it)
+          || (state.staticTagChecked && item.type === 'Static')
+          || (state.dynamicTagChecked && item.type === 'Dynamic')
+          || (state.diyTagChecked && item.type === 'DIY')
+      })
+    } else {
+      state.filterMoods = (state.moods as MoodsType).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.diyTagChecked, state.moods]);
+
   const getFormateTime = useCallback((time: number | string) => {
     if (typeof time === 'number') {
       return `${toFixedString(Math.trunc(time / 60), 2)}:${toFixedString(time % 60, 2)}`;
@@ -211,7 +241,7 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   }, [params.applyForList.length, params.applyForDisabled]);
 
   const getMoodItemEnable = useCallback((item: MoodUIInfo ) =>{
-    return params.isCeilingLight ? ((item.mainLamp.id === state.mood?.mainLamp?.id) && (item.secondaryLamp.id === state.mood?.secondaryLamp?.id)) : item.id === state.mood?.id
+    return params.isCeilingLight ? ((item.mainLamp.id === (state.mood as MoodInfo)?.mainLamp?.id) && (item.secondaryLamp.id === (state.mood as MoodInfo)?.secondaryLamp?.id)) : item.id === state.mood?.id
   }, [state.mood, params.isCeilingLight])
 
   const styles = StyleSheet.create({
@@ -264,6 +294,10 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
       color: props.theme?.global.fontColor,
       fontSize: cx(14)
     },
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    }
   })
 
   return (
@@ -429,7 +463,7 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
         {showMoodFanSelectText && <InfoText
             style={{marginHorizontal: cx(24)}}
             icon={res.ic_warning_amber}
-            contentColor={props.theme?.global.warnging}
+            contentColor={props.theme?.global.warning}
             text={I18n.getLang('timeschedule_add_schedule_devicestate_sec_warning_text')}
         />}
         {state.isManual ? (
@@ -454,25 +488,77 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
             }}
           />
         ) : (
-          !showMoodFanSelectText ? <FlatList
-            data={state.moods}
-            renderItem={({ item }) => {
-              return (
-                <MoodItem
-                  enable={getMoodItemEnable(item)}
-                  mood={item}
-                  isMix={!!(params.isMixLight || params.isCeilingLight)}
-                  onSwitch={_ => {
-                    state.mood = cloneDeep(item);
+          !showMoodFanSelectText ? (
+            <View>
+              {!(params.isStringLight || params.isStripLight) && <View style={styles.tagLine}>
+                  <Tag
+                      checked={state.staticTagChecked}
+                      text={I18n.getLang('mood_overview_filter_name_text1')}
+                      onCheckedChange={checked => {
+                        state.staticTagChecked = checked;
+                      }}
+                  />
+                  <Spacer width={cx(8)} height={0} />
+                  <Tag
+                      checked={state.dynamicTagChecked}
+                      text={I18n.getLang('mood_overview_filter_name_text2')}
+                      onCheckedChange={checked => {
+                        state.dynamicTagChecked = checked;
+                      }}
+                  />
+                {
+                  params.isMoodStrip && <>
+                        <Spacer width={cx(8)} height={0}/>
+                        <Tag
+                            checked={state.diyTagChecked}
+                            text={I18n.getLang('mood_overview_field_chip_diy')}
+                            onCheckedChange={checked => {
+                              state.diyTagChecked = checked;
+                            }}
+                        />
+                    </>
+                }
+              </View>}
+              {params.isMoodStrip ? <FlatList
+                  data={state.filterMoods as DiySceneInfo[]}
+                  renderItem={({item}) => {
+                    return (
+                      <DiySceneItem
+                        enable={item.id === state.mood?.id}
+                        scene={item}
+                        onSwitch={_ => {
+                          state.mood = cloneDeep(item);
+                        }}
+                      />
+                    );
                   }}
+                  ListHeaderComponent={() => <Spacer height={cx(10)}/>}
+                  ItemSeparatorComponent={() => <Spacer/>}
+                  ListFooterComponent={() => <Spacer/>}
+                  keyExtractor={item => `${item.name}`}
+                /> :
+                <FlatList
+                  data={state.filterMoods as MoodUIInfo[]}
+                  renderItem={({ item }) => {
+                    return (
+                      <MoodItem
+                        enable={getMoodItemEnable(item)}
+                        mood={item}
+                        isMix={!!(params.isMixLight || params.isCeilingLight)}
+                        onSwitch={_ => {
+                          state.mood = cloneDeep(item);
+                        }}
+                      />
+                    );
+                  }}
+                  ListHeaderComponent={() => <Spacer height={cx(10)} />}
+                  ItemSeparatorComponent={() => <Spacer />}
+                  ListFooterComponent={() => <Spacer />}
+                  keyExtractor={item => `${item.name}`}
                 />
-              );
-            }}
-            ListHeaderComponent={() => <Spacer height={cx(10)} />}
-            ItemSeparatorComponent={() => <Spacer />}
-            ListFooterComponent={() => <Spacer />}
-            keyExtractor={item => `${item.name}`}
-          /> : <View></View>
+              }
+            </View>
+          ) : <View></View>
         )}
         <Spacer />
 
@@ -614,7 +700,9 @@ const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig
             DeviceType.FanLight
             : props.isCeilingLight
               ? DeviceType.CeilingLight
-              : DeviceType.LightSource;
+              : props.isMoodStrip
+                ? DeviceType.MoodStrip
+                : DeviceType.LightSource
   const deviceData =
     (deviceType === DeviceType.StripLight || deviceType === DeviceType.CeilingLight)
       ? defStripDeviceData
@@ -622,7 +710,9 @@ const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig
         ? defMixDeviceData
         : deviceType === DeviceType.FanLight
           ? defFanLightDeviceData
-          : defDeviceData;
+          : deviceType === DeviceType.MoodStrip
+            ? defMoodStripDeviceData
+            : defDeviceData;
   // @ts-ignore
   return {
     type: deviceType,

package/src/modules/timeSchedule/TimeSchedulePage.tsx

@@ -38,6 +38,7 @@ export interface TimeSchedulePageParams {
   isMixLight?: boolean;
   isFanLight?: boolean
   isUVCFan?: boolean;
+  isMoodStrip?: boolean
   applyForList: ApplyForItem[];
   applyForDisabled?: boolean; // 是否可以选择apply for
   manualDataDp2Obj: (dps: Record<string, any>) => DeviceStateType;

package/src/modules/timeSchedule/components/ManuaSettings.tsx

@@ -15,6 +15,9 @@ import { useGroupDevices } from '@ledvance/base/src/models/modules/NativePropsSl
 import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList';
 import { cloneDeep } from 'lodash';
 import { FanAdjustViewContent } from '@ledvance/base/src/components/FanAdjustView';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import {hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
+import { AdjustType } from '@ledvance/base/src/utils/interface';
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
@@ -66,6 +69,14 @@ function ManualSettings(props: ManualSettingProps) {
 
   const lightSourceCard = useMemo(() => {
     const { deviceData } = state;
+    const getBlockColor = () => {
+      if (!deviceData.isColorMode) return cctToColor(deviceData.temperature)
+      if (deviceData.isColorMode) {
+        const s = Math.round(mapFloatToRange(deviceData.s / 100, 30, 100))
+        return hsv2Hex(deviceData.h, s, 100)
+      }
+      return props.theme?.card?.background
+    };
     return (
       <View>
         {state.applyForList.map((item, idx) => (
@@ -73,7 +84,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.name || item.key}
-                color={props.theme?.card.background}
+                color={getBlockColor()}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -99,6 +110,7 @@ function ManualSettings(props: ManualSettingProps) {
                     state.deviceData = {
                       ...state.deviceData,
                       isColorMode: mode,
+                      adjustType: mode ? AdjustType.COLOUR : AdjustType.WHITE
                     };
                     state.manualFlag = Symbol()
                   }}
@@ -195,6 +207,15 @@ function ManualSettings(props: ManualSettingProps) {
   }, [state.deviceData, state.applyForList, props.theme?.card.background]);
 
   const mixLightCard = useMemo(() => {
+    const {deviceData} = state;
+    const getBlockColor = ((type: string) => {
+      if (type === 'mainLight') return cctToColor(deviceData.temperature);
+      if (type === 'secondaryLight') {
+        const s = Math.round(mapFloatToRange(deviceData.s / 100, 30, 100));
+        return hsv2Hex(deviceData.h, s, 100);
+      }
+      return props.theme?.card?.background;
+    });
     return (
       <View>
         {state.applyForList.map((item, idx) => (
@@ -202,7 +223,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={props.theme?.card.background}
+                color={getBlockColor(item.type)}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -331,6 +352,17 @@ function ManualSettings(props: ManualSettingProps) {
 
   const ceilingLightCard = useMemo(() => {
     const deviceData = state.deviceData as CeilingLightData
+    const getBlockColor = (type: string) => {
+      if (type === 'mainLight') {
+        return cctToColor(deviceData.temperature);
+      }
+      // deviceData.activeKey === 3为combination
+      if (type === 'secondaryLight' && deviceData.activeKey !== 3) {
+        const s = Math.round(mapFloatToRange(deviceData.s / 100, 30, 100));
+        return hsv2Hex(deviceData.h, s, 100);
+      }
+      return props.theme?.card.background;
+    }
     return (
       <View>
         {state.applyForList.map((item, idx) => (
@@ -338,7 +370,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={props.theme?.card.background}
+                color={getBlockColor(item.type)}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {

package/src/navigation/Routers.ts

@@ -32,5 +32,7 @@ export const ui_biz_routerKey = {
   'group_ui_biz_switch_inching': 'group_ui_biz_switch_inching',
   'group_ui_biz_energy_consumption': 'group_ui_biz_energy_consumption',
   'group_ui_biz_energy_consumption_detail': 'group_ui_biz_energy_consumption_detail',
-  'group_ui_biz_energy_consumption_chart': 'group_ui_biz_energy_consumption_chart'
+  'group_ui_biz_energy_consumption_chart': 'group_ui_biz_energy_consumption_chart',
+  'group_ui_biz_diy_scene_page': 'group_ui_biz_diy_scene_page',
+  'group_ui_biz_diy_scene_edit_page': 'group_ui_biz_diy_scene_edit_page'
 }