@ledvance/ui-biz-bundle 1.1.59 → 1.1.62

package/src/newModules/biorhythm/BiorhythmEditPage.tsx

@@ -0,0 +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