@tarojs/taro-rn 4.0.1-alpha.1 → 4.0.1

package/src/lib/showActionSheet/ActionSheet.tsx

@@ -1,20 +1,19 @@
-import { ViewPropTypes } from 'deprecated-react-native-prop-types'
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
 import {
-  Platform,
-  StyleSheet,
+  View,
   Text,
   TouchableHighlight,
-  View
+  StyleSheet,
+  Platform
 } from 'react-native'
-import { initialWindowMetrics } from 'react-native-safe-area-context'
-
+import { ViewPropTypes } from 'deprecated-react-native-prop-types'
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 import { Popup } from '../Popup'
 import V from '../variable'
 
 const styles = StyleSheet.create({
-  actionsheet: {
+  iosActionsheet: {
     backgroundColor: V.weuiBgColorDefault
   },
   androidActionsheetWrapper: {
@@ -22,6 +21,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   },
+  androidActionsheet: {
+    width: 274,
+    backgroundColor: V.weuiBgColorDefault,
+    borderRadius: V.weuiActionSheetAndroidBorderRadius
+  },
   actionsheetMenu: {
     backgroundColor: '#fff'
   },
@@ -32,23 +36,29 @@ const styles = StyleSheet.create({
   actionsheetCell: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderColor: V.weuiCellBorderColor,
-    borderStyle: 'solid',
+    borderStyle: 'solid'
+  },
+  iosActionsheetCell: {
     paddingTop: 10,
-    paddingBottom: 10,
+    paddingBottom: 10
+  },
+  androidActionsheetCell: {
+    paddingTop: 13,
+    paddingBottom: 13,
     paddingLeft: 24,
     paddingRight: 24
   },
-
   firstActionsheetCell: {
     borderTopWidth: 0
   },
-  actionSheetCellText: {
+  iosActionsheetCellText: {
     textAlign: 'center',
     fontSize: 18,
     marginTop: ((18 * V.baseLineHeight) - 18) / 2,
     marginBottom: ((18 * V.baseLineHeight) - 18) / 2
   },
   androidActionsheetCellText: {
+    textAlign: 'center',
     fontSize: 16,
     marginTop: ((16 * 1.4) - 16) / 2,
     marginBottom: ((16 * 1.4) - 16) / 2
@@ -95,6 +105,7 @@ const Index: React.FC<any> = ({
         underlayColor={underlayColor}
         style={[
           styles.actionsheetCell,
+          styles[`${_type}ActionsheetCell`],
           idx === 0 ? styles.firstActionsheetCell : {},
           btnStyle
         ]}
@@ -102,8 +113,6 @@ const Index: React.FC<any> = ({
       >
         <Text
           style={[
-
-            styles.actionSheetCellText,
             styles[`${_type}ActionsheetCellText`],
             styles[`${btnType}ActionsheetCellText`],
             textStyle
@@ -119,6 +128,7 @@ const Index: React.FC<any> = ({
         underlayColor={underlayColor}
         style={[
           styles.actionsheetCell,
+          styles[`${_type}ActionsheetCell`],
           idx === 0 ? styles.firstActionsheetCell : {},
           btnStyle
         ]}
@@ -126,7 +136,6 @@ const Index: React.FC<any> = ({
       >
         <Text
           style={[
-            styles.actionSheetCellText,
             styles[`${_type}ActionsheetCellText`],
             styles[`${btnType}ActionsheetCellText`],
             textStyle
@@ -136,29 +145,29 @@ const Index: React.FC<any> = ({
     )
 
   return <Popup
-    visible={visible}
-    style={[styles.actionsheet, style]}
-    maskStyle={maskStyle}
-    onShow={onShow}
-    onClose={onClose}
-  >
-    {menus.length
-      ? <View style={[styles.actionsheetMenu]}>
-        {_renderMenuItems()}
-      </View>
-      : false}
-    {actions.length
-      ? <View style={[styles.actionsheetAction]}>
-        {_renderActions()}
-      </View>
-      : false}
-    <View style={{ paddingBottom: Math.max(initialWindowMetrics?.insets.bottom || 0, 16), backgroundColor: '#fff' }}></View>
-  </Popup>
+      visible={visible}
+      style={[styles.iosActionsheet, style]}
+      maskStyle={maskStyle}
+      onShow={onShow}
+      onClose={onClose}
+    >
+      {menus.length
+        ? <View style={[styles.actionsheetMenu]}>
+          {_renderMenuItems()}
+        </View>
+        : false}
+      {actions.length
+        ? <View style={[styles.actionsheetAction]}>
+          {_renderActions()}
+        </View>
+        : false}
+      <View style={{paddingBottom: Math.max(initialWindowMetrics?.insets.bottom || 0, 16), backgroundColor: '#fff'}}></View>
+    </Popup>
 }
 
 Index.propTypes = {
   autoDectect: PropTypes.bool,
-  type: PropTypes.oneOf(['ios', 'android', 'harmony']),
+  type: PropTypes.oneOf(['ios', 'android']),
   menus: PropTypes.any,
   actions: PropTypes.any,
   visible: PropTypes.bool,

package/src/lib/showActionSheet/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import RootSiblings from 'react-native-root-siblings'
-
 import ActionSheet from './ActionSheet'
 
 function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showActionSheet.SuccessCallbackResult> {
@@ -21,13 +20,9 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
       sibling && sibling.destroy()
       sibling = undefined
       const res = { tapIndex, errMsg: 'showActionSheet:ok' }
-      // fix: iOS 无法打开相册
-      // https://github.com/expo/expo/issues/25705
-      setTimeout(() => {
-        success?.(res)
-        complete?.(res)
-        resolve(res)
-      }, 1)
+      success?.(res)
+      complete?.(res)
+      resolve(res)
     }
 
     function onFail () {
@@ -43,7 +38,7 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
       <ActionSheet
         autoDectect={autoDectect}
         type={type}
-        visible={true}
+        visible={false}
         onClose={onFail}
         menus={
           itemList.map((item, index) => {
@@ -51,7 +46,7 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
               type: 'default',
               label: item,
               textStyle: { color: itemColor },
-              onPress: () => onSuccess(index)
+              onPress: onSuccess.bind(this, index)
             }
           }) as any
         }
@@ -60,11 +55,41 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
             type: 'default',
             label: '取消',
             textStyle: { color: itemColor },
-            onPress: onFail
+            onPress: onFail.bind(this)
           }
         ] as any}
       />
     )
+
+    // hack 的做法。不推荐
+    setTimeout(() => {
+      sibling.update(
+        <ActionSheet
+          autoDectect={autoDectect}
+          type={type}
+          visible
+          onClose={onFail}
+          menus={
+            itemList.map((item, index) => {
+              return {
+                type: 'default',
+                label: item,
+                textStyle: { color: itemColor },
+                onPress: onSuccess.bind(this, index)
+              }
+            }) as any
+          }
+          actions={[
+            {
+              type: 'default',
+              label: '取消',
+              textStyle: { color: itemColor },
+              onPress: onFail.bind(this)
+            }
+          ] as any}
+        />
+      )
+    }, 100)
   })
 }
 

package/src/lib/showModal/Dialog.tsx

@@ -1,15 +1,14 @@
-import { TextPropTypes, ViewPropTypes } from 'deprecated-react-native-prop-types'
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
 import {
-  Dimensions,
-  Platform,
-  StyleSheet,
+  View,
   Text,
   TouchableHighlight,
-  View
+  Dimensions,
+  StyleSheet,
+  Platform
 } from 'react-native'
-
+import { ViewPropTypes, TextPropTypes } from 'deprecated-react-native-prop-types'
 import { Mask } from '../Mask'
 import { create } from '../StyleSheet'
 import V from '../variable'
@@ -34,42 +33,49 @@ const styles = create({
     paddingRight: V.weuiDialogGapWidth
   },
   dialogTitle: {
-    fontWeight: '700',
-    fontSize: 17,
+    fontWeight: '400'
+  },
+  iosDialogTitle: {
+    fontSize: 18,
     textAlign: 'center'
   },
-
   androidDialogTitle: {
     fontSize: 21,
     textAlign: 'left'
   },
-
   dialogBody: {
     paddingLeft: V.weuiDialogGapWidth,
-    paddingRight: V.weuiDialogGapWidth,
-    marginBottom: 32
+    paddingRight: V.weuiDialogGapWidth
+  },
+  iosDialogBody: {
+    paddingBottom: (0.8 * 15) + 20
+  },
+  androidDialogBody: {
+    paddingTop: 0.25 * 17,
+    paddingBottom: (17 * 2) + 20
   },
-
   dialogBodyText: {
     color: V.weuiTextColorGray,
-    fontSize: 17,
-    textAlign: 'center',
-    lineHeight: 17 * 1.4,
+    lineHeight: 15 * 1.3,
     android: {
-      lineHeight: Math.round(17 * 1.4)
+      lineHeight: Math.round(15 * 1.3)
     }
   },
-
+  iosDialogBodyText: {
+    fontSize: 15,
+    textAlign: 'center'
+  },
   androidDialogBodyText: {
+    fontSize: 17,
     textAlign: 'left'
   },
   dialogFooter: {
-    flexDirection: 'row',
+    flexDirection: 'row'
+  },
+  iosDialogFooter: {
     height: 48,
     alignItems: 'center',
     justifyContent: 'center',
-  },
-  dialogFooterBorder: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderColor: V.weuiDialogLineColor,
     borderStyle: 'solid'
@@ -84,16 +90,17 @@ const styles = create({
   },
   dialogFooterOpr: {
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
+  },
+  iosDialogFooterOpr: {
     height: 48,
-    flex: 1,
+    flex: 1
   },
   androidDialogFooterOpr: {
     height: 42,
     paddingLeft: 16 * 0.8,
     paddingRight: 16 * 0.8
   },
-
   dialogFooterOprWithNegativeMarginRight: {
     marginRight: 0 - (16 * 0.8)
   },
@@ -102,13 +109,12 @@ const styles = create({
     borderColor: V.weuiDialogLineColor,
     borderStyle: 'solid'
   },
-  dialogFooterOprText: {
+  iosDialogFooterOprText: {
     fontSize: 18
   },
   androidDialogFooterOprText: {
     fontSize: 16
   },
-
   defaultDialogFooterOprText: {
     color: '#353535'
   },
@@ -164,15 +170,14 @@ const Index: React.FC<any> = (
         style={[
           styles.dialogFooterOpr,
           styles[`${_type}DialogFooterOpr`],
-          _type === 'android' && idx === buttons.length - 1 ? styles.dialogFooterOprWithNegativeMarginRight : (
-            idx > 0 ? styles.dialogFooterOprWithBorder : {}
-          ),
+          _type === 'ios' && idx > 0 ? styles.dialogFooterOprWithBorder : {},
+          _type === 'android' && idx === buttons.length - 1 ? styles.dialogFooterOprWithNegativeMarginRight : {}
         ]}
         underlayColor={underlayColor}
         {...others}
       >
         <Text
-          style={[styles.dialogFooterOprText, styles[`${_type}DialogFooterOprText`], { color: btnType }]}
+          style={[styles[`${_type}DialogFooterOprText`], { color: btnType }]}
         >{label}</Text>
       </TouchableHighlight>
     )
@@ -195,10 +200,10 @@ const Index: React.FC<any> = (
           <View style={[styles.dialogHeader, headerStyle]}>
             <Text style={[styles.dialogTitle, styles[`${_type}DialogTitle`], titleStyle]}>{title}</Text>
           </View>
-          <View style={[styles.dialogBody, bodyStyle]}>
+          <View style={[styles.dialogBody, styles[`${_type}DialogBody`], bodyStyle]}>
             {childrenWithProps}
           </View>
-          <View style={[styles.dialogFooter, styles[`${_type}DialogFooter`], _type !== 'android' ? styles.dialogFooterBorder : {}, footerStyle]}>
+          <View style={[styles.dialogFooter, styles[`${_type}DialogFooter`], footerStyle]}>
             {_renderButtons()}
           </View>
         </View>
@@ -209,7 +214,7 @@ const Index: React.FC<any> = (
 
 Index.propTypes = {
   autoDectect: PropTypes.bool,
-  type: PropTypes.oneOf(['ios', 'android', 'harmony']),
+  type: PropTypes.oneOf(['ios', 'android']),
   title: PropTypes.string,
   buttons: PropTypes.arrayOf(PropTypes.object),
   visible: PropTypes.bool,

package/src/lib/showModal/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Text } from 'react-native'
 import RootSiblings from 'react-native-root-siblings'
-
 import Dialog from './Dialog'
 
 function showModal (obj: Taro.showModal.Option): Promise<Taro.showModal.SuccessCallbackResult> {

package/src/lib/showModal/toast.tsx

@@ -1,11 +1,10 @@
-import PropTypes from 'prop-types'
 import React from 'react'
-import { ActivityIndicator, Image, StyleSheet, Text, View } from 'react-native'
+import PropTypes from 'prop-types'
+import { View, Text, Image, StyleSheet, ActivityIndicator } from 'react-native'
 import RootSiblings from 'react-native-root-siblings'
-
-import { errorHandler, shouldBeObject, successHandler } from '../../utils'
-import errorPng from './error.png'
 import successPng from './success.png'
+import errorPng from './error.png'
+import { errorHandler, shouldBeObject, successHandler } from '../../utils'
 
 const globalAny: any = global
 
@@ -119,7 +118,7 @@ function showToast (options: Taro.showToast.Option): Promise<TaroGeneral.Callbac
     return Promise.reject(res)
   }
 
-  let { title = '', icon = 'success', image, duration = 1500, mask = false, success, fail, complete } = options || {} // eslint-disable-line
+  let {title = '', icon = 'success', image, duration = 1500, mask = false, success, fail, complete} = options || {} // eslint-disable-line
 
   const isLoading = (icon === 'loading')
 
@@ -139,7 +138,7 @@ function showToast (options: Taro.showToast.Option): Promise<TaroGeneral.Callbac
       </View>
     </View>
   } else if (isLoading) {
-    ToastView = <WXLoading title={title} mask={mask} />
+    ToastView = <WXLoading title={title} mask={mask}/>
   } else if (icon === 'none') {
     ToastView = <View style={maskStyle}>
       <View style={styles.textGrayBlock}>
@@ -160,7 +159,7 @@ function showToast (options: Taro.showToast.Option): Promise<TaroGeneral.Callbac
   try {
     // setTimeout fires incorrectly when using chrome debug #4470
     // https://github.com/facebook/react-native/issues/4470
-    globalAny.wxToastRootSiblings && globalAny.wxToastRootSiblings.destroy()
+    globalAny.wxToastRootSiblings && globalAny.wxToastRootSiblings.destroy();
 
     globalAny.wxToastRootSiblings = new RootSiblings(ToastView)
     setTimeout(() => {
@@ -178,7 +177,7 @@ function showToast (options: Taro.showToast.Option): Promise<TaroGeneral.Callbac
   }
 }
 
-function showLoading (options: Taro.showLoading.Option = { title: '加载中' }): Promise<TaroGeneral.CallbackResult> {
+function showLoading (options: Taro.showLoading.Option): Promise<TaroGeneral.CallbackResult> {
   const isObject = shouldBeObject(options)
   if (!isObject.res) {
     const res = { errMsg: `showLoading${isObject.msg}` }
@@ -203,7 +202,7 @@ function hideToast (opts: Taro.hideToast.Option = {}): void {
   const { success, fail, complete } = opts
 
   try {
-    globalAny.wxToastRootSiblings && globalAny.wxToastRootSiblings.destroy()
+    globalAny.wxToastRootSiblings && globalAny.wxToastRootSiblings.destroy();
     globalAny.wxToastRootSiblings = undefined
     const res = { errMsg: 'showToast:ok' }
     success?.(res)
@@ -219,7 +218,7 @@ function hideLoading (opts: Taro.hideLoading.Option = {}): void {
   const { success, fail, complete } = opts
 
   try {
-    globalAny.wxToastRootSiblings && globalAny.wxToastRootSiblings.destroy()
+    globalAny.wxToastRootSiblings && globalAny.wxToastRootSiblings.destroy();
     globalAny.wxToastRootSiblings = undefined
     const res = { errMsg: 'showLoading:ok' }
     success?.(res)
@@ -232,8 +231,8 @@ function hideLoading (opts: Taro.hideLoading.Option = {}): void {
 }
 
 export {
-  hideLoading,
-  hideToast,
+  showToast,
   showLoading,
-  showToast
+  hideToast,
+  hideLoading
 }

package/src/lib/startGyroscope/index.ts

@@ -1 +1 @@
-export { startGyroscope } from '../gyroscope'
+export { startGyroscope } from '../gyroscope'

package/src/lib/startLocationUpdate/index.ts

@@ -1 +1 @@
-export { startLocationUpdate } from '../location'
+export { startLocationUpdate } from '../location'

package/src/lib/unsupportedApi.ts

@@ -1,12 +1,14 @@
-function temporarilyNotSupport(apiName: string, recommended?: string, isSync = true) {
+function temporarilyNotSupport(apiName: String, recommended?: String, isSync = true) {
   return () => {
     let errMsg = `RN 端暂不支持 API ${apiName}`
-    if (recommended) {
+    if (!!recommended) {
       errMsg += `, 请使用 ${recommended}`
     }
     console.error(errMsg)
     if (!isSync) {
-      return Promise.reject(new Error(errMsg))
+      return Promise.reject({
+        errMsg
+      })
     } else {
       return new Error(errMsg)
     }

package/src/lib/vibrate.ts

@@ -1,17 +1,16 @@
 import { Vibration } from 'react-native'
-
 import { errorHandler, successHandler } from '../utils'
 
 function vibrate (DURATION, API, OPTS): Promise<TaroGeneral.CallbackResult> {
   const res = { errMsg: `${API}:ok` }
-  const { success, fail, complete } = OPTS
-  try {
-    Vibration.vibrate(DURATION)
-    return successHandler(success, complete)(res)
-  } catch (err) {
-    res.errMsg = err.message
-    return errorHandler(fail, complete)(res)
-  }
+    const { success, fail, complete } = OPTS
+    try {
+      Vibration.vibrate(DURATION)
+      return successHandler(success, complete)(res)
+    } catch (err) {
+      res.errMsg = err.message
+      return errorHandler(fail, complete)(res)
+    }
 }
 
 function vibrateShort (opts: Taro.vibrateShort.Option = {}): Promise<TaroGeneral.CallbackResult> {
@@ -23,6 +22,6 @@ function vibrateLong (opts: Taro.vibrateLong.Option = {}): Promise<TaroGeneral.C
 }
 
 export {
-  vibrateLong,
-  vibrateShort
+  vibrateShort,
+  vibrateLong
 }

package/src/lib/window.ts

@@ -1,5 +1,4 @@
-import { Dimensions, EmitterSubscription, ScaledSize } from 'react-native'
-
+import { ScaledSize, Dimensions, EmitterSubscription } from 'react-native'
 import { createCallbackManager } from '../utils'
 
 let listener: EmitterSubscription
@@ -19,4 +18,4 @@ export const addListener = () => {
 
 export const removeListener = () => {
   listener?.remove()
-}
+}

package/src/setup.ts

@@ -0,0 +1,84 @@
+import { jest } from '@jest/globals'
+import '@testing-library/jest-native/extend-expect'
+import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js'
+import { NetInfoStateType } from '@react-native-community/netinfo'
+import mockRNCAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock.js'
+import mockRNCDeviceInfo from 'react-native-device-info/jest/react-native-device-info-mock'
+
+jest.doMock('@react-native-community/netinfo', () => ({ ...mockRNCNetInfo, NetInfoStateType }))
+jest.doMock('@react-native-async-storage/async-storage', () => mockRNCAsyncStorage)
+jest.doMock('react-native-device-info', () => mockRNCDeviceInfo)
+
+jest.doMock('react-native', () => {
+  const ReactNative = jest.requireActual('react-native') as any
+
+  // Vibration readonly so you need use defineProperty rewrite this property descriptor.
+  const Vibration = (jest.requireActual('./__tests__/__mock__/mockVibrate') as any).default
+  Object.defineProperty(ReactNative, 'Vibration', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: Vibration
+  })
+
+  // mockNativeModules: react-native/Libraries/BatchedBridge/NativeModules
+  const RNCCameraRoll = (jest.requireActual('./__tests__/__mock__/mockRNCCameraRoll') as any).default
+  const MockClipboard = (jest.requireActual('./__tests__/__mock__/mockClipboard') as any).default
+  const RNCGeolocation = (jest.requireActual('./__tests__/__mock__/mockRNCGeolocation') as any).default
+  ReactNative.NativeModules.RNCCameraRoll = RNCCameraRoll.RNCCameraRoll
+  ReactNative.NativeModules.RNCCameraRollPermissionModule = RNCCameraRoll.RNCCameraRollPermissionModule
+  ReactNative.NativeModules.RNCClipboard = new MockClipboard()
+  ReactNative.NativeModules.RNCGeolocation = RNCGeolocation
+  Object.defineProperty(ReactNative.NativeModules, 'ImageLoader', {
+    configurable: true,
+    enumerable: true,
+    get: () => ({
+      prefetchImage: jest.fn(),
+      getSize: jest.fn((_uri, success: any) => {
+        process.nextTick(() => success && success(320, 240))
+        return Promise.resolve([320, 240])
+      }),
+    }),
+  })
+  return ReactNative
+})
+
+jest.doMock('expo-modules-core', () => {
+  const unimodules = jest.requireActual('expo-modules-core') as any
+  const { NativeModulesProxy } = unimodules
+
+  NativeModulesProxy.ExpoLocation = {
+    getCurrentPositionAsync: jest.fn(() => Promise.resolve({
+      coords: {
+        latitude: 0,
+        longitude: 0,
+        speed: 0,
+        accuracy: 0,
+        altitude: 0
+      }
+    }))
+  }
+  return unimodules
+})
+
+const grantedPromise = jest.fn(() => Promise.resolve({
+  granted: true
+}))
+
+jest.doMock('expo-image-picker', () => {
+  const expoImagePicker = jest.requireActual('expo-image-picker') as any
+  expoImagePicker.requestMediaLibraryPermissionsAsync = grantedPromise
+  return expoImagePicker
+})
+
+jest.doMock('expo-location', () => {
+  const expoLocation = jest.requireActual('expo-location') as any
+  expoLocation.requestForegroundPermissionsAsync = grantedPromise
+  return expoLocation
+})
+
+jest.doMock('expo-barcode-scanner', () => {
+  const expoBarcodeSacnner = jest.requireActual('expo-barcode-scanner') as any
+  expoBarcodeSacnner.requestPermissionsAsync = grantedPromise
+  return expoBarcodeSacnner
+})

package/{types → src/types}/vue/index.d.ts

@@ -1,5 +1,6 @@
+
 declare namespace Vue {
-  interface ComponentOptions<T>{}
-}
+    interface ComponentOptions<T>{}
+  }
 
 declare interface Vue {}

package/src/utils/callbackManager.ts

@@ -1,9 +1,9 @@
 interface CallbackManager {
-  add: (opt: any) => void
-  remove: (opt: any) => void
-  clear: () => void
-  count: () => number
-  trigger: (...args: any[]) => void
+  add: (opt: any) => void;
+  remove: (opt: any) => void;
+  clear: () => void;
+  count: () => number;
+  trigger: (...args: any[]) => void;
 }
 
 export function createCallbackManager(): CallbackManager {