@ledvance/group-ui-biz-bundle 1.0.30 → 1.0.32

package/src/modules/randomTimingForLight/RandomTimingForLightPage.tsx

@@ -0,0 +1,192 @@
+import Page from "@ledvance/base/src/components/Page";
+import {useDeviceInfo} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {useNavigation, useRoute} from '@react-navigation/native'
+import I18n from "@ledvance/base/src/i18n/index";
+import res from "@ledvance/base/src/res/index";
+import {useReactive} from "ahooks";
+import React, {useCallback, useMemo} from "react";
+import {FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import {Utils} from "tuya-panel-kit";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+import {RandomTimingItem, RandomTimingParam, useRandomTiming} from "./RandomTimingForLightAction";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import ItemCard from "./ItemCard";
+import {cloneDeep} from "lodash";
+
+const {convertX: cx, topBarHeight} = Utils.RatioUtils;
+const MAX_NUM = 16
+
+const RandomTimeForLightPage = () => {
+  const devInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const params = useRoute().params as RandomTimingParam
+  const [randomTimingList, setRandomTimingList] = useRandomTiming()
+  const state = useReactive({
+    loading: false
+  })
+
+  const isMaxNum = useMemo(() => {
+    return randomTimingList.length >= MAX_NUM
+  }, [randomTimingList])
+
+  const onAddOrEditItem = (mode: 'add' | 'edit', item?: RandomTimingItem) => {
+    const path = ui_biz_routerKey.group_ui_biz_random_timing_light_detail
+    navigation.navigate(path, {
+      ...params,
+      mode,
+      item,
+      onPost
+    })
+  }
+
+  const onPost = useCallback(async (mode: 'add' | 'edit' | 'del', randomTiming: RandomTimingItem, goBack?: boolean) => {
+    state.loading = true
+    const cloneRandomTimingList = cloneDeep(randomTimingList)
+    const idx = randomTimingList.findIndex(it => it.index === randomTiming.index)
+    if (mode === 'edit') {
+      cloneRandomTimingList.splice(idx, 1, randomTiming)
+    }
+    if (mode === 'del') cloneRandomTimingList.splice(idx, 1)
+    const newRandomTimingList = mode === 'add' ? [...randomTimingList, {
+      ...randomTiming,
+      index: randomTimingList.length
+    }] : cloneRandomTimingList
+    const res = await setRandomTimingList(newRandomTimingList)
+    state.loading = false
+    if (res.success && goBack) {
+      navigation.goBack()
+    }
+  }, [randomTimingList])
+
+  const renderList = () => {
+    return (
+      <ScrollView nestedScrollEnabled={true}>
+        <Text style={{
+          color: '#000',
+          marginLeft: cx(24),
+        }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+        <Spacer height={cx(10)}/>
+        {isMaxNum && <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={randomTimingList}
+          renderItem={({item}) => (
+            <ItemCard
+              item={item}
+              is24Hour={params.is24Hour}
+              onSwitch={async (v) => {
+                await onPost('edit', {
+                  ...item,
+                  enable: v,
+                })
+              }}
+              onPress={() => {
+                onAddOrEditItem('edit', item)
+              }}
+            />
+          )}
+          keyExtractor={(item: any) => `${item?.index}`}
+          ItemSeparatorComponent={() => <Spacer/>}
+          ListHeaderComponent={<Spacer height={cx(10)}/>}
+          ListFooterComponent={<Spacer/>}
+        />
+      </ScrollView>
+    )
+  }
+  const renderEmpty = () => {
+    return (
+      <View style={styles.emptyListCon}>
+        <Image
+          style={styles.emptyImage}
+          source={{uri: res.ldv_timer_empty}}
+          resizeMode="contain"/>
+        <View
+          style={{
+            marginHorizontal: cx(24),
+            marginTop: cx(30),
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <Image
+            source={{uri: res.device_panel_schedule_alert}}
+            style={{width: cx(16), height: cx(16)}}
+          />
+          <Text style={styles.emptyNoTime}>{I18n.getLang('randomtimecycle_empty_information_text')}</Text>
+        </View>
+        <View
+          style={{
+            height: cx(36),
+            width: cx(150),
+            marginVertical: cx(25),
+            marginHorizontal: cx(24),
+            borderRadius: cx(6),
+            backgroundColor: '#f60',
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              flex: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+            onPress={() => onAddOrEditItem('add')}
+          >
+            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: '#fff', textAlign: 'center'}}>
+              {I18n.getLang('randomtimecycle_empty_bttn_text')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    )
+  }
+  return (
+    <Page
+      backText={devInfo.name}
+      headlineText={I18n.getLang('randomtimecycle_sockets_headline_text')}
+      headlineIcon={!isMaxNum && res.device_panel_schedule_add || undefined}
+      onHeadlineIconClick={() => onAddOrEditItem('add')}
+      loading={state.loading}
+    >
+      {randomTimingList.length > 0 ? renderList() : renderEmpty()}
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  bg: {
+    marginTop: topBarHeight,
+    flex: 1,
+  },
+  emptyListCon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: cx(30),
+  },
+  emptyImage: {
+    width: cx(225),
+    height: cx(198)
+  },
+  emptyNoTime: {
+    fontSize: cx(12),
+    color: '#000'
+  },
+  emptyTimeTip: {
+    fontSize: cx(12),
+    lineHeight: cx(17),
+    marginTop: cx(6),
+    width: '76%',
+    textAlign: 'center'
+  },
+  listContainer: {
+    bottom: cx(74)
+  },
+  categoryList: {
+    marginHorizontal: cx(24),
+    marginBottom: cx(12),
+  },
+})
+
+export default RandomTimeForLightPage

package/src/modules/randomTimingForLight/Summary.tsx

@@ -0,0 +1,123 @@
+import React, { ReactElement, memo } from "react";
+import { Text, Image, ViewStyle, View, StyleSheet } from 'react-native'
+import res from "@ledvance/base/src/res"
+import I18n from "@ledvance/base/src/i18n";
+import { Utils } from "tuya-panel-kit";
+import Spacer from "@ledvance/base/src/components/Spacer";
+
+const { convertX: cx } = Utils.RatioUtils;
+
+interface SummaryProps {
+  style?: ViewStyle
+  frequency?: string | ReactElement
+  time?: string | ReactElement
+  actions?: ReactElement
+  hideActions?: boolean
+}
+
+const Summary = (props: SummaryProps) => {
+  return (
+    <View style={styles.cardContainer}>
+      <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
+      <Spacer height={cx(10)} />
+      <View style={{}}>
+        <View style={styles.summaryContainer}>
+          <View style={styles.summaryLeft}>
+            <Image
+              source={res.summary_icon1}
+              resizeMode="contain"
+              style={styles.summaryImg}
+            />
+            <View>
+              <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_frequency_headline')}</Text>
+            </View>
+          </View>
+          <View style={styles.summaryRight}>
+            <View style={styles.rightWrap}>
+              <Text style={styles.rightItem}>{props.frequency}</Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.summaryContainer}>
+          <View style={styles.summaryLeft}>
+            <Image
+              source={res.summary_icon2}
+              resizeMode="contain"
+              style={styles.summaryImg}
+            />
+            <View>
+              <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_time_headline')}</Text>
+            </View>
+          </View>
+          <View style={styles.summaryRight}>
+            <View style={styles.rightWrap}>
+              <Text style={styles.rightItem}>{props.time}</Text>
+            </View>
+          </View>
+        </View>
+        {!props.hideActions && <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
+          <View style={styles.summaryLeft}>
+            <Image
+              source={res.summary_icon3}
+              resizeMode="contain"
+              style={styles.summaryImg}
+            />
+            <View>
+              <Text style={styles.leftTitle}>{I18n.getLang('motion_detection_add_time_schedule_actions_text1')}</Text>
+            </View>
+          </View>
+          <View style={styles.summaryRight}>
+            {props.actions}
+          </View>
+        </View>}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24),
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  summaryContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: cx(10),
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(100)
+  },
+  summaryImg: {
+    width: cx(12),
+    height: cx(12),
+    marginRight: cx(6)
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000'
+  },
+  summaryRight: {
+    flex: 1,
+    flexDirection: 'column',
+    marginLeft: cx(15),
+  },
+  rightWrap: {
+    borderRadius: cx(16),
+    paddingHorizontal: cx(12),
+    alignSelf: 'flex-start',
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    color: '#000',
+  },
+})
+
+export default memo(Summary)

package/src/modules/timer/TimerAction.ts

@@ -3,7 +3,7 @@ import {Result} from '@ledvance/base/src/models/modules/Result'
 import dayjs from 'dayjs'
 import {useCountDown, useReactive} from 'ahooks'
 import {useEffect, useMemo} from 'react'
-import {I18nKey} from "../../../.yalc/@ledvance/base/src/i18n/index";
+import {I18nKey} from "@ledvance/base/src/i18n/index";
 
 export interface TimerTask {
   name: string

package/src/navigation/Routers.ts

@@ -11,6 +11,10 @@ import FlagPage from '../modules/flags/FlagPage'
 import FlagEditPage from '../modules/flags/FlagEditPage'
 import RemoteSwitchPage from "../modules/remoteSwitch/RemoteSwitchPage";
 import SwitchGradientPage from "../modules/switchGradient/SwitchGradientPage";
+import RandomTimeForPlugPage from "../modules/randomTimeForPlug/RandomTimeForPlugPage";
+import RandomTimeForPlugDetailPage from "../modules/randomTimeForPlug/RandomTimeForPlugDetailPage";
+import RandomTimeForLightPage from "../modules/randomTimingForLight/RandomTimingForLightPage";
+import RandomTimingForLightDetailPage from "../modules/randomTimingForLight/RandomTimingForLightDetailPage";
 
 export const ui_biz_routerKey = {
   'group_ui_biz_timer': 'group_ui_biz_timer',
@@ -25,6 +29,10 @@ export const ui_biz_routerKey = {
   'group_ui_biz_flag_page_edit': 'group_ui_biz_flag_page_edit',
   'group_ui_biz_remote_switch': 'group_ui_biz_remote_switch',
   'group_ui_biz_switch_gradient': 'group_ui_biz_switch_gradient',
+  'group_ui_biz_random_time_plug': 'group_ui_biz_random_time_plug',
+  'group_ui_biz_random_time_plug_detail': 'group_ui_biz_random_time_plug_detail',
+  'group_ui_biz_random_timing_light': 'group_ui_biz_random_timing_light',
+  'group_ui_biz_random_timing_light_detail': 'group_ui_biz_random_timing_light_detail',
 }
 
 export const TimerRouters: NavigationRoute[] = [
@@ -144,3 +152,41 @@ export const SwitchGradientRouters: NavigationRoute[] = [
     },
   }
 ]
+
+export const RandomTimeForPlugRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_random_time_plug,
+    component: RandomTimeForPlugPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_random_time_plug_detail,
+    component: RandomTimeForPlugDetailPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+]
+
+export const RandomTimingForLightRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_random_timing_light,
+    component: RandomTimeForLightPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_random_timing_light_detail,
+    component: RandomTimingForLightDetailPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+]