Merge branch 'master' into fix-rn-ref-style

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -1,5 +1,5 @@
 import { isObject, isArray, dash2hump, isFunction, cached } from '@mpxjs/utils'
-import { Dimensions } from 'react-native'
+import { Dimensions, StyleSheet } from 'react-native'
 
 function rpx (value) {
   const { width } = Dimensions.get('screen')
@@ -9,6 +9,7 @@ function rpx (value) {
 }
 
 global.__rpx = rpx
+global.__hairlineWidth = StyleSheet.hairlineWidth
 
 const escapeReg = /[()[\]{}#!.:,%'"+$]/g
 const escapeMap = {
@@ -25,7 +26,7 @@ const escapeMap = {
   ':': '_c_',
   ',': '_2c_',
   '%': '_p_',
-  "'": '_q_',
+  '\'': '_q_',
   '"': '_dq_',
   '+': '_a_',
   $: '_si_'
@@ -81,7 +82,8 @@ const listDelimiter = /;(?![^(]*[)])/g
 const propertyDelimiter = /:(.+)/
 const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
 const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
-const varRegExp = /^--.*/
+const hairlineRegExp = /^\s*hairlineWidth\s*$/
+const varRegExp = /^--/
 
 const parseStyleText = cached((cssText = '') => {
   const res = {}
@@ -123,15 +125,15 @@ function transformStyleObj (styleObj) {
   const keys = Object.keys(styleObj)
   const transformed = {}
   keys.forEach((prop) => {
-    // todo 检测不支持的prop
     let value = styleObj[prop]
     let matched
     if ((matched = pxRegExp.exec(value))) {
       value = +matched[1]
     } else if ((matched = rpxRegExp.exec(value))) {
       value = rpx(+matched[1])
+    } else if (hairlineRegExp.test(value)) {
+      value = StyleSheet.hairlineWidth
     }
-    // todo 检测不支持的value
     transformed[prop] = value
   })
   return transformed

packages/core/src/platform/patch/react/getDefaultOptions.ios.js

@@ -283,7 +283,7 @@ const triggerResizeEvent = (mpxProxy) => {
 }
 
 function usePageContext (mpxProxy, instance) {
-  const { pageId } = useContext(routeContext) || {}
+  const pageId = useContext(routeContext)
 
   instance.getPageId = () => {
     return pageId
@@ -447,13 +447,12 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
           null,
           createElement(routeContext.Provider,
             {
-              value: { pageId: currentPageId }
+              value: currentPageId
             },
             createElement(defaultOptions,
               {
                 navigation,
-                route,
-                pageConfig
+                route
               }
             )
           )

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -9,7 +9,7 @@ module.exports = function getSpec ({ warn, error }) {
     // React Native android 不支持的 CSS property
     android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
-  const cssVariableExp = /var\((.*?)\)/
+  const cssVariableExp = /^var\((.+)\)$/
   // 不支持的属性提示
   const unsupportedPropError = ({ prop, mode }) => {
     error(`Property [${prop}] is not supported in React Native ${mode} environment!`)
@@ -91,15 +91,15 @@ module.exports = function getSpec ({ warn, error }) {
       // css variable 类型校验
       const newVal = (value.match(cssVariableExp)?.[1] || '').split(',')
       const variable = newVal?.[0]
-      if (!variable || !/^--.+$/.test(variable)) {
+      if (!variable || !/^--/.test(variable)) {
         tips(`The css variable [${prop}:${value}] is invalid, please check again`)
         return false
       }
       return true
     }
     const namedColor = ['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']
     const valueExp = {
-      number: /^(-?\d+(\.\d+)?)(rpx|px|%)?$/,
+      number: /^((-?\d+(\.\d+)?)(rpx|px|%)?|hairlineWidth)$/,
       color: new RegExp(('^(' + namedColor.join('|') + ')$') + '|(^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$)|^(rgb|rgba|hsl|hsla|hwb)\\(.+\\)$')
     }
     const type = getValueType(prop)

packages/webpack-plugin/lib/react/style-helper.js

@@ -4,7 +4,8 @@ const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
 const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
-const varRegExp = /^--.*/
+const hairlineRegExp = /^\s*hairlineWidth\s*$/
+const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
 function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
   const classMap = {}
@@ -22,6 +23,9 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
     } else if ((matched = rpxRegExp.exec(value))) {
       value = `global.__rpx(${matched[1]})`
       needStringify = false
+    } else if (hairlineRegExp.test(value)) {
+      value = 'global.__hairlineWidth'
+      needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
   }

packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx

@@ -126,20 +126,17 @@ const styles = StyleSheet.create({
 })
 
 const getOpenTypeEvent = (openType: OpenType) => {
-  // @ts-ignore
-  if (!global?.__mpx?.config?.rnConfig) {
+  if (!(globalThis as any)?.__mpx?.config?.rnConfig) {
     throwReactWarning('[Mpx runtime warn]: Environment not supported')
     return
   }
-
   const eventName = OpenTypeEventsMap.get(openType)
   if (!eventName) {
     throwReactWarning(`[Mpx runtime warn]: open-type not support ${openType}`)
     return
   }
 
-  // @ts-ignore
-  const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName]
+  const event = (globalThis as any).__mpx.config.rnConfig?.openTypeHandler?.[eventName]
   if (!event) {
     throwReactWarning(`[Mpx runtime warn]: Unregistered ${eventName} event`)
     return
@@ -172,7 +169,6 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
     return () => {
       animation.stop()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const loadingStyle = {

packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx

@@ -9,6 +9,7 @@ import {
   NativeSyntheticEvent,
   TextStyle
 } from 'react-native'
+import { noop } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils'
@@ -42,7 +43,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     }
 
     const contextRef: LabelContextValue = useRef({
-      triggerChange: () => { }
+      triggerChange: noop
     })
 
     const layoutRef = useRef({})

packages/webpack-plugin/lib/runtime/components/react/mpx-picker/multiSelector.tsx

@@ -63,15 +63,18 @@ function getColumnIndexByValue (range: any[] = [], column: number, value: any[]
         if (ritem.value === item) {
           changeIndex = rindex
         }
+        return ritem
       })
     } else {
       curRange.map((citem, cindex) => {
         if (citem.value === item) {
           tmpRange = citem.children
         }
+        return citem
       })
       curRange = tmpRange
     }
+    return item
   })
   return changeIndex
 }

packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx

@@ -1,15 +1,17 @@
 import { View, TouchableWithoutFeedback } from 'react-native'
-import { Picker } from '@ant-design/react-native'
+import { Picker, PickerColumnItem } from '@ant-design/react-native'
 import { regionData } from './regionData'
 import React, { forwardRef, useState, useRef } from 'react'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { RegionProps, RegionObj, PickerData, LayoutType } from './type'
+import { RegionProps, RegionObj, LayoutType } from './type'
 
-function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerData[] {
+function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerColumnItem[] {
   const l = depth
-  const obj: PickerData[] = []
+  // 'PickerData[]' is not assignable to type 'PickerColumn | PickerColumn[]'.
+  // const obj: PickerColumnItem[] = []
+  const obj: PickerColumnItem[] = []
   if (customItem) {
-    const objClone: PickerData = {
+    const objClone: PickerColumnItem = {
       value: customItem,
       label: customItem,
       children: []
@@ -18,12 +20,12 @@ function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth
     let loop = panding
     while (depth-- > 0) {
       loop.children = [{ ...objClone }]
-      loop = loop.children[0] as PickerData
+      loop = loop.children[0] as PickerColumnItem
     }
-    obj.push(panding)
+    obj.push(panding as PickerColumnItem)
   }
   for (let i = 0; i < clObj.length; i++) {
-    const region: PickerData = {
+    const region: PickerColumnItem = {
       value: clObj[i].value,
       label: clObj[i].value
     }
@@ -58,6 +60,7 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
           return code
         }
       }
+      return item
     }).filter(code => !!code)
     const detail: Record<string, any> = { value, code }
     if (postcode[2]) detail.postcode = postcode[2]
@@ -74,12 +77,16 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
     })
   }
 
+  const onDismiss = (): void => {
+    bindcancel && bindcancel()
+  }
+
   const regionProps = {
     data: formatRegionData,
     value: regionvalue,
     onChange,
     disabled,
-    onDismiss: bindcancel && bindcancel
+    onDismiss
   }
 
   const touchProps = {
@@ -88,7 +95,6 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
   }
 
   return (
-    // @ts-ignore
     <Picker {...regionProps}>
       <TouchableWithoutFeedback>
         <View {...touchProps}>{children}</View>
@@ -97,5 +103,5 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
   )
 })
 
-_RegionPicker.displayName === 'mpx-picker-region'
+_RegionPicker.displayName = 'mpx-picker-region'
 export default _RegionPicker

packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx

@@ -8,8 +8,7 @@ import { TimeProps } from './type'
 // const { height: dHeight, width: dWidth } = Dimensions.get('window');
 //  modal属性: {"height": 298.33331298828125, "offsetLeft": 0, "offsetTop": 513.6666870117188, "width": 375, "x": 0, "y": 513.6666870117188}
 // const { height: sHeight, width: sWidth } = Dimensions.get('screen');
-// 	设备屏幕的大小。 screen
-
+// 设备屏幕的大小。 screen
 const styles: { [key: string]: Object } = {
   showModal: {
     backgroundColor: 'black',

packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx

@@ -10,14 +10,11 @@ interface RootPortalProps {
 }
 const _RootPortal = (props: RootPortalProps) => {
   const { children, enable = true } = props
-  return enable ? (
-    // @ts-ignore
-    <Portal>
+  return enable
+    ? <Portal>
       {children}
     </Portal>
-  ) : (
-    <>{children}</>
-  )
+    : <>{children}</>
 }
 
 _RootPortal.displayName = 'mpx-root-portal'

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx

@@ -43,7 +43,7 @@ const styles: { [key: string]: Object } = {
   }
 }
 
-const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>((props, ref): JSX.Element => {
+const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, CarouseProps>((props, ref): JSX.Element => {
   // 默认取水平方向的width
   const { width } = Dimensions.get('window')
   const { styleObj } = props
@@ -66,7 +66,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   const defaultY = (defaultHeight * initOffsetIndex) || 0
   // 内部存储上一次的offset值
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
-  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView, CarouseProps>(props, ref, {
+  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView & View, CarouseProps>(props, ref, {
   })
   // 存储layout布局信息
   const layoutRef = useRef({})
@@ -162,7 +162,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
           autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 })
           nextIndex = state.total - 1
           // 反向: 数组最后一个index
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total }),
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total })
           isAutoEnd = true
         } else {
           // 反向非最后一个
@@ -172,7 +172,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
         if (nextIndex > state.total - 1) {
           autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * (nextIndex + 1) })
           nextIndex = 0
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step }),
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step })
           isAutoEnd = true
         } else {
           // nextIndex =  nextIndex,
@@ -216,22 +216,26 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     } else {
       if (!isAutoEnd) {
         scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true })
+        // 这里包裹了一层contentOffset需要测试下
         onScrollEnd({
           nativeEvent: {
-            // @ts-ignore
-            x: +nextOffset.x,
-            y: +nextOffset.y
+            contentOffset: {
+              x: +nextOffset.x,
+              y: +nextOffset.y
+            }
           }
-        })
+        } as NativeSyntheticEvent<NativeScrollEvent>)
       } else {
+        // 同上
         setTimeout(() => {
           onScrollEnd({
             nativeEvent: {
-              // @ts-ignore
-              x: 0,
-              y: 0
+              contentOffset: {
+                x: 0,
+                y: 0
+              }
             }
-          })
+          } as NativeSyntheticEvent<NativeScrollEvent>)
         }, 10)
         if (state.dir === 'x') {
           scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true })
@@ -293,7 +297,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   */
   function onWrapperLayout () {
     if (props.enableOffset) {
-      // @ts-ignore
       scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
         layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
         const isWDiff = state.width !== width
@@ -399,7 +402,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     if (total > 1 && Array.isArray(children)) {
       let arrElements: (Array<ReactNode>) = []
       // pages = ["2", "0", "1", "2", "0"]
-      const pages = Array.isArray(children) && Object.keys(children) || []
+      const pages = Array.isArray(children) ? Object.keys(children) : []
       /* 无限循环的时候 */
       if (circular) {
         pages.unshift(total - 1 + '')

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx

@@ -1,6 +1,6 @@
 import { ScrollView } from 'react-native'
 import { JSX, MutableRefObject, forwardRef, useRef } from 'react'
-import { default as Carouse } from './carouse'
+import Carouse from './carouse'
 import { SwiperProps } from './type'
 import useInnerProps from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数