@ledvance/group-ui-biz-bundle 1.0.46 → 1.0.48

package/src/modules/biorhythm/BiorhythmPage.tsx

@@ -10,7 +10,7 @@ import {
   getDefBiorhythmUIState,
   Plan,
 } from './BiorhythmBean'
-import { Modal, Utils, Toast } from 'tuya-panel-kit'
+import { Modal, Utils } from 'tuya-panel-kit'
 import { sortBy, cloneDeep } from 'lodash'
 import iconList from './iconListData'
 import pIdList from './pIdList'
@@ -19,7 +19,6 @@ import {
   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'
@@ -29,6 +28,7 @@ import { BiorhythmEditPageParams } from './BiorhythmDetailPage'
 import { useBiorhythm } from './BiorhythmActions'
 import { showDialog as showCommonDialog, showDialog } from '@ledvance/base/src/utils/common'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import Page from '@ledvance/base/src/components/Page'
 import Spacer from '@ledvance/base/src/components/Spacer'
 import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList'
 import DeleteButton from '@ledvance/base/src/components/DeleteButton'
@@ -60,7 +60,7 @@ const BiorhythmPage = () => {
   const [groupDevices] = useGroupDevices()
   const { productId } = deviceInfo
   const devicesJudge = pIdList.some(val => val === productId)
-  
+
   const state = useReactive<UIState>({
     ...cloneDeep(biorhythm),
     showGradientTypeSelectModal: false,
@@ -88,19 +88,10 @@ const BiorhythmPage = () => {
     state.flag = Symbol()
   }, [])
 
-  const requestSetBiorhythm: () => void = useCallback(async () => {
+  const requestSetBiorhythm = useCallback(async () => {
+    state.loading = true
     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)
+      .sort((a, b) => a.time - b.time);
     const res = await setBiorhythm(cloneDeep({ ...state, planList }))
     state.loading = false
     console.log('设置生物节律res', res)
@@ -123,28 +114,20 @@ const BiorhythmPage = () => {
     }
   }
 
-  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
-      })
+  const minimumEnable = useCallback((plan: Plan) => {
     let enable = false
-    minutes.forEach(item => {
-      const diff = Math.abs(min - item)
+    state.planList.filter(p => p.index !== plan.id).forEach(item => {
+      const diff = Math.abs(plan.time - item.time)
       if (diff < 15) enable = true
     })
     return enable
-  }
+  }, [state.planList])
 
   const showDeleteBtn = useMemo(() => {
     return state.planList?.length > 1
   }, [state.planList?.length])
 
-  const { run } = useDebounceFn(requestSetBiorhythm, { wait: 200 })
+  const { run } = useDebounceFn(requestSetBiorhythm, { wait: 300 })
 
   useUpdateEffect(() => {
     run()
@@ -189,7 +172,7 @@ const BiorhythmPage = () => {
     state.planList = planList
   }, [JSON.stringify(biorhythm)])
 
-  useEffect(() =>{
+  useEffect(() => {
     const weeks: string[] = setDataSource(
       biorhythm.repeatPeriod.map(item => {
         return item?.enabled ? 1 : 0
@@ -253,275 +236,194 @@ const BiorhythmPage = () => {
   }
 
   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
+    <Page
+      backText={deviceInfo.name}
+      onBackClick={navigation.goBack}
+      headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
+      headlineContent={<Switch
+        value={state.enable}
+        thumbColor={'#f60'}
+        trackColor={{ false: '#00000026', true: '#ff660036' }}
+        onValueChange={async enable => {
+          if (enable) return showDialog({
+            method: 'confirm',
+            title: I18n.getLang('conflict_dialog_active_item_bio_rhythm_titel'),
+            subTitle: I18n.getLang('group_conflict_feature'),
+            confirmText: I18n.getLang('registration_dialog_button_yes'),
+            cancelText: I18n.getLang('registration_dialog_button_no'),
+            onConfirm: async (_, { close }) => {
+              close()
+              state.loading = true
+              state.enable = enable
+              state.flag = Symbol()
+            }
+          })
+          state.loading = true
+          state.enable = enable
+          state.flag = Symbol()
+        }}
+      />}
+      loading={state.loading}
+    >
+      <>
+        <View style={{ flex: 1, flexDirection: 'column' }}>
+          <ScrollView nestedScrollEnabled={true} style={{ position: 'relative' }}>
+            <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={{
-                color: '#FF6600',
-                fontSize: cx(24),
-                fontFamily: 'helvetica_neue_lt_std_roman',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                marginHorizontal: cx(24),
               }}
             >
-              {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) return showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('conflict_dialog_active_item_bio_rhythm_titel'),
-                  subTitle: I18n.getLang('group_conflict_feature'),
-                  confirmText: I18n.getLang('registration_dialog_button_yes'),
-                  cancelText: I18n.getLang('registration_dialog_button_no'),
-                  onConfirm: async (_, { close }) => {
-                    state.loading = true
-                    state.enable = enable
-                    close()
-                    state.flag = Symbol()
-                  }
-                })
-                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',
+              {state.repeatPeriod.map((period) => {
+                return (
+                  <TouchableOpacity
+                    key={period.title}
+                    onPress={() => {
+                      const periodNum = state.repeatPeriod.filter(p => p.enabled)?.length
+                      if (periodNum === 1 && period.enabled) return
+                      period.enabled = !period.enabled
+                      state.flag = Symbol()
                     }}
                   >
-                    <Text
+                    <View
                       style={{
-                        color: '#FF6600',
-                        textAlign: 'center',
+                        width: cx(40),
+                        height: cx(40),
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        borderRadius: cx(20),
+                        backgroundColor: period.enabled ? '#ffe0d4' : '#fff',
+                        borderWidth: cx(1),
+                        borderColor: '#f60',
                       }}
                     >
-                      {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={{
+                          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)
                 }}
               >
-                <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),
+                    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,
+                    time: plan.index === id ? time : plan.time,
+                  }
+                })
+                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
-                    style={{ flex: 1 }}
                     onPress={() => {
+                      const ids: number[] = state.planList.map(p => p.id)
+                      const newPlan: Plan = {
+                        id: Math.max(...ids) + 1,
+                        icon: res.rhythm_icon1,
+                        time: 0,
+                        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: {
-                          ...item,
-                          name: setTimer(item?.name)
-                        },
-                        isAdd: false,
+                        planData: newPlan,
+                        isAdd: true,
                         onPlanEdited,
                         onPlanDelete,
                         minimumEnable,
@@ -534,162 +436,213 @@ const BiorhythmPage = () => {
                         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),
                     }}
                   >
-                    <View
-                      style={{
-                        flex: 1,
-                        flexDirection: 'column',
+                    <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: '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',
+                      <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(16),
-                              color: '#000',
+                              fontSize: cx(12),
+                              color: '#666',
                               fontFamily: 'helvetica_neue_lt_std_roman',
+                              paddingLeft: cx(20),
                             }}
                           >
-                            {item.startTime}
+                            {setTimer(item?.name)}
                           </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
+                        <View
                           style={{
-                            fontSize: cx(12),
-                            color: '#666',
-                            fontFamily: 'helvetica_neue_lt_std_roman',
-                            paddingLeft: cx(20),
-                          }}
-                        >
-                          {setTimer(item?.name)}
-                        </Text>
+                            width: cx(295),
+                            height: cx(24),
+                            backgroundColor: bgColor,
+                            marginLeft: cx(20),
+                            marginTop: cx(-5),
+                            marginBottom: cx(24),
+                            borderRadius: cx(8),
+                          }} />
                       </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,
+                    </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>
+                ) || <></>
               }}
             />
-          )}
-        </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={() => {
-
-        }} />
-    </>
+            {!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)
+          }}
+        />
+      </>
+    </Page>
   )
 }