@ledvance/ui-biz-bundle 1.1.55 → 1.1.57

package/src/newModules/timeSchedule/TimeSchedulePage.tsx

@@ -0,0 +1,222 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { ScrollView, Text, StyleSheet, FlatList, View, Image } from 'react-native';
+import { useNavigation } from '@react-navigation/core';
+import { Utils } from 'tuya-panel-kit';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import {
+  useDeviceId,
+  useDeviceInfo,
+  useTimeSchedule,
+} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import res from '@ledvance/base/src/res';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import InfoText from '@ledvance/base/src/components/InfoText';
+import DeleteButton from '@ledvance/base/src/components/DeleteButton';
+import { useReactive, useUpdateEffect } from 'ahooks';
+import { ApplyForItem, DeviceStateType, Timer, TimerActions } from './Interface';
+import { getTimeSchedule, manageTimeSchedule } from './TimeScheduleActions';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import ScheduleCard from './components/ScheduleCard';
+import { ui_biz_routerKey } from '../../navigation/Routers';
+
+const { convertX: cx } = Utils.RatioUtils;
+const MAX_NUM = 30;
+
+export interface TimeSchedulePageParams {
+  isSupportColor: boolean;
+  isSupportTemperature: boolean;
+  isSupportBrightness: boolean;
+  isSupportMood?: boolean;
+  isStringLight?: boolean;
+  isStripLight?: boolean;
+  isMatterLight?: boolean;
+  isCeilingLight?: boolean;
+  isMixLight?: boolean;
+  isSupportFan?: boolean;
+  isSupportUVC?: boolean;
+  switchLedCode?: string;
+  switchFan?: string;
+  fanModeCode?: string;
+  fanSpeedCode?: string;
+  workModeCode: string;
+  brightValueCode?: string;
+  featureId?: string
+  applyForList: ApplyForItem[];
+  applyForDisabled: boolean; // 是否可以选择apply for
+  manualDataDp2Obj: (dps: Record<string, any>) => DeviceStateType;
+  manualDataObj2Dp: (deviceState: DeviceStateType, applyForList: ApplyForItem[]) => Record<string, any>;
+  tempValueCode?: string;
+  sceneDataCode?: string;
+  colorDataCode?: string;
+  drawToolDataCode?: string;
+}
+
+const TimeSchedulePage = () => {
+  const deviceInfo = useDeviceInfo();
+  const devId = useDeviceId();
+  const navigation = useNavigation();
+  const [timeScheduleStatus, setTimeScheduleStatus] = useTimeSchedule();
+  const params = useParams<TimeSchedulePageParams>();
+  const state = useReactive({
+    timeScheduleList: [] as Timer[],
+    flag: Symbol(),
+    loading: false,
+  });
+
+  const isMaxSchedule = useMemo(() => state.timeScheduleList.length >= MAX_NUM, [
+    state.timeScheduleList,
+  ]);
+
+  useUpdateEffect(() => {
+    const status = state.timeScheduleList.some(item => item.enable);
+    if (status !== timeScheduleStatus) {
+      setTimeScheduleStatus(status);
+    }
+  }, [JSON.stringify(state.timeScheduleList)]);
+
+  useEffect(() => {
+    getTimeSchedule(devId).then(res => {
+      state.timeScheduleList = res;
+    });
+  }, [state.flag]);
+
+  const modDeleteTimeSchedule = async (mode: TimerActions, timeSchedule: Timer) => {
+    const res = await manageTimeSchedule(devId, timeSchedule, mode);
+    if (res.success) {
+      if (mode === 'add') {
+        state.flag = Symbol();
+      } else {
+        state.timeScheduleList =
+          mode === 'update'
+            ? state.timeScheduleList.map(item => {
+                if (item.id === timeSchedule.id) {
+                  return timeSchedule;
+                }
+                return item;
+              })
+            : state.timeScheduleList.filter(item => item.id !== timeSchedule.id);
+      }
+      return {
+        success: true,
+      };
+    }
+    return res;
+  };
+
+  const navigateToEdit = useCallback((mode: 'add' | 'update', timeSchedule?: Timer) => {
+    const path = ui_biz_routerKey.ui_biz_time_schedule_edit_new;
+    navigation.navigate(path, {
+      mode,
+      name: path,
+      timeSchedule,
+      modDeleteTimeSchedule,
+      refreshFn: () => {
+        state.flag = Symbol();
+      },
+      ...params,
+    });
+  }, []);
+
+  return (
+    <Page
+      backText={deviceInfo.name}
+      onBackClick={navigation.goBack}
+      headlineText={I18n.getLang('timeschedule_overview_headline_text')}
+      headlineIcon={isMaxSchedule ? undefined : res.device_panel_schedule_add}
+      onHeadlineIconClick={() => {
+        navigateToEdit('add');
+      }}
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <Text style={styles.overviewDescription}>
+          {I18n.getLang('timeschedule_overview_description_text')}
+        </Text>
+        <Spacer height={cx(10)} />
+        {isMaxSchedule && (
+          <InfoText
+            text={I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}
+            icon={res.ic_warning_amber}
+            style={{ marginHorizontal: cx(24) }}
+            textStyle={{ color: '#000' }}
+            iconStyle={{ tintColor: '#ff9500' }}
+          />
+        )}
+        <FlatList
+          data={state.timeScheduleList}
+          renderItem={({ item }) => (
+            <ScheduleCard
+              item={item}
+              onEnableChange={async enable => {
+                state.loading = true;
+                await modDeleteTimeSchedule('update', {
+                  ...item,
+                  enable,
+                });
+                state.loading = false;
+              }}
+              onPress={() => {
+                navigateToEdit('update', item);
+              }}
+            />
+          )}
+          keyExtractor={item => item.id.toString()}
+          ListEmptyComponent={() => (
+            <View style={styles.emptyContainer}>
+              <Spacer height={cx(60)} />
+              <Image
+                style={styles.emptyImage}
+                source={{ uri: res.ldv_timer_empty }}
+                resizeMode="contain"
+              />
+              <InfoText
+                icon={res.device_panel_schedule_alert}
+                text={I18n.getLang('timeschedule_overview_empty_information_text')}
+                style={{ width: 'auto', alignItems: 'center' }}
+                textStyle={{ color: '#000', flex: undefined }}
+                iconStyle={{ tintColor: '#000' }}
+              />
+              <Spacer height={cx(16)} />
+              <DeleteButton
+                style={styles.addBtn}
+                text={`${I18n.getLang('timeschedule_overview_empty_button_add_text')}`}
+                textStyle={{ fontSize: cx(12) }}
+                onPress={() => {
+                  navigateToEdit('add');
+                }}
+              />
+            </View>
+          )}
+          ListHeaderComponent={() => <Spacer height={cx(10)} />}
+          ItemSeparatorComponent={() => <Spacer />}
+          ListFooterComponent={() => <Spacer height={cx(30)} />}
+        />
+      </ScrollView>
+    </Page>
+  );
+};
+
+const styles = StyleSheet.create({
+  overviewDescription: {
+    color: '#000',
+    marginHorizontal: cx(24),
+  },
+  emptyImage: {
+    width: cx(225),
+    height: cx(198),
+  },
+  emptyContainer: {
+    marginHorizontal: cx(24),
+    alignItems: 'center',
+  },
+  addBtn: {
+    height: cx(40),
+    width: 'auto',
+    minWidth: cx(150),
+    paddingHorizontal: cx(16),
+    backgroundColor: '#f60',
+  },
+});
+
+export default TimeSchedulePage;

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

@@ -0,0 +1,259 @@
+import React, { memo, useMemo } from 'react';
+import { DeviceType, ManualSettingProps } from '../Interface';
+import { View } from 'react-native';
+import Card from '@ledvance/base/src/components/Card';
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView';
+import { Utils } from 'tuya-panel-kit';
+import { useCreation, useReactive, useUpdateEffect } from 'ahooks';
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
+import I18n from '@ledvance/base/src/i18n';
+import StripAdjustView from '@ledvance/base/src/components/StripAdjustView';
+import Spacer from '@ledvance/base/src/components/Spacer';
+const { convertX: cx } = Utils.RatioUtils;
+
+function ManualSettings(props: ManualSettingProps) {
+  const state = useReactive({
+    deviceData: props.manualData.deviceData,
+    applyForList: props.applyForList,
+    applyFlag: Symbol(),
+    manualFlag: Symbol()
+  });
+
+  useUpdateEffect(() => {
+    state.applyForList = props.applyForList;
+    state.deviceData = props.manualData.deviceData;
+  }, [props.applyForList, props.manualData]);
+
+  useUpdateEffect(() =>{
+    props.onApplyChange && props.onApplyChange(state.applyForList)
+  }, [state.applyFlag])
+
+  useUpdateEffect(() =>{
+    props.onManualChange && props.onManualChange(state.deviceData)
+  }, [state.manualFlag])
+
+  const tabList = useCreation(() => {
+    const isSupportWhite = props.isSupportBrightness || props.isSupportTemperature;
+    const tabs = [
+      { key: 1, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_color_text') },
+      { key: 0, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_white_text') },
+      {
+        key: 3,
+        title: I18n.getLang(
+          'add_new_dynamic_mood_strip_lights_schedule_switch_tab_combination_text'
+        ),
+      },
+    ];
+    if (!isSupportWhite) {
+      return tabs.filter(tab => tab.key !== 0);
+    }
+    if (!props.isSupportColor) {
+      return tabs.filter(tab => tab.key === 0);
+    }
+    return tabs;
+  }, []);
+
+  const lightSourceCard = useMemo(() => {
+    const { deviceData } = state;
+    return (
+      <View>
+        {state.applyForList.map((item, idx) => (
+          <View  key={item.dp}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={'#fff'}
+                colorAlpha={1}
+                enable={item.enable}
+                setEnable={(enable: boolean) => {
+                  state.applyForList = state.applyForList.map((apply, index) => {
+                    if (idx === index) {
+                      return {
+                        ...apply,
+                        enable,
+                      };
+                    }
+                    return apply;
+                  });
+                  state.applyFlag = Symbol()
+                }}
+              />
+              {item.enable && item.type !== 'socket' && (
+                <LampAdjustView
+                  isSupportColor={props.isSupportColor}
+                  isSupportBrightness={props.isSupportBrightness}
+                  isSupportTemperature={props.isSupportTemperature}
+                  isColorMode={deviceData.isColorMode}
+                  setIsColorMode={mode => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      isColorMode: mode,
+                    };
+                    state.manualFlag = Symbol()
+                  }}
+                  reserveSV={true}
+                  h={deviceData.h}
+                  s={deviceData.s}
+                  v={deviceData.v}
+                  brightness={deviceData.brightness}
+                  colorTemp={deviceData.temperature}
+                  onHSVChangeComplete={(h, s, v) => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      h,
+                      s,
+                      v,
+                    };
+                    state.manualFlag = Symbol()
+                  }}
+                  onBrightnessChangeComplete={bright => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      brightness: bright
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                  onCCTChangeComplete={cct => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      temperature: cct
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                />
+              )}
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    );
+  }, [state.deviceData, state.applyForList]);
+
+  const mixLightCard = useMemo(() => {
+    return (
+      <View>
+        {state.applyForList.map((item, idx) => (
+          <View  key={item.dp}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={'#fff'}
+                colorAlpha={1}
+                enable={item.enable}
+                setEnable={(enable: boolean) => {
+                  state.applyForList[idx].enable = enable;
+                  state.applyFlag = Symbol()
+                }}
+              />
+              {item.enable &&
+                (item.type === 'mainLight' ? (
+                  <View>
+                    <ColorTempAdjustView
+                      isSupportBrightness={props.isSupportBrightness}
+                      isSupportTemperature={props.isSupportTemperature}
+                      colorTemp={state.deviceData.temperature}
+                      brightness={state.deviceData.brightness}
+                      onBrightnessChangeComplete={bright => {
+                        state.deviceData.brightness = bright;
+                        state.manualFlag = Symbol()
+                      }}
+                      onCCTChangeComplete={cct => {
+                        state.deviceData.temperature = cct;
+                        state.manualFlag = Symbol()
+                      }}
+                    />
+                    <Spacer height={cx(16)} />
+                  </View>
+                ) : (
+                  <View>
+                    <ColorAdjustView
+                      h={state.deviceData.h}
+                      s={state.deviceData.s}
+                      v={state.deviceData.v}
+                      reserveSV={true}
+                      minSaturation={1}
+                      onHSVChangeComplete={(h, s, v) => {
+                        state.deviceData.h = h;
+                        state.deviceData.s = s;
+                        state.deviceData.v = v;
+                        state.manualFlag = Symbol()
+                      }}
+                    />
+                    <Spacer />
+                  </View>
+                ))}
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    );
+  }, [state.deviceData, state.applyForList]);
+
+  const stripLightCard = useMemo(() => {
+    return (
+      <View>
+        <Card>
+          <LdvSwitch
+            title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+            color={'#fff'}
+            colorAlpha={1}
+            enable={state.applyForList[0]?.enable}
+            setEnable={(enable: boolean) => {
+              state.applyForList[0].enable = enable;
+              state.applyFlag = Symbol()
+            }}
+          />
+          {state.applyForList[0]?.enable && (
+            <StripAdjustView
+              isSupportBrightness={props.isSupportBrightness}
+              isSupportTemperature={props.isSupportTemperature}
+              lampTabs={tabList}
+              reserveSV={true}
+              activeKey={0}
+              onActiveKeyChange={() => {}}
+              h={state.deviceData.h}
+              s={state.deviceData.s}
+              v={state.deviceData.v}
+              brightness={state.deviceData.brightness}
+              colorTemp={state.deviceData.temperature}
+              onHSVChangeComplete={(h, s, v) => {
+                state.deviceData.h = h;
+                state.deviceData.s = s;
+                state.deviceData.v = v;
+                state.manualFlag = Symbol()
+              }}
+              onBrightnessChangeComplete={bright => {
+                state.deviceData.brightness = bright;
+                state.manualFlag = Symbol()
+              }}
+              onCCTChangeComplete={cct => {
+                state.deviceData.temperature = cct;
+                state.manualFlag = Symbol()
+              }}
+            />
+          )}
+        </Card>
+        <Spacer />
+      </View>
+    );
+  }, [state.deviceData, state.applyForList]);
+
+  const componentRender = useMemo(() => {
+    const component =
+      props.manualData.type === DeviceType.MixLight
+        ? mixLightCard
+        : props.manualData.type === DeviceType.StripLight
+        ? stripLightCard
+        : lightSourceCard;
+    return component;
+  }, [props.manualData, state.applyForList, state.deviceData]);
+
+
+  return <View>{componentRender}</View>;
+}
+
+export default memo(ManualSettings);

package/src/newModules/timeSchedule/components/ScheduleCard.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { ViewStyle, View, Text, StyleSheet } from "react-native";
+import Card from "@ledvance/base/src/components/Card";
+import { SwitchButton, Utils } from 'tuya-panel-kit';
+import { convertTo12HourFormat, loopText } from '@ledvance/base/src/utils/common';
+import { Timer } from "./Interface";
+import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+const { convertX: cx } = Utils.RatioUtils;
+
+interface ScheduleCardProps {
+  item: Timer
+  style?: ViewStyle
+  onEnableChange: (enable: boolean) => void
+  onPress: (item: any) => void
+}
+
+const ScheduleCard = (props: ScheduleCardProps) => {
+  const { item, style, onEnableChange, onPress } = props;
+  const is24HourClock = useSystemTimeFormate()
+  return (
+    <Card
+      style={styles.card}
+      containerStyle={[styles.container, style]}
+      onPress={() => {
+        onPress(item);
+      }}
+      >
+      <View style={styles.infoContainer}>
+        <Text style={styles.time}>{is24HourClock ? item.time : convertTo12HourFormat(item.time)}</Text>
+        <Text style={styles.loop}>
+          {loopText(item.loops.split('').map(loop => parseInt(loop)), item.time)}
+        </Text>
+        <Text style={styles.name}>{item.name}</Text>
+        {/* {showTags() && <View style={styles.typeContainer}>
+                    {renderTag()}
+                </View>} */}
+      </View>
+      <View style={styles.switchContainer}>
+        <SwitchButton
+          value={item.enable}
+          thumbStyle={{ elevation: 0 }}
+          onValueChange={() => {
+            onEnableChange(!item.enable);
+          }}
+        />
+      </View>
+    </Card>
+  )
+
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: cx(24),
+    borderRadius: cx(8),
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  infoContainer: {
+    flex: 1,
+    marginTop: cx(16),
+    marginBottom: cx(16),
+    flexDirection: 'column',
+    marginLeft: cx(16),
+  },
+  time: {
+    marginBottom: cx(5),
+    fontSize: 16,
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    fontWeight: 'bold',
+  },
+  loop: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    marginTop: cx(8),
+  },
+  name: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    marginTop: cx(8),
+  },
+  switchContainer: {
+    marginRight: cx(16),
+    // backgroundColor: 'red',
+    marginTop: cx(16),
+  },
+  switch: {},
+  typeContainer: {
+    flexDirection: 'row',
+    marginTop: cx(8),
+  },
+  typeWrap: {
+    backgroundColor: '#E6E7E8',
+    marginRight: cx(10),
+    borderRadius: cx(10),
+  },
+  typeText: {
+    fontSize: cx(12),
+    color: '#000',
+    paddingHorizontal: cx(8),
+    paddingVertical: cx(2)
+  }
+});
+
+export default ScheduleCard