@mpxjs/webpack-plugin 2.9.72 → 2.10.0

package/lib/runtime/components/react/mpx-icon/index.tsx

@@ -0,0 +1,111 @@
+/**
+ * ✔ type
+ * ✔ size
+ * ✔ color
+ */
+import { JSX, forwardRef, useRef, createElement } from 'react'
+import { Text, TextStyle, Image } from 'react-native'
+import useInnerProps from '../getInnerListeners'
+import useNodesRef, { HandlerRef } from '../useNodesRef'
+import { useLayout, useTransformStyle, extendObject } from '../utils'
+import Success from './icons/success.png'
+import SuccessNoCircle from './icons/success_no_circle.png'
+import Info from './icons/info.png'
+import Warn from './icons/warn.png'
+import Waiting from './icons/waiting.png'
+import Cancel from './icons/cancel.png'
+import Download from './icons/download.png'
+import Search from './icons/search.png'
+import Clear from './icons/clear.png'
+
+export type IconType =
+  | 'success'
+  | 'success_no_circle'
+  | 'info'
+  | 'warn'
+  | 'waiting'
+  | 'cancel'
+  | 'download'
+  | 'search'
+  | 'clear'
+
+export interface IconProps {
+  type: IconType
+  size?: number
+  color?: string
+  style?: TextStyle & Record<string, any>
+  'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+
+const IconTypeMap = new Map<IconType, string>([
+  ['success', Success],
+  ['success_no_circle', SuccessNoCircle],
+  ['info', Info],
+  ['warn', Warn],
+  ['waiting', Waiting],
+  ['cancel', Cancel],
+  ['download', Download],
+  ['search', Search],
+  ['clear', Clear]
+])
+
+const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
+  (props, ref): JSX.Element => {
+    const {
+      type,
+      size = 23,
+      color,
+      style = {},
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight
+    } = props
+
+    const source = IconTypeMap.get(type)
+
+    const defaultStyle = { width: ~~size, height: ~~size }
+
+    const styleObj = extendObject({}, defaultStyle, style)
+
+    const {
+      hasSelfPercent,
+      normalStyle,
+      setWidth,
+      setHeight
+    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+    const nodeRef = useRef(null)
+    useNodesRef(props, ref, nodeRef, { style: normalStyle })
+
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+    const innerProps = useInnerProps(
+      props,
+      extendObject(
+        {
+          ref: nodeRef,
+          source,
+          style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
+        },
+        layoutProps
+      ),
+      [],
+      {
+        layoutRef
+      }
+    )
+
+    return createElement(Image, innerProps)
+  }
+)
+
+Icon.displayName = 'MpxIcon'
+
+export default Icon

package/lib/runtime/components/react/mpx-image.tsx

@@ -49,7 +49,7 @@ export interface ImageProps {
   mode?: Mode
   svg?: boolean
   style?: ImageStyle & Record<string, any>
-  'enable-offset'?: boolean;
+  'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
@@ -403,18 +403,23 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   )
 
-  return createElement(View, innerProps,
-    isSvg
-      ? createElement(SvgCssUri, {
-        uri: src,
-        onLayout: onSvgLoad,
-        onError: binderror && onSvgError,
-        style: extendObject(
-          { transformOrigin: 'top left' },
-          modeStyle
-        )
-      })
-      : loaded && renderImage({
+  const SvgImage = createElement(
+    View,
+    innerProps,
+    createElement(SvgCssUri, {
+      uri: src,
+      onLayout: onSvgLoad,
+      onError: binderror && onSvgError,
+      style: extendObject(
+        { transformOrigin: 'top left' },
+        modeStyle
+      )
+    })
+  )
+
+  const BaseImage = renderImage(
+    extendObject(
+      {
         source: { uri: src },
         resizeMode: resizeMode,
         onLoad: bindload && onImageLoad,
@@ -427,8 +432,15 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           },
           isCropMode ? modeStyle : {}
         )
-      }, enableFastImage)
+      },
+      isLayoutMode ? {} : innerProps
+    ),
+    enableFastImage
   )
+
+  const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
+
+  return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
 })
 
 Image.displayName = 'mpx-image'

package/lib/runtime/components/react/mpx-input.tsx

@@ -7,7 +7,7 @@
  * ✘ placeholder-class
  * ✔ disabled
  * ✔ maxlength
- * ✘ cursor-spacing
+ * ✔ cursor-spacing
  * ✔ auto-focus
  * ✔ focus
  * ✔ confirm-type
@@ -37,9 +37,8 @@
  * ✘ bind:keyboardcompositionend
  * ✘ bind:onkeyboardheightchange
  */
-import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect, createElement } from 'react'
+import { JSX, forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react'
 import {
-  KeyboardTypeOptions,
   Platform,
   TextInput,
   TextStyle,
@@ -77,11 +76,12 @@ type Type = 'text' | 'number' | 'idcard' | 'digit'
 export interface InputProps {
   name?: string
   style?: InputStyle & Record<string, any>
-  value?: string
+  value?: string | number
   type?: Type
   password?: boolean
   placeholder?: string
   disabled?: boolean
+  'cursor-spacing'?: number
   maxlength?: number
   'auto-focus'?: boolean
   focus?: boolean
@@ -136,6 +136,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'placeholder-style': placeholderStyle,
     disabled,
     maxlength = 140,
+    'cursor-spacing': cursorSpacing = 0,
     'auto-focus': autoFocus,
     focus,
     'confirm-type': confirmType = 'done',
@@ -163,7 +164,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const formContext = useContext(FormContext)
 
-  const setKeyboardAvoidEnabled = useContext(KeyboardAvoidContext)
+  const keyboardAvoid = useContext(KeyboardAvoidContext)
 
   let formValuesMap: Map<string, FormFieldValue> | undefined
 
@@ -171,8 +172,19 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     formValuesMap = formContext.formValuesMap
   }
 
+  const parseValue = (value: string | number | undefined): string => {
+    if (typeof value === 'string') {
+      if (value.length > maxlength && maxlength >= 0) {
+        return value.slice(0, maxlength)
+      }
+      return value
+    }
+    if (typeof value === 'number') return value + ''
+    return ''
+  }
+
   const keyboardType = keyboardTypeMap[type]
-  const defaultValue = type === 'number' && value ? value + '' : value
+  const defaultValue = parseValue(value)
   const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color
   const textAlignVertical = multiline ? 'top' : 'auto'
 
@@ -182,6 +194,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
+  const [selection, setSelection] = useState({ start: -1, end: -1 })
 
   const styleObj = extendObject(
     { padding: 0, backgroundColor: '#fff' },
@@ -207,15 +220,15 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   useEffect(() => {
     if (inputValue !== value) {
-      setInputValue(value)
+      setInputValue(parseValue(value))
     }
   }, [value])
 
-  const selection = useMemo(() => {
-    if (selectionStart >= 0 && selectionEnd >= 0) {
-      return { start: selectionStart, end: selectionEnd }
-    } else if (typeof cursor === 'number') {
-      return { start: cursor, end: cursor }
+  useEffect(() => {
+    if (typeof cursor === 'number') {
+      setSelection({ start: cursor, end: cursor })
+    } else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
+      setSelection({ start: selectionStart, end: selectionEnd })
     }
   }, [cursor, selectionStart, selectionEnd])
 
@@ -253,8 +266,23 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }
 
+  const setKeyboardAvoidContext = () => {
+    if (adjustPosition && keyboardAvoid?.current) {
+      extendObject(keyboardAvoid.current, {
+        cursorSpacing,
+        ref: nodeRef
+      })
+    }
+  }
+
+  const onInputTouchStart = () => {
+    // sometimes the focus event occurs later than the keyboardWillShow event
+    setKeyboardAvoidContext()
+  }
+
   const onInputFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    bindfocus!(
+    setKeyboardAvoidContext()
+    bindfocus && bindfocus(
       getCustomEvent(
         'focus',
         evt,
@@ -270,7 +298,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onInputBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    bindblur!(
+    bindblur && bindblur(
       getCustomEvent(
         'blur',
         evt,
@@ -320,7 +348,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onSelectionChange = (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-    bindselectionchange!(
+    setSelection(evt.nativeEvent.selection)
+    bindselectionchange && bindselectionchange(
       getCustomEvent(
         'selectionchange',
         evt,
@@ -387,8 +416,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }, [])
 
   useEffect(() => {
-    setKeyboardAvoidEnabled?.(adjustPosition)
-  }, [adjustPosition])
+    if (focus) {
+      setKeyboardAvoidContext()
+    }
+  }, [focus])
 
   useUpdateEffect(() => {
     if (!nodeRef?.current) {
@@ -424,11 +455,12 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       },
       layoutProps,
       {
-        onFocus: bindfocus && onInputFocus,
-        onBlur: bindblur && onInputBlur,
+        onTouchStart: onInputTouchStart,
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         onKeyPress: bindconfirm && onKeyPress,
         onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: bindselectionchange && onSelectionChange,
+        onSelectionChange: onSelectionChange,
         onTextInput: onTextInput,
         onChange: onChange,
         onContentSizeChange: onContentSizeChange

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -18,11 +18,11 @@
  * ✔ vtouchmove
  */
 import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo, createElement } from 'react'
-import { StyleSheet, NativeSyntheticEvent, View, LayoutChangeEvent } from 'react-native'
+import { StyleSheet, View, LayoutChangeEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit } from './utils'
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -126,6 +126,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     setHeight
   } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
+  const navigation = useNavigation()
+
   const prevSimultaneousHandlersRef = useRef<Array<GestureHandler>>(originSimultaneousHandlers || [])
   const prevWaitForHandlersRef = useRef<Array<GestureHandler>>(waitFor || [])
   const gestureSwitch = useRef(false)
@@ -333,43 +335,44 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       setHeight(height || 0)
     }
     nodeRef.current?.measure((x: number, y: number, width: number, height: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft: 0, offsetTop: 0 }
+      const { y: navigationY = 0 } = navigation?.layout || {}
+      layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 }
       resetBoundaryAndCheck({ width, height })
     })
     props.onLayout && props.onLayout(e)
   }
 
-  const extendEvent = useCallback((e: any, obj?: Record<string, any>) => {
+  const extendEvent = useCallback((e: any, type: 'start'|'move'|'end') => {
+    const { y: navigationY = 0 } = navigation?.layout || {}
     const touchArr = [e.changedTouches, e.allTouches]
     touchArr.forEach(touches => {
-      touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number }) => {
+      touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number ; clientX: number; clientY: number}) => {
         item.pageX = item.absoluteX
-        item.pageY = item.absoluteY
+        item.pageY = item.absoluteY - navigationY
+        item.clientX = item.absoluteX
+        item.clientY = item.absoluteY - navigationY
       })
     })
     Object.assign(e, {
-      touches: e.allTouches,
-      detail: {
-        x: e.changedTouches[0].absoluteX,
-        y: e.changedTouches[0].absoluteY
-      },
+      touches: type === 'end' ? [] : e.allTouches,
       currentTarget: {
         id: props.id || '',
         dataset: collectDataset(props),
         offsetLeft: 0,
         offsetTop: 0
-      }
-    }, obj)
+      },
+      detail: {}
+    })
   }, [])
 
   const triggerStartOnJS = ({ e }: { e: GestureTouchEvent }) => {
-    extendEvent(e)
+    extendEvent(e, 'start')
     bindtouchstart && bindtouchstart(e)
     catchtouchstart && catchtouchstart(e)
   }
 
   const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }: { e: GestureTouchEvent; hasTouchmove: boolean; hasCatchTouchmove: boolean; touchEvent: string }) => {
-    extendEvent(e)
+    extendEvent(e, 'move')
     if (hasTouchmove) {
       if (touchEvent === 'htouchmove') {
         bindhtouchmove && bindhtouchmove(e)
@@ -390,7 +393,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   }
 
   const triggerEndOnJS = ({ e }: { e: GestureTouchEvent }) => {
-    extendEvent(e)
+    extendEvent(e, 'end')
     bindtouchend && bindtouchend(e)
     catchtouchend && catchtouchend(e)
   }

package/lib/runtime/components/react/mpx-picker/time.tsx

@@ -1,5 +1,6 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native'
-import { PickerView, Portal } from '@ant-design/react-native'
+import Portal from '../mpx-portal/index'
+import { PickerView } from '@ant-design/react-native'
 import React, { forwardRef, useState, useRef, useEffect } from 'react'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 import { TimeProps } from './type'

package/lib/runtime/components/react/mpx-portal/index.tsx

@@ -0,0 +1,39 @@
+import { ReactNode, useContext, useEffect, useRef } from 'react'
+import { PortalContext, RouteContext, VarContext } from '../context'
+import PortalHost, { portal } from './portal-host'
+
+export type PortalProps = {
+  children?: ReactNode
+}
+
+const Portal = ({ children }:PortalProps): null => {
+  const manager = useContext(PortalContext)
+  const keyRef = useRef<any>(null)
+  const { pageId } = useContext(RouteContext) || {}
+  const varContext = useContext(VarContext)
+  if (varContext) {
+    children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>)
+  }
+  useEffect(() => {
+    manager.update(keyRef.current, children)
+  }, [children])
+  useEffect(() => {
+    if (!manager) {
+      throw new Error(
+        'Looks like you forgot to wrap your root component with `PortalHost` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/index`.\n\n'
+      )
+    }
+    keyRef.current = manager.mount(children, null, pageId)
+    return () => {
+      manager.unmount(keyRef.current)
+    }
+  }, [])
+  return null
+}
+
+Portal.Host = PortalHost
+Portal.add = portal.add
+Portal.remove = portal.remove
+Portal.update = portal.update
+
+export default Portal

package/lib/runtime/components/react/mpx-portal/portal-host.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useRef, ReactNode, useMemo, useContext } from 'react'
+import {
+  View,
+  DeviceEventEmitter,
+  NativeEventEmitter,
+  StyleSheet
+} from 'react-native'
+import PortalManager from './portal-manager'
+import { PortalContext, RouteContext } from '../context'
+
+type PortalHostProps = {
+  children: ReactNode,
+  pageId: number
+}
+
+interface PortalManagerContextValue {
+  mount: (key: number, children: React.ReactNode) => void
+  update: (key: number, children: React.ReactNode) => void
+  unmount: (key: number) => void
+}
+
+export type Operation =
+  | { type: 'mount'; key: number; children: ReactNode }
+  | { type: 'update'; key: number; children: ReactNode }
+  | { type: 'unmount'; key: number }
+
+// events
+const addType = 'MPX_RN_ADD_PORTAL'
+const removeType = 'MPX_RN_REMOVE_PORTAL'
+const updateType = 'MPX_RN_UPDATE_PORTAL'
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter()
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
+class PortalGuard {
+  private nextKey = 10000
+  add = (e: ReactNode, id: number|null) => {
+    const key = this.nextKey++
+    TopViewEventEmitter.emit(addType, e, key, id)
+    return key
+  }
+
+  remove = (key: number) => {
+    TopViewEventEmitter.emit(removeType, key)
+  }
+
+  update = (key: number, e: ReactNode) => {
+    TopViewEventEmitter.emit(updateType, key, e)
+  }
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard()
+
+const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
+  const _nextKey = useRef(0)
+  const manager = useRef<PortalManagerContextValue | null>(null)
+  const queue = useRef<Array<{ type: string, key: number; children: ReactNode }>>([])
+  const { pageId } = useContext(RouteContext) || {}
+  const mount = (children: ReactNode, _key?: number, id?: number|null) => {
+    if (id !== pageId) return
+    const key = _key || _nextKey.current++
+    if (manager.current) {
+      manager.current.mount(key, children)
+    } else {
+      queue.current.push({ type: 'mount', key, children })
+    }
+    return key
+  }
+
+  const unmount = (key: number) => {
+    if (manager.current) {
+      manager.current.unmount(key)
+    } else {
+      queue.current.push({ type: 'unmount', key, children })
+    }
+  }
+
+  const update = (key: number, children?: ReactNode) => {
+    if (manager.current) {
+      manager.current.update(key, children)
+    } else {
+      const operation = { type: 'mount', key, children }
+      const index = queue.current.findIndex((q) => q.type === 'mount' && q.key === key)
+      if (index > -1) {
+        queue.current[index] = operation
+      } else {
+        queue.current.push(operation)
+      }
+    }
+  }
+  const subScriptions = useMemo(() => {
+    return [
+      TopViewEventEmitter.addListener(addType, mount),
+      TopViewEventEmitter.addListener(removeType, unmount),
+      TopViewEventEmitter.addListener(updateType, update)
+    ]
+  }, [])
+  useEffect(() => {
+    while (queue.current.length && manager.current) {
+      const operation = queue.current.shift()
+      if (!operation) return
+      switch (operation.type) {
+        case 'mount':
+          manager.current.mount(operation.key, operation.children)
+          break
+        case 'unmount':
+          manager.current.unmount(operation.key)
+          break
+      }
+    }
+
+    return () => {
+      subScriptions.forEach((subScription:any) => {
+        subScription.remove()
+      })
+    }
+  }, [])
+  return (
+    <PortalContext.Provider
+      value={{
+        mount,
+        update,
+        unmount
+      }}
+      >
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager} />
+    </PortalContext.Provider>
+  )
+}
+
+export default PortalHost

package/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -0,0 +1,64 @@
+import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement } from 'react'
+import { View, StyleSheet } from 'react-native'
+import { extendObject } from '../utils'
+
+export type State = {
+  portals: Array<{
+    key: number
+    children: ReactNode
+  }>
+}
+
+type PortalManagerProps = {
+}
+
+const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<unknown>): ReactElement => {
+  const [state, setState] = useState<State>({
+    portals: []
+  })
+
+  const mount = useCallback((key: number, children: ReactNode) => {
+    setState((prevState) => ({
+      portals: [...prevState.portals, { key, children }]
+    }))
+  }, [state])
+
+  const update = useCallback((key: number, children: ReactNode) => {
+    setState((prevState) => ({
+      portals: prevState.portals.map((item) => {
+        if (item.key === key) {
+          return extendObject({}, item, { children })
+        }
+        return item
+      })
+    }))
+  }, [state])
+
+  const unmount = useCallback((key: number) => {
+    setState((prevState) => ({
+      portals: prevState.portals.filter((item) => item.key !== key)
+    }))
+  }, [])
+
+  useImperativeHandle(ref, () => ({
+    mount,
+    update,
+    unmount,
+    portals: state.portals
+  }))
+
+  return (
+    <>
+      {state.portals.map(({ key, children }, i) => (
+        <View
+          key={key}
+          collapsable={false} // Need collapsable=false here to clip the elevations
+          style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
+          {children}
+        </View>
+      ))}
+    </>
+  )
+})
+
+export default _PortalManager