@ledvance/group-ui-biz-bundle 1.0.37 → 1.0.39

package/src/modules/biorhythm/BiorhythmPage.tsx

@@ -0,0 +1,706 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { FlatList, Image, Linking, ScrollView, Switch, Text, TouchableOpacity, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import TimeCircular from './circular/TimeCircular'
+import { useDebounceFn, useReactive, useUpdateEffect } from 'ahooks'
+import {
+  BiorhythmBean,
+  BiorhythmGradientType,
+  colorTemperatureValue,
+  getDefBiorhythmUIState,
+  Plan,
+} from './BiorhythmBean'
+import { Modal, Utils, Toast } from 'tuya-panel-kit'
+import { sortBy, cloneDeep } from 'lodash'
+import iconList from './iconListData'
+import pIdList from './pIdList'
+import {
+  useDeviceId,
+  useDeviceInfo,
+  useGroupDevices,
+} from '@ledvance/base/src/models/modules/NativePropsSlice'
+import I18n from '@ledvance/base/src/i18n'
+import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
+import res from '@ledvance/base/src/res'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import BiologicalRes from './res/BiologicalRes'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import { NativeApi } from '@ledvance/base/src/api/native'
+import { setDataSource } from '@ledvance/base/src/components/weekSelect'
+import { BiorhythmEditPageParams } from './BiorhythmDetailPage'
+import { useBiorhythm } from './BiorhythmActions'
+import { showDialog as showCommonDialog } from '@ledvance/base/src/utils/common'
+import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList'
+import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import InfoText from '@ledvance/base/src/components/InfoText'
+
+const cx = Utils.RatioUtils.convertX
+const width = Utils.RatioUtils.width
+
+
+interface UIState extends BiorhythmBean {
+  showGradientTypeSelectModal: boolean;
+  flag: symbol;
+  weekString: string,
+  timeSchedule: any[]
+  loading: boolean
+}
+
+export interface BiorhythmPageParams {
+  // biorhythmDp: string
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+  isMixLight: boolean
+}
+
+const BiorhythmPage = () => {
+  const navigation = useNavigation()
+  const params = useParams<BiorhythmPageParams>()
+  const [biorhythm, setBiorhythm] = useBiorhythm()
+  const deviceId = useDeviceId()
+  const deviceInfo = useDeviceInfo()
+  const [groupDevices] = useGroupDevices()
+  const { productId } = deviceInfo
+  const devicesJudge = pIdList.some(val => val === productId)
+  
+  const state = useReactive<UIState>({
+    ...cloneDeep(biorhythm),
+    showGradientTypeSelectModal: false,
+    flag: Symbol(),
+    weekString: '',
+    timeSchedule: [],
+    loading: false
+  })
+
+  const showGradientTypeSelectModal = useCallback((show: boolean) => {
+    state.showGradientTypeSelectModal = show
+  }, [])
+
+  const onPlanEdited = useCallback((isAdd: boolean, newPlan: Plan) => {
+    if (isAdd) {
+      state.planList.push(newPlan)
+      state.planList = sortBy(state.planList, p => p.startTime)
+    } else {
+      state.planList = state.planList.map(plan => (plan.id === newPlan.id ? newPlan : plan))
+    }
+    state.flag = Symbol()
+  }, [])
+
+  const onPlanDelete = useCallback((id: number) => {
+    state.planList = state.planList.filter(plan => plan.id !== id)
+    state.flag = Symbol()
+  }, [])
+
+  const requestSetBiorhythm: () => void = useCallback(async () => {
+    const planList = state.planList?.map(item => { return { ...item, icon: `${item.icon}` } })
+      .sort((a, b) => {
+        const timeA = a.startTime.split(":");
+        const timeB = b.startTime.split(":");
+        // 比较小时
+        if (parseInt(timeA[0]) !== parseInt(timeB[0])) {
+          return parseInt(timeA[0]) - parseInt(timeB[0]);
+        }
+        // 如果小时相等，比较分钟
+        return parseInt(timeA[1]) - parseInt(timeB[1]);
+      });
+    // await userOperation(deviceId, false)
+    const res = await setBiorhythm(cloneDeep({ ...state, planList }))
+    state.loading = false
+    console.log('设置生物节律res', res)
+  }, [])
+
+  const setTimer = value => {
+    switch (value) {
+      case 'Sunrise':
+        return I18n.getLang('bio_ryhthm_default_field_text')
+      case 'Wake Up':
+        return I18n.getLang('bio_ryhthm_default_field_text2')
+      case 'Sunlight':
+        return I18n.getLang('bio_ryhthm_default_field_text3')
+      case 'Comfortable':
+        return I18n.getLang('bio_ryhthm_default_field_text4')
+      case 'Night light':
+        return I18n.getLang('bio_ryhthm_default_field_text5')
+      default:
+        return value
+    }
+  }
+
+  const minimumEnable = (plan: Plan) => {
+    const [h, m] = plan.startTime.split(':').map(str => parseInt(str, 10))
+    const min = h * 60 + m
+    const minutes = state.planList
+      .filter(item => item.id !== plan.id && item.enable)
+      .map(item => {
+        const [hour, minute] = item.startTime.split(':').map(str => parseInt(str, 10))
+        return hour * 60 + minute
+      })
+    let enable = false
+    minutes.forEach(item => {
+      const diff = Math.abs(min - item)
+      if (diff < 15) enable = true
+    })
+    return enable
+  }
+
+  const showDeleteBtn = useMemo(() => {
+    return state.planList?.length > 1
+  }, [state.planList?.length])
+
+  const { run } = useDebounceFn(requestSetBiorhythm, { wait: 200 })
+
+  useUpdateEffect(() => {
+    run()
+  }, [state.flag])
+
+  const replaceImg = (img) => {
+    const item = iconList?.find(val => val.id === Number(img))
+    switch (img) {
+      case 'rhythm_icon1':
+      case '31':
+        return { icon: BiologicalRes.biorhythom_Icon1, iconId: 1 }
+      case 'rhythm_icon2':
+      case '33':
+        return { icon: BiologicalRes.biorhythom_Icon5, iconId: 5 }
+      case 'rhythm_icon3':
+      case '35':
+        return { icon: BiologicalRes.biorhythom_Icon2, iconId: 2 }
+      case 'rhythm_icon4':
+      case '32':
+        return { icon: BiologicalRes.biorhythom_Icon9, iconId: 9 }
+      case 'rhythm_icon12':
+      case '39':
+        return { icon: BiologicalRes.biorhythom_Icon3, iconId: 3 }
+      default:
+        return { icon: item?.icon, iconId: item?.id }
+    }
+  }
+
+  useUpdateEffect(() => {
+    console.log('Redux 生物节律数据更新', biorhythm)
+    const cloneBiorhym = cloneDeep(biorhythm)
+    const planList = cloneBiorhym.planList?.map(item => {
+      return {
+        ...item,
+        icon: replaceImg(item?.iconId || item?.icon)?.icon,
+        iconId: replaceImg(item?.iconId || item?.icon)?.iconId,
+      }
+    })
+    state.enable = cloneBiorhym.enable
+    state.gradient = cloneBiorhym.gradient
+    state.repeatPeriod = cloneBiorhym.repeatPeriod
+    state.planList = planList
+  }, [JSON.stringify(biorhythm)])
+
+  useEffect(() =>{
+    const weeks: string[] = setDataSource(
+      biorhythm.repeatPeriod.map(item => {
+        return item?.enabled ? 1 : 0
+      })).filter(item => item.enabled)
+      .map(item => item.title)
+
+    if (weeks.length > 0) {
+      // / more than one
+      if (weeks.length === 7) {
+        // / seven
+        state.weekString = I18n.getLang('motion_detection_time_schedule_notifications_field_weekdays_text4')
+      } else {
+        state.weekString = I18n.formatValue('timeschedule_add_schedule_text', weeks.join(', '))
+      }
+    } else {
+      // / zero
+      state.weekString = I18n.getLang('motion_detection_time_schedule_notifications_field_weekdays_text2')
+    }
+  }, [JSON.stringify(biorhythm)])
+
+
+  const setImg = (id) => {
+    const imgIcon = iconList?.find(val => val?.id === Number(id))?.icon
+    return imgIcon || ''
+  }
+
+  const openLink = () => {
+    const url = I18n.getLang('biorhythm_product_link') // 需要打开的链接
+    Linking.openURL(url).catch((error) => console.error('无法打开链接:', error))
+  }
+
+  const sunHomeText = string => {
+    const text = string.split('SUN@HOME')
+    return text?.length === 1 && <Text style={{ fontSize: cx(14) }}>{text[0]}</Text> ||
+      <Text style={{
+        fontSize: cx(14),
+        flexDirection: 'row',
+      }}>
+        <Text>{text[0]}</Text>
+        <Text onPress={openLink}
+          style={{
+            fontFamily: 'helvetica_neue_lt_std_roman',
+            color: '#ff6600',
+            textDecorationLine: 'underline',
+            flexWrap: 'wrap',
+          }}>SUN@HOME</Text>
+        <Text>{text[1]}</Text>
+      </Text>
+  }
+
+  const randomIcon = () => {
+    const iconIdList = state.planList?.map(item => {
+      return item.iconId
+    })
+    const allIcon = iconList?.map(item => {
+      return item.id
+    })
+    const availableChart = allIcon.filter((element) => !iconIdList.includes(element))
+    const randomIndex = Math.floor(Math.random() * availableChart.length)
+    return availableChart[randomIndex]
+  }
+
+  const reloadData = async () => {
+    const res: any = await NativeApi.getAllTaskTimer(deviceId)
+    console.log('reload data', res)
+    if (res.success && res.data) {
+      // 原生传过来的dps是json字符串。
+      if (Array.isArray(res.data) && res.data.length) {
+        state.timeSchedule = res.data
+      }
+    }
+  }
+
+  useEffect(() => {
+    reloadData().then()
+  }, [])
+
+  return (
+    <>
+      <View style={{ flex: 1, flexDirection: 'column' }}>
+        <LDVTopBar
+          title={deviceInfo.name}
+          onBackPress={() => {
+            navigation.goBack()
+          }}
+        />
+        <ScrollView nestedScrollEnabled={true} style={{ position: 'relative' }}>
+          <View
+            style={{
+              height: cx(60),
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginHorizontal: cx(24),
+            }}
+          >
+            <Text
+              style={{
+                color: '#FF6600',
+                fontSize: cx(24),
+                fontFamily: 'helvetica_neue_lt_std_roman',
+              }}
+            >
+              {I18n.getLang('add_new_trigger_time_system_back_text')}
+            </Text>
+            <Switch
+              value={state.enable}
+              thumbColor={'#f60'}
+              trackColor={{ false: '#00000026', true: '#ff660036' }}
+              onValueChange={async enable => {
+                // if (enable && (enableTimeScheduleStatus)) return showDialog(enable)
+                state.loading = true
+                state.enable = enable
+                state.flag = Symbol()
+              }}
+            />
+          </View>
+          <View style={{ marginHorizontal: cx(24) }}>
+            {sunHomeText(I18n.getLang(devicesJudge ? 'bio_ryhthm_default_description_text' : 'bio_ryhthm_non_sun_home_products_description_text'))}
+          </View>
+          <View style={{ height: cx(10) }} />
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginHorizontal: cx(24),
+            }}
+          >
+            {state.repeatPeriod.map((period, idx) => {
+              return (
+                <TouchableOpacity
+                  key={period.title}
+                  onPress={() => {
+                    state.repeatPeriod = state.repeatPeriod.map((period, index) => {
+                      if(idx === index){
+                        return {
+                          ...period,
+                          enabled: !period.enabled
+                        }
+                      }
+                      return period
+                    })
+                    // period.enabled = !period.enabled
+                    state.flag = Symbol()
+                  }}
+                >
+                  <View
+                    style={{
+                      width: cx(40),
+                      height: cx(40),
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      borderRadius: cx(20),
+                      backgroundColor: period.enabled ? '#ffe0d4' : '#fff',
+                      borderWidth: cx(1),
+                      borderColor: '#f60',
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: '#FF6600',
+                        textAlign: 'center',
+                      }}
+                    >
+                      {period.title}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              )
+            })}
+          </View>
+          <View style={{ marginHorizontal: cx(24), marginTop: cx(20) }}>
+            <Text>{state.weekString}</Text>
+          </View>
+          <View style={{ marginHorizontal: cx(24), marginTop: cx(16) }}>
+            <Text>
+              {I18n.getLang('bio_ryhthm_default_selectionfield_topic_text')}
+            </Text>
+            <TouchableOpacity
+              onPress={() => {
+                showGradientTypeSelectModal(true)
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  borderRadius: cx(4),
+                  backgroundColor: '#f6f6f6',
+                  alignItems: 'center',
+                  flex: 1,
+                  height: cx(44),
+                  borderBottomWidth: cx(1),
+                  borderBottomColor: '#cbcbcb',
+                }}
+              >
+                <Text style={{
+                  fontSize: cx(16),
+                  color: '#000',
+                  fontFamily: 'helvetica_neue_lt_std_roman',
+                  paddingLeft: cx(16),
+                }}>
+                  {
+                    I18n.getLang(
+                      state.gradient === BiorhythmGradientType.DirectGradient
+                        ? 'add_new_dynamic_mood_color_changing_mode_value2'
+                        : 'add_new_dynamic_mood_color_changing_mode_value',
+                    )
+                  }
+
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+          <View style={{ height: cx(20) }} />
+          <TimeCircular
+            planEdit={true}
+            planList={state.planList}
+            onPanMoved={(id, time) => {
+              state.planList = state.planList.map(plan => {
+                return {
+                  ...plan,
+                  startTime: plan.id === id ? time : plan.startTime,
+                }
+              })
+              state.flag = Symbol()
+            }}
+            replaceStatus={devicesJudge}
+            gradient={state.gradient === BiorhythmGradientType.DirectGradient}
+            isSupportTemperature={!params.isSupportTemperature} />
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginHorizontal: cx(24),
+              marginBottom: cx(-8),
+              marginTop: cx(26),
+            }}>
+            {state.planList.length === 8 && <View
+              style={{ marginVertical: cx(10), flexDirection: 'row', alignItems: 'center', width: width - cx(48) }}>
+              <Image style={{ width: cx(16), height: cx(16), tintColor: '#ff9500' }} source={res.ic_warning_amber} />
+              <Text
+                style={{
+                  flexWrap: 'wrap',
+                  fontSize: cx(12),
+                }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
+            </View>}
+            {state.planList.length < 8 &&
+              <>
+                <Text
+                  style={{
+                    fontSize: cx(16),
+                    fontWeight: 'bold',
+                    color: 'rgb(0,0,0)',
+                  }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
+                <TouchableOpacity
+                  onPress={() => {
+                    const ids: number[] = state.planList.map(p => p.id)
+                    const newPlan: Plan = {
+                      id: Math.max(...ids) + 1,
+                      icon: res.rhythm_icon1,
+                      startTime: '00:00',
+                      name: '',
+                      colorTemperature: 0,
+                      brightness: 100,
+                      action: [
+                        {
+                          uri: 'model/attribute/set/LightCtrl/ColorTemperature',
+                          startValue: `${colorTemperatureValue(0)}`,
+                        },
+                        {
+                          uri: 'model/attribute/set/LightCtrl/Brightness',
+                          startValue: '100',
+                        },
+                      ],
+                      enable: true,
+                      iconId: randomIcon(),
+                    }
+                    const editPageParams: BiorhythmEditPageParams = {
+                      planData: newPlan,
+                      isAdd: true,
+                      onPlanEdited,
+                      onPlanDelete,
+                      minimumEnable,
+                      iconIdList: state.planList?.map(item => {
+                        return item.iconId
+                      }),
+                      isMixLight: params.isMixLight,
+                      isSupportTemperature: params.isSupportTemperature,
+                      isSupportBrightness: params.isSupportBrightness,
+                      showDeleteBtn
+                    }
+                    navigation.navigate(ui_biz_routerKey.group_ui_biz_biological_detail, editPageParams)
+                  }}>
+                  <Image source={BiologicalRes.biorhythom_add} style={{ height: cx(24), width: cx(24) }} />
+                </TouchableOpacity>
+              </>
+            }
+          </View>
+          <FlatList
+            data={state.planList}
+            style={{
+              flex: 1,
+              marginTop: cx(12),
+            }}
+            nestedScrollEnabled={true}
+            renderItem={({ item }) => {
+              const type = typeof item?.icon === 'string'
+              const bgColor = item?.brightness === 0 ? '#000' : !params.isSupportTemperature && cctToColor(1) || cctToColor(item.colorTemperature.toFixed(), item?.brightness)
+              return (
+                <View
+                  style={{
+                    height: cx(118),
+                    backgroundColor: 'white',
+                    elevation: cx(7),
+                    shadowColor: '#000000',
+                    shadowOpacity: 0.2,
+                    shadowRadius: cx(7),
+                    shadowOffset: {
+                      width: 0,
+                      height: cx(4),
+                    },
+                    borderRadius: cx(10),
+                    marginHorizontal: cx(24),
+                    marginVertical: cx(8),
+                  }}
+                >
+                  <TouchableOpacity
+                    style={{ flex: 1 }}
+                    onPress={() => {
+                      const editPageParams: BiorhythmEditPageParams = {
+                        planData: {
+                          ...item,
+                          name: setTimer(item?.name)
+                        },
+                        isAdd: false,
+                        onPlanEdited,
+                        onPlanDelete,
+                        minimumEnable,
+                        iconIdList: state.planList?.map(item => {
+                          return item.iconId
+                        }),
+                        isMixLight: params.isMixLight,
+                        isSupportTemperature: params.isSupportTemperature,
+                        isSupportBrightness: params.isSupportBrightness,
+                        showDeleteBtn
+                      }
+                      navigation.navigate(ui_biz_routerKey.group_ui_biz_biological_detail, editPageParams)
+                    }}
+                  >
+                    <View
+                      style={{
+                        flex: 1,
+                        flexDirection: 'column',
+                      }}
+                    >
+                      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: cx(16) }}>
+                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                          <Image
+                            source={setImg(item?.iconId) || type && { uri: item?.icon } || item?.icon}
+                            style={{
+                              width: cx(24),
+                              height: cx(24),
+                              marginStart: cx(10),
+                              marginRight: cx(6),
+                              tintColor: '#474e5d',
+                            }}
+                          />
+                          <Text
+                            style={{
+                              fontSize: cx(16),
+                              color: '#000',
+                              fontFamily: 'helvetica_neue_lt_std_roman',
+                            }}
+                          >
+                            {item.startTime}
+                          </Text>
+                        </View>
+                        <Switch
+                          value={item.enable}
+                          thumbColor={'#f60'}
+                          trackColor={{ false: '#00000026', true: '#ff660036' }}
+                          onValueChange={e => {
+                            item.enable = e
+                            state.flag = Symbol()
+                          }}
+                          style={{ marginRight: cx(10) }}
+                        />
+                      </View>
+                      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
+                        <Text
+                          style={{
+                            fontSize: cx(12),
+                            color: '#666',
+                            fontFamily: 'helvetica_neue_lt_std_roman',
+                            paddingLeft: cx(20),
+                          }}
+                        >
+                          {setTimer(item?.name)}
+                        </Text>
+                      </View>
+                      <View
+                        style={{
+                          width: cx(295),
+                          height: cx(24),
+                          backgroundColor: bgColor,
+                          marginLeft: cx(20),
+                          marginTop: cx(-5),
+                          marginBottom: cx(24),
+                          borderRadius: cx(8),
+                        }} />
+                    </View>
+                  </TouchableOpacity>
+                </View>
+              )
+            }}
+            keyExtractor={item => `${item.id}`}
+            ListFooterComponent={() => {
+              return (
+                <View style={{marginHorizontal: cx(24)}}>
+                  <Spacer height={cx(16)}/>
+                  <ApplyForDeviceList 
+                    devices={cloneDeep(groupDevices)}
+                  />
+                  <Spacer height={cx(5)}/>
+                  <InfoText 
+                    icon={res.ic_info}
+                    text={I18n.getLang('group_feature_biological_rhythm_applyfor_information')}
+                  />
+                  <Spacer height={cx(16)}/>
+                  <DeleteButton 
+                    text={I18n.getLang('bio_ryhthm_default_button_reset_text')}
+                    onPress={() => {
+                      showCommonDialog({
+                        method: 'confirm',
+                        title: I18n.getLang('bio_ryhthm_reset_description_text'),
+                        onConfirm: (_, { close }) => {
+                          const defBiorhythmUIState = getDefBiorhythmUIState()
+                          state.enable = defBiorhythmUIState.enable
+                          state.gradient = defBiorhythmUIState.gradient
+                          state.repeatPeriod = defBiorhythmUIState.repeatPeriod
+                          state.planList = defBiorhythmUIState.planList
+                          state.flag = Symbol()
+                          close()
+                        }
+                      })
+                    }}
+                  />
+                  <Spacer />
+                </View>
+              ) || <></>
+            }}
+          />
+          {!state.enable && (
+            <View
+              style={{
+                backgroundColor: 'rgba(0,0,0,.5)',
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
+                top: cx(45),
+                zIndex: 999,
+              }}
+            />
+          )}
+        </ScrollView>
+      </View>
+      <Modal.List
+        type={'radio'}
+        visible={state.showGradientTypeSelectModal}
+        value={state.gradient}
+        dataSource={[
+          {
+            title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_value'),
+            key: '0',
+            value: BiorhythmGradientType.EntireGradient,
+          },
+          {
+            title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_value2'),
+            key: '1',
+            value: BiorhythmGradientType.DirectGradient,
+          },
+        ]}
+        title={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
+        onMaskPress={() => {
+          showGradientTypeSelectModal(false)
+        }}
+        onCancel={() => {
+          showGradientTypeSelectModal(false)
+        }}
+        cancelText={I18n.getLang('auto_scan_system_cancel')}
+        confirmText={I18n.getLang('auto_scan_system_wifi_confirm')}
+        onConfirm={(item: BiorhythmGradientType) => {
+          state.gradient = item
+          state.flag = Symbol()
+          showGradientTypeSelectModal(false)
+        }}
+      />
+      <Toast.Loading
+        show={!!state.loading}
+        onFinish={() => {
+
+        }} />
+    </>
+  )
+}
+
+export default BiorhythmPage
+
+