@ledvance/ui-biz-bundle 1.1.61 → 1.1.63

package/src/newModules/randomTime/RandomTimePage.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react'
+import React, { 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, useRoute } from '@react-navigation/core'
+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'
@@ -15,6 +15,10 @@ 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 { parseTimer } = Utils.TimeUtils
@@ -29,30 +33,37 @@ export interface RandomTimePageParams {
   }
   isPlug?: boolean
   showTags?: boolean
-  applyDps: {
-    label: string
-    value: string
-  }[]
-  isSupportColor: boolean
-  isSupportTemperature: boolean
-  isSupportBrightness: boolean
+  applyForList: ApplyForItem[]
+  isSupportColor?: boolean
+  isSupportTemperature?: boolean
+  isSupportBrightness?: boolean
 }
 
 const RandomTimePage = () => {
   const navigation = useNavigation()
   const devInfo = useDeviceInfo()
-  const params = useRoute().params as RandomTimePageParams
+  const params = useParams<RandomTimePageParams>()
   const is24Hour = useSystemTimeFormate()
   const [randomTime, setRandomTime] = useRandomTime(params.randomTimeDpCode, params.isPlug)
   const state = useReactive({
     loading: false,
+    originList: cloneDeep(randomTime),
     randomTimeList: cloneDeep(randomTime),
+    checkTags: params.applyForList.map(v => ({ ...v, enable: false }))
   })
 
   useUpdateEffect(() => {
-    state.randomTimeList = cloneDeep(randomTime)
+    state.originList = cloneDeep(randomTime)
   }, [randomTime])
 
+  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.randomTimeList = cloneDeep(checkedList)
+  }, [JSON.stringify(state.checkTags), JSON.stringify(state.originList)])
+
   const navigateToEdit = useCallback((mode: 'add' | 'edit', scheduleItem?: RandomTimerUiItem) => {
     navigation.navigate(ui_biz_routerKey.ui_biz_random_time_edit_new, {
       ...params,
@@ -63,19 +74,40 @@ const RandomTimePage = () => {
   }, [])
 
   const showMaxNumTip = useCallback(() => {
-    return state.randomTimeList.length >= MAX_NUM
-  }, [state.randomTimeList.length])
+    return state.originList.length >= MAX_NUM
+  }, [state.originList.length])
 
   const onPost = useCallback(async (mode: 'add' | 'edit' | 'del', randomTime: RandomTimerUiItem) => {
-    const cloneRandomTime = cloneDeep(state.randomTimeList)
-    const idx = state.randomTimeList.findIndex(f => f.index === randomTime.index)
+    const cloneRandomTime = cloneDeep(state.originList)
+    const idx = state.originList.findIndex(f => f.index === randomTime.index)
     if (mode === 'edit') {
       cloneRandomTime.splice(idx, 1, randomTime)
     }
     if (mode === 'del') cloneRandomTime.splice(idx, 1)
-    const newRandomTimeList = mode === 'add' ? [...state.randomTimeList, randomTime] : cloneRandomTime
-    return setRandomTime(newRandomTimeList)
-  }, [state.randomTimeList])
+    const newRandomTimeList = mode === 'add' ? [...state.originList, randomTime] : cloneRandomTime
+    const res = await setRandomTime(newRandomTimeList)
+    if(res.success){
+      state.originList = cloneDeep(newRandomTimeList)
+    }
+    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
@@ -88,71 +120,74 @@ const RandomTimePage = () => {
         navigateToEdit('add', newRandomTime())
       }}
     >
-      {state.randomTimeList.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('randomtimecycle_warning_max_number_text')}</Text>
-          </View>}
-          <FlatList
-            data={state.randomTimeList}
-            renderItem={({ item }) => (
-              <RandomTimeCard
-                is24Hour={is24Hour}
-                randomTime={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' }}>
+      <ScrollView nestedScrollEnabled={true}>
+        <Text style={{
+          color: '#000',
+          marginLeft: cx(24),
+        }}>{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('randomtimecycle_warning_max_number_text')}
+          textStyle={{fontSize: cx(12)}}
+        />}
+        {params.showTags && !!state.originList.length && showTags}
+        {state.randomTimeList.length > 0 ? <FlatList
+          data={state.randomTimeList}
+          renderItem={({ item }) => (
+            <RandomTimeCard
+              is24Hour={is24Hour}
+              randomTime={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
-              source={{ uri: res.device_panel_schedule_alert }}
-              style={{ width: cx(16), height: cx(16) }}
+              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 ? 'timeschedule_overview_empty_information_text' : 'sleepwakeschedule_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' }}
             />
-            <Text style={{ color: '#000', fontSize: cx(12) }}>
-              {I18n.getLang('randomtimecycle_empty_information_text')}
-            </Text>
-          </View>
-          <Spacer />
-          <TextButton
-            text={I18n.getLang('randomtimecycle_empty_bttn_text')}
-            style={{
-              backgroundColor: '#f60',
-              borderRadius: cx(6),
-              paddingVertical: cx(12),
-              paddingHorizontal: cx(24),
-            }}
-            textStyle={{ color: '#fff' }}
-            onPress={() => {
-              navigateToEdit('add', newRandomTime())
-            }} />
-        </View>
-      }
+            <Spacer />
+            {!state.originList.length && <TextButton
+              text={I18n.getLang('randomtimecycle_empty_bttn_text')}
+              style={{
+                backgroundColor: '#f60',
+                borderRadius: cx(6),
+                paddingVertical: cx(12),
+                paddingHorizontal: cx(24),
+              }}
+              textStyle={{ color: '#fff' }}
+              onPress={() => {
+                navigateToEdit('add', newRandomTime())
+              }} />}
+          </View>}
+      </ScrollView>
     </Page>
   )
 }
@@ -160,10 +195,12 @@ const RandomTimePage = () => {
 const RandomTimeCard = (props: {
   is24Hour: boolean
   randomTime: RandomTimerUiItem,
+  tags: ApplyForItem[]
+  showTags?: boolean,
   onSwitch: (enable: boolean) => void,
   onPress: () => void
 }) => {
-  const { is24Hour, randomTime, onSwitch, onPress } = props
+  const { is24Hour, randomTime, tags, showTags, onSwitch, onPress } = props
   return (
     <Card style={styles.randomTimingCard} onPress={onPress}>
       <Spacer height={cx(16)} />
@@ -179,7 +216,14 @@ const RandomTimeCard = (props: {
       <Text style={styles.loopText}>{loopText(randomTime.weeks, parseTimer(randomTime.startTime * 60))}</Text>
       <Spacer height={cx(5)} />
       <Text style={styles.loopText}>{randomTime.name}</Text>
-      <Spacer />
+      <Spacer height={cx(showTags ? 5 : 20)} />
+      {showTags && <View style={styles.tagContainer}>
+        <View style={styles.tag}>
+          <Text style={styles.tagTitle}>
+            {tags[randomTime.channel || 0]?.key}
+          </Text>
+        </View>
+      </View>}
     </Card>
   )
 }
@@ -192,7 +236,7 @@ const newRandomTime = () => {
     weeks: [0, 0, 0, 0, 0, 0, 0],
     startTime: startTime,
     endTime: startTime + 60,
-    channel: 1,
+    channel: 0,
     color: {
       h: 0,
       s: 100,
@@ -225,6 +269,30 @@ const styles = StyleSheet.create({
     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 RandomTimePage

package/src/newModules/timeSchedule/Interface.ts

@@ -1,3 +1,4 @@
+import I18n from "@ledvance/base/src/i18n";
 import { MoodInfo, MoodUIInfo } from "../mood/Interface";
 
 export interface Timer {
@@ -26,6 +27,8 @@ export interface HSV {
 export type Category = 'light' | 'socket' | 'fan' | 'mainLight' | 'secondaryLight'
 
 export interface ApplyForItem {
+  name?: string 
+  index?: number 
   key: string;
   dp: string;
   type: Category;
@@ -40,6 +43,8 @@ interface judgmentSupport {
   isStripLight?: boolean;
   isStringLight?: boolean;
   isMixLight?: boolean;
+  isFanLight?: boolean;
+  isUVCFan?: boolean;
 }
 
 export interface ManualSettingProps extends judgmentSupport {
@@ -53,9 +58,12 @@ export interface ManualSettingProps extends judgmentSupport {
 
 export enum DeviceType {
   Plug = 'Plug',
+  PowerStrip = 'PowerStrip',
   LightSource = 'lightSource',
   MixLight = 'mixLight',
   StripLight = 'stripLight',
+  CeilingLight = 'ceilingLight',
+  FanLight = 'fanLight'
 }
 // export type DeviceType = 'LightSource' | 'CeilingLight' | 'StringLight' | 'StripLight' | 'MixLight';
 
@@ -81,19 +89,32 @@ export interface MixLightData extends DeviceData {
 export interface StripLightData extends DeviceData {
   colors: string[];
   activeKey: number;
+  colorDiskActiveKey: number
+}
+
+export interface CeilingLightData extends DeviceData, StripLightData, MixLightData {
+}
+
+export interface FanLightData extends DeviceData {
+  fanSpeed: number 
+  direction: 'forward' | 'reverse'
+  mode: 'nature' | 'normal'
+  disinfect: boolean
 }
 
 export type ComponentConfig =
-  | { type: DeviceType.Plug; deviceData: PlugData }
   | { type: DeviceType.LightSource; deviceData: DeviceData }
   | { type: DeviceType.MixLight; deviceData: MixLightData }
-  | { type: DeviceType.StripLight; deviceData: StripLightData };
+  | { type: DeviceType.StripLight; deviceData: StripLightData }
+  | { type: DeviceType.CeilingLight; deviceData: CeilingLightData }
+  | { type: DeviceType.FanLight; deviceData: FanLightData }
+  | { type: DeviceType.PowerStrip; deviceData: DeviceData}
 
 export interface TimeScheduleDetailState {
   timeSchedule: Timer;
   dps: Record<string, any>;
   isManual: boolean;
-  initSelectedSkill: ApplyForItem[];
+  initSelectedSkill: ApplyForItem[],
   selectedSkill: ApplyForItem[];
   unSelectedSkill: ApplyForItem[];
   loading: boolean;
@@ -104,9 +125,18 @@ export interface TimeScheduleDetailState {
   timerId: any;
   moodName: string;
 }
-
 export interface DeviceStateType {
   deviceData: ComponentConfig
   mood?: MoodInfo
   isManual: boolean
 }
+
+export const directOptions = [
+  {label: I18n.getLang('ceiling_fan_tile_uvc_fan_direction_opt_1'), value: 'forward'},
+  {label: I18n.getLang('ceiling_fan_tile_uvc_fan_direction_opt_2'), value: 'reverse'}
+]
+
+export const modeOptions = [
+  {label: I18n.getLang('ceiling_fan_tile_uvc_fan_mode_opt_1'), value: 'normal'},
+  {label: I18n.getLang('ceiling_fan_tile_uvc_fan_mode_opt_2'), value: 'nature'},
+]