@ledvance/ui-biz-bundle 1.1.55 → 1.1.57

package/src/newModules/fixedTime/FixedTimePage.tsx

@@ -0,0 +1,231 @@
+import React, { memo, useCallback } from "react";
+import { FlatList, Image, ScrollView, StyleSheet, Text, View } from 'react-native'
+import Page from "@ledvance/base/src/components/Page";
+import { useDeviceInfo, useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useNavigation, useRoute } from '@react-navigation/core'
+import I18n from "@ledvance/base/src/i18n";
+import res from "@ledvance/base/src/res";
+import { ui_biz_routerKey } from "../../navigation/Routers";
+import { useReactive, useUpdateEffect } from "ahooks";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { SwitchButton, Utils } from "tuya-panel-kit";
+import { FixedTimerUiItem, useFixedTime } from "./FixedTimeActions";
+import Card from "@ledvance/base/src/components/Card";
+import { convertMinutesTo12HourFormat, loopText } from "@ledvance/base/src/utils/common";
+import { cloneDeep } from "lodash";
+import dayjs from "dayjs";
+
+const { convertX: cx } = Utils.RatioUtils
+const MAX_NUM = 10
+
+export interface FixedTimePageParams {
+  fixedTimeDpCode: string
+  conflictDps: {
+    randomTimeDp?: string
+    biorhythmDp?: string
+    sleepWakeUpDp?: string
+  }
+  isPlug?: boolean
+  showTags?: boolean
+  applyDps: {
+    label: string
+    value: string
+  }[]
+  isSupportColor: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+}
+
+const FixedTimePage = () => {
+  const navigation = useNavigation()
+  const devInfo = useDeviceInfo()
+  const params = useRoute().params as FixedTimePageParams
+  const is24Hour = useSystemTimeFormate()
+  const [fixedTime, setFixedTime] = useFixedTime(params.fixedTimeDpCode, params.isPlug)
+  const state = useReactive({
+    loading: false,
+    fixedTimeList: cloneDeep(fixedTime)
+  })
+
+  useUpdateEffect(() => {
+    state.fixedTimeList = cloneDeep(fixedTime)
+  }, [fixedTime])
+
+  const navigateToEdit = useCallback((mode: 'add' | 'edit', scheduleItem: FixedTimerUiItem) => {
+    navigation.navigate(ui_biz_routerKey.ui_biz_fixed_time_edit_new, {
+      ...params,
+      mode,
+      scheduleItem: cloneDeep(scheduleItem),
+      onPost
+    })
+  }, [])
+
+  const showMaxNumTip = useCallback(() => {
+    return state.fixedTimeList.length >= MAX_NUM
+  }, [state.fixedTimeList.length])
+
+  const onPost = useCallback(async (mode: 'add' | 'edit' | 'del', fixedTime: FixedTimerUiItem) => {
+    const cloneFixedTimeList = cloneDeep(state.fixedTimeList)
+    const idx = state.fixedTimeList.findIndex(f => f.index === fixedTime.index)
+    if (mode === 'edit') {
+      cloneFixedTimeList.splice(idx, 1, fixedTime)
+    }
+    if (mode === 'del') cloneFixedTimeList.splice(idx, 1)
+    const newFixedTimeList = mode === 'add' ? [...state.fixedTimeList, fixedTime] : cloneFixedTimeList
+    return setFixedTime(newFixedTimeList)
+  }, [state.fixedTimeList])
+
+  return (
+    <Page
+      backText={devInfo.name}
+      headlineText={I18n.getLang('fixedTimeCycle_socket_headline')}
+      headlineIcon={!showMaxNumTip() ? res.device_panel_schedule_add : undefined}
+      loading={state.loading}
+      onBackClick={navigation.goBack}
+      onHeadlineIconClick={() => {
+        navigateToEdit('add', newFixedTime())
+      }}
+    >
+      {state.fixedTimeList.length > 0 ?
+        <ScrollView nestedScrollEnabled={true}>
+          <Text style={{
+            color: '#000',
+            marginLeft: cx(24),
+          }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+          <Spacer height={cx(10)} />
+          {showMaxNumTip() && <View style={{ marginHorizontal: cx(24), flexDirection: 'row' }}>
+            <Image style={{ width: cx(16), height: cx(16), tintColor: '#ff9500' }} source={res.ic_warning_amber} />
+            <Text>{I18n.getLang('fixedtimecycle_warning_max_number_text')}</Text>
+          </View>}
+          <FlatList
+            data={state.fixedTimeList}
+            renderItem={({ item }) => (
+              <FixedTimeCard
+                is24Hour={is24Hour}
+                fixedTime={item}
+                onSwitch={async (v) => {
+                  state.loading = true
+                  await onPost('edit', {
+                    ...item,
+                    enable: v
+                  })
+                  state.loading = false
+                }}
+                onPress={() => {
+                  navigateToEdit('edit', item)
+                }}
+              />
+            )}
+            keyExtractor={(item: any) => `${item?.index}`}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListHeaderComponent={<Spacer height={cx(10)} />}
+            ListFooterComponent={<Spacer />}
+          />
+        </ScrollView> :
+        <View style={{ flex: 1, marginTop: cx(60), alignItems: 'center' }}>
+          <Image
+            style={{ width: cx(225), height: cx(198) }}
+            source={{ uri: res.ldv_timer_empty }}
+            resizeMode="contain" />
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Image
+              source={{ uri: res.device_panel_schedule_alert }}
+              style={{ width: cx(16), height: cx(16) }}
+            />
+            <Text style={{ color: '#000', fontSize: cx(12) }}>
+              {I18n.getLang('fixedTimeCycle_information_text')}
+            </Text>
+          </View>
+          <Spacer />
+          <TextButton
+            text={I18n.getLang('fixedTimeCycle_bttn_text')}
+            style={{
+              backgroundColor: '#f60',
+              borderRadius: cx(6),
+              paddingVertical: cx(12),
+              paddingHorizontal: cx(24),
+            }}
+            textStyle={{ color: '#fff' }}
+            onPress={() => {
+              navigateToEdit('add', newFixedTime())
+            }} />
+        </View>
+      }
+    </Page>
+  )
+}
+
+const FixedTimeCard = memo((props: {
+  is24Hour: boolean
+  fixedTime: FixedTimerUiItem,
+  onSwitch: (enable: boolean) => void,
+  onPress: () => void
+}) => {
+  const { is24Hour, fixedTime, onSwitch, onPress } = props
+  return (
+    <Card style={styles.randomTimingCard} onPress={onPress}>
+      <Spacer height={cx(16)} />
+      <View style={styles.switchLine}>
+        <Text style={styles.time}>
+          {`${convertMinutesTo12HourFormat(fixedTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(fixedTime.endTime, is24Hour)}`}</Text>
+        <SwitchButton
+          style={styles.switchBtn}
+          value={fixedTime.enable}
+          thumbStyle={{ elevation: 0 }}
+          onValueChange={onSwitch} />
+      </View>
+      <Text style={styles.loopText}>{loopText(fixedTime.weeks)}</Text>
+      <Spacer height={cx(5)} />
+      <Text style={styles.loopText}>{fixedTime.name}</Text>
+      <Spacer />
+    </Card>
+  )
+})
+
+const newFixedTime = () => {
+  const startTime = dayjs().hour() * 60 + dayjs().minute()
+  return {
+    name: '',
+    enable: true,
+    weeks: [0, 0, 0, 0, 0, 0, 0],
+    startTime: startTime,
+    endTime: startTime + 60,
+    closeTime: 1,
+    openTime: 1,
+    channel: 1,
+    color: {
+      h: 0,
+      s: 100,
+      v: 100,
+      brightness: 100,
+      temperature: 0,
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  randomTimingCard: {
+    marginHorizontal: cx(24),
+    paddingHorizontal: cx(16),
+  },
+  switchLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  switchBtn: {},
+  loopText: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+})
+
+export default FixedTimePage

package/src/newModules/fixedTime/Router.ts

@@ -0,0 +1,25 @@
+import {NavigationRoute} from "tuya-panel-kit";
+import NewFixedTimePage from "./FixedTimePage";
+import NewFixedTimeDetailPage from "./FixedTimeDetailPage";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const NewFixedTimePageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_fixed_time_new,
+    component: NewFixedTimePage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.ui_biz_fixed_time_edit_new,
+    component: NewFixedTimeDetailPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  }
+]
+
+export default NewFixedTimePageRouters

package/src/newModules/lightMode/LightModePage.tsx

@@ -0,0 +1,204 @@
+import React, { PropsWithChildren } from 'react'
+import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import {useDeviceInfo, useDp} from '@ledvance/base/src/models/modules/NativePropsSlice'
+import I18n from '@ledvance/base/src/i18n'
+import { Utils } from 'tuya-panel-kit'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import Card from '@ledvance/base/src/components/Card'
+import res from '@ledvance/base/src/res'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import {Result} from "@ledvance/base/src/models/modules/Result";
+
+const { convertX: cx } = Utils.RatioUtils
+
+const LIGHT_MODE_RELAY = 'relay'
+const LIGHT_MODE_POS = 'pos'
+const LIGHT_MODE_OFF = 'off'
+const LIGHT_MODE_ON = 'on'
+
+export interface LightModePageParams {
+  lightModeCode: string
+}
+
+type LightMode = 'relay' | 'pos' | 'off' | 'on'
+
+export const useLightMode = (code: string): [LightMode, (v: LightMode) => Promise<Result<any>>] => {
+  return useDp(code)
+}
+
+const LightModePage = () => {
+  const params = useParams<LightModePageParams>()
+  const deviceInfo = useDeviceInfo()
+  const [lightMode, setLightMode] = useLightMode(params.lightModeCode)
+
+  const state = useReactive({
+    lightMode: lightMode,
+    loading: false,
+  })
+
+  useUpdateEffect(() => {
+    state.lightMode = lightMode
+  }, [lightMode])
+
+  return (
+    <Page
+      backText={deviceInfo.name}
+      headlineText={I18n.getLang('matterplug_LED')}
+      loading={state.loading}>
+      <ScrollView style={styles.root} nestedScrollEnabled={true}>
+        <Text style={styles.desc}>
+          {I18n.getLang('matterplug_description')}
+        </Text>
+        <Spacer />
+        <View style={styles.modeSelectGroup}>
+          <Spacer height={cx(8)} />
+          <Text style={styles.modeTip}>
+            {I18n.getLang('matterplug_heading')}
+          </Text>
+          <Spacer height={cx(8)} />
+          <Card style={styles.modeSelectCard}>
+            <Spacer height={cx(12)} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_RELAY}
+              title={I18n.getLang('matterplug_option1title')}
+              content={I18n.getLang('matterplug_option1description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_RELAY
+                await setLightMode(state.lightMode)
+              }} />
+            <View style={styles.line} />
+            <Spacer height={cx(8)} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_POS}
+              title={I18n.getLang('matterplug_option2title')}
+              content={I18n.getLang('matterplug_option2description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_POS
+                await setLightMode(state.lightMode)
+              }} />
+            <View style={styles.line} />
+            <Spacer height={cx(8)} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_OFF}
+              title={I18n.getLang('matterplug_option3title')}
+              content={I18n.getLang('matterplug_option3description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_OFF
+                await setLightMode(state.lightMode)
+              }} />
+            <Spacer height={cx(8)} />
+            <View style={styles.line} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_ON}
+              title={I18n.getLang('matterplug_option4title')}
+              content={I18n.getLang('matterplug_option4description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_ON
+                await setLightMode(state.lightMode)
+              }} />
+            <Spacer height={cx(4)} />
+          </Card>
+          <Spacer height={cx(8)} />
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+interface LightModeItemProps extends PropsWithChildren<ViewProps> {
+  onPress: () => void
+  title: string
+  content: string
+  enable: boolean
+}
+
+function LightModeItem(props: LightModeItemProps) {
+  return (
+    <TouchableOpacity onPress={props.onPress}>
+      <View style={styles.itemRoot}>
+        <View style={styles.itemTextGroup}>
+          <Text style={styles.itemTitle}>{props.title}</Text>
+          <Spacer height={cx(4)} />
+          <Text style={styles.itemContent}>{props.content}</Text>
+        </View>
+        <Image
+          source={{ uri: res.ic_check }}
+          style={[
+            styles.itemCheckedIcon,
+            {
+              display: props.enable ? 'flex' : 'none',
+            },
+          ]} />
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  desc: {
+    marginHorizontal: cx(24),
+    color: '#000',
+    fontSize: cx(14),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  tipText: {
+    marginHorizontal: cx(24),
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  modeSelectGroup: {
+    marginHorizontal: cx(24),
+    backgroundColor: '#f6f6f6',
+    borderRadius: cx(4),
+  },
+  modeTip: {
+    marginHorizontal: cx(8),
+    color: '#000',
+    fontSize: cx(14),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  modeSelectCard: {
+    marginHorizontal: cx(8),
+  },
+  line: {
+    height: cx(1),
+    marginHorizontal: cx(12),
+    backgroundColor: '#3C3C435B',
+  },
+  itemRoot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: cx(12),
+    paddingBottom: cx(8),
+  },
+  itemTextGroup: {
+    flex: 1,
+    marginEnd: cx(12),
+    justifyContent: 'center',
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  itemContent: {
+    color: '#666',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  itemCheckedIcon: {
+    width: cx(32),
+    height: cx(32),
+    marginEnd: cx(4),
+  },
+})
+
+export default LightModePage

package/src/newModules/lightMode/Router.ts

@@ -0,0 +1,16 @@
+import {NavigationRoute} from "tuya-panel-kit";
+import LightModePage from "./LightModePage";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const LightModePageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_light_mode,
+    component: LightModePage,
+    options:{
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  }
+]
+
+export default LightModePageRouters

package/src/newModules/mood/AddMoodPage.tsx

@@ -0,0 +1,178 @@
+import Strings from '@ledvance/base/src/i18n';
+import Page from '@ledvance/base/src/components/Page';
+import React, { useCallback } from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { Utils } from 'tuya-panel-kit';
+import RecommendMoodItem from './RecommendMoodItem';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import { useReactive } from 'ahooks';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import {
+  MoodPageParams,
+  MoodNodeTransitionMode,
+  MoodUIInfo,
+  MoodJumpGradientMode,
+} from './Interface';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import { RouterKey } from 'navigation/Router';
+import { difference, head, map, range } from 'lodash';
+import { RecommendMood, getRecommendMixMoods, getRecommendMoods } from './MoodInfo';
+
+const cx = Utils.RatioUtils.convertX;
+
+export interface AddMoodPageParams {
+  isStatic: boolean;
+  moods: MoodUIInfo[];
+  moduleParams: MoodPageParams;
+  modDeleteMood: (mode: 'add' | 'edit' | 'del', currentMood: MoodUIInfo) => Promise<Result<any>>;
+}
+
+interface AddMoodPageState {
+  data: RecommendMood[];
+}
+
+const AddMoodPage = () => {
+  const navigation = useNavigation();
+  const routeParams = useRoute().params as AddMoodPageParams;
+  const moduleParams = routeParams.moduleParams;
+  const isMix = !!(moduleParams.isMixLight || moduleParams.isCeilingLight);
+  const state = useReactive<AddMoodPageState>({
+    data: isMix
+      ? getRecommendMixMoods(routeParams.isStatic, moduleParams)
+      : getRecommendMoods(routeParams.isStatic, moduleParams),
+  });
+
+  const getFormateItem = item => {
+    return {
+      ...item,
+      version: 0,
+      secondaryLamp: item.secondaryLamp ?? {
+        nodes: [],
+        mode: 0,
+        speed: 75,
+      },
+    };
+  };
+
+  const onMoodItemClick = useCallback(
+    (moodItem: RecommendMood) => {
+      const useIds = map(routeParams.moods, 'id');
+      const idRange = range(0, 256);
+      const id: number = head(difference(idRange, useIds)) || -1;
+      console.log(id, '< --- id ---- >')
+      const url = routeParams.isStatic
+        ? RouterKey.ui_biz_static_mood_edit
+        : !!(moduleParams.isCeilingLight || moduleParams.isMixLight)
+        ? RouterKey.ui_biz_dynamic_mix_mood_edit
+        : RouterKey.ui_biz_dynamic_mood_edit;
+      const currentMood = moodItem.mainLamp
+        ? { ...moodItem, id }
+        : newMood(id, moduleParams.isSupportColor, routeParams.isStatic, moduleParams);
+      navigation.navigate(url, {
+        mode: 'add',
+        currentMood,
+        moods: routeParams.moods,
+        moduleParams,
+        modDeleteMood: routeParams.modDeleteMood,
+      });
+    },
+    [routeParams]
+  );
+
+  return (
+    <Page
+      backText={Strings.getLang('add_new_static_mood_system_back')}
+      headlineText={Strings.getLang(
+        routeParams.isStatic
+          ? 'add_new_static_mood_headline_text'
+          : 'add_new_dynamic_mood_headline_text'
+      )}
+    >
+      <View style={styles.root}>
+        <Text style={styles.desc}>
+          {Strings.getLang(
+            routeParams.isStatic
+              ? 'add_new_static_mood_description_text'
+              : 'add_new_dynamic_mood_description_text'
+          )}
+        </Text>
+        <FlatList
+          style={{ flex: 1 }}
+          data={state.data}
+          renderItem={({ item }) => {
+            return (
+              <RecommendMoodItem
+                title={item.name}
+                isMix={isMix}
+                mood={getFormateItem(item)}
+                onPress={() => {
+                  onMoodItemClick(item);
+                }}
+              />
+            );
+          }}
+          ItemSeparatorComponent={() => <Spacer />}
+          ListHeaderComponent={() => <Spacer />}
+          ListFooterComponent={() => <Spacer />}
+          keyExtractor={item => item.name}
+        />
+      </View>
+    </Page>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  desc: {
+    color: '#000',
+    fontSize: cx(16),
+    marginHorizontal: cx(24),
+    marginTop: cx(12),
+  },
+});
+
+export default AddMoodPage;
+
+function newMood(
+  id: number,
+  isColorMode: boolean,
+  isStatic: boolean,
+  moduleParams: MoodPageParams
+): MoodUIInfo {
+  const jump = moduleParams.isStringLight
+    ? MoodJumpGradientMode.StringJump
+    : moduleParams.isStripLight
+    ? MoodJumpGradientMode.StripJump
+    : MoodJumpGradientMode.SourceJump;
+  const node = {
+    brightness: 100,
+    colorTemp: 100,
+    h: 0,
+    s: 100,
+    v: 100,
+    isColorNode: !!(moduleParams.isCeilingLight || moduleParams.isMixLight) ? false : isColorMode,
+  };
+  return {
+    version: 0,
+    name: '',
+    image: '',
+    id,
+    mainLamp: {
+      speed: 75,
+      enable: true,
+      fanEnable: true,
+      fanSpeed: 1,
+      mode: isStatic ? MoodNodeTransitionMode.Static : jump,
+      nodes: isStatic ? [node] : [node, { ...node }],
+    },
+    secondaryLamp: {
+      enable: false,
+      mode: 0,
+      speed: 75,
+      nodes: [],
+    },
+  };
+}