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

package/lib/runtime/components/react/dist/utils.jsx

@@ -1,10 +1,12 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
-import { Image } from 'react-native';
+import { Image, Platform } from 'react-native';
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
-import { VarContext } from './context';
+import { VarContext, ScrollViewContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
 import FastImage from '@d11/react-native-fast-image';
+import { runOnJS } from 'react-native-reanimated';
+import { Gesture } from 'react-native-gesture-handler';
 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*$/;
@@ -15,6 +17,8 @@ export const DEFAULT_FONT_SIZE = 16;
 export const HIDDEN_STYLE = {
     opacity: 0
 };
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';
 const varDecRegExp = /^--.*/;
 const varUseRegExp = /var\(/;
 const calcUseRegExp = /calc\(/;
@@ -447,13 +451,14 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
 export const debounce = (func, delay) => {
     let timer;
     const wrapper = (...args) => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
         timer = setTimeout(() => {
             func(...args);
         }, delay);
     };
     wrapper.clear = () => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
+        timer = null;
     };
     return wrapper;
 };
@@ -500,3 +505,114 @@ export function pickStyle(styleObj = {}, pickedKeys, callback) {
         return acc;
     }, {});
 }
+export function useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled }) {
+    const enableHoverStyle = !!hoverStyle;
+    const enableHoverStyleRef = useRef(enableHoverStyle);
+    if (enableHoverStyleRef.current !== enableHoverStyle) {
+        throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+    }
+    if (!enableHoverStyle)
+        return { enableHoverStyle };
+    const gestureRef = useContext(ScrollViewContext).gestureRef;
+    const [isHover, setIsHover] = useState(false);
+    const dataRef = useRef({});
+    useEffect(() => {
+        return () => {
+            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        };
+    }, []);
+    const setStartTimer = () => {
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.startTimer = setTimeout(() => {
+            setIsHover(true);
+        }, +hoverStartTime);
+    };
+    const setStayTimer = () => {
+        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.stayTimer = setTimeout(() => {
+            setIsHover(false);
+        }, +hoverStayTime);
+    };
+    const gesture = useMemo(() => {
+        return Gesture.Pan()
+            .onTouchesDown(() => {
+            'worklet';
+            if (disabled)
+                return;
+            runOnJS(setStartTimer)();
+        })
+            .onTouchesUp(() => {
+            'worklet';
+            if (disabled)
+                return;
+            runOnJS(setStayTimer)();
+        });
+    }, [disabled]);
+    if (gestureRef) {
+        gesture.simultaneousWithExternalGesture(gestureRef);
+    }
+    return {
+        isHover,
+        gesture,
+        enableHoverStyle
+    };
+}
+export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }) {
+    const enableHoverRef = useRef(enableHover);
+    if (enableHoverRef.current !== enableHover) {
+        error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+    }
+    if (!enableHoverRef.current)
+        return { isHover: false };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gestureRef = useContext(ScrollViewContext).gestureRef;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isHover, setIsHover] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const dataRef = useRef({});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        return () => {
+            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        };
+    }, []);
+    const setStartTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.startTimer = setTimeout(() => {
+            setIsHover(true);
+        }, +hoverStartTime);
+    };
+    const setStayTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.stayTimer = setTimeout(() => {
+            setIsHover(false);
+        }, +hoverStayTime);
+    };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gesture = useMemo(() => {
+        return Gesture.Pan()
+            .onTouchesDown(() => {
+            'worklet';
+            runOnJS(setStartTimer)();
+        })
+            .onTouchesUp(() => {
+            'worklet';
+            runOnJS(setStayTimer)();
+        });
+    }, []);
+    if (gestureRef) {
+        gesture.simultaneousWithExternalGesture(gestureRef);
+    }
+    return {
+        isHover,
+        gesture
+    };
+}

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

@@ -126,8 +126,8 @@ function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
   const currentPageX = nativeEvent.changedTouches[0].pageX
   const currentPageY = nativeEvent.changedTouches[0].pageY
   if (
-    Math.abs(currentPageX - tapDetailInfo.x) > 1 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 1
+    Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3
   ) {
     ref.current!.needPress[type] = false
     ref.current!.startTimer[type] &&
@@ -289,7 +289,6 @@ const useInnerProps = (
   const eventConfig: { [key: string]: string[] } = {}
   const config = rawConfig || {
     layoutRef: { current: {} },
-    disableTouch: false,
     disableTap: false
   }
   const removeProps = [
@@ -317,11 +316,10 @@ const useInnerProps = (
     }
   }
 
-  if (!rawEventKeys.length || config.disableTouch) {
-    return omit(propsRef.current, removeProps)
-  }
-
   const events = useMemo(() => {
+    if (!rawEventKeys.length) {
+      return {}
+    }
     const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
       if (propsRef.current[key]) {
         return acc.concat(eventConfig[key])

package/lib/runtime/components/react/locale-provider.tsx

@@ -0,0 +1,83 @@
+import { createContext, useMemo, memo, ReactNode } from 'react'
+import { extendObject } from './utils'
+
+interface Locale {
+  /** zh_CN */
+  locale: string
+  DatePicker: {
+    /** 确定 */
+    okText: string
+    /** 取消 */
+    dismissText: string
+    /** 请选择 */
+    extra: string
+    DatePickerLocale: {
+      /** 年 */
+      year: string
+      /** 月 */
+      month: string
+      /** 日 */
+      day: string
+      /** 时 */
+      hour: string
+      /** 分 */
+      minute: string
+      /** 上午 */
+      am: string
+      /** 下午 */
+      pm: string
+    }
+  }
+  DatePickerView: {
+    /** 年 */
+    year: string
+    /** 月 */
+    month: string
+    /** 日 */
+    day: string
+    /** 时 */
+    hour: string
+    /** 分 */
+    minute: string
+    /** 上午 */
+    am: string
+    /** 下午 */
+    pm: string
+  }
+  Picker: {
+    /** 确定 */
+    okText: string
+    /** 取消 */
+    dismissText: string
+    /** 请选择 */
+    extra: string
+  }
+}
+export type LocaleContextProps = {
+  antLocale: Partial<Locale & { exist: boolean }>
+}
+export interface LocaleProviderProps {
+  children?: ReactNode,
+  locale?: LocaleContextProps
+}
+
+export const LocaleContext = createContext<
+  LocaleContextProps | undefined
+>(undefined)
+
+const LocaleProvider = (props :LocaleProviderProps): JSX.Element => {
+  const locale = useMemo(() => {
+    return {
+      antLocale: extendObject({}, props.locale, { exist: true })
+    }
+  }, [props.locale])
+  return (
+    <LocaleContext.Provider value={locale}>
+      {props.children}
+    </LocaleContext.Provider>
+  )
+}
+
+LocaleProvider.displayName = 'LocaleProvider'
+
+export default memo(LocaleProvider)

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

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -45,10 +45,12 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
+import type { ExtendedViewStyle } from './types/common'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -68,7 +70,7 @@ export interface ButtonProps {
   disabled?: boolean
   loading?: boolean
   'hover-class'?: string
-  'hover-style'?: ViewStyle & TextStyle & Record<string, any>
+  'hover-style'?: ExtendedViewStyle
   'hover-start-time'?: number
   'hover-stay-time'?: number
   'open-type'?: OpenType
@@ -83,8 +85,6 @@ export interface ButtonProps {
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchstart?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchend?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const LOADING_IMAGE_URI =
@@ -216,15 +216,16 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     style = {},
     children,
     bindgetuserinfo,
-    bindtap,
-    bindtouchstart,
-    bindtouchend
+    bindtap
   } = props
 
   const pageId = useContext(RouteContext)
 
   const formContext = useContext(FormContext)
 
+  const enableHover = hoverClass !== 'none'
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled })
+
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
 
@@ -233,27 +234,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     resetFn = formContext.reset
   }
 
-  const refs = useRef<{
-    hoverStartTimer: ReturnType<typeof setTimeout> | undefined
-    hoverStayTimer: ReturnType<typeof setTimeout> | undefined
-  }>({
-    hoverStartTimer: undefined,
-    hoverStayTimer: undefined
-  })
-
-  const [isHover, setIsHover] = useState(false)
-
   const isMiniSize = size === 'mini'
 
-  const applyHoverEffect = isHover && hoverClass !== 'none'
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
-  const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
+  const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color
 
   const plainBorderColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor},.6)`
       : `rgb(${plainColor})`
 
@@ -261,14 +250,14 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const plainTextColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor}, .6)`
       : `rgb(${plainColor})`
 
   const normalTextColor =
     type === 'default'
-      ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-      : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`
+      ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+      : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`
 
   const viewStyle = {
     borderWidth: 1,
@@ -297,7 +286,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     {},
     defaultStyle,
     style,
-    applyHoverEffect ? hoverStyle : {}
+    isHover ? hoverStyle : {}
   )
 
   const {
@@ -366,34 +355,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   }
 
-  const setStayTimer = () => {
-    clearTimeout(refs.current.hoverStayTimer)
-    refs.current.hoverStayTimer = setTimeout(() => {
-      setIsHover(false)
-      clearTimeout(refs.current.hoverStayTimer)
-    }, hoverStayTime)
-  }
-
-  const setStartTimer = () => {
-    clearTimeout(refs.current.hoverStartTimer)
-    refs.current.hoverStartTimer = setTimeout(() => {
-      setIsHover(true)
-      clearTimeout(refs.current.hoverStartTimer)
-    }, hoverStartTime)
-  }
-
-  const onTouchStart = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchstart && bindtouchstart(evt)
-    if (disabled) return
-    setStartTimer()
-  }
-
-  const onTouchEnd = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchend && bindtouchend(evt)
-    if (disabled) return
-    setStayTimer()
-  }
-
   const handleFormTypeFn = () => {
     if (formType === 'submit') {
       submitFn && submitFn()
@@ -418,8 +379,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       },
       layoutProps,
       {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
       }
     ),
@@ -442,7 +401,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   )
 
-  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+  const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
     wrapChildren(
       props,
       {
@@ -453,6 +412,10 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       }
     )
   )
+
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
+    : baseButton
 })
 
 Button.displayName = 'MpxButton'

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

@@ -403,32 +403,48 @@ 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({
-        source: { uri: src },
-        resizeMode: resizeMode,
-        onLoad: bindload && onImageLoad,
-        onError: binderror && onImageError,
-        style: extendObject(
-          {
-            transformOrigin: 'top left',
-            width: isCropMode ? imageWidth : '100%',
-            height: isCropMode ? imageHeight : '100%'
-          },
-          isCropMode ? modeStyle : {}
-        )
-      }, enableFastImage)
+  const createBaseImage = (innerProps = {}) => {
+    return renderImage(
+      extendObject(
+        {
+          source: { uri: src },
+          resizeMode: resizeMode,
+          onLoad: bindload && onImageLoad,
+          onError: binderror && onImageError,
+          style: extendObject(
+            {
+              transformOrigin: 'top left',
+              width: isCropMode ? imageWidth : '100%',
+              height: isCropMode ? imageHeight : '100%'
+            },
+            isCropMode ? modeStyle : {}
+          )
+        },
+        innerProps
+      ),
+      enableFastImage
+    )
+  }
+
+  const SvgImage = createElement(
+    View,
+    innerProps,
+    createElement(SvgCssUri, {
+      uri: src,
+      onLayout: onSvgLoad,
+      onError: binderror && onSvgError,
+      style: extendObject(
+        { transformOrigin: 'top left' },
+        modeStyle
+      )
+    })
   )
+
+  const BaseImage = createBaseImage(innerProps)
+
+  const LayoutImage = createElement(View, innerProps, loaded && createBaseImage())
+
+  return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
 })
 
 Image.displayName = 'mpx-image'

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

@@ -149,7 +149,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
-    'adjust-position': adjustPosition = true,
+    'adjust-position': adjustPosition = false,
     bindinput,
     bindfocus,
     bindblur,

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

@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✘ animation
+ * ✔ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove

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'
+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-picker-view-column-item.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react'
+import { LayoutChangeEvent } from 'react-native'
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import { wrapChildren, extendObject } from './utils'
+import { createFaces } from './pickerFaces'
+import { usePickerViewColumnAnimationContext } from './pickerVIewContext'
+
+interface PickerColumnItemProps {
+  item: React.ReactElement
+  index: number
+  itemHeight: number
+  itemWidth?: number | '100%'
+  textStyleFromParent: Record<string, any>
+  textStyle: Record<string, any>
+  hasVarDec: boolean
+  varContext: Record<string, any>
+  visibleCount: number
+  textProps?: any
+  onItemLayout?: (e: LayoutChangeEvent) => void
+}
+
+const _PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
+  item,
+  index,
+  itemHeight,
+  itemWidth = '100%',
+  textStyleFromParent,
+  textStyle,
+  hasVarDec,
+  varContext,
+  textProps,
+  visibleCount,
+  onItemLayout
+}) => {
+  const offsetYShared = usePickerViewColumnAnimationContext()
+  const facesShared = useSharedValue(createFaces(itemHeight, visibleCount))
+
+  useEffect(() => {
+    facesShared.value = createFaces(itemHeight, visibleCount)
+  }, [itemHeight])
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index))
+    return {
+      opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+      transform: [
+        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+        { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+      ]
+    }
+  })
+
+  const strKey = `picker-column-item-${index}`
+  const restProps = index === 0 ? { onLayout: onItemLayout } : {}
+  const itemProps = extendObject(
+    {
+      style: extendObject(
+        { height: itemHeight, width: '100%' },
+        textStyleFromParent,
+        textStyle,
+        item.props.style
+      )
+    },
+    restProps
+  )
+  const realItem = React.cloneElement(item, itemProps)
+
+  return (
+    <Reanimated.View
+      key={strKey}
+      style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}
+    >
+      {wrapChildren(
+        { children: realItem },
+        {
+          hasVarDec,
+          varContext,
+          textStyle,
+          textProps
+        }
+      )}
+    </Reanimated.View>
+  )
+}
+
+_PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem'
+export default _PickerViewColumnItem