@ledvance/ui-biz-bundle 1.1.67 → 1.1.69

package/src/newModules/fixedTime/FixedTimePage.tsx

@@ -1,302 +1,302 @@
-import React, { memo, useCallback, useMemo } 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 } 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";
-import { ApplyForItem } from "@ledvance/ui-biz-bundle/src/newModules/timeSchedule/Interface";
-import { useParams } from "@ledvance/base/src/hooks/Hooks";
-import Tag from "@ledvance/base/src/components/Tag";
-import InfoText from "@ledvance/base/src/components/InfoText";
-
-const { convertX: cx } = Utils.RatioUtils
-const MAX_NUM = 10
-
-export interface FixedTimePageParams {
-  fixedTimeDpCode: string
-  conflictDps: {
-    randomTimeDpCode?: string
-    biorhythmDpCode?: string
-    sleepDpCode?: string
-    wakeUpDpCode?: string 
-  }
-  isPlug?: boolean
-  showTags?: boolean
-  applyForList: ApplyForItem[]
-  isSupportColor?: boolean
-  isSupportTemperature?: boolean
-  isSupportBrightness?: boolean
-}
-
-const FixedTimePage = () => {
-  const navigation = useNavigation()
-  const devInfo = useDeviceInfo()
-  const params = useParams<FixedTimePageParams>()
-  const is24Hour = useSystemTimeFormate()
-  const [fixedTime, setFixedTime] = useFixedTime(params.fixedTimeDpCode, params.isPlug)
-  const state = useReactive({
-    loading: false,
-    originList: cloneDeep(fixedTime),
-    fixedTimeList: cloneDeep(fixedTime),
-    checkTags: params.applyForList.map(v => ({ ...v, enable: false }))
-  })
-
-  useUpdateEffect(() => {
-    state.originList = cloneDeep(fixedTime)
-  }, [fixedTime])
-
-  useUpdateEffect(() => {
-    const isAll = state.checkTags.every(tag => tag.enable) || state.checkTags.every(tag => !tag.enable)
-    const checkedList = state.originList.filter(item => {
-      return isAll || state.checkTags[item.channel || 0]?.enable
-    })
-    state.fixedTimeList = cloneDeep(checkedList)
-  }, [JSON.stringify(state.checkTags), JSON.stringify(state.originList)])
-
-  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.originList.length >= MAX_NUM
-  }, [state.originList.length])
-
-  const onPost = useCallback(async (mode: 'add' | 'edit' | 'del', fixedTime: FixedTimerUiItem) => {
-    const cloneFixedTimeList = cloneDeep(state.originList)
-    const idx = state.originList.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.originList, fixedTime] : cloneFixedTimeList
-    const res = await setFixedTime(newFixedTimeList)
-    if (res.success) {
-      state.originList = cloneDeep(newFixedTimeList)
-    }
-    return res
-  }, [state.originList])
-
-  const showTags = useMemo(() => (
-    <View style={styles.categoryList}>
-      {state.checkTags.map((tag, idx) => (
-        <Tag
-          key={tag.key}
-          text={tag.key}
-          checked={tag.enable}
-          onCheckedChange={(v) => {
-            state.checkTags[idx].enable = v
-            state.checkTags = cloneDeep(state.checkTags)
-          }}
-          style={{ marginRight: cx(5), marginBottom: cx(5) }}
-        />
-      ))}
-    </View>
-  ), [state.checkTags])
-
-  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())
-      }}
-    >
-      <ScrollView nestedScrollEnabled={true}>
-        <Text style={{
-          color: '#000',
-          marginLeft: cx(24),
-          fontSize: cx(12)
-        }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
-        <Spacer height={cx(10)} />
-        {showMaxNumTip() && <InfoText
-          style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
-          icon={res.ic_warning_amber}
-          iconStyle={{ width: cx(16), height: cx(16) }}
-          contentColor="#FF9500"
-          text={I18n.getLang('fixedtimecycle_warning_max_number_text')}
-          textStyle={{ fontSize: cx(12) }}
-        />}
-        {params.showTags && !!state.originList.length && showTags}
-        {state.fixedTimeList.length > 0 ? <FlatList
-          data={state.fixedTimeList}
-          renderItem={({ item }) => (
-            <FixedTimeCard
-              is24Hour={is24Hour}
-              fixedTime={item}
-              showTags={params.showTags}
-              tags={params.applyForList}
-              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 />}
-        /> :
-          <View style={{ flex: 1, marginTop: cx(60), alignItems: 'center', marginHorizontal: cx(24) }}>
-            <Image
-              style={{ width: cx(225), height: cx(198) }}
-              source={{ uri: res.ldv_timer_empty }}
-              resizeMode="contain" />
-            <InfoText
-              icon={res.device_panel_schedule_alert}
-              text={I18n.getLang(!state.originList.length ? 'fixedTimeCycle_information_text' : 'fixedTimeCycle_empty_filtering_information_text')}
-              style={{ width: 'auto', alignItems: 'center' }}
-              textStyle={{ color: '#000', fontSize: cx(12), flex: undefined }}
-              iconStyle={{ width: cx(16), height: cx(16), tintColor: '#000' }}
-            />
-            <Spacer />
-            {!state.originList.length && <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>}
-      </ScrollView>
-
-    </Page>
-  )
-}
-
-const FixedTimeCard = memo((props: {
-  is24Hour: boolean
-  fixedTime: FixedTimerUiItem,
-  tags: ApplyForItem[]
-  showTags?: boolean,
-  onSwitch: (enable: boolean) => void,
-  onPress: () => void
-}) => {
-  const { is24Hour, fixedTime, tags, showTags, 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 height={cx(showTags ? 5 : 20)} />
-      {showTags && <View style={styles.tagContainer}>
-        <View style={styles.tag}>
-          <Text style={styles.tagTitle}>
-            {tags[fixedTime.channel || 0]?.key}
-          </Text>
-        </View>
-      </View>}
-    </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: 0,
-    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',
-  },
-  categoryList: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginHorizontal: cx(24),
-    alignSelf: 'flex-start'
-  },
-  tagContainer: {
-    flexDirection: 'row',
-    marginBottom: cx(15)
-  },
-  tag: {
-    borderRadius: cx(16),
-    height: cx(16),
-    backgroundColor: '#E6E7E8',
-    marginRight: cx(10),
-    paddingHorizontal: cx(12)
-  },
-  tagTitle: {
-    fontSize: cx(10),
-    textAlign: 'center',
-    fontFamily: 'PingFangSC-Medium',
-    color: '#000'
-  },
-})
-
-export default FixedTimePage
+import React, { memo, useCallback, useMemo } 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 } 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";
+import { ApplyForItem } from "@ledvance/ui-biz-bundle/src/newModules/timeSchedule/Interface";
+import { useParams } from "@ledvance/base/src/hooks/Hooks";
+import Tag from "@ledvance/base/src/components/Tag";
+import InfoText from "@ledvance/base/src/components/InfoText";
+
+const { convertX: cx } = Utils.RatioUtils
+const MAX_NUM = 10
+
+export interface FixedTimePageParams {
+  fixedTimeDpCode: string
+  conflictDps: {
+    randomTimeDpCode?: string
+    biorhythmDpCode?: string
+    sleepDpCode?: string
+    wakeUpDpCode?: string 
+  }
+  isPlug?: boolean
+  showTags?: boolean
+  applyForList: ApplyForItem[]
+  isSupportColor?: boolean
+  isSupportTemperature?: boolean
+  isSupportBrightness?: boolean
+}
+
+const FixedTimePage = () => {
+  const navigation = useNavigation()
+  const devInfo = useDeviceInfo()
+  const params = useParams<FixedTimePageParams>()
+  const is24Hour = useSystemTimeFormate()
+  const [fixedTime, setFixedTime] = useFixedTime(params.fixedTimeDpCode, params.isPlug)
+  const state = useReactive({
+    loading: false,
+    originList: cloneDeep(fixedTime),
+    fixedTimeList: cloneDeep(fixedTime),
+    checkTags: params.applyForList.map(v => ({ ...v, enable: false }))
+  })
+
+  useUpdateEffect(() => {
+    state.originList = cloneDeep(fixedTime)
+  }, [fixedTime])
+
+  useUpdateEffect(() => {
+    const isAll = state.checkTags.every(tag => tag.enable) || state.checkTags.every(tag => !tag.enable)
+    const checkedList = state.originList.filter(item => {
+      return isAll || state.checkTags[item.channel || 0]?.enable
+    })
+    state.fixedTimeList = cloneDeep(checkedList)
+  }, [JSON.stringify(state.checkTags), JSON.stringify(state.originList)])
+
+  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.originList.length >= MAX_NUM
+  }, [state.originList.length])
+
+  const onPost = useCallback(async (mode: 'add' | 'edit' | 'del', fixedTime: FixedTimerUiItem) => {
+    const cloneFixedTimeList = cloneDeep(state.originList)
+    const idx = state.originList.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.originList, fixedTime] : cloneFixedTimeList
+    const res = await setFixedTime(newFixedTimeList)
+    if (res.success) {
+      state.originList = cloneDeep(newFixedTimeList)
+    }
+    return res
+  }, [state.originList])
+
+  const showTags = useMemo(() => (
+    <View style={styles.categoryList}>
+      {state.checkTags.map((tag, idx) => (
+        <Tag
+          key={tag.key}
+          text={tag.key}
+          checked={tag.enable}
+          onCheckedChange={(v) => {
+            state.checkTags[idx].enable = v
+            state.checkTags = cloneDeep(state.checkTags)
+          }}
+          style={{ marginRight: cx(5), marginBottom: cx(5) }}
+        />
+      ))}
+    </View>
+  ), [state.checkTags])
+
+  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())
+      }}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <Text style={{
+          color: '#000',
+          marginLeft: cx(24),
+          fontSize: cx(12)
+        }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+        <Spacer height={cx(10)} />
+        {showMaxNumTip() && <InfoText
+          style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
+          icon={res.ic_warning_amber}
+          iconStyle={{ width: cx(16), height: cx(16) }}
+          contentColor="#FF9500"
+          text={I18n.getLang('fixedtimecycle_warning_max_number_text')}
+          textStyle={{ fontSize: cx(12) }}
+        />}
+        {params.showTags && !!state.originList.length && showTags}
+        {state.fixedTimeList.length > 0 ? <FlatList
+          data={state.fixedTimeList}
+          renderItem={({ item }) => (
+            <FixedTimeCard
+              is24Hour={is24Hour}
+              fixedTime={item}
+              showTags={params.showTags}
+              tags={params.applyForList}
+              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 />}
+        /> :
+          <View style={{ flex: 1, marginTop: cx(60), alignItems: 'center', marginHorizontal: cx(24) }}>
+            <Image
+              style={{ width: cx(225), height: cx(198) }}
+              source={{ uri: res.ldv_timer_empty }}
+              resizeMode="contain" />
+            <InfoText
+              icon={res.device_panel_schedule_alert}
+              text={I18n.getLang(!state.originList.length ? 'fixedTimeCycle_information_text' : 'fixedTimeCycle_empty_filtering_information_text')}
+              style={{ width: 'auto', alignItems: 'center' }}
+              textStyle={{ color: '#000', fontSize: cx(12), flex: undefined }}
+              iconStyle={{ width: cx(16), height: cx(16), tintColor: '#000' }}
+            />
+            <Spacer />
+            {!state.originList.length && <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>}
+      </ScrollView>
+
+    </Page>
+  )
+}
+
+const FixedTimeCard = memo((props: {
+  is24Hour: boolean
+  fixedTime: FixedTimerUiItem,
+  tags: ApplyForItem[]
+  showTags?: boolean,
+  onSwitch: (enable: boolean) => void,
+  onPress: () => void
+}) => {
+  const { is24Hour, fixedTime, tags, showTags, 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 height={cx(showTags ? 5 : 20)} />
+      {showTags && <View style={styles.tagContainer}>
+        <View style={styles.tag}>
+          <Text style={styles.tagTitle}>
+            {tags[fixedTime.channel || 0]?.key}
+          </Text>
+        </View>
+      </View>}
+    </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: 0,
+    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',
+  },
+  categoryList: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: cx(24),
+    alignSelf: 'flex-start'
+  },
+  tagContainer: {
+    flexDirection: 'row',
+    marginBottom: cx(15)
+  },
+  tag: {
+    borderRadius: cx(16),
+    height: cx(16),
+    backgroundColor: '#E6E7E8',
+    marginRight: cx(10),
+    paddingHorizontal: cx(12)
+  },
+  tagTitle: {
+    fontSize: cx(10),
+    textAlign: 'center',
+    fontFamily: 'PingFangSC-Medium',
+    color: '#000'
+  },
+})
+
+export default FixedTimePage

package/src/newModules/fixedTime/Router.ts

@@ -1,25 +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
+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