@ledvance/ui-biz-bundle 1.1.66 → 1.1.68

package/src/newModules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -0,0 +1,661 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import { TimerPicker, Utils } from 'tuya-panel-kit';
+import { useReactive, useUpdateEffect } from 'ahooks';
+import TextField from '@ledvance/base/src/components/TextField';
+import LdvPickerView from '@ledvance/base/src/components/ldvPickerView';
+import LdvWeekView from '@ledvance/base/src/components/weekSelect';
+import {
+  convertMinutesTo12HourFormat,
+  loopText,
+  showDialog,
+} from '@ledvance/base/src/utils/common';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import DeleteButton from '@ledvance/base/src/components/DeleteButton';
+import { SleepWakeUpPageRouteParams } from './SleepWakeUpPage';
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import { cloneDeep, isEqual } from 'lodash';
+import { SleepUIItem, WakeUpUIItem } from './Interface';
+import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView';
+import Card from '@ledvance/base/src/components/Card';
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
+import Summary from '@ledvance/base/src/components/Summary';
+
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+
+interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
+  mode: 'add' | 'edit';
+  isSleep: boolean;
+  scheduleItem: any;
+  modDeleteTimeSchedule: (
+    mode: 'add' | 'edit' | 'del',
+    isSleep: boolean,
+    sleepWakeUp: SleepUIItem | WakeUpUIItem
+  ) => Promise<Result<any>>;
+}
+
+const SleepWakeUpDetailPage = () => {
+  const navigation = useNavigation();
+  const props = useParams<SleepWakeUpDetailPageProps>();
+  const is24HourClock = useSystemTimeFormate();
+  const state = useReactive({
+    sleepWakeUp: cloneDeep(props.scheduleItem) as WakeUpUIItem,
+    loading: false,
+  });
+
+  useEffect(() => {
+    if (props.mode !== 'edit') return;
+    if (state.sleepWakeUp.isColorMode) {
+      state.sleepWakeUp.brightness = 100;
+    } else {
+      state.sleepWakeUp.s = 100;
+      state.sleepWakeUp.v = 100;
+    }
+  }, []);
+
+  useUpdateEffect(() => {
+    if (state.sleepWakeUp.delay === 0) {
+      state.sleepWakeUp.delay = 1;
+    }
+    if (state.sleepWakeUp.delay > 24) {
+      state.sleepWakeUp.delay = 24;
+    }
+  }, [state.sleepWakeUp.delay]);
+
+  useUpdateEffect(() => {
+    if (state.sleepWakeUp.last > 24) {
+      state.sleepWakeUp.last = 24;
+    }
+  }, [state.sleepWakeUp.last]);
+
+  useUpdateEffect(() => {
+    const { startTime, endTime, delay, isSleep } = state.sleepWakeUp;
+    if (isSleep) {
+      state.sleepWakeUp.hour = Math.trunc(startTime / 60);
+      state.sleepWakeUp.minute = startTime % 60;
+      const endMin = startTime + delay * 5;
+      state.sleepWakeUp.endTime = endMin > 1440 ? endMin - 1440 : endMin;
+    } else {
+      state.sleepWakeUp.hour = Math.trunc(endTime / 60);
+      state.sleepWakeUp.minute = endTime % 60;
+      const startMin = endTime - delay * 5;
+      state.sleepWakeUp.startTime = startMin < 0 ? startMin + 1440 : startMin;
+    }
+  }, [state.sleepWakeUp.startTime, state.sleepWakeUp.delay, state.sleepWakeUp.endTime]);
+
+  const getRangeTime = (time: number, isStart?: boolean) => {
+    if (isStart) {
+      return time < 0 ? 1440 + time : time;
+    } else {
+      return time > 1440 ? time - 1440 : time;
+    }
+  };
+
+  const getBlockColor = useCallback(() => {
+    if (state.sleepWakeUp.isColorMode) {
+      const s = Math.round(mapFloatToRange(state.sleepWakeUp.s / 100, 30, 100));
+      return hsv2Hex(state.sleepWakeUp.h, s, 100);
+    }
+    return cctToColor(state.sleepWakeUp.temperature);
+  }, [state.sleepWakeUp]);
+
+  const checkItemChanged = useMemo(() =>{
+    const { isColorMode, h, s, v, brightness, temperature } = state.sleepWakeUp;
+    const currentSleepWakeUp = {
+      ...state.sleepWakeUp,
+      h: isColorMode ? h : 0,
+      s: isColorMode ? s : 0,
+      v: isColorMode ? v : 0,
+      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])
+
+  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 => {
+      if (item.type === 'mainLight' && state.sleepWakeUp.isColorMode) {
+        return {
+          ...item,
+          enable: false,
+        };
+      }
+      if (item.type === 'secondaryLight' && !state.sleepWakeUp.isColorMode) {
+        return {
+          ...item,
+          enable: false,
+        };
+      }
+      return item;
+    });
+    return (
+      <View>
+        {applyList.map(item => (
+          <View key={item.dp}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={'#fff'}
+                colorAlpha={1}
+                enable={
+                  item.type === 'mainLight'
+                    ? !state.sleepWakeUp.isColorMode
+                    : state.sleepWakeUp.isColorMode
+                }
+                setEnable={(enable: boolean) => {
+                  state.sleepWakeUp.isColorMode = item.type === 'mainLight' ? !enable : enable;
+                }}
+              />
+              {item.type === 'mainLight' && !state.sleepWakeUp.isColorMode ? (
+                <View>
+                  <ColorTempAdjustView
+                    isSupportBrightness={!!props.isSupportBrightness}
+                    isSupportTemperature={!!props.isSupportTemperature}
+                    colorTemp={state.sleepWakeUp.temperature}
+                    brightness={state.sleepWakeUp.brightness}
+                    onBrightnessChangeComplete={bright => {
+                      state.sleepWakeUp.brightness = bright;
+                    }}
+                    onCCTChangeComplete={cct => {
+                      state.sleepWakeUp.temperature = cct;
+                    }}
+                  />
+                  <Spacer height={cx(16)} />
+                </View>
+              ) : item.type === 'secondaryLight' && state.sleepWakeUp.isColorMode ? (
+                <View>
+                  <ColorAdjustView
+                    h={state.sleepWakeUp.h}
+                    s={state.sleepWakeUp.s}
+                    v={state.sleepWakeUp.v}
+                    reserveSV={true}
+                    minSaturation={1}
+                    onHSVChangeComplete={(h, s, v) => {
+                      state.sleepWakeUp.h = h;
+                      state.sleepWakeUp.s = s;
+                      state.sleepWakeUp.v = v;
+                    }}
+                  />
+                  <Spacer />
+                </View>
+              ) : null}
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    );
+  }, [props.applyForList, JSON.stringify(state.sleepWakeUp)]);
+
+  return (
+    <Page
+      backText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
+      showBackDialog={!checkItemChanged}
+      loading={state.loading}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang(
+        props.isSleep
+          ? 'cancel_dialog_leave_unsaved_sleepschedule_note'
+          : 'cancel_dialog_leave_unsaved_wakeupschedule_note'
+      )}
+      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (!canSubmit || state.loading) return;
+        state.loading = true;
+        if (state.sleepWakeUp.isColorMode) {
+          state.sleepWakeUp.brightness = 0;
+          state.sleepWakeUp.temperature = 0;
+        } else {
+          state.sleepWakeUp.h = 0;
+          state.sleepWakeUp.s = 0;
+          state.sleepWakeUp.v = 0;
+        }
+        state.sleepWakeUp.enable = true
+        const res = await props.modDeleteTimeSchedule(
+          props.mode,
+          state.sleepWakeUp.isSleep,
+          state.sleepWakeUp
+        );
+        state.loading = false;
+        if (res.success) {
+          navigation.goBack();
+        }
+      }}
+      headlineText={I18n.getLang(
+        props.isSleep
+          ? props.mode === 'add'
+            ? 'add_sleepschedule_one_source_headline_text'
+            : 'edit_sleepschedule_headline_text'
+          : props.mode === 'add'
+            ? 'add_wakeupschedule_one_source_headline_text'
+            : 'edit_wakeupschedule_headline_text'
+      )}
+    >
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      >
+        <TextField
+          style={styles.cardContainer}
+          value={state.sleepWakeUp.name}
+          showError={state.sleepWakeUp.name?.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.sleepWakeUp.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor="#aeadb5"
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!is24HourClock}
+          singlePicker={true}
+          amText={I18n.getLang('manage_user_calendar_label_am')}
+          pmText={I18n.getLang('manage_user_calendar_label_pm')}
+          startTime={props.isSleep ? state.sleepWakeUp.startTime : state.sleepWakeUp.endTime}
+          symbol={''}
+          onTimerChange={time => {
+            if (props.isSleep) {
+              state.sleepWakeUp.startTime = time;
+            } else {
+              state.sleepWakeUp.endTime = time;
+            }
+          }}
+        />
+
+        {/* week */}
+        <View style={styles.week}>
+          <LdvWeekView
+            value={state.sleepWakeUp.weeks}
+            onSelect={(weekIdx: number) => {
+              state.sleepWakeUp.weeks = state.sleepWakeUp.weeks.map((week, idx) => {
+                if (idx === weekIdx - 1) {
+                  return week === 1 ? 0 : 1;
+                }
+                return week;
+              });
+            }}
+          />
+          <Spacer />
+          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.sleepWakeUp.weeks)}</Text>
+          <Spacer />
+        </View>
+
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline_text')}
+          </Text>
+          <View
+            style={{
+              backgroundColor: '#f6f6f6',
+              borderRadius: 4,
+              minHeight: cx(50),
+              flex: 1,
+              justifyContent: 'center',
+            }}
+          >
+            <View
+              style={{
+                marginHorizontal: cx(8),
+                marginTop: cx(8),
+                borderRadius: 4,
+              }}
+            >
+              {props.applyForList.map(apply => (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    backgroundColor: '#fff',
+                    marginBottom: cx(8),
+                  }}
+                  key={apply.dp}
+                >
+                  <Text
+                    style={{
+                      color: '#000',
+                      fontSize: cx(14),
+                      marginHorizontal: cx(6),
+                      marginVertical: cx(9),
+                    }}
+                  >
+                    {apply.key}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          </View>
+          <Spacer />
+        </View>
+
+        {/* Device state */}
+        <View>
+          <Text style={[styles.itemTitle, styles.cardContainer]}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
+          </Text>
+          {props.isMixLight ? (
+            mixLightCard
+          ) : (
+            <Card style={styles.cardContainer}>
+              <LdvSwitch
+                title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                color={getBlockColor()}
+                colorAlpha={1}
+                enable={false}
+                showSwitch={false}
+                setEnable={() => { }}
+              />
+              <LampAdjustView
+                isSupportColor={!!props.isSupportColor}
+                isSupportTemperature={!!props.isSupportTemperature}
+                isSupportBrightness={!!props.isSupportBrightness}
+                isColorMode={state.sleepWakeUp.isColorMode}
+                reserveSV={true}
+                setIsColorMode={() => {
+                  state.sleepWakeUp.isColorMode = !state.sleepWakeUp.isColorMode;
+                }}
+                h={state.sleepWakeUp.h}
+                s={state.sleepWakeUp.s}
+                v={state.sleepWakeUp.v}
+                onHSVChange={(h, s, v) => {
+                  state.sleepWakeUp.h = h;
+                  state.sleepWakeUp.s = s;
+                  state.sleepWakeUp.v = v;
+                }}
+                onHSVChangeComplete={(h, s, v) => {
+                  state.sleepWakeUp.h = h;
+                  state.sleepWakeUp.s = s;
+                  state.sleepWakeUp.v = v;
+                }}
+                colorTemp={state.sleepWakeUp.temperature}
+                brightness={state.sleepWakeUp.brightness}
+                onCCTChange={cct => {
+                  state.sleepWakeUp.temperature = cct;
+                }}
+                onCCTChangeComplete={cct => {
+                  state.sleepWakeUp.temperature = cct;
+                }}
+                onBrightnessChange={brightness => {
+                  state.sleepWakeUp.brightness = brightness;
+                }}
+                onBrightnessChangeComplete={brightness => {
+                  state.sleepWakeUp.brightness = brightness;
+                }}
+              />
+            </Card>
+          )}
+        </View>
+        <Spacer />
+        {/* Settings */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
+          </Text>
+          <Spacer />
+          <Text>
+            {I18n.getLang(
+              props.isSleep
+                ? 'add_sleepschedule_one_source_settings_text'
+                : 'add_wakeupschedule_settings_text'
+            )}
+          </Text>
+          <LdvPickerView
+            style={styles.picker}
+            hour={toFixedString(Math.trunc((state.sleepWakeUp.delay * 5) / 60), 2)}
+            minute={toFixedString((state.sleepWakeUp.delay * 5) % 60, 2)}
+            minutesStep={5}
+            setHour={v => {
+              const m = (state.sleepWakeUp.delay * 5) % 60;
+              state.sleepWakeUp.delay = (Number(v) * 60 + m) / 5;
+            }}
+            setMinute={v => {
+              const h = Math.trunc((state.sleepWakeUp.delay * 5) / 60);
+              state.sleepWakeUp.delay = (h * 60 + Number(v)) / 5;
+            }}
+            unit={['h', 'min']}
+            maxHour={3}
+          />
+          <Text>
+            {I18n.formatValue(
+              props.isSleep
+                ? 'add_sleepschedule_one_source_settings_text2'
+                : 'add_wakeupschedule_settings_text2',
+              `${convertMinutesTo12HourFormat(state.sleepWakeUp.startTime, is24HourClock)}`
+            )}
+          </Text>
+          <Spacer />
+          {!props.isSleep && (
+            <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
+              <LdvSwitch
+                title={I18n.getLang('add_wakeupschedule_settings_text3')}
+                enable={state.sleepWakeUp.last > 0}
+                color="#fff"
+                colorAlpha={1}
+                setEnable={v => {
+                  state.sleepWakeUp.last = v ? 1 : 0;
+                }}
+              />
+            </View>
+          )}
+          {state.sleepWakeUp.last > 0 && (
+            <>
+              <Text style={{ fontSize: cx(14) }}>
+                {I18n.getLang('add_wakeupschedule_settings_text4')}
+              </Text>
+              <LdvPickerView
+                style={styles.picker}
+                hour={toFixedString(Math.trunc((state.sleepWakeUp.last * 5) / 60), 2)}
+                minute={toFixedString((state.sleepWakeUp.last * 5) % 60, 2)}
+                minutesStep={5}
+                setHour={v => {
+                  const m = (state.sleepWakeUp.last * 5) % 60;
+                  if (Number(v) === 0 && m === 0) {
+                    state.sleepWakeUp.last = 1;
+                  } else {
+                    state.sleepWakeUp.last = (Number(v) * 60 + m) / 5;
+                  }
+                }}
+                setMinute={v => {
+                  const h = Math.trunc((state.sleepWakeUp.last * 5) / 60);
+                  if (Number(v) === 0 && h === 0) {
+                    state.sleepWakeUp.last = 1;
+                  } else {
+                    state.sleepWakeUp.last = (h * 60 + Number(v)) / 5;
+                  }
+                }}
+                unit={['h', 'min']}
+                maxHour={3}
+              />
+              <Text>
+                {I18n.formatValue(
+                  'add_wakeupschedule_settings_text5',
+                  `${convertMinutesTo12HourFormat(
+                    getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
+                    is24HourClock
+                  )}`
+                )}
+              </Text>
+              <Spacer />
+            </>
+          )}
+        </View>
+        {/* Summary */}
+        <Summary
+          frequency={loopText(state.sleepWakeUp.weeks)}
+          time={`${convertMinutesTo12HourFormat(
+            state.sleepWakeUp.startTime,
+            is24HourClock
+          )} - ${convertMinutesTo12HourFormat(state.sleepWakeUp.endTime, is24HourClock)}`}
+          actions={(
+            <View>
+              <Text style={{ fontSize: cx(12), color: '#000000' }}>
+                {I18n.getLang(
+                  !props.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}
+                </Text>
+              </View>
+              <Spacer height={cx(10)} />
+              <Text style={{ fontSize: cx(12), color: '#000000' }}>
+                {I18n.getLang(
+                  props.isSleep
+                    ? 'feature_summary_action_txt_2'
+                    : state.sleepWakeUp.last
+                      ? 'feature_summary_action_txt_12'
+                      : 'feature_summary_action_txt_1'
+                )}
+              </Text>
+              <View style={styles.filletCorner}>
+                <Text style={styles.rightTitle}>
+                  {convertMinutesTo12HourFormat(
+                    props.isSleep
+                      ? state.sleepWakeUp.endTime
+                      : getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
+                    is24HourClock
+                  )}
+                </Text>
+              </View>
+            </View>
+          )}
+        />
+        <Spacer />
+        {/* Delete btn */}
+        {props.mode === 'edit' && (
+          <View style={styles.cardContainer}>
+            <DeleteButton
+              text={I18n.getLang('edit_timeschedule_bttn_text')}
+              onPress={async () => {
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang(
+                    props.isSleep
+                      ? 'cancel_dialog_delete_item_sleepschedule_titel'
+                      : 'cancel_dialog_delete_item_wakeupschedule_titel'
+                  ),
+                  subTitle: I18n.getLang(
+                    props.isSleep
+                      ? 'cancel_dialog_delete_item_sleepschedule_description'
+                      : 'cancel_dialog_delete_item_wakeupschedule_description'
+                  ),
+                  onConfirm: async (_, { close }) => {
+                    close();
+                    if (state.loading) return;
+                    state.loading = true;
+                    const res = await props.modDeleteTimeSchedule(
+                      'del',
+                      state.sleepWakeUp.isSleep,
+                      state.sleepWakeUp
+                    );
+                    state.loading = false;
+                    if (res.success) {
+                      navigation.goBack();
+                    }
+                  },
+                });
+              }}
+            />
+          </View>
+        )}
+        <Spacer />
+      </ScrollView>
+    </Page>
+  );
+};
+
+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;