Merge pull request #1617 from didi/fix-api-proxy-v4

补全windows、modal逻辑
didi · Sep 14, 2024 · 691163a · 691163a
2 parents 673843a + 4e3b9dc
commit 691163a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 53 deletions.
diff --git a/packages/api-proxy/src/common/js/utils.js b/packages/api-proxy/src/common/js/utils.js
@@ -87,6 +87,14 @@ function failHandle (result, fail, complete) {
   typeof complete === 'function' && complete(result)
 }
 
+function getFocusedNavigation () {
+  for (const key in global.__mpxPagesMap) {
+    const navigation = global.__mpxPagesMap[key]?.[1]
+    if (navigation && navigation.isFocused()) {
+      return navigation
+    }
+  }
+}
 const ENV_OBJ = getEnvObj()
 
 export {
@@ -100,5 +108,6 @@ export {
   ENV_OBJ,
   defineUnsupportedProps,
   successHandle,
-  failHandle
+  failHandle,
+  getFocusedNavigation
 }
diff --git a/packages/api-proxy/src/platform/api/base/index.web.js b/packages/api-proxy/src/platform/api/base/index.web.js
@@ -1,7 +1,10 @@
 import { fromByteArray, toByteArray } from './base64'
 
 function base64ToArrayBuffer (base64) {
-  return toByteArray(base64)?.buffer
+  if (__mpx_mode__ === 'web') {
+    return toByteArray(base64)?.buffer
+  }
+  return toByteArray(base64)
 }
 
 function arrayBufferToBase64 (arrayBuffer) {

diff --git a/packages/api-proxy/src/platform/api/modal/rnModal.jsx b/packages/api-proxy/src/platform/api/modal/rnModal.jsx
@@ -1,4 +1,4 @@
-import { View, Dimensions, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
+import { View, Dimensions, Text, StyleSheet, TouchableOpacity, ScrollView, TextInput } from 'react-native'
 import { successHandle, failHandle } from '../../../common/js'
 import { Portal } from '@ant-design/react-native'
 const { width, height } = Dimensions.get('window')
@@ -10,9 +10,9 @@ const showModal = function (options = {}) {
     cancelText = '取消',
     cancelColor = '#000000',
     confirmText = '确定',
-    confirmColor = '#576B95',
     editable = false,
-    placeholderText,
+    placeholderText = '',
+    confirmColor = '#576B95',
     success,
     fail,
     complete
@@ -82,12 +82,17 @@ const showModal = function (options = {}) {
   let ModalView
   let modalTitle = []
   let modalContent = []
+  let editableContent = []
   let modalButton = [{
     text: confirmText,
     confirmColor,
     type: 'confirm',
     color: 'rgb(87, 107, 149)'
   }]
+  let contentText = content
+  const onChangeText = function (text) {
+    contentText = text
+  }
   const closeModal = function (buttonInfo) {
     Portal.remove(modalKey)
     modalKey = null
@@ -98,7 +103,7 @@ const showModal = function (options = {}) {
       Object.assign(result, {
         confirm: true,
         cancel: false,
-        content: null
+        content: editable ? contentText : null
       })
     } else {
       Object.assign(result, {
@@ -114,6 +119,9 @@ const showModal = function (options = {}) {
   if (!editable && content) {
     modalContent.push(content)
   }
+  if (editable) {
+    editableContent.push(placeholderText)
+  }
   if (showCancel) {
     modalButton.unshift({
       text: cancelText,
@@ -123,17 +131,27 @@ const showModal = function (options = {}) {
       color: '#000000'
     })
   }
-  if (!editable) {
-    ModalView = <View style={styles.modalTask}>
-      <View style={styles.modalContent}>
-        {modalTitle.map((item, index) => <View key={index}><Text style={styles.modalTitleText}>{item}</Text></View>)}
-        {modalContent.map((item, index) => <ScrollView key={index} style={styles.contentBox}><Text style={styles.modalContentText}>{item}</Text></ScrollView>)}
-        <View style={styles.modalBtnBox}>
-          {modalButton.map((item, index) => <TouchableOpacity key={index} style={[ styles.modalBtn, item.style ]} onPress={() => closeModal(item)}><Text style={[styles.modalButton, { color: item.color }]}>{item.text}</Text></TouchableOpacity>)}
-        </View>
+  ModalView = <View style={styles.modalTask}>
+    <View style={styles.modalContent}>
+      {modalTitle.map((item, index) => <View key={index}><Text style={styles.modalTitleText}>{item}</Text></View>)}
+      {modalContent.map((item, index) => <ScrollView key={index} style={styles.contentBox}><Text style={styles.modalContentText}>{item}</Text></ScrollView>)}
+      {editableContent.map((item, index) => <View key={index} style={{
+        width: '100%',
+        paddingLeft: 25,
+        paddingRight: 25,
+        marginTop: 5
+      }}><TextInput placeholder={item} style={{
+        height: 40,
+        backgroundColor: '#eeeeee',
+        width: '100%',
+        paddingLeft: 10,
+        paddingRight: 10
+      }} onChangeText={text => onChangeText(text)} defaultValue={content}></TextInput></View>)}
+      <View style={styles.modalBtnBox}>
+        {modalButton.map((item, index) => <TouchableOpacity key={index} style={[ styles.modalBtn, item.style ]} onPress={() => closeModal(item)}><Text style={[styles.modalButton, { color: item.color }]}>{item.text}</Text></TouchableOpacity>)}
       </View>
     </View>
-  }
+  </View>
   try {
     modalKey = Portal.add(ModalView)
   } catch (e) {

diff --git a/packages/api-proxy/src/platform/api/set-navigation-bar/index.ios.js b/packages/api-proxy/src/platform/api/set-navigation-bar/index.ios.js
@@ -1,13 +1,5 @@
-import { successHandle, failHandle } from '../../../common/js'
+import { successHandle, failHandle, getFocusedNavigation } from '../../../common/js'
 
-function getFocusedNavigation () {
-  for (const key in global.__mpxPagesMap) {
-    const navigation = global.__mpxPagesMap[key]?.[1]
-    if (navigation && navigation.isFocused()) {
-      return navigation
-    }
-  }
-}
 function setNavigationBarTitle (options = {}) {
   const { title = '', success, fail, complete } = options
   const navigation = getFocusedNavigation()

diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js
@@ -1,56 +1,62 @@
 import DeviceInfo from 'react-native-device-info'
 import { Platform, PixelRatio, Dimensions, StatusBar } from 'react-native'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import { successHandle, failHandle, defineUnsupportedProps } from '../../../common/js'
+import { successHandle, failHandle, defineUnsupportedProps, getFocusedNavigation } from '../../../common/js'
 
 const getWindowInfo = function () {
-  const dimensionsWindow = Dimensions.get('window')
   const dimensionsScreen = Dimensions.get('screen')
-  const result = {
-    pixelRatio: PixelRatio.get(),
-    windowWidth: dimensionsWindow.width,
-    windowHeight: dimensionsWindow.height,
-    screenWidth: dimensionsScreen.width,
-    screenHeight: dimensionsScreen.height
+  const navigation = getFocusedNavigation() || {}
+  const insets = {
+    ...(initialWindowMetrics?.insets || {}),
+    ...(navigation.insets || {})
   }
-  defineUnsupportedProps(result, ['screenTop'])
-  return result
-}
-
-const getSystemInfoSync = function () {
-  const windowInfo = getWindowInfo()
-  const { screenWidth, screenHeight } = windowInfo
   let safeArea = {}
-  let { top = 0, bottom = 0 } = initialWindowMetrics?.insets || {}
+  let { top = 0, bottom = 0, left = 0, right = 0 } = insets
   if (Platform.OS === 'android') {
     top = StatusBar.currentHeight || 0
   }
-  const iosRes = {}
-
+  const screenHeight = dimensionsScreen.height
+  const screenWidth = dimensionsScreen.width
+  const layout = navigation.layout || {}
+  const layoutHeight = layout.height || 0
+  const layoutWidth = layout.width || 0
+  const windowHeight = layoutHeight || screenHeight
   try {
-    const width = Math.min(screenWidth, screenHeight)
-    const height = Math.max(screenWidth, screenHeight)
     safeArea = {
-      left: 0,
-      right: width,
+      left,
+      right: screenWidth - right,
       top,
-      bottom: height - bottom,
-      height: height - bottom - top,
-      width
+      bottom: screenHeight - bottom,
+      height: screenHeight - top - bottom,
+      width: screenWidth - left - right
     }
   } catch (error) {
   }
+  const result = {
+    pixelRatio: PixelRatio.get(),
+    windowWidth: layoutWidth || screenWidth,
+    windowHeight, // 取不到layout的时候有个兜底
+    screenWidth: screenWidth,
+    screenHeight: screenHeight,
+    screenTop: screenHeight - windowHeight,
+    safeArea
+  }
+  return result
+}
+
+const getSystemInfoSync = function () {
+  const windowInfo = getWindowInfo()
+  const { screenWidth, screenHeight, safeArea } = windowInfo
+
   const result = {
     brand: DeviceInfo.getBrand(),
     model: DeviceInfo.getModel(),
     system: `${DeviceInfo.getSystemName()} ${DeviceInfo.getSystemVersion()}`,
     platform: DeviceInfo.isEmulatorSync() ? 'emulator' : DeviceInfo.getSystemName(),
     deviceOrientation: screenWidth > screenHeight ? 'portrait' : 'landscape',
-    statusBarHeight: top,
+    statusBarHeight: safeArea.top,
     fontSizeSetting: PixelRatio.getFontScale(),
-    safeArea,
-    ...windowInfo,
-    ...iosRes
+    ...windowInfo
   }
   defineUnsupportedProps(result, [
     'language',