@mpxjs/webpack-plugin 2.9.67 → 2.9.69

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -1,15 +1,19 @@
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useRef, useContext, useMemo } from 'react';
 import { noop, warn } from '@mpxjs/utils';
 import { Portal } from '@ant-design/react-native';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
+import { getCurrentPage } from './utils';
+import { RouteContext } from './context';
 const _WebView = forwardRef((props, ref) => {
     const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
+    const pageId = useContext(RouteContext);
+    const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -21,16 +25,21 @@ const _WebView = forwardRef((props, ref) => {
     useNodesRef(props, ref, webViewRef, {
         defaultStyle: defaultWebViewStyle
     });
-    const _messageList = [];
+    const _messageList = useRef([]);
     const handleUnload = () => {
         // 这里是 WebView 销毁前执行的逻辑
         bindmessage(getCustomEvent('messsage', {}, {
             detail: {
-                data: _messageList
+                data: _messageList.current
             },
             layoutRef: webViewRef
         }));
     };
+    useEffect(() => {
+        if (currentPage) {
+            currentPage.__webViewUrl = src;
+        }
+    }, [src, currentPage]);
     useEffect(() => {
         // 组件卸载时执行
         return () => {
@@ -57,6 +66,11 @@ const _WebView = forwardRef((props, ref) => {
         };
         binderror(result);
     };
+    const _changeUrl = function (navState) {
+        if (currentPage) {
+            currentPage.__webViewUrl = navState.url;
+        }
+    };
     const _message = function (res) {
         let data = {};
         let asyncCallback;
@@ -73,7 +87,7 @@ const _WebView = forwardRef((props, ref) => {
         const postData = data.payload || {};
         switch (data.type) {
             case 'postMessage':
-                _messageList.push(postData.data);
+                _messageList.current.push(postData.data);
                 asyncCallback = Promise.resolve({
                     errMsg: 'invokeWebappApi:ok'
                 });
@@ -106,7 +120,7 @@ const _WebView = forwardRef((props, ref) => {
         });
     };
     return (<Portal>
-    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
+    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} onNavigationStateChange={_changeUrl} javaScriptEnabled={true}></WebView>
   </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

package/lib/runtime/components/react/dist/pickerFaces.js

@@ -0,0 +1,75 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+export const degToRad = (deg) => (Math.PI * deg) / 180;
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree, itemHeight) => itemHeight * Math.cos(degToRad(degree));
+export const calcPickerHeight = (faces, itemHeight) => {
+    if (faces.length === 7) {
+        return itemHeight * 5;
+    }
+    return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0);
+};
+export const createFaces = (itemHeight, visibleCount) => {
+    // e.g [30, 60, 90]
+    const getDegreesRelativeCenter = () => {
+        const maxStep = Math.trunc((visibleCount + 2) / 2); // + 2 because there are 2 more faces at 90 degrees
+        const stepDegree = 90 / maxStep;
+        const result = [];
+        for (let i = 1; i <= maxStep; i++) {
+            result.push(i * stepDegree);
+        }
+        return result;
+    };
+    const getScreenHeightsAndOffsets = (degrees) => {
+        const screenHeights = degrees.map((deg) => calcHeight(deg, itemHeight));
+        const freeSpaces = screenHeights.map((screenHeight) => itemHeight - screenHeight);
+        const offsets = freeSpaces.map((freeSpace, index) => {
+            let offset = freeSpace / 2;
+            for (let i = 0; i < index; i++) {
+                offset += freeSpaces[i];
+            }
+            return offset;
+        });
+        return [screenHeights, offsets];
+    };
+    const getOpacity = (index) => {
+        const map = {
+            0: 0,
+            1: 0.2,
+            2: 0.35,
+            3: 0.45,
+            4: 0.5
+        };
+        return map[index] ?? Math.min(1, map[4] + index * 0.5);
+    };
+    const degrees = getDegreesRelativeCenter();
+    const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
+    return [
+        // top items
+        ...degrees
+            .map((degree, index) => {
+            return {
+                index: -1 * (index + 1),
+                deg: degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: -1 * offsets[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+            .reverse(),
+        // center item
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+        // bottom items
+        ...degrees.map((degree, index) => {
+            return {
+                index: index + 1,
+                deg: -1 * degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: offsets[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+    ];
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }) => {
+    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/dist/utils.jsx

@@ -1,8 +1,10 @@
-import { useEffect, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
-import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { Image } from 'react-native';
+import { isObject, isFunction, 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 FastImage from '@d11/react-native-fast-image';
 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*$/;
@@ -69,7 +71,7 @@ export const parseInlineStyle = (inlineStyle = '') => {
         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()) });
     }, {});
 };
 export const parseUrl = (cssUrl = '') => {
@@ -444,6 +446,34 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     }
     return children;
 }
+export const debounce = (func, delay) => {
+    let timer;
+    const wrapper = (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+    wrapper.clear = () => {
+        clearTimeout(timer);
+    };
+    return wrapper;
+};
+export const useDebounceCallback = (func, delay) => {
+    const debounced = useMemo(() => debounce(func, delay), [func]);
+    return debounced;
+};
+export const useStableCallback = (callback) => {
+    const ref = useRef(callback);
+    ref.current = callback;
+    return useCallback((...args) => ref.current?.(...args), []);
+};
+export const usePrevious = (value) => {
+    const ref = useRef(undefined);
+    const prev = ref.current;
+    ref.current = value;
+    return prev;
+};
 export function flatGesture(gestures = []) {
     return (gestures && gestures.flatMap((gesture) => {
         if (gesture && gesture.nodeRefs) {
@@ -453,3 +483,24 @@ export function flatGesture(gestures = []) {
         return gesture?.current ? [gesture] : [];
     })) || [];
 }
+export function extendObject(...args) {
+    return Object.assign({}, ...args);
+}
+export function getCurrentPage(pageId) {
+    if (!global.getCurrentPages)
+        return;
+    const pages = global.getCurrentPages();
+    return pages.find((page) => isFunction(page.getPageId) && page.getPageId() === pageId);
+}
+export function renderImage(imageProps, enableFastImage = false) {
+    const Component = enableFastImage ? FastImage : Image;
+    return <Component {...imageProps}/>;
+}
+export function pickStyle(styleObj = {}, pickedKeys, callback) {
+    return pickedKeys.reduce((acc, key) => {
+        if (key in styleObj) {
+            acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key];
+        }
+        return acc;
+    }, {});
+}

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

@@ -1,5 +1,5 @@
 import { useRef } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { collectDataset } from '@mpxjs/utils'
 import { omit } from './utils'
 import eventConfigMap from './event.config'
 import {
@@ -9,7 +9,6 @@ import {
   UseInnerPropsConfig,
   InnerRef,
   SetTimeoutReturnType,
-  DataSetType,
   LayoutRef,
   NativeTouchEvent
 } from './types/getInnerListeners'
@@ -37,7 +36,7 @@ const getTouchEvent = (
     currentTarget: {
       ...(event.currentTarget || {}),
       id: id || '',
-      dataset: getDataSet(props),
+      dataset: collectDataset(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
     },
@@ -69,19 +68,6 @@ const getTouchEvent = (
   }
 }
 
-export const getDataSet = (props: Record<string, any>) => {
-  const result: DataSetType = {}
-
-  for (const key in props) {
-    if (key.indexOf('data-') === 0) {
-      const newKey = key.substr(5)
-      result[newKey] = props[key]
-    }
-  }
-
-  return result
-}
-
 export const getCustomEvent = (
   type = '',
   oe: any = {},
@@ -95,7 +81,7 @@ export const getCustomEvent = (
     target: {
       ...(oe.target || {}),
       id: props.id || '',
-      dataset: getDataSet(props),
+      dataset: collectDataset(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
     },

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

@@ -45,10 +45,10 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { FormContext } from './context'
+import { RouteContext, FormContext } from './context'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -128,7 +128,8 @@ const styles = StyleSheet.create({
   }
 })
 
-const getOpenTypeEvent = (openType: OpenType) => {
+const getOpenTypeEvent = (openType?: OpenType) => {
+  if (!openType) return
   if (!global.__mpx?.config?.rnConfig) {
     warn('Environment not supported')
     return
@@ -148,6 +149,12 @@ const getOpenTypeEvent = (openType: OpenType) => {
   return event
 }
 
+const timer = (data: any, time = 3000) => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve(data)
+  }, time)
+})
+
 const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
   const image = useRef(new Animated.Value(0)).current
 
@@ -211,6 +218,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     bindtouchend
   } = props
 
+  const pageId = useContext(RouteContext)
+
   const formContext = useContext(FormContext)
 
   let submitFn: () => void | undefined
@@ -310,17 +319,41 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   }
 
   const handleOpenTypeEvent = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    if (!openType) return
     const handleEvent = getOpenTypeEvent(openType)
+    if (!handleEvent) return
 
     if (openType === 'share') {
-      handleEvent && handleEvent({
+      const currentPage = getCurrentPage(pageId)
+      const event = {
         from: 'button',
-        target: getCustomEvent('tap', evt, { layoutRef }, props).target
-      })
+        target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+        webViewUrl: currentPage?.__webViewUrl
+      }
+      if (currentPage) {
+        const defaultMessage = {
+          title: global.__mpx.config.rnConfig.projectName || 'AwesomeProject',
+          path: currentPage.route || ''
+        }
+        if (currentPage.onShareAppMessage) {
+          const { promise, ...message } = currentPage.onShareAppMessage(event) || {}
+          if (promise) {
+            Promise.race([Promise.resolve(promise), timer(message)])
+              .then((msg) => {
+                handleEvent(Object.assign({}, defaultMessage, msg))
+              })
+          } else {
+            handleEvent(Object.assign({}, defaultMessage, message))
+          }
+        } else {
+          handleEvent(defaultMessage)
+        }
+      } else {
+        warn('Current page not found')
+        // Todo handleEvent(event)
+      }
     }
 
-    if (openType === 'getUserInfo' && handleEvent && bindgetuserinfo) {
+    if (openType === 'getUserInfo' && bindgetuserinfo) {
       Promise.resolve(handleEvent)
         .then((userInfo) => {
           if (typeof userInfo === 'object') {

package/lib/runtime/components/react/mpx-canvas/Bus.ts

@@ -0,0 +1,70 @@
+import { warn } from '@mpxjs/utils'
+interface Message {
+  id?: string
+  type: string
+  payload?: any
+}
+export default class Bus {
+  _paused: Boolean = false;
+  _messageListeners: { [key: string]: (message: Message) => void } = {}
+  _queue: Message[] = []
+  _send: (message: Message | Message[]) => void
+  _timeoutId: NodeJS.Timeout | null = null
+  constructor (send: (message: Message | Message[]) => void) {
+    this._send = send
+  }
+
+  post (message: Message): Promise<any> {
+    return new Promise((resolve) => {
+      if (message.type !== 'set' && message.id) {
+        this._messageListeners[message.id] = resolve
+      }
+
+      if (!this._paused) {
+        this._queue.push(message)
+        this.startBatching()
+      } else {
+        this._queue.push(message)
+      }
+    })
+  }
+
+  handle (message: Message): void {
+    if (!message.id) return
+    const handler = this._messageListeners[message.id]
+    delete this._messageListeners[message.id]
+
+    if (handler) {
+      handler(message)
+    } else {
+      warn(`Received unexpected message: ${message}`)
+    }
+  }
+
+  pause (): void {
+    this._paused = true
+  }
+
+  resume (): void {
+    this._paused = false
+    this._send(this._queue)
+    this._queue = []
+  }
+
+  startBatching (): void {
+    if (this._timeoutId) return
+
+    this._timeoutId = setTimeout(() => {
+      this._send(this._queue)
+      this._queue = []
+      this._timeoutId = null
+    }, 16)
+  }
+
+  clearBatchingTimeout (): void {
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId)
+      this._timeoutId = null
+    }
+  }
+}

package/lib/runtime/components/react/mpx-canvas/CanvasGradient.ts

@@ -0,0 +1,18 @@
+import { WebviewMessage, CanvasInstance, registerWebviewMethods } from './utils'
+
+const METHODS = ['addColorStop']
+export default class CanvasGradient {
+  private canvas: CanvasInstance;
+  [key: string]: any;
+  constructor (canvas: CanvasInstance, noOnConstruction = false) {
+    this.canvas = canvas
+    registerWebviewMethods(this, METHODS)
+    if (this.onConstruction && !noOnConstruction) {
+      this.onConstruction()
+    }
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+}

package/lib/runtime/components/react/mpx-canvas/CanvasRenderingContext2D.ts

@@ -0,0 +1,87 @@
+import { CanvasInstance, WebviewMessage, registerWebviewProperties, registerWebviewMethods, registerWebviewTarget } from './utils'
+
+const PROPERTIES = {
+  direction: 'inherit',
+  fillStyle: '#000',
+  filter: 'none',
+  font: '10px sans-serif',
+  fontKerning: 'auto',
+  fontStretch: 'auto',
+  fontVariantCaps: 'normal',
+  globalAlpha: 1.0,
+  globalCompositeOperation: 'source-over',
+  imageSmoothingEnabled: 'true',
+  imageSmoothingQuality: 'low',
+  letterSpacing: '0px',
+  lineCap: 'butt',
+  lineDashOffset: 0.0,
+  lineJoin: 'miter',
+  lineWidth: 1.0,
+  miterLimit: 10.0,
+  shadowBlur: 0,
+  shadowColor: 'rgba(0,0,0,0)',
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  strokeStyle: '#000',
+  textAlign: 'start',
+  textBaseline: 'alphabetic',
+  textRendering: 'auto',
+  wordSpacing: '0px'
+}
+
+const METHODS = [
+  'arc',
+  'arcTo',
+  'beginPath',
+  'bezierCurveTo',
+  'clearRect',
+  'clip',
+  'closePath',
+  'createConicGradient',
+  'createImageData',
+  'createLinearGradient',
+  'createPattern',
+  'createRadialGradient',
+  'drawFocusIfNeeded',
+  'drawImage',
+  'ellipse',
+  'fill',
+  'fillRect',
+  'fillText',
+  'getImageData',
+  'getLineDash',
+  'getTransform',
+  'lineTo',
+  'measureText',
+  'moveTo',
+  'putImageData',
+  'quadraticCurveTo',
+  'rect',
+  'reset',
+  'resetTransform',
+  'restore',
+  'rotate',
+  'roundRect',
+  'save',
+  'scale',
+  'setLineDash',
+  'setTransform',
+  'stroke',
+  'strokeRect',
+  'strokeText',
+  'transform',
+  'translate'
+]
+export default class CanvasRenderingContext2D {
+  canvas: CanvasInstance
+  constructor (canvas: CanvasInstance) {
+    this.canvas = canvas
+    registerWebviewTarget(this, 'context2D')
+    registerWebviewProperties(this, PROPERTIES)
+    registerWebviewMethods(this, METHODS)
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+}

package/lib/runtime/components/react/mpx-canvas/Image.ts

@@ -0,0 +1,102 @@
+import { WebviewMessage, WEBVIEW_TARGET, registerWebviewProperties, CanvasInstance } from './utils'
+
+const PROPERTIES = {
+  crossOrigin: undefined,
+  height: undefined,
+  src: undefined,
+  width: undefined
+}
+
+export class Image {
+  [WEBVIEW_TARGET]: string;
+  canvas: any;
+  width: number;
+  height: number;
+  private _loadListener: any;
+  private _errorListener: any;
+  private _onload: ((...args: any[]) => void);
+  private _onerror: ((...args: any[]) => void);
+  [key: string]: any;
+
+  constructor (canvas: CanvasInstance, width?: number, height?: number, noOnConstruction = false) {
+    this.canvas = canvas
+    registerWebviewProperties(this, PROPERTIES)
+
+    if (width) {
+      this.width = width
+    }
+    if (height) {
+      this.height = height
+    }
+
+    if (this.onConstruction && !noOnConstruction) {
+      this.onConstruction()
+      this.postMessage({
+        type: 'listen',
+        payload: {
+          types: ['error', 'load'],
+          target: this[WEBVIEW_TARGET]
+        }
+      })
+    }
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+
+  addEventListener (type: 'load' | 'error', callbackFn: Function) {
+    return this.canvas.addMessageListener((message: WebviewMessage) => {
+      const target = message?.payload?.target as { [key: string]: any } || {}
+      if (
+        message &&
+        message.type === 'event' &&
+        target[WEBVIEW_TARGET] === this[WEBVIEW_TARGET] &&
+        message.payload.type === type
+      ) {
+        for (const key in target) {
+          const value = target[key]
+          if (key in this && this[key] !== value) {
+            this[key] = value
+          }
+        }
+        callbackFn({
+          ...message.payload,
+          target: this
+        })
+      }
+    })
+  }
+
+  set onload (callback: ((...args: any[]) => void)) {
+    this._onload = callback
+    if (this._loadListener) {
+      this.canvas.removeMessageListener(this._loadListener)
+    }
+    if (callback) {
+      this._loadListener = this.addEventListener('load', callback)
+    }
+  }
+
+  get onload (): ((...args: any[]) => void) {
+    return this._onload
+  }
+
+  set onerror (callback: ((...args: any[]) => void)) {
+    this._onerror = callback
+    if (this._errorListener) {
+      this.canvas.removeMessageListener(this._errorListener)
+    }
+    if (callback) {
+      this._errorListener = this.addEventListener('error', callback)
+    }
+  }
+
+  get onerror () : ((...args: any[]) => void) {
+    return this._onerror
+  }
+}
+
+export function createImage (canvas: CanvasInstance, width?: number, height?: number) {
+  return new Image(canvas, width, height)
+}