Merge branch 'master' into refactor-rn-movable-view

package.json

@@ -21,6 +21,8 @@
     "@docsearch/js": "^3.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@types/jest": "^27.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/parser": "^5.2.0",
     "@vuepress/plugin-back-to-top": "^1.8.2",
     "@vuepress/plugin-pwa": "^1.8.0",
     "eslint": "^7.32.0",
@@ -30,8 +32,6 @@
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.2.0",
     "lerna": "^8.1.8",
@@ -40,5 +40,9 @@
   },
   "workspaces": [
     "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "@types/react": "^18.3.11",
+    "react-native-linear-gradient": "^2.8.3"
+  }
 }

packages/api-proxy/package.json

@@ -48,7 +48,8 @@
     "expo-clipboard": "~6.0.3",
     "react-native-device-info": "^10.13.2",
     "react-native-get-location": "^4.0.1",
-    "react-native-safe-area-context": "^4.10.1"
+    "react-native-safe-area-context": "^4.10.1",
+    "react-native-haptic-feedback": "^2.3.3"
   },
   "peerDependenciesMeta": {
     "@react-native-async-storage/async-storage": {
@@ -74,6 +75,9 @@
     },
     "expo-brightness": {
       "optional": true
+    },
+    "react-native-haptic-feedback": {
+      "optional": true
     }
   }
 }

packages/api-proxy/src/platform/api/create-selector-query/rnNodesRef.js

@@ -6,7 +6,6 @@ import {
   hump2dash,
   isArray
 } from '@mpxjs/utils'
-import { StyleSheet } from 'react-native'
 
 const flushRefFns = (nodeInstances, fns, single) => {
   // wx的数据格式：对于具体方法接受到的回调传参，如果获取的 nodeRef 只有一个，那么只需要返回一条数据而不是数组，但是 exec 里面统一都是数组
@@ -61,18 +60,18 @@ const getMeasureProps = (measureProps = []) => {
 }
 
 const getDataset = (props) => {
-  return wrapFn((nodeRef, resolve) => {
-    props = nodeRef.props.current
+  return wrapFn((nodeInstance, resolve) => {
+    props = nodeInstance.props.current
     resolve({
       dataset: collectDataset(props)
     })
   })
 }
 
 const getPlainProps = (config) => {
-  return wrapFn((nodeRef, resolve) => {
+  return wrapFn((nodeInstance, resolve) => {
     const res = {}
-    const props = nodeRef.props.current
+    const props = nodeInstance.props.current
     config.forEach((key) => {
       // props 属性默认不转驼峰，用户写什么格式不会变化，取值做兼容
       res[key] = props[key] || props[hump2dash(key)] || ''
@@ -82,12 +81,15 @@ const getPlainProps = (config) => {
 }
 
 const getComputedStyle = (config = []) => {
-  return wrapFn((nodeRef, resolve) => {
+  return wrapFn((nodeInstance, resolve) => {
     config = new Set(config)
     const res = {}
-    const styles = nodeRef.props.current.style || []
-    const defaultStyle = nodeRef.instance.defaultStyle || {}
-    const computedStyle = StyleSheet.flatten([defaultStyle, ...styles])
+    const styles = nodeInstance.props.current.style || {}
+    const defaultStyle = nodeInstance.instance.defaultStyle || {}
+    const computedStyle = {
+      ...defaultStyle,
+      ...styles
+    }
     config.forEach((key) => {
       const humpKey = dash2hump(key)
       // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容
@@ -99,8 +101,8 @@ const getComputedStyle = (config = []) => {
 }
 
 const getInstanceConfig = (config) => {
-  return wrapFn((nodeRef, resolve) => {
-    const instance = nodeRef.instance
+  return wrapFn((nodeInstance, resolve) => {
+    const instance = nodeInstance.instance
     resolve({ [config]: instance[config] || {} })
   })
 }
@@ -113,8 +115,8 @@ const defaultScrollOffset = {
 }
 
 const getScrollOffset = () => {
-  return wrapFn((nodeRef, resolve) => {
-    const instance = nodeRef.instance
+  return wrapFn((nodeInstance, resolve) => {
+    const instance = nodeInstance.instance
     resolve(
       (instance.scrollOffset && instance.scrollOffset.current) ||
         defaultScrollOffset

packages/api-proxy/src/platform/api/keyboard/index.android.js

@@ -0,0 +1 @@
+export * from './index'

packages/api-proxy/src/platform/api/keyboard/index.ios.js

@@ -0,0 +1,62 @@
+import { Keyboard } from 'react-native'
+import { successHandle, failHandle } from '../../../common/js'
+let hasListener = false
+const callbacks = []
+
+function keyboardShowListener (e) {
+  const endCoordinates = e.endCoordinates || {}
+  // eslint-disable-next-line node/no-callback-literal
+  callbacks.forEach(cb => cb({
+    height: endCoordinates.height
+  }))
+}
+function keyboardHideListener (e) {
+  const endCoordinates = e.endCoordinates || {}
+  let height
+  if (__mpx_mode__ === 'ios') {
+    height = 0
+  } else {
+    height = endCoordinates.height
+  }
+  // eslint-disable-next-line node/no-callback-literal
+  callbacks.forEach(cb => cb({
+    height
+  }))
+}
+const onKeyboardHeightChange = function (callback) {
+  if (!hasListener) {
+    Keyboard.addListener('keyboardDidShow', keyboardShowListener)
+    Keyboard.addListener('keyboardDidHide', keyboardHideListener)
+    hasListener = true
+  }
+  callbacks.push(callback)
+}
+const offKeyboardHeightChange = function (callback) {
+  const index = callbacks.indexOf(callback)
+  if (index > -1) {
+    callbacks.splice(index, 1)
+  }
+  if (callbacks.length === 0) {
+    Keyboard.removeAllListeners('keyboardDidShow')
+    Keyboard.removeAllListeners('keyboardDidHide')
+    hasListener = false
+  }
+}
+
+const hideKeyboard = function (options = {}) {
+  const { success, fail, complete } = options
+  try {
+    Keyboard.dismiss()
+    const result = { errMsg: 'hideKeyboard:ok' }
+    successHandle(result, success, complete)
+  } catch (err) {
+    const result = { errMsg: err.message }
+    failHandle(result, fail, complete)
+  }
+}
+
+export {
+  onKeyboardHeightChange,
+  offKeyboardHeightChange,
+  hideKeyboard
+}

packages/api-proxy/src/platform/api/keyboard/index.js

@@ -0,0 +1,13 @@
+import { ENV_OBJ, envError } from '../../../common/js'
+
+const onKeyboardHeightChange = ENV_OBJ.onKeyboardHeightChange || envError('onKeyboardHeightChange')
+
+const offKeyboardHeightChange = ENV_OBJ.offKeyboardHeightChange || envError('offKeyboardHeightChange')
+
+const hideKeyboard = ENV_OBJ.hideKeyboard || envError('hideKeyboard')
+
+export {
+  onKeyboardHeightChange,
+  offKeyboardHeightChange,
+  hideKeyboard
+}

packages/api-proxy/src/platform/api/modal/rnModal.jsx

@@ -20,10 +20,13 @@ const showModal = function (options = {}) {
   const modalWidth = width - 60
   const styles = StyleSheet.create({
     modalTask: {
-      width,
-      height,
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
       justifyContent: 'center',
       alignItems: 'center',
+      display: 'flex',
       backgroundColor: 'rgba(0,0,0,0.6)',
       position: 'absolute'
     },
@@ -144,6 +147,7 @@ const showModal = function (options = {}) {
         height: 40,
         backgroundColor: '#eeeeee',
         width: '100%',
+        keyboardType: 'default',
         paddingLeft: 10,
         paddingRight: 10
       }} onChangeText={text => onChangeText(text)} defaultValue={content}></TextInput></View>)}

packages/api-proxy/src/platform/api/set-navigation-bar/index.ios.js

@@ -1,13 +1,15 @@
 import { successHandle, failHandle, getFocusedNavigation } from '../../../common/js'
-
+import { nextTick } from '../next-tick'
 function setNavigationBarTitle (options = {}) {
   const { title = '', success, fail, complete } = options
   const navigation = getFocusedNavigation()
   if (!(navigation && navigation.setOptions)) {
     failHandle({ errMsg: 'setNavigationBarTitle:fail' }, fail, complete)
   } else {
-    navigation.setOptions({ headerTitle: title })
-    successHandle({ errMsg: 'setNavigationBarTitle:ok' }, success, complete)
+    nextTick(() => {
+      navigation.setOptions({ headerTitle: title })
+      successHandle({ errMsg: 'setNavigationBarTitle:ok' }, success, complete)
+    })
   }
 }
 
@@ -17,13 +19,15 @@ function setNavigationBarColor (options = {}) {
   if (!(navigation && navigation.setOptions)) {
     failHandle({ errMsg: 'setNavigationBarColor:fail' }, fail, complete)
   } else {
-    navigation.setOptions({
-      headerStyle: {
-        backgroundColor: backgroundColor
-      },
-      headerTintColor: frontColor
+    nextTick(() => {
+      navigation.setOptions({
+        headerStyle: {
+          backgroundColor: backgroundColor
+        },
+        headerTintColor: frontColor
+      })
+      successHandle({ errMsg: 'setNavigationBarColor:ok' }, success, complete)
     })
-    successHandle({ errMsg: 'setNavigationBarColor:ok' }, success, complete)
   }
 }
 

packages/api-proxy/src/platform/api/system/index.web.js

@@ -5,7 +5,7 @@ function getSystemInfoSync () {
     throwSSRWarning('getSystemInfoSync API is running in non browser environments')
     return
   }
-  const ua = navigator.userAgent.split('(')[1].split(')')[0]
+  const ua = navigator.userAgent.split('(')[1]?.split(')')[0] || ''
   const phones = new Map([
     ['iPhone', /iPhone|iPad|iPod|iOS/i],
     ['Huawei', /huawei/i],

packages/api-proxy/src/platform/api/vibrate/index.android.js

@@ -0,0 +1 @@
+export * from './index.ios'

packages/api-proxy/src/platform/api/vibrate/index.ios.js

@@ -0,0 +1,39 @@
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
+import { Vibration } from 'react-native'
+import { successHandle, failHandle } from '../../../common/js'
+
+const getType = function (type = 'light') {
+  return 'impact' + type[0].toUpperCase() + type.substr(1)
+}
+const vibrateShort = function (options = {}) {
+  const { type = 'light', success, fail, complete } = options
+  try {
+    ReactNativeHapticFeedback.trigger(getType(type), {
+      ignoreAndroidSystemSettings: true,
+      enableVibrateFallback: true
+    })
+    const result = {
+      errMsg: 'vibrateShort:ok'
+    }
+    successHandle(result, success, complete)
+  } catch (e) {
+    const result = {
+      errMsg: 'vibrateShort:fail'
+    }
+    failHandle(result, fail, complete)
+  }
+}
+
+const vibrateLong = function (options = {}) {
+  const { success, complete } = options
+  Vibration.vibrate(400)
+  const result = {
+    errMsg: 'vibrateLong:ok'
+  }
+  successHandle(result, success, complete)
+}
+
+export {
+  vibrateShort,
+  vibrateLong
+}

packages/api-proxy/src/platform/api/vibrate/index.js

@@ -0,0 +1,10 @@
+import { ENV_OBJ, envError } from '../../../common/js'
+
+const vibrateShort = ENV_OBJ.vibrateShort || envError('vibrateShort')
+
+const vibrateLong = ENV_OBJ.vibrateLong || envError('vibrateLong')
+
+export {
+  vibrateShort,
+  vibrateLong
+}

packages/api-proxy/src/platform/index.js

@@ -113,3 +113,9 @@ export * from './api/location'
 
 // getExtConfig, getExtConfigSync
 export * from './api/ext'
+
+// vibrateShort, vibrateLong
+export * from './api/vibrate'
+
+// onKeyboardHeightChange, offKeyboardHeightChange, hideKeyboard
+export * from './api/keyboard'

packages/core/src/index.js

@@ -138,6 +138,7 @@ Mpx.config = {
   ignoreProxyWhiteList: ['id', 'dataset', 'data'],
   observeClassInstance: false,
   errorHandler: null,
+  warnHandler: null,
   proxyEventHandler: null,
   setDataHandler: null,
   forceFlushSync: false,