@ledvance/ui-biz-bundle 1.1.90 → 1.1.91

package/src/newModules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -33,6 +33,7 @@ import Summary from '@ledvance/base/src/components/Summary';
 import { getEndTime, getStartTime } from './SleepWakeUpActions'
 
 const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 const { toFixedString } = Utils.NumberUtils;
 const {parseTimer} = Utils.TimeUtils
 
@@ -47,17 +48,17 @@ interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
   ) => Promise<Result<any>>;
 }
 
-const SleepWakeUpDetailPage = () => {
+const SleepWakeUpDetailPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
-  const props = useParams<SleepWakeUpDetailPageProps>();
+  const params = useParams<SleepWakeUpDetailPageProps>();
   const is24HourClock = useSystemTimeFormate();
   const state = useReactive({
-    sleepWakeUp: cloneDeep(props.scheduleItem) as WakeUpUIItem,
+    sleepWakeUp: cloneDeep(params.scheduleItem) as WakeUpUIItem,
     loading: false,
   });
 
   useEffect(() => {
-    if (props.mode !== 'edit') return;
+    if (params.mode !== 'edit') return;
     if (state.sleepWakeUp.isColorMode) {
       state.sleepWakeUp.brightness = 100;
     } else {
@@ -107,15 +108,15 @@ const SleepWakeUpDetailPage = () => {
       brightness: isColorMode ? 0 : brightness,
       temperature: isColorMode ? 0 : temperature,
     };
-    return isEqual(props.scheduleItem, props.mode === 'add' ? state.sleepWakeUp : currentSleepWakeUp);
-  }, [props.scheduleItem, JSON.stringify(state.sleepWakeUp), props.mode])
+    return isEqual(params.scheduleItem, params.mode === 'add' ? state.sleepWakeUp : currentSleepWakeUp);
+  }, [params.scheduleItem, JSON.stringify(state.sleepWakeUp), params.mode])
 
   const canSubmit = useMemo(() => {
     return state.sleepWakeUp.name?.length > 0 && state.sleepWakeUp.name?.length < 33 && !checkItemChanged
   }, [state.sleepWakeUp.name, checkItemChanged]);
 
   const mixLightCard = useMemo(() => {
-    const applyList = props.applyForList.map(item => {
+    const applyList = params.applyForList.map(item => {
       if (item.type === 'mainLight' && state.sleepWakeUp.isColorMode) {
         return {
           ...item,
@@ -130,6 +131,7 @@ const SleepWakeUpDetailPage = () => {
       }
       return item;
     });
+
     return (
       <View>
         {applyList.map(item => (
@@ -137,7 +139,7 @@ const SleepWakeUpDetailPage = () => {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={'#fff'}
+                color={props.theme.card.background}
                 colorAlpha={1}
                 enable={
                   item.type === 'mainLight'
@@ -151,8 +153,8 @@ const SleepWakeUpDetailPage = () => {
               {item.type === 'mainLight' && !state.sleepWakeUp.isColorMode ? (
                 <View>
                   <ColorTempAdjustView
-                    isSupportBrightness={!!props.isSupportBrightness}
-                    isSupportTemperature={!!props.isSupportTemperature}
+                    isSupportBrightness={!!params.isSupportBrightness}
+                    isSupportTemperature={!!params.isSupportTemperature}
                     colorTemp={state.sleepWakeUp.temperature}
                     brightness={state.sleepWakeUp.brightness}
                     onBrightnessChangeComplete={bright => {
@@ -187,7 +189,81 @@ const SleepWakeUpDetailPage = () => {
         ))}
       </View>
     );
-  }, [props.applyForList, JSON.stringify(state.sleepWakeUp)]);
+  }, [params.applyForList, JSON.stringify(state.sleepWakeUp)]);
+
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      marginHorizontal: cx(24),
+    },
+    textField: {
+      marginHorizontal: cx(24),
+    },
+    picker: {
+      marginHorizontal: cx(24),
+      marginVertical: cx(15),
+      color: props.theme.global.backgournd,
+    },
+    week: {},
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      marginBottom: cx(10),
+    },
+    skillListItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      height: cx(30),
+      alignItems: 'center',
+      marginVertical: cx(5),
+    },
+    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,
+    },
+    summaryRight: {
+      flexDirection: 'column',
+      marginLeft: cx(21),
+      borderRadius: cx(16),
+      backgroundColor: props.theme.tag.background,
+    },
+    rightItem: {
+      paddingHorizontal: cx(12),
+      color: props.theme.global.fontColor,
+    },
+    rightTitle: {
+      paddingLeft: cx(12),
+      paddingRight: cx(12),
+      fontSize: cx(10),
+      textAlign: 'center',
+      alignSelf: 'flex-start',
+      color: props.theme.tag.fontColor,
+    },
+    filletCorner: {
+      flexDirection: 'row',
+      backgroundColor: props.theme.tag.background,
+      borderRadius: cx(16),
+      alignSelf: 'flex-start',
+    },
+  })
 
   return (
     <Page
@@ -196,7 +272,7 @@ const SleepWakeUpDetailPage = () => {
       loading={state.loading}
       backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
       backDialogContent={I18n.getLang(
-        props.isSleep
+        params.isSleep
           ? 'cancel_dialog_leave_unsaved_sleepschedule_note'
           : 'cancel_dialog_leave_unsaved_wakeupschedule_note'
       )}
@@ -213,8 +289,8 @@ const SleepWakeUpDetailPage = () => {
           state.sleepWakeUp.v = 0;
         }
         state.sleepWakeUp.enable = true
-        const res = await props.modDeleteTimeSchedule(
-          props.mode,
+        const res = await params.modDeleteTimeSchedule(
+          params.mode,
           state.sleepWakeUp.isSleep,
           state.sleepWakeUp
         );
@@ -224,11 +300,11 @@ const SleepWakeUpDetailPage = () => {
         }
       }}
       headlineText={I18n.getLang(
-        props.isSleep
-          ? props.mode === 'add'
+        params.isSleep
+          ? params.mode === 'add'
             ? 'add_sleepschedule_one_source_headline_text'
             : 'edit_sleepschedule_headline_text'
-          : props.mode === 'add'
+          : params.mode === 'add'
             ? 'add_wakeupschedule_one_source_headline_text'
             : 'edit_wakeupschedule_headline_text'
       )}
@@ -252,7 +328,8 @@ const SleepWakeUpDetailPage = () => {
         {/* 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')}
@@ -260,7 +337,9 @@ const SleepWakeUpDetailPage = () => {
           startTime={state.sleepWakeUp.time}
           symbol={''}
           onTimerChange={time => {
-            state.sleepWakeUp.time = time 
+            state.sleepWakeUp.time = time
+            state.sleepWakeUp.startTime = getStartTime(state.sleepWakeUp)
+            state.sleepWakeUp.endTime = getEndTime(state.sleepWakeUp)
           }}
         />
 
@@ -278,7 +357,9 @@ const SleepWakeUpDetailPage = () => {
             }}
           />
           <Spacer />
-          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}</Text>
+          <Text style={{ marginHorizontal: cx(24), color: props.theme.global.fontColor }}>
+            {loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}
+          </Text>
           <Spacer />
         </View>
 
@@ -289,7 +370,7 @@ const SleepWakeUpDetailPage = () => {
           </Text>
           <View
             style={{
-              backgroundColor: '#f6f6f6',
+              backgroundColor: props.theme.container.background,
               borderRadius: 4,
               minHeight: cx(50),
               flex: 1,
@@ -303,20 +384,20 @@ const SleepWakeUpDetailPage = () => {
                 borderRadius: 4,
               }}
             >
-              {props.applyForList.map(apply => (
+              {params.applyForList.map(apply => (
                 <View
                   style={{
                     flexDirection: 'row',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                    backgroundColor: '#fff',
+                    backgroundColor: props.theme.global.background,
                     marginBottom: cx(8),
                   }}
-                  key={apply.dp}
+                  key={`${apply.dp}-key`}
                 >
                   <Text
                     style={{
-                      color: '#000',
+                      color: props.theme.global.fontColor,
                       fontSize: cx(14),
                       marginHorizontal: cx(6),
                       marginVertical: cx(9),
@@ -336,7 +417,7 @@ const SleepWakeUpDetailPage = () => {
           <Text style={[styles.itemTitle, styles.cardContainer]}>
             {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
           </Text>
-          {props.isMixLight ? (
+          {params.isMixLight ? (
             mixLightCard
           ) : (
             <Card style={styles.cardContainer}>
@@ -349,9 +430,9 @@ const SleepWakeUpDetailPage = () => {
                 setEnable={() => { }}
               />
               <LampAdjustView
-                isSupportColor={!!props.isSupportColor}
-                isSupportTemperature={!!props.isSupportTemperature}
-                isSupportBrightness={!!props.isSupportBrightness}
+                isSupportColor={!!params.isSupportColor}
+                isSupportTemperature={!!params.isSupportTemperature}
+                isSupportBrightness={!!params.isSupportBrightness}
                 isColorMode={state.sleepWakeUp.isColorMode}
                 reserveSV={true}
                 setIsColorMode={() => {
@@ -395,9 +476,9 @@ const SleepWakeUpDetailPage = () => {
             {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
           </Text>
           <Spacer />
-          <Text>
+          <Text style={{color: props.theme.global.secondFontColor}}>
             {I18n.getLang(
-              props.isSleep
+              params.isSleep
                 ? 'add_sleepschedule_one_source_settings_text'
                 : 'add_wakeupschedule_settings_text'
             )}
@@ -418,21 +499,21 @@ const SleepWakeUpDetailPage = () => {
             unit={['h', 'min']}
             maxHour={3}
           />
-          <Text>
+          <Text style={{color: props.theme.global.secondFontColor}}>
             {I18n.formatValue(
-              props.isSleep
+              params.isSleep
                 ? 'add_sleepschedule_one_source_settings_text2'
                 : 'add_wakeupschedule_settings_text2',
               `${convertMinutesTo12HourFormat(getStartTime(state.sleepWakeUp), is24HourClock)}`
             )}
           </Text>
           <Spacer />
-          {!props.isSleep && (
+          {!params.isSleep && (
             <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
               <LdvSwitch
                 title={I18n.getLang('add_wakeupschedule_settings_text3')}
                 enable={state.sleepWakeUp.last > 0}
-                color="#fff"
+                color={props.theme.global.background}
                 colorAlpha={1}
                 setEnable={v => {
                   state.sleepWakeUp.last = v ? 1 : 0;
@@ -442,7 +523,7 @@ const SleepWakeUpDetailPage = () => {
           )}
           {state.sleepWakeUp.last > 0 && (
             <>
-              <Text style={{ fontSize: cx(14) }}>
+              <Text style={{ fontSize: cx(14), color: props.theme.global.secondFontColor }}>
                 {I18n.getLang('add_wakeupschedule_settings_text4')}
               </Text>
               <LdvPickerView
@@ -469,7 +550,7 @@ const SleepWakeUpDetailPage = () => {
                 unit={['h', 'min']}
                 maxHour={3}
               />
-              <Text>
+              <Text style={{color: props.theme.global.secondFontColor}}>
                 {I18n.formatValue(
                   'add_wakeupschedule_settings_text5',
                   `${convertMinutesTo12HourFormat(
@@ -484,24 +565,24 @@ const SleepWakeUpDetailPage = () => {
         </View>
         {/* Summary */}
         <Summary
-          frequency={loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}
-          time={`${convertMinutesTo12HourFormat(getStartTime(state.sleepWakeUp), is24HourClock)} - ${convertMinutesTo12HourFormat(getEndTime(state.sleepWakeUp), is24HourClock)}`}
+          frequency={loopText(state.sleepWakeUp.weeks, parseTimer(state.sleepWakeUp.endTime * 60))}
+          time={`${convertMinutesTo12HourFormat(state.sleepWakeUp.startTime, is24HourClock)} - ${convertMinutesTo12HourFormat(state.sleepWakeUp.endTime, is24HourClock)}`}
           actions={(
             <View>
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>
+              <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
                 {I18n.getLang(
-                  !props.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10'
+                  !params.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10'
                 )}
               </Text>
               <View style={styles.filletCorner}>
                 <Text style={styles.rightTitle}>
-                  {props.isMixLight ? (state.sleepWakeUp.isColorMode ? props.applyForList[1].key : props.applyForList[0].key) : props.applyForList[0].key}
+                  {params.isMixLight ? (state.sleepWakeUp.isColorMode ? params.applyForList[1].key : params.applyForList[0].key) : params.applyForList[0].key}
                 </Text>
               </View>
               <Spacer height={cx(10)} />
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>
+              <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
                 {I18n.getLang(
-                  props.isSleep
+                  params.isSleep
                     ? 'feature_summary_action_txt_2'
                     : state.sleepWakeUp.last
                       ? 'feature_summary_action_txt_12'
@@ -511,7 +592,7 @@ const SleepWakeUpDetailPage = () => {
               <View style={styles.filletCorner}>
                 <Text style={styles.rightTitle}>
                   {convertMinutesTo12HourFormat(
-                    getEndTime(state.sleepWakeUp),
+                    state.sleepWakeUp.endTime,
                     is24HourClock
                   )}
                 </Text>
@@ -521,7 +602,7 @@ const SleepWakeUpDetailPage = () => {
         />
         <Spacer />
         {/* Delete btn */}
-        {props.mode === 'edit' && (
+        {params.mode === 'edit' && (
           <View style={styles.cardContainer}>
             <DeleteButton
               text={I18n.getLang('edit_timeschedule_bttn_text')}
@@ -529,12 +610,12 @@ const SleepWakeUpDetailPage = () => {
                 showDialog({
                   method: 'confirm',
                   title: I18n.getLang(
-                    props.isSleep
+                    params.isSleep
                       ? 'cancel_dialog_delete_item_sleepschedule_titel'
                       : 'cancel_dialog_delete_item_wakeupschedule_titel'
                   ),
                   subTitle: I18n.getLang(
-                    props.isSleep
+                    params.isSleep
                       ? 'cancel_dialog_delete_item_sleepschedule_description'
                       : 'cancel_dialog_delete_item_wakeupschedule_description'
                   ),
@@ -542,7 +623,7 @@ const SleepWakeUpDetailPage = () => {
                     close();
                     if (state.loading) return;
                     state.loading = true;
-                    const res = await props.modDeleteTimeSchedule(
+                    const res = await params.modDeleteTimeSchedule(
                       'del',
                       state.sleepWakeUp.isSleep,
                       state.sleepWakeUp
@@ -563,77 +644,4 @@ const SleepWakeUpDetailPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24),
-  },
-  textField: {
-    marginHorizontal: cx(24),
-  },
-  picker: {
-    marginHorizontal: cx(24),
-    marginVertical: cx(15),
-    color: 'rgb(35,35,38)',
-  },
-  week: {},
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginBottom: cx(10),
-  },
-  skillListItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: cx(30),
-    alignItems: 'center',
-    marginVertical: cx(5),
-  },
-  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',
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    borderRadius: cx(16),
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  rightTitle: {
-    paddingLeft: cx(12),
-    paddingRight: cx(12),
-    fontSize: cx(10),
-    textAlign: 'center',
-    alignSelf: 'flex-start',
-    color: '#000'
-  },
-  filletCorner: {
-    flexDirection: 'row',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignSelf: 'flex-start',
-  },
-});
-
-export default SleepWakeUpDetailPage;
+export default withTheme(SleepWakeUpDetailPage)