@ledvance/ui-biz-bundle 1.1.59 → 1.1.62

package/src/newModules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -37,16 +37,16 @@ import { Result } from '@ledvance/base/src/models/modules/Result';
 import DeleteButton from '@ledvance/base/src/components/DeleteButton';
 import InfoText from '@ledvance/base/src/components/InfoText';
 import SegmentControl from '@ledvance/base/src/components/segmentControl';
-// import { SceneMode } from "../mood/SceneInfo";
 import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import ManualSettings from './components/ManuaSettings';
 import { defDeviceData, defMixDeviceData, defStripDeviceData } from './TimeScheduleActions';
 import MoodItem from '../mood/MoodItem';
 import { getRemoteMoodList } from '../mood/MoodActions';
-// import LoadingView from "@ledvance/base/src/components/LoadingView";
 
 const { convertX: cx } = Utils.RatioUtils;
 const { toFixedString } = Utils.NumberUtils;
+const { withTheme } = Utils.ThemeUtils
+
 interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
   mode: 'add' | 'update';
   timeSchedule: Timer;
@@ -54,15 +54,15 @@ interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
   refreshFn: () => void;
 }
 
-const TimeScheduleDetailPage = () => {
+const TimeScheduleDetailPage = (props: {theme?: any}) => {
   const is24HourClock = useSystemTimeFormate();
-  const props = useParams<TimeScheduleDetailPageParams>();
+  const params = useParams<TimeScheduleDetailPageParams>();
   const navigation = useNavigation();
   const devId = useDeviceId();
   const [moods, setMoods] = useMoods();
   const state = useReactive<TimeScheduleDetailState>({
-    timeSchedule: props.mode === 'add' ? newTimeSchedule() : cloneDeep(props.timeSchedule),
-    dps: props.mode === 'add' ? {} : props.timeSchedule.dps,
+    timeSchedule: params.mode === 'add' ? newTimeSchedule() : cloneDeep(params.timeSchedule),
+    dps: params.mode === 'add' ? {} : params.timeSchedule.dps,
     isManual: true, // manual ,mood
     initSelectedSkill: [] as ApplyForItem[],
     selectedSkill: [] as ApplyForItem[],
@@ -70,9 +70,9 @@ const TimeScheduleDetailPage = () => {
     loading: false,
     moodLoading: false,
     manualData:
-      props.mode === 'add'
-        ? getDefaultManual(props)
-        : props.manualDataDp2Obj(props.timeSchedule.dps).deviceData,
+      params.mode === 'add'
+        ? getDefaultManual(params)
+        : params.manualDataDp2Obj(params.timeSchedule.dps).deviceData,
     mood: undefined,
     moods: cloneDeep(moods),
     timerId: undefined,
@@ -80,29 +80,29 @@ const TimeScheduleDetailPage = () => {
   });
 
   useEffect(() => {
-    const { applyForDisabled, timeSchedule, applyForList, mode } = props;
+    const { applyForDisabled, timeSchedule, applyForList, mode } = params;
     const cannotChoose = applyForDisabled || applyForList.length === 1;
     const cloneApplyList =
       mode === 'add'
         ? cloneDeep(applyForList)
         : cloneDeep(applyForList).map(item => {
-            if (props.isMixLight && state.manualData.type === DeviceType.MixLight) {
-              return {
-                ...item,
-                enable:
-                  item.type === 'mainLight'
-                    ? state.manualData.deviceData.whiteLightSwitch
-                    : state.manualData.deviceData.colorLightSwitch,
-              };
-            }
-            if (timeSchedule?.dps?.hasOwnProperty(item.dp)) {
-              return {
-                ...item,
-                enable: timeSchedule?.dps[item.dp],
-              };
-            }
-            return item;
-          });
+          if (params.isMixLight && state.manualData.type === DeviceType.MixLight) {
+            return {
+              ...item,
+              enable:
+                item.type === 'mainLight'
+                  ? state.manualData.deviceData.whiteLightSwitch
+                  : state.manualData.deviceData.colorLightSwitch,
+            };
+          }
+          if (timeSchedule?.dps?.hasOwnProperty(item.dp)) {
+            return {
+              ...item,
+              enable: timeSchedule?.dps[item.dp],
+            };
+          }
+          return item;
+        });
 
     if (cannotChoose) {
       state.selectedSkill = cloneApplyList;
@@ -117,8 +117,8 @@ const TimeScheduleDetailPage = () => {
       state.selectedSkill = mode === 'add' ? [] : selectedList;
       state.unSelectedSkill = mode === 'add' ? cloneApplyList : unSelectedList;
     }
-    if (props.mode === 'update' && props.manualDataDp2Obj) {
-      const { isManual, mood } = props.manualDataDp2Obj(props.timeSchedule.dps);
+    if (params.mode === 'update' && params.manualDataDp2Obj) {
+      const { isManual, mood } = params.manualDataDp2Obj(params.timeSchedule.dps);
       state.isManual = isManual;
       state.mood = mood;
     }
@@ -127,7 +127,7 @@ const TimeScheduleDetailPage = () => {
 
     if (!(Array.isArray(moods) && moods.length)) {
       state.timerId = setTimeout(() => {
-        getRemoteMoodList(devId, props, props.featureId).then(res => {
+        getRemoteMoodList(devId, params, params.featureId).then(res => {
           if (res.success && Array.isArray(res.data)) {
             state.moods = cloneDeep(res.data);
             setMoods(cloneDeep(res.data));
@@ -147,9 +147,9 @@ const TimeScheduleDetailPage = () => {
     if (state.moods?.length) {
       state.moodName =
         state.moods.find(m =>
-          props.isCeilingLight
+          params.isCeilingLight
             ? m.mainLamp.id === state.mood?.mainLamp.id &&
-              m.secondaryLamp.id === state.mood?.secondaryLamp.id
+            m.secondaryLamp.id === state.mood?.secondaryLamp.id
             : m.id === state.mood?.id
         )?.name || '';
     }
@@ -167,18 +167,18 @@ const TimeScheduleDetailPage = () => {
   }, []);
 
   const isModify = useMemo(() => {
-    if (props.mode === 'add') {
+    if (params.mode === 'add') {
       return true
     }
 
-    const schedule = props.timeSchedule;
-    const manual = props.manualDataDp2Obj(props.timeSchedule?.dps).deviceData;
+    const schedule = params.timeSchedule;
+    const manual = params.manualDataDp2Obj(params.timeSchedule?.dps).deviceData;
     const before = {
       ...schedule,
       selectedSkill: state.initSelectedSkill,
       dps: manual,
-      isManual: props.manualDataDp2Obj(props.timeSchedule.dps).isManual,
-      mood: props.manualDataDp2Obj(props.timeSchedule?.dps).mood,
+      isManual: params.manualDataDp2Obj(params.timeSchedule.dps).isManual,
+      mood: params.manualDataDp2Obj(params.timeSchedule?.dps).mood,
       id: 1,
     };
 
@@ -203,14 +203,87 @@ const TimeScheduleDetailPage = () => {
   }, [state.timeSchedule.name, state.selectedSkill, isModify, state.isManual, state.mood]);
 
   const showSelectedIcon = useMemo(() => {
-    return state.selectedSkill.length !== 1 && !props.applyForDisabled;
-  }, [state.selectedSkill.length, props.applyForDisabled]);
+    return state.selectedSkill.length !== 1 && !params.applyForDisabled;
+  }, [state.selectedSkill.length, params.applyForDisabled]);
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      marginHorizontal: cx(24),
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    applyContent: {
+      backgroundColor: props.theme.card.background,
+      borderRadius: 4,
+      minHeight: cx(55),
+      flex: 1,
+      justifyContent: 'center',
+      paddingHorizontal: cx(10),
+      paddingTop: cx(10),
+    },
+    applyItem: {
+      paddingLeft: cx(5),
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: props.theme.global.background,
+      height: cx(35),
+    },
+    moodScrollView: {
+      maxHeight: cx(500),
+    },
+    summaryContainer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      marginBottom: cx(10),
+      marginHorizontal: cx(24),
+    },
+    summaryImg: {
+      height: cx(12),
+      width: cx(12),
+      tintColor: props.theme.global.fontColor,
+    },
+    summaryLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      minWidth: cx(90),
+    },
+    leftTitle: {
+      fontSize: cx(14),
+      color: props.theme.global.fontColor,
+      marginTop: 0,
+    },
+    summaryRight: {
+      flexDirection: 'column',
+      marginLeft: cx(21),
+      backgroundColor: props.theme.card.background,
+      borderRadius: cx(16),
+      alignItems: 'center'
+    },
+    rightItem: {
+      paddingHorizontal: cx(12),
+      color: props.theme.global.fontColor,
+    },
+    switchButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: cx(10),
+    },
+    text: {
+      color: props.theme.global.fontColor,
+    },
+  });
 
   return (
     <Page
       backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
       headlineText={I18n.getLang(
-        props.mode === 'add'
+        params.mode === 'add'
           ? 'motion_detection_add_time_schedule_headline_text'
           : 'edit_timeschedule_headline_text'
       )}
@@ -218,10 +291,10 @@ const TimeScheduleDetailPage = () => {
       rightButtonIconClick={async () => {
         if (!allowSubmit || state.loading) return;
         state.loading = true;
-        const res = await props.modDeleteTimeSchedule(props.mode, {
+        const res = await params.modDeleteTimeSchedule(params.mode, {
           ...state.timeSchedule,
           enable: true,
-          dps: props.manualDataObj2Dp(
+          dps: params.manualDataObj2Dp(
             {
               deviceData: state.manualData,
               isManual: state.isManual,
@@ -257,7 +330,8 @@ const TimeScheduleDetailPage = () => {
         {/* pick */}
         <TimerPicker
           itemTextColor="#aeadb5"
-          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
+          pickerFontColor={props.theme.global.fontColor}
           is12Hours={!is24HourClock}
           singlePicker={true}
           amText={I18n.getLang('manage_user_calendar_label_am')}
@@ -280,7 +354,7 @@ const TimeScheduleDetailPage = () => {
           }}
         />
         <Spacer />
-        <Text style={styles.cardContainer}>{loopText(state.timeSchedule.loops.split(''))}</Text>
+        <Text style={{...styles.cardContainer, color: props.theme.global.fontColor}}>{loopText(state.timeSchedule.loops.split(''))}</Text>
         <Spacer height={cx(30)} />
 
         {/* Apply for */}
@@ -290,7 +364,7 @@ const TimeScheduleDetailPage = () => {
           </Text>
           <Spacer height={cx(10)} />
           <View style={styles.applyContent}>
-            {props.applyForList.length === 0 ? (
+            {params.applyForList.length === 0 ? (
               <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text>
             ) : (
               state.selectedSkill.map(skill => (
@@ -298,7 +372,7 @@ const TimeScheduleDetailPage = () => {
                   style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}
                   key={skill.dp}
                 >
-                  <Text style={{ color: '#000' }}>{skill.key}</Text>
+                  <Text style={{ color: props.theme.global.fontColor }}>{skill.key}</Text>
                   {showSelectedIcon && (
                     <TouchableOpacity
                       onPress={() => {
@@ -327,7 +401,7 @@ const TimeScheduleDetailPage = () => {
                   state.unSelectedSkill = state.unSelectedSkill.filter(s => item.dp !== s.dp);
                 }}
               >
-                <Text style={{ color: '#000' }}>{item.key}</Text>
+                <Text style={{ color: props.theme.global.fontColor }}>{item.key}</Text>
                 <Image
                   style={{ width: cx(16), height: cx(16) }}
                   source={res.device_panel_timer_add}
@@ -343,7 +417,7 @@ const TimeScheduleDetailPage = () => {
           {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
         </Text>
         <Spacer height={cx(10)} />
-        {props.isSupportMood && (
+        {params.isSupportMood && (
           <>
             <SegmentControl
               title1={I18n.getLang('timeschedule_add_schedule_switch_tab_manual_text')}
@@ -359,10 +433,10 @@ const TimeScheduleDetailPage = () => {
           <ManualSettings
             dps={state.dps}
             applyForList={state.selectedSkill}
-            isSupportColor={props.isSupportColor}
-            isSupportBrightness={props.isSupportBrightness}
-            isSupportTemperature={props.isSupportTemperature}
-            isStripLight={props.isStripLight}
+            isSupportColor={params.isSupportColor}
+            isSupportBrightness={params.isSupportBrightness}
+            isSupportTemperature={params.isSupportTemperature}
+            isStripLight={params.isStripLight}
             manualData={state.manualData}
             onManualChange={manual => {
               // @ts-ignore
@@ -377,24 +451,24 @@ const TimeScheduleDetailPage = () => {
           />
         ) : (
           <FlatList
-              data={state.moods}
-              renderItem={({ item }) => {
-                return (
-                  <MoodItem
-                    enable={state.mood?.id === item.id}
-                    mood={item}
-                    isMix={!!(props.isMixLight || props.isCeilingLight)}
-                    onSwitch={_ => {
-                      state.mood = item;
-                    }}
-                  />
-                );
-              }}
-              ListHeaderComponent={() => <Spacer height={cx(10)} />}
-              ItemSeparatorComponent={() => <Spacer />}
-              ListFooterComponent={() => <Spacer />}
-              keyExtractor={item => `${item.name}`}
-            />
+            data={state.moods}
+            renderItem={({ item }) => {
+              return (
+                <MoodItem
+                  enable={state.mood?.id === item.id}
+                  mood={item}
+                  isMix={!!(params.isMixLight || params.isCeilingLight)}
+                  onSwitch={_ => {
+                    state.mood = item;
+                  }}
+                />
+              );
+            }}
+            ListHeaderComponent={() => <Spacer height={cx(10)} />}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListFooterComponent={() => <Spacer />}
+            keyExtractor={item => `${item.name}`}
+          />
           // <ScrollView style={styles.moodScrollView} nestedScrollEnabled={true}>
 
           // </ScrollView>
@@ -462,67 +536,67 @@ const TimeScheduleDetailPage = () => {
           <View style={{ marginLeft: cx(16), flex: 1 }}>
             {state.isManual
               ? !!state.selectedSkill.length && (
+              <>
+                {!!state.selectedSkill.filter(skill => skill.enable).length && (
                   <>
-                    {!!state.selectedSkill.filter(skill => skill.enable).length && (
-                      <>
-                        <Text style={{ marginLeft: cx(5) }}>
-                          {I18n.getLang('feature_summary_action_txt_1')}
-                        </Text>
-                        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                          {state.selectedSkill
-                            .filter(skill => skill.enable)
-                            .map(item => (
-                              <View
-                                style={[
-                                  styles.summaryRight,
-                                  { marginLeft: cx(5), marginBottom: cx(5) },
-                                ]}
-                                key={item.dp}
-                              >
-                                <Text style={[styles.rightItem]}>{item.key}</Text>
-                              </View>
-                            ))}
-                        </View>
-                      </>
-                    )}
-
-                    {!!state.selectedSkill.filter(skill => !skill.enable).length && (
-                      <>
-                        <Text style={{ marginLeft: cx(5) }}>
-                          {I18n.getLang('feature_summary_action_txt_2')}
-                        </Text>
-                        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                          {state.selectedSkill
-                            .filter(skill => !skill.enable)
-                            .map(item => (
-                              <View
-                                style={[
-                                  styles.summaryRight,
-                                  { marginLeft: cx(5), marginBottom: cx(5) },
-                                ]}
-                                key={item.dp}
-                              >
-                                <Text style={[styles.rightItem]}>{item.key}</Text>
-                              </View>
-                            ))}
-                        </View>
-                      </>
-                    )}
+                    <Text style={{ marginLeft: cx(5), color: props.theme.global.fontColor }}>
+                      {I18n.getLang('feature_summary_action_txt_1')}
+                    </Text>
+                    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                      {state.selectedSkill
+                        .filter(skill => skill.enable)
+                        .map(item => (
+                          <View
+                            style={[
+                              styles.summaryRight,
+                              { marginLeft: cx(5), marginBottom: cx(5) },
+                            ]}
+                            key={item.dp}
+                          >
+                            <Text style={[styles.rightItem]}>{item.key}</Text>
+                          </View>
+                        ))}
+                    </View>
                   </>
-                )
-              : !!state.moodName && (
-                  <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                    <View style={[styles.summaryRight, { marginLeft: cx(5) }]}>
-                      <Text style={styles.rightItem}>{state.moodName}</Text>
+                )}
+
+                {!!state.selectedSkill.filter(skill => !skill.enable).length && (
+                  <>
+                    <Text style={{ marginLeft: cx(5), color: props.theme.global.fontColor }}>
+                      {I18n.getLang('feature_summary_action_txt_2')}
+                    </Text>
+                    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                      {state.selectedSkill
+                        .filter(skill => !skill.enable)
+                        .map(item => (
+                          <View
+                            style={[
+                              styles.summaryRight,
+                              { marginLeft: cx(5), marginBottom: cx(5) },
+                            ]}
+                            key={item.dp}
+                          >
+                            <Text style={[styles.rightItem]}>{item.key}</Text>
+                          </View>
+                        ))}
                     </View>
-                  </View>
+                  </>
                 )}
+              </>
+            )
+              : !!state.moodName && (
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                <View style={[styles.summaryRight, { marginLeft: cx(5) }]}>
+                  <Text style={styles.rightItem}>{state.moodName}</Text>
+                </View>
+              </View>
+            )}
           </View>
         </View>
         <Spacer height={cx(30)} />
 
         {/* delete */}
-        {props.mode === 'update' && (
+        {params.mode === 'update' && (
           <View style={{ marginHorizontal: cx(24) }}>
             <DeleteButton
               text={I18n.getLang('edit_timeschedule_bttn_text')}
@@ -534,7 +608,7 @@ const TimeScheduleDetailPage = () => {
                   onConfirm: async (_, { close }) => {
                     state.loading = true;
                     close();
-                    const res = await props.modDeleteTimeSchedule('delete', state.timeSchedule);
+                    const res = await params.modDeleteTimeSchedule('delete', state.timeSchedule);
                     state.loading = false;
                     if (res.success) {
                       navigation.goBack();
@@ -568,95 +642,22 @@ const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig
     props.isStripLight || props.isCeilingLight
       ? DeviceType.StripLight
       : props.isMixLight
-      ? DeviceType.MixLight
-      : DeviceType.LightSource;
+        ? DeviceType.MixLight
+        : DeviceType.LightSource;
   const deviceData =
     deviceType === DeviceType.StripLight
       ? defStripDeviceData
       : deviceType === DeviceType.MixLight
-      ? defMixDeviceData
-      : defDeviceData;
+        ? defMixDeviceData
+        : defDeviceData;
   // @ts-ignore
   return {
     type: deviceType,
     deviceData: {
       ...deviceData,
-      isColorMode: props.isSupportColor ? true : false,
+      isColorMode: props.isSupportColor,
     },
   };
 };
 
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24),
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  applyContent: {
-    backgroundColor: '#f6f6f6',
-    borderRadius: 4,
-    minHeight: cx(55),
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: cx(10),
-    paddingTop: cx(10),
-  },
-  applyItem: {
-    paddingLeft: cx(5),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    height: cx(35),
-  },
-  moodScrollView: {
-    maxHeight: cx(500),
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10),
-    marginHorizontal: cx(24),
-  },
-  summaryImg: {
-    height: cx(12),
-    width: cx(12),
-    tintColor: '#000',
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: cx(90),
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000',
-    marginTop: 0,
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignItems: 'center'
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  switchButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: cx(10),
-  },
-  text: {
-    color: '#000',
-  },
-});
-
-export default TimeScheduleDetailPage;
+export default withTheme(TimeScheduleDetailPage)