@ledvance/ui-biz-bundle 1.1.67 → 1.1.69

package/src/newModules/biorhythm/BiorhythmEditPage.tsx

@@ -1,267 +1,267 @@
-import React, { useCallback, useMemo } from 'react'
-import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { useNavigation, useRoute } from '@react-navigation/native'
-import { TimerPicker, Utils } from 'tuya-panel-kit'
-import { useReactive } from 'ahooks'
-import { colorTemperatureValue, Plan } from './BiorhythmBean'
-import iconList from './iconListData'
-import I18n from '@ledvance/base/src/i18n'
-import TextField from '@ledvance/base/src/components/TextField'
-import BiologicalRes from './res/BiologicalRes'
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
-import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
-import DeleteButton from '@ledvance/base/src/components/DeleteButton'
-import res from '@ledvance/base/src/res'
-import { ui_biz_routerKey } from "../../navigation/Routers";
-import { cloneDeep, isEqual } from 'lodash'
-import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import Page from '@ledvance/base/src/components/Page'
-import Card from '@ledvance/base/src/components/Card'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import { showDialog } from '@ledvance/base/src/utils/common'
-
-const cx = Utils.RatioUtils.convertX
-
-export interface BiorhythmEditPageParams {
-  planData: Plan
-  isAdd: boolean
-  onPlanEdited: (isAdd: boolean, plan: Plan) => void
-  onPlanDelete: (id: number) => void
-  minimumEnable: (plan: Plan) => boolean
-  nameRepeat: (plan: Plan) => boolean
-  iconIdList?: any
-  isMixRGBWLamp: boolean
-  isSupportTemperature: boolean
-  isSupportBrightness: boolean
-  showDeleteBtn?: boolean
-}
-
-const BiorhythmEditPage = () => {
-  const navigation = useNavigation()
-  const route = useRoute<any>()
-  const {
-    planData,
-    isAdd,
-    onPlanEdited,
-    onPlanDelete,
-    minimumEnable,
-    nameRepeat,
-    iconIdList,
-    isMixRGBWLamp,
-    isSupportTemperature,
-    isSupportBrightness,
-    showDeleteBtn
-  } = route.params as BiorhythmEditPageParams
-  const is24Hour = useSystemTimeFormate()
-  const state = useReactive({
-    iconIdList,
-    planData: cloneDeep(planData),
-    backStatus: false,
-  })
-
-  const onTopBarRightBtnClick = useCallback(() => {
-    if (state.backStatus) return
-    state.backStatus = true
-    onPlanEdited(isAdd, {
-      ...state.planData,
-      icon: iconList?.find(val => val?.id === state.planData.iconId)?.icon || '',
-    })
-    state.backStatus = false
-    navigation.goBack()
-  }, [state.backStatus, state.planData])
-
-  const onDeleteBtnClick = useCallback(() => {
-    onPlanDelete(state.planData.index)
-    navigation.goBack()
-  }, [])
-
-
-  const minimumTipEnable = () => {
-    const enable = minimumEnable(state.planData)
-    return enable
-  }
-
-  const setImg = () => {
-    const imgIcon = iconList?.find(val => val?.id === state.planData.iconId)?.icon || ''
-    return imgIcon
-  }
-
-  const nameRepeatFlag = useMemo(() =>{
-    return nameRepeat(state.planData)
-  }, [state.planData.name])
-
-  const checkBiorhythmDataChanged = useMemo(() =>{
-    return isEqual(state.planData, planData)
-  }, [JSON.stringify(state.planData), planData])
-
-  const canSaveMoodData = useMemo(() =>{
-    return state.planData.name.length > 0 && state.planData.name.length < 33 && !nameRepeatFlag && !checkBiorhythmDataChanged && !minimumTipEnable()
-  }, [nameRepeatFlag, state.planData.name, checkBiorhythmDataChanged])
-
-  return (
-    <Page
-      backText={I18n.getLang('add_new_trigger_time_system_back_text')}
-      loading={state.backStatus}
-      backDialogTitle={I18n.getLang('manage_user_unsaved_changes_dialog_headline')}
-      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_bio_rhythm_note')}
-      showBackDialog={!checkBiorhythmDataChanged}
-      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={canSaveMoodData ? onTopBarRightBtnClick : undefined}
-      headlineText={I18n.getLang(isAdd ? 'add_new_trigger_time_headline_text' : 'edit_trigger_time_headline_text')}
-    >
-      <ScrollView>
-        <View
-          style={{
-            marginHorizontal: cx(24),
-            backgroundColor: '#fff',
-          }}>
-          <View style={{ height: cx(20) }} />
-          <TextField
-            value={state.planData.name}
-            showError={state.planData.name?.length > 32 || nameRepeatFlag}
-            maxLength={33}
-            tipColor={nameRepeatFlag ? '#f00' : undefined}
-            errorText={I18n.getLang(nameRepeatFlag ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')}
-            placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
-            onChangeText={text => {
-              state.planData.name = text
-            }} />
-
-          <View style={{ height: cx(20) }} />
-          <TimerPicker
-            itemTextColor='#aeadb5'
-            style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
-            is12Hours={!is24Hour}
-            singlePicker={true}
-            amText={I18n.getLang('manage_user_calendar_label_am')}
-            pmText={I18n.getLang('manage_user_calendar_label_pm')}
-            startTime={state.planData.time}
-            symbol={''}
-            onTimerChange={(time) => {
-              state.planData.time = time
-            }}
-          />
-          {minimumTipEnable() && <View style={{ flexDirection: 'row', marginVertical: cx(5) }}>
-            <Image style={{ width: cx(16), height: cx(16), tintColor: '#000' }} source={res.ic_info} />
-            <Text
-              style={{ color: '#000', fontSize: cx(12) }}>{I18n.getLang('add_new_trigger_time_information_text')}</Text>
-          </View>}
-          <View style={{ height: cx(20) }} />
-          <View style={{ flexDirection: 'row' }}>
-            <View style={{ flex: 1 }}>
-              <Text style={{ fontSize: cx(14) }}>{I18n.getLang(isAdd ? 'add_new_trigger_time_text' : 'edit_trigger_time_headline_text')}</Text>
-            </View>
-            <TouchableOpacity
-              activeOpacity={1}
-              onPress={() => {
-                navigation.navigate(ui_biz_routerKey.bi_biz_biological_icon_select, {
-                  id: state?.planData.iconId,
-                  setIcon: (id) => {
-                    state.planData.iconId = id
-                  },
-                  iconIdList: state.iconIdList,
-                })
-              }}
-            >
-              <View
-                style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignContent: 'center', alignItems: 'center' }}>
-                <Image
-                  style={{ width: cx(24), height: cx(24), tintColor: '#000' }}
-                  source={setImg()}
-                />
-                <Image style={{ width: cx(16), height: cx(16) }} source={BiologicalRes.biorhythom_select_rightIcon} />
-              </View>
-            </TouchableOpacity>
-          </View>
-          <Text
-            style={{ fontSize: cx(16), fontFamily: 'helvetica_neue_lt_std_bd', marginTop: cx(33), marginBottom: cx(16) }}>
-            {I18n.getLang('add_new_trigger_time_subheadline_text')}
-          </Text>
-          <Card>
-            <View style={styles.titleBGView}>
-              <Text
-                style={styles.title}>{isMixRGBWLamp ? I18n.getLang('light_sources_tile_main_lighting_headline') : I18n.getLang('light_sources_tile_tw_lighting_headline')}</Text>
-              {isSupportTemperature && <View style={[
-                styles.colorBlock,
-                {
-                  backgroundColor: cctToColor(state.planData.colorTemperature.toFixed()) ?
-                    cctToColor(state.planData.colorTemperature.toFixed()) : '#fff', opacity: 1,
-                }]}
-              />}
-            </View>
-            <View style={{ paddingBottom: cx(16) }}>
-              <ColorTempAdjustView
-                colorTemp={state.planData.colorTemperature}
-                brightness={Number(state.planData.brightness.toFixed())}
-                minBrightness={0}
-                onCCTChange={newValue => {
-                  state.planData.colorTemperature = newValue
-                  state.planData.action[0].startValue = `${colorTemperatureValue(newValue)}`
-                }}
-                onCCTChangeComplete={newValue => {
-                  state.planData.colorTemperature = newValue
-                  state.planData.action[0].startValue = `${colorTemperatureValue(newValue)}`
-                }}
-                onBrightnessChange={newValue => {
-                  state.planData.brightness = newValue
-                  state.planData.action[1].startValue = `${newValue}`
-                }}
-                onBrightnessChangeComplete={newValue => {
-                  state.planData.brightness = newValue
-                  state.planData.action[1].startValue = `${newValue}`
-                }}
-                isSupportBrightness={isSupportBrightness}
-                isSupportTemperature={isSupportTemperature} />
-            </View>
-          </Card>
-          <Spacer />
-        </View>
-        {!isAdd && showDeleteBtn &&
-          <View
-            style={{
-              marginHorizontal: cx(24),
-              marginVertical: cx(20)
-            }}>
-            <DeleteButton
-              text={I18n.getLang('edit_trigger_time_button_delete_text')}
-              onPress={() =>{
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_bio_rhythm_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_wakeupschedule_description'),
-                  onConfirm: async (_, { close }) => {
-                    close()
-                    onDeleteBtnClick()
-                  },
-                })
-              }}
-            />
-          </View>}
-      </ScrollView>
-    </Page>
-  )
-}
-
-
-const styles = StyleSheet.create({
-  titleBGView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(16),
-  },
-  colorBlock: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    paddingVertical: cx(16),
-  },
-})
-
-
-export default BiorhythmEditPage
+import React, { useCallback, useMemo } from 'react'
+import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import { TimerPicker, Utils } from 'tuya-panel-kit'
+import { useReactive } from 'ahooks'
+import { colorTemperatureValue, Plan } from './BiorhythmBean'
+import iconList from './iconListData'
+import I18n from '@ledvance/base/src/i18n'
+import TextField from '@ledvance/base/src/components/TextField'
+import BiologicalRes from './res/BiologicalRes'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
+import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import res from '@ledvance/base/src/res'
+import { ui_biz_routerKey } from "../../navigation/Routers";
+import { cloneDeep, isEqual } from 'lodash'
+import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import Page from '@ledvance/base/src/components/Page'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { showDialog } from '@ledvance/base/src/utils/common'
+
+const cx = Utils.RatioUtils.convertX
+
+export interface BiorhythmEditPageParams {
+  planData: Plan
+  isAdd: boolean
+  onPlanEdited: (isAdd: boolean, plan: Plan) => void
+  onPlanDelete: (id: number) => void
+  minimumEnable: (plan: Plan) => boolean
+  nameRepeat: (plan: Plan) => boolean
+  iconIdList?: any
+  isMixRGBWLamp: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+  showDeleteBtn?: boolean
+}
+
+const BiorhythmEditPage = () => {
+  const navigation = useNavigation()
+  const route = useRoute<any>()
+  const {
+    planData,
+    isAdd,
+    onPlanEdited,
+    onPlanDelete,
+    minimumEnable,
+    nameRepeat,
+    iconIdList,
+    isMixRGBWLamp,
+    isSupportTemperature,
+    isSupportBrightness,
+    showDeleteBtn
+  } = route.params as BiorhythmEditPageParams
+  const is24Hour = useSystemTimeFormate()
+  const state = useReactive({
+    iconIdList,
+    planData: cloneDeep(planData),
+    backStatus: false,
+  })
+
+  const onTopBarRightBtnClick = useCallback(() => {
+    if (state.backStatus) return
+    state.backStatus = true
+    onPlanEdited(isAdd, {
+      ...state.planData,
+      icon: iconList?.find(val => val?.id === state.planData.iconId)?.icon || '',
+    })
+    state.backStatus = false
+    navigation.goBack()
+  }, [state.backStatus, state.planData])
+
+  const onDeleteBtnClick = useCallback(() => {
+    onPlanDelete(state.planData.index)
+    navigation.goBack()
+  }, [])
+
+
+  const minimumTipEnable = () => {
+    const enable = minimumEnable(state.planData)
+    return enable
+  }
+
+  const setImg = () => {
+    const imgIcon = iconList?.find(val => val?.id === state.planData.iconId)?.icon || ''
+    return imgIcon
+  }
+
+  const nameRepeatFlag = useMemo(() =>{
+    return nameRepeat(state.planData)
+  }, [state.planData.name])
+
+  const checkBiorhythmDataChanged = useMemo(() =>{
+    return isEqual(state.planData, planData)
+  }, [JSON.stringify(state.planData), planData])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.planData.name.length > 0 && state.planData.name.length < 33 && !nameRepeatFlag && !checkBiorhythmDataChanged && !minimumTipEnable()
+  }, [nameRepeatFlag, state.planData.name, checkBiorhythmDataChanged])
+
+  return (
+    <Page
+      backText={I18n.getLang('add_new_trigger_time_system_back_text')}
+      loading={state.backStatus}
+      backDialogTitle={I18n.getLang('manage_user_unsaved_changes_dialog_headline')}
+      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_bio_rhythm_note')}
+      showBackDialog={!checkBiorhythmDataChanged}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={canSaveMoodData ? onTopBarRightBtnClick : undefined}
+      headlineText={I18n.getLang(isAdd ? 'add_new_trigger_time_headline_text' : 'edit_trigger_time_headline_text')}
+    >
+      <ScrollView>
+        <View
+          style={{
+            marginHorizontal: cx(24),
+            backgroundColor: '#fff',
+          }}>
+          <View style={{ height: cx(20) }} />
+          <TextField
+            value={state.planData.name}
+            showError={state.planData.name?.length > 32 || nameRepeatFlag}
+            maxLength={33}
+            tipColor={nameRepeatFlag ? '#f00' : undefined}
+            errorText={I18n.getLang(nameRepeatFlag ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')}
+            placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+            onChangeText={text => {
+              state.planData.name = text
+            }} />
+
+          <View style={{ height: cx(20) }} />
+          <TimerPicker
+            itemTextColor='#aeadb5'
+            style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+            is12Hours={!is24Hour}
+            singlePicker={true}
+            amText={I18n.getLang('manage_user_calendar_label_am')}
+            pmText={I18n.getLang('manage_user_calendar_label_pm')}
+            startTime={state.planData.time}
+            symbol={''}
+            onTimerChange={(time) => {
+              state.planData.time = time
+            }}
+          />
+          {minimumTipEnable() && <View style={{ flexDirection: 'row', marginVertical: cx(5) }}>
+            <Image style={{ width: cx(16), height: cx(16), tintColor: '#000' }} source={res.ic_info} />
+            <Text
+              style={{ color: '#000', fontSize: cx(12) }}>{I18n.getLang('add_new_trigger_time_information_text')}</Text>
+          </View>}
+          <View style={{ height: cx(20) }} />
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ flex: 1 }}>
+              <Text style={{ fontSize: cx(14) }}>{I18n.getLang(isAdd ? 'add_new_trigger_time_text' : 'edit_trigger_time_headline_text')}</Text>
+            </View>
+            <TouchableOpacity
+              activeOpacity={1}
+              onPress={() => {
+                navigation.navigate(ui_biz_routerKey.bi_biz_biological_icon_select, {
+                  id: state?.planData.iconId,
+                  setIcon: (id) => {
+                    state.planData.iconId = id
+                  },
+                  iconIdList: state.iconIdList,
+                })
+              }}
+            >
+              <View
+                style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignContent: 'center', alignItems: 'center' }}>
+                <Image
+                  style={{ width: cx(24), height: cx(24), tintColor: '#000' }}
+                  source={setImg()}
+                />
+                <Image style={{ width: cx(16), height: cx(16) }} source={BiologicalRes.biorhythom_select_rightIcon} />
+              </View>
+            </TouchableOpacity>
+          </View>
+          <Text
+            style={{ fontSize: cx(16), fontFamily: 'helvetica_neue_lt_std_bd', marginTop: cx(33), marginBottom: cx(16) }}>
+            {I18n.getLang('add_new_trigger_time_subheadline_text')}
+          </Text>
+          <Card>
+            <View style={styles.titleBGView}>
+              <Text
+                style={styles.title}>{isMixRGBWLamp ? I18n.getLang('light_sources_tile_main_lighting_headline') : I18n.getLang('light_sources_tile_tw_lighting_headline')}</Text>
+              {isSupportTemperature && <View style={[
+                styles.colorBlock,
+                {
+                  backgroundColor: cctToColor(state.planData.colorTemperature.toFixed()) ?
+                    cctToColor(state.planData.colorTemperature.toFixed()) : '#fff', opacity: 1,
+                }]}
+              />}
+            </View>
+            <View style={{ paddingBottom: cx(16) }}>
+              <ColorTempAdjustView
+                colorTemp={state.planData.colorTemperature}
+                brightness={Number(state.planData.brightness.toFixed())}
+                minBrightness={0}
+                onCCTChange={newValue => {
+                  state.planData.colorTemperature = newValue
+                  state.planData.action[0].startValue = `${colorTemperatureValue(newValue)}`
+                }}
+                onCCTChangeComplete={newValue => {
+                  state.planData.colorTemperature = newValue
+                  state.planData.action[0].startValue = `${colorTemperatureValue(newValue)}`
+                }}
+                onBrightnessChange={newValue => {
+                  state.planData.brightness = newValue
+                  state.planData.action[1].startValue = `${newValue}`
+                }}
+                onBrightnessChangeComplete={newValue => {
+                  state.planData.brightness = newValue
+                  state.planData.action[1].startValue = `${newValue}`
+                }}
+                isSupportBrightness={isSupportBrightness}
+                isSupportTemperature={isSupportTemperature} />
+            </View>
+          </Card>
+          <Spacer />
+        </View>
+        {!isAdd && showDeleteBtn &&
+          <View
+            style={{
+              marginHorizontal: cx(24),
+              marginVertical: cx(20)
+            }}>
+            <DeleteButton
+              text={I18n.getLang('edit_trigger_time_button_delete_text')}
+              onPress={() =>{
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang('cancel_dialog_delete_item_bio_rhythm_titel'),
+                  subTitle: I18n.getLang('cancel_dialog_delete_item_wakeupschedule_description'),
+                  onConfirm: async (_, { close }) => {
+                    close()
+                    onDeleteBtnClick()
+                  },
+                })
+              }}
+            />
+          </View>}
+      </ScrollView>
+    </Page>
+  )
+}
+
+
+const styles = StyleSheet.create({
+  titleBGView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: cx(16),
+  },
+  colorBlock: {
+    width: cx(20),
+    height: cx(20),
+    marginStart: cx(12),
+    borderRadius: cx(4),
+  },
+  title: {
+    color: '#000',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    paddingVertical: cx(16),
+  },
+})
+
+
+export default BiorhythmEditPage