@ledvance/ui-biz-bundle 1.1.67 → 1.1.69

package/src/modules/timeSchedule/TimeSchedulePage.tsx

@@ -1,358 +1,358 @@
-import React, { useCallback, useEffect } from 'react'
-import { useRoute } from '@react-navigation/core'
-import Page from '@ledvance/base/src/components/Page'
-import Tag from '@ledvance/base/src/components/Tag'
-import { useDeviceInfo, useTimeSchedule } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import I18n from '@ledvance/base/src/i18n'
-import res from '@ledvance/base/src/res'
-import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { Utils } from 'tuya-panel-kit'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import { useNavigation } from '@react-navigation/native'
-import { NativeApi } from '@ledvance/base/src/api/native'
-import LdvScheduleItem from './LdvScheduleItem'
-import { showDialog } from '@ledvance/base/src/utils/common'
-import { useReactive } from 'ahooks'
-import { cloneDeep } from 'lodash'
-import { ui_biz_routerKey } from 'navigation/Routers'
-import { JudgeTimeScheduleProps } from './TimeScheduleBean'
-
-const { convertX: cx } = Utils.RatioUtils
-
-export type dpItem = {
-  label: string
-  value: string
-  dpId: string
-}
-
-export interface LightData {
-  singleActions?: {
-    enable: boolean
-    whiteLightSwitch: boolean
-    isColor: boolean
-    h: number
-    s: number
-    v: number
-    temperature: number
-    brightness: number
-    activeKey?: number
-    colors?: string[]
-    colorDiskActiveKey?: number
-  },
-  actionScene?: any
-  mixActions?: any
-  isManual: boolean
-}
-
-const MAXNUM = 30
-
-export interface TimeSchedulePageRouteParams extends JudgeTimeScheduleProps {
-  dps: dpItem[],
-  fantasyFeatureId?: string
-  lightData2dps?: (data: LightData) => any
-  dps2lightData?: (dps: any) => LightData
-}
-
-const TimeSchedulePage = () => {
-  const deviceInfo = useDeviceInfo()
-  const navigation = useNavigation()
-  const props = useRoute().params as TimeSchedulePageRouteParams
-  const { dps } = props
-  const state = useReactive({
-    timeScheduleList: [] as any[],
-    filterScheduleList: [] as any[],
-    filterTags: dps ? dps.reduce((pre, cur) => {
-      if (cur.dpId) {
-        pre[cur.dpId] = false
-      }
-      return pre
-    }, {}) : {},
-  })
-
-  const [, setTimeSchedule] = useTimeSchedule()
-
-  useEffect(() => {
-    getTimerScheduleList().then()
-  }, [])
-
-  useEffect(() => {
-    if (Object.values(state.filterTags).every(item => item) || Object.values(state.filterTags).every(item => !item)) {
-      state.filterScheduleList = cloneDeep(state.timeScheduleList)
-    } else {
-      const checkedTags = Object.keys(state.filterTags).filter(tag => state.filterTags[tag])
-      state.filterScheduleList = state.timeScheduleList.filter(item => checkedTags.every(tag => item.dps[tag] !== undefined))
-    }
-  }, [state.filterTags])
-
-  const navigateToEdit = useCallback((mode: 'add' | 'edit', scheduleItem?: any) => {
-    const path = ui_biz_routerKey.ui_biz_time_schedule_edit
-    navigation.navigate(path, {
-      mode,
-      name: path,
-      scheduleItem,
-      reloadData: getTimerScheduleList,
-      deleteDialog: (item: any) => {
-        return deleteDialog(item)
-      },
-      ...props,
-    })
-  }, [state.timeScheduleList])
-
-  const getTimerScheduleList = async () => {
-    // const res: any = await NativeApi.timerList(deviceInfo.devId)
-    const res: any = await NativeApi.getAllTaskTimer(deviceInfo.devId)
-    if (res.success && res.data) {
-      // 原生传过来的dps是json字符串。
-      const originList = res.data.map((item: any) => {
-        return {
-          aliasName: item.remark,
-          status: !!item.mStatus,
-          id: item.mTimerId,
-          groupId: item.mTimerId,
-          loops: item.mLoops,
-          date: item.mDate,
-          time: item.mTime,
-          isAppPush: item.isAppPush ? 1 : 0,
-          dps: JSON.parse(item.mValue),
-        }
-      })
-      state.timeScheduleList = originList
-      state.filterScheduleList = originList
-      setTimeSchedule(getScheduleRunning())
-    }
-  }
-
-  const itemOnValueChange = (item: any) => {
-    const value = {
-      ...item,
-      status: !item.status,
-    }
-
-    NativeApi.editTimer(deviceInfo.devId, value, res => {
-      if (res.result) {
-        const newList = state.timeScheduleList.map(mItem => {
-          return {
-            ...mItem,
-            status: mItem.id === item.id ? value.status : mItem.status,
-          }
-        })
-        state.timeScheduleList = newList
-        state.filterScheduleList = newList
-        setTimeSchedule(getScheduleRunning())
-      }
-    })
-  }
-
-
-  const onDelete = (item: any) => {
-    NativeApi.deleteTimer(deviceInfo.devId, item, res => {
-      if (res.result) {
-        const newList = state.timeScheduleList.filter(nItem => item.id !== nItem.id)
-        state.timeScheduleList = newList
-        state.filterScheduleList = newList
-        setTimeSchedule(getScheduleRunning())
-      }
-    })
-  }
-
-  const getScheduleRunning = useCallback(() => {
-    return !!state.filterScheduleList.find(item => !!item.status)
-  }, [state.filterScheduleList])
-
-  const changeFilter = useCallback((v: boolean, tag: string) => {
-    state.filterTags = {
-      ...state.filterTags,
-      [tag]: v,
-    }
-  }, [])
-
-  // 删除弹框
-  const deleteDialog = (item: any) => {
-    return new Promise(resolve => {
-      showDialog({
-        method: 'confirm',
-        title: I18n.getLang('cancel_dialog_delete_item_timeschedule_titel'),
-        subTitle: I18n.getLang('cancel_dialog_delete_item_timeschedule_description'),
-        onConfirm: (_, { close }) => {
-          onDelete(item)
-          close()
-          resolve(true)
-        },
-      })
-    })
-  }
-
-  const renderItem = ({ item }) => {
-    return (
-      <LdvScheduleItem
-        item={item}
-        tags={dps}
-        onEnableChange={itemOnValueChange}
-        onPress={(item) => navigateToEdit('edit', item)}
-        onLongPress={(item) => {
-          deleteDialog(item).then()
-        }}/>
-    )
-  }
-
-  const showTags = useCallback(() => {
-    return Object.values(state.filterTags).length > 1 && state.timeScheduleList.length > 0
-  }, [state.filterTags, state.timeScheduleList])
-
-  const showMaxNumTip = useCallback(() =>{
-    return state.timeScheduleList.length >= MAXNUM
-  }, [state.timeScheduleList.length])
-
-  const showScheduleList = useCallback(() => {
-    return !!state.filterScheduleList.length
-  }, [state.filterScheduleList])
-
-  const getLabelByDp = (dp: string) => {
-    const dpLabel = dps.reduce((pre, cur) => {
-      if (cur.dpId) {
-        pre[cur.dpId] = cur.label
-      }
-      return pre
-    }, {})
-    return dpLabel[dp]
-  }
-  return (
-    <Page
-      backText={deviceInfo.name}
-      onBackClick={navigation.goBack}
-      headlineText={I18n.getLang('timeschedule_overview_headline_text')}
-      headlineIcon={!showMaxNumTip() ? res.device_panel_schedule_add : undefined}
-      onHeadlineIconClick={() => {
-        navigateToEdit('add')
-      }}
-    >
-      <View style={styles.content}>
-        <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', alignItems: 'center'}}>
-            <Image style={{ width: cx(16), height: cx(16), tintColor: '#ff9500' }} source={res.ic_warning_amber} />
-            <Text>{I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}</Text>
-          </View>}
-          {showTags() && <View style={styles.categoryList}>
-            {(props.isCeilingLight ? [] : Object.keys(state.filterTags)).map(tag => {
-              return <Tag
-                key={tag}
-                text={getLabelByDp(tag)}
-                checked={state.filterTags[tag]}
-                onCheckedChange={(v) => changeFilter(v, tag)}
-                style={{ marginRight: cx(5) }}
-              />
-            })}
-          </View>}
-          {showScheduleList()
-            ?
-            <FlatList
-              data={state.filterScheduleList}
-              keyExtractor={(item: any) => item.id}
-              renderItem={renderItem}
-              ListFooterComponent={() => (<Spacer/>)}
-            />
-            :
-            <View style={styles.emptyListCon}>
-              <Image
-                style={styles.emptyImage}
-                source={{ uri: res.ldv_timer_empty }}
-                resizeMode="contain"
-              />
-              <View
-                style={{
-                  marginHorizontal: cx(24),
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  marginTop: cx(28),
-                }}
-              >
-                <Image
-                  source={{ uri: res.device_panel_schedule_alert }}
-                  style={{ width: cx(16), height: cx(16) }}
-                />
-                <Text
-                  style={{
-                    color: '#000',
-                    fontSize: cx(12),
-                  }}
-                >
-                  {I18n.getLang(state.timeScheduleList.length ? 'sleepwakeschedule_empty_filtering_information_text' : 'timeschedule_overview_empty_information_text')}
-                </Text>
-              </View>
-              {!showScheduleList()
-                &&
-                  <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={() => navigateToEdit('add')}
-                      >
-                          <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#fff' }}>
-                            {I18n.getLang('timeschedule_overview_empty_button_add_text')}
-                          </Text>
-                      </TouchableOpacity>
-                  </View>
-              }
-            </View>
-          }
-        </ScrollView>
-      </View>
-    </Page>
-  )
-}
-
-const styles = StyleSheet.create({
-  content: {
-    // marginHorizontal: cx(20)
-    flex: 1,
-  },
-  categoryList: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginHorizontal: cx(24),
-  },
-  emptyListCon: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: cx(60),
-  },
-  emptyImage: {
-    width: cx(225),
-    height: cx(198),
-  },
-  emptyNoTime: {
-    fontSize: cx(14),
-    lineHeight: cx(20),
-    marginTop: cx(30),
-    width: '76%',
-    textAlign: 'center',
-  },
-  emptyTimeTip: {
-    fontSize: cx(12),
-    lineHeight: cx(17),
-    marginTop: cx(6),
-    width: '76%',
-    textAlign: 'center',
-  },
-})
-
-export default TimeSchedulePage
+import React, { useCallback, useEffect } from 'react'
+import { useRoute } from '@react-navigation/core'
+import Page from '@ledvance/base/src/components/Page'
+import Tag from '@ledvance/base/src/components/Tag'
+import { useDeviceInfo, useTimeSchedule } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { useNavigation } from '@react-navigation/native'
+import { NativeApi } from '@ledvance/base/src/api/native'
+import LdvScheduleItem from './LdvScheduleItem'
+import { showDialog } from '@ledvance/base/src/utils/common'
+import { useReactive } from 'ahooks'
+import { cloneDeep } from 'lodash'
+import { ui_biz_routerKey } from 'navigation/Routers'
+import { JudgeTimeScheduleProps } from './TimeScheduleBean'
+
+const { convertX: cx } = Utils.RatioUtils
+
+export type dpItem = {
+  label: string
+  value: string
+  dpId: string
+}
+
+export interface LightData {
+  singleActions?: {
+    enable: boolean
+    whiteLightSwitch: boolean
+    isColor: boolean
+    h: number
+    s: number
+    v: number
+    temperature: number
+    brightness: number
+    activeKey?: number
+    colors?: string[]
+    colorDiskActiveKey?: number
+  },
+  actionScene?: any
+  mixActions?: any
+  isManual: boolean
+}
+
+const MAXNUM = 30
+
+export interface TimeSchedulePageRouteParams extends JudgeTimeScheduleProps {
+  dps: dpItem[],
+  fantasyFeatureId?: string
+  lightData2dps?: (data: LightData) => any
+  dps2lightData?: (dps: any) => LightData
+}
+
+const TimeSchedulePage = () => {
+  const deviceInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const props = useRoute().params as TimeSchedulePageRouteParams
+  const { dps } = props
+  const state = useReactive({
+    timeScheduleList: [] as any[],
+    filterScheduleList: [] as any[],
+    filterTags: dps ? dps.reduce((pre, cur) => {
+      if (cur.dpId) {
+        pre[cur.dpId] = false
+      }
+      return pre
+    }, {}) : {},
+  })
+
+  const [, setTimeSchedule] = useTimeSchedule()
+
+  useEffect(() => {
+    getTimerScheduleList().then()
+  }, [])
+
+  useEffect(() => {
+    if (Object.values(state.filterTags).every(item => item) || Object.values(state.filterTags).every(item => !item)) {
+      state.filterScheduleList = cloneDeep(state.timeScheduleList)
+    } else {
+      const checkedTags = Object.keys(state.filterTags).filter(tag => state.filterTags[tag])
+      state.filterScheduleList = state.timeScheduleList.filter(item => checkedTags.every(tag => item.dps[tag] !== undefined))
+    }
+  }, [state.filterTags])
+
+  const navigateToEdit = useCallback((mode: 'add' | 'edit', scheduleItem?: any) => {
+    const path = ui_biz_routerKey.ui_biz_time_schedule_edit
+    navigation.navigate(path, {
+      mode,
+      name: path,
+      scheduleItem,
+      reloadData: getTimerScheduleList,
+      deleteDialog: (item: any) => {
+        return deleteDialog(item)
+      },
+      ...props,
+    })
+  }, [state.timeScheduleList])
+
+  const getTimerScheduleList = async () => {
+    // const res: any = await NativeApi.timerList(deviceInfo.devId)
+    const res: any = await NativeApi.getAllTaskTimer(deviceInfo.devId)
+    if (res.success && res.data) {
+      // 原生传过来的dps是json字符串。
+      const originList = res.data.map((item: any) => {
+        return {
+          aliasName: item.remark,
+          status: !!item.mStatus,
+          id: item.mTimerId,
+          groupId: item.mTimerId,
+          loops: item.mLoops,
+          date: item.mDate,
+          time: item.mTime,
+          isAppPush: item.isAppPush ? 1 : 0,
+          dps: JSON.parse(item.mValue),
+        }
+      })
+      state.timeScheduleList = originList
+      state.filterScheduleList = originList
+      setTimeSchedule(getScheduleRunning())
+    }
+  }
+
+  const itemOnValueChange = (item: any) => {
+    const value = {
+      ...item,
+      status: !item.status,
+    }
+
+    NativeApi.editTimer(deviceInfo.devId, value, res => {
+      if (res.result) {
+        const newList = state.timeScheduleList.map(mItem => {
+          return {
+            ...mItem,
+            status: mItem.id === item.id ? value.status : mItem.status,
+          }
+        })
+        state.timeScheduleList = newList
+        state.filterScheduleList = newList
+        setTimeSchedule(getScheduleRunning())
+      }
+    })
+  }
+
+
+  const onDelete = (item: any) => {
+    NativeApi.deleteTimer(deviceInfo.devId, item, res => {
+      if (res.result) {
+        const newList = state.timeScheduleList.filter(nItem => item.id !== nItem.id)
+        state.timeScheduleList = newList
+        state.filterScheduleList = newList
+        setTimeSchedule(getScheduleRunning())
+      }
+    })
+  }
+
+  const getScheduleRunning = useCallback(() => {
+    return !!state.filterScheduleList.find(item => !!item.status)
+  }, [state.filterScheduleList])
+
+  const changeFilter = useCallback((v: boolean, tag: string) => {
+    state.filterTags = {
+      ...state.filterTags,
+      [tag]: v,
+    }
+  }, [])
+
+  // 删除弹框
+  const deleteDialog = (item: any) => {
+    return new Promise(resolve => {
+      showDialog({
+        method: 'confirm',
+        title: I18n.getLang('cancel_dialog_delete_item_timeschedule_titel'),
+        subTitle: I18n.getLang('cancel_dialog_delete_item_timeschedule_description'),
+        onConfirm: (_, { close }) => {
+          onDelete(item)
+          close()
+          resolve(true)
+        },
+      })
+    })
+  }
+
+  const renderItem = ({ item }) => {
+    return (
+      <LdvScheduleItem
+        item={item}
+        tags={dps}
+        onEnableChange={itemOnValueChange}
+        onPress={(item) => navigateToEdit('edit', item)}
+        onLongPress={(item) => {
+          deleteDialog(item).then()
+        }}/>
+    )
+  }
+
+  const showTags = useCallback(() => {
+    return Object.values(state.filterTags).length > 1 && state.timeScheduleList.length > 0
+  }, [state.filterTags, state.timeScheduleList])
+
+  const showMaxNumTip = useCallback(() =>{
+    return state.timeScheduleList.length >= MAXNUM
+  }, [state.timeScheduleList.length])
+
+  const showScheduleList = useCallback(() => {
+    return !!state.filterScheduleList.length
+  }, [state.filterScheduleList])
+
+  const getLabelByDp = (dp: string) => {
+    const dpLabel = dps.reduce((pre, cur) => {
+      if (cur.dpId) {
+        pre[cur.dpId] = cur.label
+      }
+      return pre
+    }, {})
+    return dpLabel[dp]
+  }
+  return (
+    <Page
+      backText={deviceInfo.name}
+      onBackClick={navigation.goBack}
+      headlineText={I18n.getLang('timeschedule_overview_headline_text')}
+      headlineIcon={!showMaxNumTip() ? res.device_panel_schedule_add : undefined}
+      onHeadlineIconClick={() => {
+        navigateToEdit('add')
+      }}
+    >
+      <View style={styles.content}>
+        <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', alignItems: 'center'}}>
+            <Image style={{ width: cx(16), height: cx(16), tintColor: '#ff9500' }} source={res.ic_warning_amber} />
+            <Text>{I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}</Text>
+          </View>}
+          {showTags() && <View style={styles.categoryList}>
+            {(props.isCeilingLight ? [] : Object.keys(state.filterTags)).map(tag => {
+              return <Tag
+                key={tag}
+                text={getLabelByDp(tag)}
+                checked={state.filterTags[tag]}
+                onCheckedChange={(v) => changeFilter(v, tag)}
+                style={{ marginRight: cx(5) }}
+              />
+            })}
+          </View>}
+          {showScheduleList()
+            ?
+            <FlatList
+              data={state.filterScheduleList}
+              keyExtractor={(item: any) => item.id}
+              renderItem={renderItem}
+              ListFooterComponent={() => (<Spacer/>)}
+            />
+            :
+            <View style={styles.emptyListCon}>
+              <Image
+                style={styles.emptyImage}
+                source={{ uri: res.ldv_timer_empty }}
+                resizeMode="contain"
+              />
+              <View
+                style={{
+                  marginHorizontal: cx(24),
+                  flexDirection: 'row',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  marginTop: cx(28),
+                }}
+              >
+                <Image
+                  source={{ uri: res.device_panel_schedule_alert }}
+                  style={{ width: cx(16), height: cx(16) }}
+                />
+                <Text
+                  style={{
+                    color: '#000',
+                    fontSize: cx(12),
+                  }}
+                >
+                  {I18n.getLang(state.timeScheduleList.length ? 'sleepwakeschedule_empty_filtering_information_text' : 'timeschedule_overview_empty_information_text')}
+                </Text>
+              </View>
+              {!showScheduleList()
+                &&
+                  <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={() => navigateToEdit('add')}
+                      >
+                          <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#fff' }}>
+                            {I18n.getLang('timeschedule_overview_empty_button_add_text')}
+                          </Text>
+                      </TouchableOpacity>
+                  </View>
+              }
+            </View>
+          }
+        </ScrollView>
+      </View>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  content: {
+    // marginHorizontal: cx(20)
+    flex: 1,
+  },
+  categoryList: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: cx(24),
+  },
+  emptyListCon: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: cx(60),
+  },
+  emptyImage: {
+    width: cx(225),
+    height: cx(198),
+  },
+  emptyNoTime: {
+    fontSize: cx(14),
+    lineHeight: cx(20),
+    marginTop: cx(30),
+    width: '76%',
+    textAlign: 'center',
+  },
+  emptyTimeTip: {
+    fontSize: cx(12),
+    lineHeight: cx(17),
+    marginTop: cx(6),
+    width: '76%',
+    textAlign: 'center',
+  },
+})
+
+export default TimeSchedulePage