@mpxjs/api-proxy 2.9.53 → 2.9.59

package/@types/index.d.ts

@@ -2,16 +2,16 @@
 
 type AddPromise<W> = {
   [K in keyof W]: W[K] extends (...args: any) => any
-    ? Parameters<W[K]> extends [{ success?: (res: infer R) => any }?, ...any[]]
-      ? (...args: Parameters<W[K]>) => ReturnType<W[K]> & Promise<R>
+      ? Parameters<W[K]> extends [{ success?: (res: infer R) => any }?, ...any[]]
+          ? (...args: Parameters<W[K]>) => ReturnType<W[K]> & Promise<R>
+          : W[K]
       : W[K]
-    : W[K]
 }
 
 type AddParam<O, V extends (...args: any) => any> =
-  Parameters<V> extends [{ success?: (res: infer R) => any }, ...any[]]
-    ? (options: O) => ReturnType<V> & Promise<R>
-    : (options: O) => ReturnType<V>
+    Parameters<V> extends [{ success?: (res: infer R) => any }, ...any[]]
+        ? (options: O) => ReturnType<V> & Promise<R>
+        : (options: O) => ReturnType<V>
 // @ts-ignore
 type PickApiValue<T extends keyof WechatMiniprogram.Wx> = Pick<WechatMiniprogram.Wx, T>[T]
 // @ts-ignore
@@ -33,7 +33,7 @@ declare module '@mpxjs/core' {
 
 export const getProxy: (...args: any) => void
 
-export const promisify: (listObj: object, whiteList: string[], customBlackList: string[]) => object
+export const promisify: (listObj: object, whiteList?: string[], customBlackList?: string[]) => Record<string, any>
 
 export const showActionSheet: WechatMiniprogram.Wx['showActionSheet']
 export const addPhoneContact: WechatMiniprogram.Wx['addPhoneContact']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.9.53",
+  "version": "2.9.59",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",
@@ -37,15 +37,19 @@
   },
   "homepage": "https://github.com/didi/mpx#readme",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.50",
+    "@mpxjs/utils": "^2.9.59",
     "axios": "^1.7.3"
   },
   "peerDependencies": {
+    "@ant-design/react-native": "^5.1.3",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-clipboard/clipboard": "^1.14.0",
     "@react-native-community/netinfo": "^11.2.1",
+    "expo-brightness": "~11.8.0",
     "react-native-device-info": "^10.13.2",
-    "react-native-safe-area-context": "^4.10.1"
+    "react-native-get-location": "^4.0.1",
+    "react-native-safe-area-context": "^4.10.1",
+    "react-native-webview": "^13.10.5"
   },
   "peerDependenciesMeta": {
     "@react-native-async-storage/async-storage": {
@@ -62,7 +66,19 @@
     },
     "react-native-safe-area-context": {
       "optional": true
+    },
+    "react-native-get-location": {
+      "optional": true
+    },
+    "@ant-design/react-native": {
+      "optional": true
+    },
+    "expo-brightness": {
+      "optional": true
+    },
+    "react-native-webview": {
+      "optional": true
     }
   },
-  "gitHead": "505776958d34f5fea4e0b6141a0dc83ef572eb08"
+  "gitHead": "aa001c11cc7b21772fc6f9f5bcdd13118fc6d67c"
 }

package/src/common/js/promisify.js

@@ -29,7 +29,9 @@ const blackList = [
   'createOffscreenCanvas',
   'reportEvent',
   'connectSocket',
-  'base64ToArrayBuffer'
+  'base64ToArrayBuffer',
+  'getDeviceInfo',
+  'getWindowInfo'
 ]
 
 function getMapFromList (list) {

package/src/common/js/utils.js

@@ -77,6 +77,16 @@ function throwSSRWarning (info) {
   console.error(`[Mpx runtime error]: Dangerous API! ${info}, It may cause some problems, please use this method with caution`)
 }
 
+function successHandle (result, success, complete) {
+  typeof success === 'function' && success(result)
+  typeof complete === 'function' && complete(result)
+}
+
+function failHandle (result, fail, complete) {
+  typeof fail === 'function' && fail(result)
+  typeof complete === 'function' && complete(result)
+}
+
 const ENV_OBJ = getEnvObj()
 
 export {
@@ -88,5 +98,7 @@ export {
   isBrowser,
   throwSSRWarning,
   ENV_OBJ,
-  defineUnsupportedProps
+  defineUnsupportedProps,
+  successHandle,
+  failHandle
 }

package/src/common/js/web.js

@@ -1,13 +1,3 @@
-function webHandleSuccess (result, success, complete) {
-  typeof success === 'function' && success(result)
-  typeof complete === 'function' && complete(result)
-}
-
-function webHandleFail (result, fail, complete) {
-  typeof fail === 'function' && fail(result)
-  typeof complete === 'function' && complete(result)
-}
-
 function isTabBarPage (url, router) {
   const tabBarPagesMap = global.__tabBarPagesMap
   if (!tabBarPagesMap || !url) return false
@@ -49,8 +39,6 @@ function getRootElement () {
 }
 
 export {
-  webHandleSuccess,
-  webHandleFail,
   createDom,
   bindTap,
   getRootElement,

package/src/platform/api/action-sheet/ActionSheet.js

@@ -1,4 +1,4 @@
-import { webHandleSuccess, webHandleFail, createDom, bindTap, getRootElement } from '../../../common/js'
+import { successHandle, failHandle, createDom, bindTap, getRootElement } from '../../../common/js'
 import '../../../common/stylus/ActionSheet.styl'
 
 export default class ActionSheet {
@@ -44,8 +44,7 @@ export default class ActionSheet {
           errMsg: 'showActionSheet:ok',
           tapIndex: index
         }
-        webHandleSuccess(res, opts.success, opts.complete)
-        // this.toPromiseResolve(res)
+        successHandle(res, opts.success, opts.complete)
       }))
       list.appendChild(sheet)
     })
@@ -57,8 +56,7 @@ export default class ActionSheet {
     this.tempListeners.push(bindTap(this.cancelBtn, () => {
       this.hide()
       const err = { errMsg: 'showActionSheet:fail cancel' }
-      webHandleFail(err, opts.fail, opts.complete)
-      // !opts.fail && this.toPromiseReject(err)
+      failHandle(err, opts.fail, opts.complete)
     }))
     // make transition next frame
     this.actionSheet.classList.add('show')
@@ -66,8 +64,6 @@ export default class ActionSheet {
     setTimeout(() => {
       this.box.classList.add('show')
     }, 17)
-
-    // return this.toPromiseInitPromise()
   }
 
   hide () {

package/src/platform/api/action-sheet/index.android.js

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

package/src/platform/api/action-sheet/index.ios.js

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

package/src/platform/api/action-sheet/rnActionSheet.jsx

@@ -0,0 +1,127 @@
+import { View, TouchableHighlight, Text, StyleSheet, Button, Animated } from 'react-native'
+import { successHandle, failHandle } from '../../../common/js'
+import { Portal } from '@ant-design/react-native'
+function showActionSheet (options) {
+  const { alertText, itemList = [], itemColor = '#000000', success, fail, complete } = options
+  let actionSheetKey
+  const slideAnim = new Animated.Value(500)
+  const slideIn = () => {
+    // Will change fadeAnim value to 1 in 5 seconds
+    Animated.timing(slideAnim, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start()
+  }
+  const slideOut = () => {
+    // Will change fadeAnim value to 1 in 5 seconds
+    Animated.timing(slideAnim, {
+      toValue: 500,
+      duration: 200,
+      useNativeDriver: true,
+    }).start(() => {
+    })
+  }
+  if (itemList.length === 0 || itemList.length > 6) {
+    const result = {
+      errMsg: 'showActionSheet:fail parameter error: itemList should not be large than 6'
+    }
+    if (itemList.length === 0) {
+      result.errno = 1001
+      result.errMsg = 'showActionSheet:fail parameter error: parameter.itemList should have at least 1 item;'
+    }
+    failHandle(result, fail, complete)
+    return
+  }
+  const styles = StyleSheet.create({
+    actionActionMask: {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      position: 'absolute',
+      zIndex: 1000
+    },
+    actionSheetContent: {
+      left: 0,
+      right: 0,
+      position: 'absolute',
+      bottom: 0,
+      backgroundColor: '#ffffff',
+      borderTopLeftRadius: 10,
+      borderTopRightRadius: 10,
+      transform: [{
+        translateY: -500
+      }]
+    },
+    itemStyle: {
+      paddingTop: 15,
+      paddingBottom: 15,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderBottomWidth: 1,
+      borderBottomStyle: 'solid',
+      borderBottomColor: 'rgba(0,0,0,0.1)'
+    },
+    itemTextStyle: {
+      fontSize: 18
+    },
+    buttonStyle: {
+      fontSize: 18,
+      paddingTop: 10,
+      paddingBottom: 10
+    }
+  })
+  const remove = function () {
+    if (actionSheetKey) {
+      slideOut()
+      setTimeout(() => {
+        Portal.remove(actionSheetKey)
+        actionSheetKey = null
+      }, 200)
+    }
+  }
+  const selectAction = function (index) {
+    const result = {
+      errMsg: 'showActionSheet:ok',
+      tapIndex: index
+    }
+    successHandle(result, success, complete)
+    remove()
+  }
+  const cancelAction = function () {
+    const result = {
+      errMsg: 'showActionSheet:fail cancel'
+    }
+    failHandle(result, fail, complete)
+    remove()
+  }
+  let alertTextList = []
+  if (alertText) {
+    alertTextList = [alertText]
+  }
+  const ActionSheetView = <TouchableHighlight underlayColor="rgba(0,0,0,0.6)" onPress={cancelAction} style={styles.actionActionMask}>
+    <Animated.View
+      style={[
+        styles.actionSheetContent,
+        {
+          transform: [{translateY: slideAnim}]
+        }
+      ]}>
+      { alertTextList.map((item, index) => <View key={index} style={ styles.itemStyle }><Text style={[styles.itemTextStyle, { color: '#666666' }]}>{item}</Text></View>) }
+      { itemList.map((item, index) => <TouchableHighlight key={index} underlayColor="#ececec" onPress={() => selectAction(index)} style={ [styles.itemStyle, itemList.length -1 === index ? {
+        borderBottomWidth: 6,
+        borderBottomStyle: 'solid',
+        borderBottomColor: '#f7f7f7'
+      } : {}] }><Text style={[styles.itemTextStyle, { color: itemColor }]}>{item}</Text></TouchableHighlight>) }
+      <View style={styles.buttonStyle}><Button color={'#000000'} title={'取消'} onPress={cancelAction}></Button></View>
+    </Animated.View>
+  </TouchableHighlight>
+  actionSheetKey = Portal.add(ActionSheetView)
+  slideIn()
+}
+
+export {
+  showActionSheet
+}

package/src/platform/api/app/index.android.js

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

package/src/platform/api/app/index.ios.js

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

package/src/platform/api/app/index.web.js

@@ -1,4 +1,5 @@
-import { isBrowser } from '../../../common/js'
+import { isBrowser, isReact } from '@mpxjs/utils'
+
 global.__mpxAppCbs = global.__mpxAppCbs || {
   show: [],
   hide: [],
@@ -7,7 +8,7 @@ global.__mpxAppCbs = global.__mpxAppCbs || {
 }
 
 function onError (callback) {
-  if (isBrowser) {
+  if (isBrowser || isReact) {
     global.__mpxAppCbs.error.push(callback)
   }
 }
@@ -19,7 +20,7 @@ function offError (callback) {
 }
 
 function onAppShow (callback) {
-  if (isBrowser) {
+  if (isBrowser || isReact) {
     global.__mpxAppCbs.show.push(callback)
   }
 }
@@ -31,7 +32,7 @@ function offAppShow (callback) {
 }
 
 function onAppHide (callback) {
-  if (isBrowser) {
+  if (isBrowser || isReact) {
     global.__mpxAppCbs.hide.push(callback)
   }
 }

package/src/platform/api/clipboard-data/rnClipboard.js

@@ -1,5 +1,5 @@
 import Clipboard from '@react-native-clipboard/clipboard'
-import { webHandleSuccess, webHandleFail } from '../../../common/js/web'
+import { successHandle, failHandle } from '../../../common/js'
 import { type } from '@mpxjs/utils'
 const setClipboardData = function (options) {
   const { data, success, fail, complete } = options
@@ -9,14 +9,14 @@ const setClipboardData = function (options) {
       errno: 1001,
       errMsg: errStr
     }
-    webHandleFail(result, fail, complete)
+    failHandle(result, fail, complete)
     return
   }
   Clipboard.setString(data)
   const result = {
     errMsg: 'setClipboardData:ok'
   }
-  webHandleSuccess(result, success, complete)
+  successHandle(result, success, complete)
 }
 
 const getClipboardData = function (options) {
@@ -26,12 +26,12 @@ const getClipboardData = function (options) {
       data,
       errMsg: 'getClipboardData:ok'
     }
-    webHandleSuccess(result, success, complete)
+    successHandle(result, success, complete)
   }).catch(() => {
     const result = {
       errMsg: 'setClipboardData:fail'
     }
-    webHandleFail(result, fail, complete)
+    failHandle(result, fail, complete)
   })
 }
 

package/src/platform/api/create-intersection-observer/IntersectionObserver.js

@@ -66,12 +66,12 @@ class WebIntersectionObserver {
   }
 
   observe (targetSelector, callback) {
-    nextTick(async () => {
-      if (!targetSelector) {
-        const res = { errMsg: 'observe:targetSelector can not be empty' }
-        return Promise.reject(res)
+    nextTick(() => {
+      if (!document.querySelector(targetSelector)) {
+        console.warn(`[mpx runtime warn]: Node ${JSON.stringify(targetSelector)} is not found. Intersection observer will not trigger.`)
+        return
       }
-      this._observer = await this.initObserver()
+      this._observer = this.initObserver()
       this._callback = callback
       let targetElement = []
       if (this._options.observeAll) {

package/src/platform/api/create-selector-query/index.android.js

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

package/src/platform/api/create-selector-query/index.ios.js

@@ -0,0 +1,9 @@
+import SelectorQuery from './rnSelectQuery'
+
+function createSelectorQuery () {
+  return new SelectorQuery()
+}
+
+export {
+  createSelectorQuery
+}

package/src/platform/api/create-selector-query/rnNodesRef.js

@@ -0,0 +1,262 @@
+import {
+  noop,
+  isBoolean,
+  dash2hump,
+  collectDataset,
+  hump2dash,
+  isArray
+} from '@mpxjs/utils'
+import { StyleSheet } from 'react-native'
+
+const flushRefFns = (nodeInstances, fns, single) => {
+  // wx的数据格式：对于具体方法接受到的回调传参，如果获取的 nodeRef 只有一个，那么只需要返回一条数据而不是数组，但是 exec 里面统一都是数组
+  const mountedNodeInstance = nodeInstances
+    .map((instance) => instance.getNodeInstance())
+    .filter(({ nodeRef }) => nodeRef.current) // 如果有 nodeRef，表明目前组件处于挂载中
+  if (mountedNodeInstance.length) {
+    return Promise.all(
+      mountedNodeInstance.map((instance) => flushFns(instance, fns))
+    ).then((result = []) => (single ? result[0] : result))
+  } else {
+    return Promise.resolve(single ? null : [])
+  }
+}
+
+const flushFns = (nodeInstance, fns) => {
+  return Promise.all(fns.map((fn) => fn(nodeInstance))).then((res) => {
+    return res.reduce((preVal, curVal) => {
+      return Object.assign(preVal, curVal)
+    }, {})
+  })
+}
+
+const wrapFn = (fn) => {
+  return (nodeRef) => {
+    return new Promise((resolve) => {
+      fn(nodeRef, resolve)
+    })
+  }
+}
+
+const getMeasureProps = (measureProps = []) => {
+  return wrapFn((nodeInstance, resolve) => {
+    const nodeRef = nodeInstance.nodeRef.current
+    setTimeout(() => {
+      nodeRef.measure(function (x, y, width, height, pageX, pageY) {
+        const rectAndSize = {
+          width,
+          height,
+          left: pageX,
+          top: pageY,
+          right: pageX + width,
+          bottom: pageY + height
+        }
+        const result = measureProps.reduce((preVal, key) => {
+          return Object.assign(preVal, { [key]: rectAndSize[key] || 0 })
+        }, {})
+        resolve(result)
+      })
+    }, 30) // 延迟，等待组件在rn视图上真正渲染出来
+  })
+}
+
+const getDataset = (props) => {
+  return wrapFn((nodeRef, resolve) => {
+    props = nodeRef.props.current
+    resolve({
+      dataset: collectDataset(props)
+    })
+  })
+}
+
+const getPlainProps = (config) => {
+  return wrapFn((nodeRef, resolve) => {
+    const res = {}
+    const props = nodeRef.props.current
+    config.forEach((key) => {
+      // props 属性默认不转驼峰，用户写什么格式不会变化，取值做兼容
+      res[key] = props[key] || props[hump2dash(key)] || ''
+    })
+    resolve(res)
+  })
+}
+
+const getComputedStyle = (config = []) => {
+  return wrapFn((nodeRef, resolve) => {
+    config = new Set(config)
+    const res = {}
+    const styles = nodeRef.props.current.style || []
+    const defaultStyle = nodeRef.instance.defaultStyle || {}
+    const computedStyle = StyleSheet.flatten([defaultStyle, ...styles])
+    config.forEach((key) => {
+      const humpKey = dash2hump(key)
+      // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容
+      res[key] = computedStyle[key] || computedStyle[humpKey] || ''
+    })
+
+    resolve(res)
+  })
+}
+
+const getInstanceConfig = (config) => {
+  return wrapFn((nodeRef, resolve) => {
+    const instance = nodeRef.instance
+    resolve({ [config]: instance[config] || {} })
+  })
+}
+
+const defaultScrollOffset = {
+  scrollLeft: 0,
+  scrollTop: 0,
+  scrollHeight: 0,
+  scrollWidth: 0
+}
+
+const getScrollOffset = () => {
+  return wrapFn((nodeRef, resolve) => {
+    const instance = nodeRef.instance
+    resolve(
+      (instance.scrollOffset && instance.scrollOffset.current) ||
+        defaultScrollOffset
+    )
+  })
+}
+
+const RECT = ['left', 'top', 'right', 'bottom']
+const SIZE = ['width', 'height']
+
+class NodeRef {
+  constructor (nodeRefs = [], selectorQuery, single) {
+    if (!isArray(nodeRefs)) {
+      nodeRefs = [nodeRefs]
+    }
+    this.nodeRefs = nodeRefs
+    this.selectorQuery = selectorQuery
+    this.single = single
+  }
+
+  fields (config, cb = noop) {
+    const plainProps = []
+    const measureProps = []
+    const computedStyle = []
+    const fns = []
+
+    for (const key in config) {
+      const value = config[key]
+      if (Array.isArray(value) && value.length) {
+        if (key === 'properties') {
+          // wx 最终输出的 properties 字段都会转化为驼峰，所以在这里提前处理为最终的字段格式
+          plainProps.push(...value.map((v) => dash2hump(v)))
+        } else if (key === 'computedStyle') {
+          const _computedStyle = config.computedStyle
+          for (let i = _computedStyle.length - 1; i >= 0; i--) {
+            const style = _computedStyle[i]
+            if (RECT.includes(style) || SIZE.includes(style)) {
+              measureProps.push(style)
+              _computedStyle.splice(i, 1)
+            }
+          }
+          if (_computedStyle.length) {
+            computedStyle.push(..._computedStyle)
+          }
+        }
+      } else if (isBoolean(value) && value) {
+        switch (key) {
+          case 'rect':
+            measureProps.push(...RECT)
+            break
+          case 'size':
+            measureProps.push(...SIZE)
+            break
+          case 'scrollOffset':
+            fns.push(getScrollOffset())
+            break
+          case 'dataset':
+            fns.push(getDataset())
+            break
+          case 'node':
+          case 'context':
+          case 'ref':
+            fns.push(getInstanceConfig(key))
+            break
+          default:
+            plainProps.push(key)
+            break
+        }
+      }
+    }
+
+    if (plainProps.length) {
+      fns.push(getPlainProps(plainProps))
+    }
+    if (measureProps.length) {
+      const nodeInstance =
+        this.nodeRefs[0] && this.nodeRefs[0].getNodeInstance()
+      const hasMeasureFn =
+        nodeInstance &&
+        nodeInstance.nodeRef.current &&
+        nodeInstance.nodeRef.current.measure
+      if (hasMeasureFn) {
+        fns.push(getMeasureProps(measureProps))
+      } else {
+        computedStyle.push(...measureProps)
+      }
+    }
+    if (computedStyle.length) {
+      fns.push(getComputedStyle(computedStyle))
+    }
+
+    const runCb = () => {
+      return flushRefFns(this.nodeRefs, fns, this.single).then((result) => {
+        cb(result)
+        return result
+      })
+    }
+
+    this.selectorQuery._queueCb.push(runCb)
+
+    return this.selectorQuery
+  }
+
+  boundingClientRect (cb = noop) {
+    const config = {
+      id: true,
+      dataset: true,
+      rect: true,
+      size: true
+    }
+    return this.fields(config, cb)
+  }
+
+  context (cb = noop) {
+    const config = {
+      context: true
+    }
+    return this.fields(config, cb)
+  }
+
+  node (cb = noop) {
+    const config = {
+      node: true
+    }
+    return this.fields(config, cb)
+  }
+
+  ref (cb = noop) {
+    const config = {
+      ref: true
+    }
+    return this.fields(config, cb)
+  }
+
+  scrollOffset (cb = noop) {
+    const config = {
+      id: true,
+      dataset: true,
+      scrollOffset: true
+    }
+    return this.fields(config, cb)
+  }
+}
+
+export default NodeRef