@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.0

package/lib/runtime/components/react/pickerOverlay.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+type OverlayProps = {
+  itemHeight: number
+  overlayItemStyle?: StyleProp<ViewStyle>
+  overlayContainerStyle?: StyleProp<ViewStyle>
+}
+
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+  return (
+    <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selection: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.05)',
+    alignSelf: 'stretch'
+  }
+})
+
+export default React.memo(Overlay)

package/lib/runtime/components/react/types/common.ts

@@ -16,3 +16,5 @@ export type ExtendedViewStyle = ViewStyle & {
 export type ExtendedFunctionComponent = FunctionComponent & {
   isCustomText?: boolean
 }
+
+export type AnyFunc = (...args: ReadonlyArray<any>) => any

package/lib/runtime/components/react/types/global.d.ts

@@ -1,21 +1,7 @@
-declare module 'react-native-svg/css' {
-  import type { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native'
-  import type { SvgProps as SvgCssUriProps } from 'react-native-svg'
-
-  export const SvgCssUri: React.ComponentType<SvgCssUriProps & { uri?: string }>
-
-  export interface WithLocalSvgProps {
-    asset: ImageSourcePropType
-    style?: StyleProp<ImageStyle>
-    width?: string | number
-    height?: string | number
-  }
-
-  export const WithLocalSvg: React.ComponentType<WithLocalSvgProps>
-}
-
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
+  export function isFunction (fn: unknown): boolean
+  export function isNumber (num: unknown): boolean
   export function hasOwn (obj: Object, key: string): boolean
   export function noop (...arg: any): void
   export function diffAndCloneA<A, B> (a: A, b?: B): {
@@ -26,13 +12,15 @@ declare module '@mpxjs/utils' {
   export function isObject (value): value is Object
   export function error (msg: string, location?: string, e?: any): void
   export function warn (msg: string, location?: string, e?: any): void
+  export function collectDataset (props: Record<string, any>, needParse?: boolean): Record<string, any>
   export function getFocusedNavigation (): {
     insets: {
       top: number
       bottom: number
       left: number
       right: number
-    }
+    },
+    setOptions: (params: Record<string, any>) => void
   } | undefined
 }
 

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -83,9 +83,31 @@ const InitialValue: ExtendedViewStyle = Object.assign({
 const TransformOrigin = 'transformOrigin'
 // transform
 const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
+// 多value解析
+const parseValues = (str: string, char = ' ') => {
+  let stack = 0
+  let temp = ''
+  const result = []
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '(') {
+      stack++
+    } else if (str[i] === ')') {
+      stack--
+    }
+    // 非括号内 或者 非分隔字符且非空
+    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+      temp += str[i]
+    }
+    if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+      result.push(temp)
+      temp = ''
+    }
+  }
+  return result
+}
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 const parseTransform = (transformStr: string) => {
-  const values = transformStr.trim().split(/\s+/)
+  const values = parseValues(transformStr)
   const transform: {[propName: string]: string|number|number[]}[] = []
   values.forEach(item => {
     const match = item.match(/([/\w]+)\(([^)]+)\)/)
@@ -109,7 +131,7 @@ const parseTransform = (transformStr: string) => {
           break
         case 'matrix':
         case 'matrix3d':
-          transform.push({ [key]: val.split(',').map(val => +val) })
+          transform.push({ [key]: parseValues(val, ',').map(val => +val) })
           break
         case 'translate':
         case 'scale':
@@ -120,8 +142,8 @@ const parseTransform = (transformStr: string) => {
         {
           // 2 个以上的值处理
           key = key.replace('3d', '')
-          const vals = val.split(',', key === 'rotate' ? 4 : 3)
-          // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+          const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+          // scale(.5) === scaleX(.5) scaleY(.5)
           if (vals.length === 1 && key === 'scale') {
             vals.push(vals[0])
           }
@@ -218,12 +240,15 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       }
       // 添加每个key的多次step动画
       animatedKeys.forEach(key => {
-        let toVal = (rules.get(key) || transform.get(key))
         // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-        if (toVal === undefined) {
-          toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value
-        }
-        const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
+        const toVal = rules.get(key) !== undefined
+          ? rules.get(key)
+          : transform.get(key) !== undefined
+            ? transform.get(key)
+            : index > 0
+              ? lastValueMap[key]
+              : shareValMap[key].value
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
         needSetCallback = false
         if (!sequence[key]) {
           sequence[key] = [animation]
@@ -231,7 +256,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
           sequence[key].push(animation)
         }
         // 更新一下 lastValueMap
-        lastValueMap[key] = toVal
+        lastValueMap[key] = toVal!
       })
       // 赋值驱动动画
       animatedKeys.forEach((key) => {
@@ -327,6 +352,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
         styles[key] = shareValMap[key].value
       }
       return styles
-    }, Object.assign({}, originalStyle) as ExtendedViewStyle)
+    }, {} as ExtendedViewStyle)
   })
 }

package/lib/runtime/components/react/utils.tsx

@@ -1,16 +1,18 @@
-import { useEffect, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle } from 'react-native'
-import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
+import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
 import { VarContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import type { ExtendedFunctionComponent } from './types/common'
+import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
+import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/
+export const SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/
-export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/
+export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines|allowFontScaling/
 export const DEFAULT_FONT_SIZE = 16
 export const HIDDEN_STYLE = {
   opacity: 0
@@ -30,10 +32,7 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
 
 function getSafeAreaInset (name: string) {
   const navigation = getFocusedNavigation()
-  const insets = {
-    ...initialWindowMetrics?.insets,
-    ...navigation?.insets
-  }
+  const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
 }
 
@@ -78,7 +77,7 @@ export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
     const [k, v, ...rest] = style.split(':')
     if (rest.length || !v || !k) return styleObj
     const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
-    return Object.assign(styleObj, { [key]: v.trim() })
+    return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) })
   }, {})
 }
 
@@ -89,25 +88,18 @@ export const parseUrl = (cssUrl = '') => {
 }
 
 export const getRestProps = (transferProps: any = {}, originProps: any = {}, deletePropsKey: any = []) => {
-  return {
-    ...transferProps,
-    ...omit(originProps, deletePropsKey)
-  }
+  return extendObject(
+    {},
+    transferProps,
+    omit(originProps, deletePropsKey)
+  )
 }
 
 export function isText (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
     const displayName = (ele.type as ExtendedFunctionComponent)?.displayName
     const isCustomText = (ele.type as ExtendedFunctionComponent)?.isCustomText
-    return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText
-  }
-  return false
-}
-
-export function isEmbedded (ele: ReactNode): ele is ReactElement {
-  if (isValidElement(ele)) {
-    const displayName = (ele.type as ExtendedFunctionComponent)?.displayName || ''
-    return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName)
+    return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText
   }
   return false
 }
@@ -275,6 +267,15 @@ function transformCalc (styleObj: Record<string, any>, calcKeyPaths: Array<Array
   })
 }
 
+const stringifyProps = ['fontWeight']
+function transformStringify (styleObj: Record<string, any>) {
+  stringifyProps.forEach((prop) => {
+    if (isNumber(styleObj[prop])) {
+      styleObj[prop] = '' + styleObj[prop]
+    }
+  })
+}
+
 interface TransformStyleConfig {
   enableVar?: boolean
   externalVarContext?: Record<string, any>
@@ -385,6 +386,8 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       }
     }
   })
+  // transform number enum stringify
+  transformStringify(normalStyle)
 
   return {
     normalStyle,
@@ -474,7 +477,7 @@ interface LayoutConfig {
 export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }: LayoutConfig) => {
   const layoutRef = useRef({})
   const hasLayoutRef = useRef(false)
-  const layoutStyle: Record<string, any> = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
+  const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {} }, [hasLayoutRef.current])
   const layoutProps: Record<string, any> = {}
   const enableOffset = props['enable-offset']
   if (hasSelfPercent || onLayout || enableOffset) {
@@ -513,8 +516,8 @@ export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varC
   if (textStyle || textProps) {
     children = Children.map(children, (child) => {
       if (isText(child)) {
-        const style = { ...textStyle, ...child.props.style }
-        return cloneElement(child, { ...textProps, style })
+        const style = extendObject({}, textStyle, child.props.style)
+        return cloneElement(child, extendObject({}, textProps, { style }))
       }
       return child
     })
@@ -525,9 +528,52 @@ export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varC
   return children
 }
 
+export const debounce = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  let timer: any
+  const wrapper = (...args: ReadonlyArray<any>) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+  wrapper.clear = () => {
+    clearTimeout(timer)
+  }
+  return wrapper
+}
+
+export const useDebounceCallback = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  const debounced = useMemo(() => debounce(func, delay), [func])
+  return debounced
+}
+
+export const useStableCallback = <T extends AnyFunc | null | undefined> (
+  callback: T
+): T extends AnyFunc ? T : () => void => {
+  const ref = useRef<T>(callback)
+  ref.current = callback
+  return useCallback<any>(
+    (...args: any[]) => ref.current?.(...args),
+    []
+  )
+}
+
+export const usePrevious = <T, > (value: T): T | undefined => {
+  const ref = useRef<T | undefined>(undefined)
+  const prev = ref.current
+  ref.current = value
+  return prev
+}
+
 export interface GestureHandler {
-  nodeRefs?: Array<{ getNodeInstance: () => { nodeRef: unknown } }>;
-  current?: unknown;
+  nodeRefs?: Array<{ getNodeInstance: () => { nodeRef: unknown } }>
+  current?: unknown
 }
 
 export function flatGesture (gestures: Array<GestureHandler> = []) {
@@ -539,3 +585,28 @@ export function flatGesture (gestures: Array<GestureHandler> = []) {
     return gesture?.current ? [gesture] : []
   })) || []
 }
+
+export const extendObject = Object.assign
+
+export function getCurrentPage (pageId: number | null) {
+  if (!global.getCurrentPages) return
+  const pages = global.getCurrentPages()
+  return pages.find((page: any) => isFunction(page.getPageId) && page.getPageId() === pageId)
+}
+
+export function renderImage (
+  imageProps: ImageProps | FastImageProps,
+  enableFastImage = false
+) {
+  const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? FastImage : Image
+  return <Component {...imageProps} />
+}
+
+export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string) {
+  return pickedKeys.reduce<Record<string, any>>((acc, key) => {
+    if (key in styleObj) {
+      acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key]
+    }
+    return acc
+  }, {})
+}

package/lib/runtime/components/web/getInnerListeners.js

@@ -1,3 +1,4 @@
+import { extend } from '../../utils'
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
   // 该函数必须在产生merge前执行
@@ -53,7 +54,7 @@ export function extendEvent (e, extendObj = {}) {
 }
 
 export function inheritEvent (type, oe, detail = {}) {
-  detail = Object.assign({}, oe.detail, detail)
+  detail = extend({}, oe.detail, detail)
   const ne = getCustomEvent(type, detail)
   extendEvent(ne, {
     timeStamp: oe.timeStamp,
@@ -68,12 +69,11 @@ export function inheritEvent (type, oe, detail = {}) {
 export function getCustomEvent (type, detail = {}, target = null) {
   const targetEl = (target && target.$el) || null
   const targetInfo = targetEl ? { target: targetEl, currentTarget: targetEl } : {}
-  return {
+  return extend({
     type,
     detail,
-    timeStamp: new Date().valueOf(),
-    ...targetInfo
-  }
+    timeStamp: new Date().valueOf()
+  }, targetInfo)
 }
 
 function noop () {
@@ -82,7 +82,7 @@ function noop () {
 
 export default function getInnerListeners (context, options = {}) {
   let { mergeBefore = {}, mergeAfter = {}, defaultListeners = [], ignoredListeners = [] } = options
-  const listeners = Object.assign({}, context.$listeners)
+  const listeners = extend({}, context.$listeners)
   defaultListeners.forEach((key) => {
     if (!listeners[key]) listeners[key] = noop
   })