@mpxjs/webpack-plugin 2.10.4-beta.19 → 2.10.4-beta.19-input

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

@@ -1,11 +1,10 @@
-import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
 import { Image } from 'react-native';
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } 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*$/;
@@ -26,6 +25,7 @@ const unoVarDecRegExp = /^--un-/;
 const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
 const envUseRegExp = /env\(/;
+const filterRegExp = /(calc|env|%)/;
 const safeAreaInsetMap = {
     'safe-area-inset-top': 'top',
     'safe-area-inset-right': 'right',
@@ -121,6 +121,8 @@ const selfPercentRule = {
 };
 const parentHeightPercentRule = {
     height: true,
+    minHeight: true,
+    maxHeight: true,
     top: true,
     bottom: true
 };
@@ -181,10 +183,11 @@ function resolveVar(input, varContext) {
     });
     return global.__formatValue(replaced.source());
 }
-function transformVar(styleObj, varKeyPaths, varContext) {
+function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
     varKeyPaths.forEach((varKeyPath) => {
         setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
             target[key] = resolveVar(value, varContext);
+            visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });
 }
@@ -224,28 +227,122 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
-const stringifyProps = ['fontWeight'];
 function transformStringify(styleObj) {
-    stringifyProps.forEach((prop) => {
-        if (isNumber(styleObj[prop])) {
-            styleObj[prop] = '' + styleObj[prop];
+    if (isNumber(styleObj.fontWeight)) {
+        styleObj.fontWeight = '' + styleObj.fontWeight;
+    }
+}
+function transformPosition(styleObj, meta) {
+    if (styleObj.position === 'fixed') {
+        styleObj.position = 'absolute';
+        meta.hasPositionFixed = true;
+    }
+}
+// 多value解析
+function parseValues(str, 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)'
+function parseTransform(transformStr) {
+    const values = parseValues(transformStr);
+    const transform = [];
+    values.forEach(item => {
+        const match = item.match(/([/\w]+)\((.+)\)/);
+        if (match && match.length >= 3) {
+            let key = match[1];
+            const val = match[2];
+            switch (key) {
+                case 'translateX':
+                case 'translateY':
+                case 'scaleX':
+                case 'scaleY':
+                case 'rotateX':
+                case 'rotateY':
+                case 'rotateZ':
+                case 'rotate':
+                case 'skewX':
+                case 'skewY':
+                case 'perspective':
+                    // rotate 处理成 rotateZ
+                    key = key === 'rotate' ? 'rotateZ' : key;
+                    // 单个值处理
+                    transform.push({ [key]: global.__formatValue(val) });
+                    break;
+                case 'matrix':
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
+                    break;
+                case 'translate':
+                case 'scale':
+                case 'skew':
+                case 'translate3d': // x y 支持 z不支持
+                case 'scale3d': // x y 支持 z不支持
+                    {
+                        // 2 个以上的值处理
+                        key = key.replace('3d', '');
+                        const vals = parseValues(val, ',').splice(0, 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5)
+                        if (vals.length === 1 && key === 'scale') {
+                            vals.push(vals[0]);
+                        }
+                        const xyz = ['X', 'Y', 'Z'];
+                        transform.push(...vals.map((v, index) => {
+                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
+                        }));
+                        break;
+                    }
+            }
         }
     });
+    return transform;
+}
+// format style transform
+function transformTransform(style) {
+    if (!style.transform || Array.isArray(style.transform))
+        return;
+    style.transform = parseTransform(style.transform);
+}
+function transformBoxShadow(styleObj) {
+    if (!styleObj.boxShadow)
+        return;
+    styleObj.boxShadow = parseValues(styleObj.boxShadow).reduce((res, i, idx) => {
+        return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
+    }, '');
 }
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
     const normalStyle = {};
-    const normalStyleRef = useRef({});
-    const normalStyleChangedRef = useRef(false);
     let hasVarDec = false;
     let hasVarUse = false;
+    let hasSelfPercent = false;
     const varKeyPaths = [];
     const unoVarKeyPaths = [];
+    const percentKeyPaths = [];
+    const calcKeyPaths = [];
+    const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
     const navigation = useNavigation();
-    function varVisitor({ key, value, keyPath }) {
+    function varVisitor({ target, key, value, keyPath }) {
         if (keyPath.length === 1) {
             if (unoVarDecRegExp.test(key)) {
                 unoVarStyle[key] = value;
@@ -269,6 +366,33 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 hasVarUse = true;
                 varKeyPaths.push(keyPath.slice());
             }
+            else {
+                visitOther({ target, key, value, keyPath });
+            }
+        }
+    }
+    function envVisitor({ value, keyPath }) {
+        if (envUseRegExp.test(value)) {
+            envKeyPaths.push(keyPath.slice());
+        }
+    }
+    function calcVisitor({ value, keyPath }) {
+        if (calcUseRegExp.test(value)) {
+            calcKeyPaths.push(keyPath.slice());
+        }
+    }
+    function percentVisitor({ key, value, keyPath }) {
+        if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+            hasSelfPercent = true;
+            percentKeyPaths.push(keyPath.slice());
+        }
+        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+            percentKeyPaths.push(keyPath.slice());
+        }
+    }
+    function visitOther({ target, key, value, keyPath }) {
+        if (filterRegExp.test(value)) {
+            [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }));
         }
     }
     // traverse var & generate normalStyle
@@ -289,96 +413,61 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
             varContextRef.current = newVarContext;
         }
-        transformVar(normalStyle, varKeyPaths, varContextRef.current);
+        transformVar(normalStyle, varKeyPaths, varContextRef.current, visitOther);
     }
     // apply unocss var
     if (unoVarKeyPaths.length) {
-        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle);
-    }
-    const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current);
-    if (diff) {
-        normalStyleRef.current = clone;
-        normalStyleChangedRef.current = !normalStyleChangedRef.current;
+        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther);
     }
-    const memoResult = useMemo(() => {
-        let hasSelfPercent = false;
-        let hasPositionFixed = false;
-        const percentKeyPaths = [];
-        const calcKeyPaths = [];
-        const envKeyPaths = [];
-        // transform can be memoized
-        function envVisitor({ value, keyPath }) {
-            if (envUseRegExp.test(value)) {
-                envKeyPaths.push(keyPath.slice());
-            }
-        }
-        function calcVisitor({ value, keyPath }) {
-            if (calcUseRegExp.test(value)) {
-                calcKeyPaths.push(keyPath.slice());
-            }
-        }
-        function percentVisitor({ key, value, keyPath }) {
-            if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-                hasSelfPercent = true;
-                percentKeyPaths.push(keyPath.slice());
-            }
-            else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
-                percentKeyPaths.push(keyPath.slice());
-            }
-        }
-        function transformPosition(styleObj) {
-            if (styleObj.position === 'fixed') {
-                hasPositionFixed = true;
-                styleObj.position = 'absolute';
-            }
+    const percentConfig = {
+        width,
+        height,
+        fontSize: normalStyle.fontSize,
+        parentWidth,
+        parentHeight,
+        parentFontSize
+    };
+    const positionMeta = {
+        hasPositionFixed: false
+    };
+    // apply env
+    transformEnv(normalStyle, envKeyPaths, navigation);
+    // apply percent
+    transformPercent(normalStyle, percentKeyPaths, percentConfig);
+    // apply calc
+    transformCalc(normalStyle, calcKeyPaths, (value, key) => {
+        if (PERCENT_REGEX.test(value)) {
+            const resolved = resolvePercent(value, key, percentConfig);
+            return typeof resolved === 'number' ? resolved : 0;
         }
-        // traverse env & calc & percent
-        traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
-        const percentConfig = {
-            width,
-            height,
-            fontSize: normalStyle.fontSize,
-            parentWidth,
-            parentHeight,
-            parentFontSize
-        };
-        // apply env
-        transformEnv(normalStyle, envKeyPaths, navigation);
-        // apply percent
-        transformPercent(normalStyle, percentKeyPaths, percentConfig);
-        // apply calc
-        transformCalc(normalStyle, calcKeyPaths, (value, key) => {
-            if (PERCENT_REGEX.test(value)) {
-                const resolved = resolvePercent(value, key, percentConfig);
-                return typeof resolved === 'number' ? resolved : 0;
+        else {
+            const formatted = global.__formatValue(value);
+            if (typeof formatted === 'number') {
+                return formatted;
             }
             else {
-                const formatted = global.__formatValue(value);
-                if (typeof formatted === 'number') {
-                    return formatted;
-                }
-                else {
-                    warn('calc() only support number, px, rpx, % temporarily.');
-                    return 0;
-                }
+                warn('calc() only support number, px, rpx, % temporarily.');
+                return 0;
             }
-        });
-        // apply position
-        transformPosition(normalStyle);
-        // transform number enum stringify
-        transformStringify(normalStyle);
-        return {
-            normalStyle,
-            hasSelfPercent,
-            hasPositionFixed
-        };
-    }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize]);
-    return extendObject({
+        }
+    });
+    // apply position
+    transformPosition(normalStyle, positionMeta);
+    // transform number enum stringify
+    transformStringify(normalStyle);
+    // transform rpx to px
+    transformBoxShadow(normalStyle);
+    // transform 字符串格式转化数组格式
+    transformTransform(normalStyle);
+    return {
         hasVarDec,
         varContextRef,
         setWidth,
-        setHeight
-    }, memoResult);
+        setHeight,
+        normalStyle,
+        hasSelfPercent,
+        hasPositionFixed: positionMeta.hasPositionFixed
+    };
 }
 export function traverseStyle(styleObj, visitors) {
     const keyPath = [];
@@ -387,12 +476,7 @@ export function traverseStyle(styleObj, visitors) {
             target.forEach((value, index) => {
                 const key = String(index);
                 keyPath.push(key);
-                visitors.forEach(visitor => visitor({
-                    target,
-                    key,
-                    value,
-                    keyPath
-                }));
+                visitors.forEach(visitor => visitor({ target, key, value, keyPath }));
                 traverse(value);
                 keyPath.pop();
             });
@@ -450,19 +534,8 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             }
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                    const { y: navigationY = 0 } = navigation?.layout || {};
-                    layoutRef.current = {
-                        x,
-                        y: y - navigationY,
-                        width,
-                        height,
-                        offsetLeft,
-                        offsetTop: offsetTop - navigationY,
-                        _x: x,
-                        _y: y,
-                        _offsetLeft: offsetLeft,
-                        _offsetTop: offsetTop
-                    };
+                    const { top: navigationY = 0 } = navigation?.layout || {};
+                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
                 });
             }
             onLayout && onLayout(e);
@@ -538,7 +611,7 @@ export function getCurrentPage(pageId) {
 }
 export function renderImage(imageProps, enableFastImage = false) {
     const Component = enableFastImage ? FastImage : Image;
-    return <Component {...imageProps}/>;
+    return createElement(Component, imageProps);
 }
 export function pickStyle(styleObj = {}, pickedKeys, callback) {
     return pickedKeys.reduce((acc, key) => {
@@ -589,13 +662,11 @@ export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled
     const gesture = useMemo(() => {
         return Gesture.Pan()
             .onTouchesDown(() => {
-            'worklet';
-            runOnJS(setStartTimer)();
+            setStartTimer();
         })
             .onTouchesUp(() => {
-            'worklet';
-            runOnJS(setStayTimer)();
-        });
+            setStayTimer();
+        }).runOnJS(true);
     }, []);
     if (gestureRef) {
         gesture.simultaneousWithExternalGesture(gestureRef);
@@ -605,3 +676,17 @@ export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled
         gesture
     };
 }
+export function useRunOnJSCallback(callbackMapRef) {
+    const invokeCallback = useCallback((key, ...args) => {
+        const callback = callbackMapRef.current[key];
+        // eslint-disable-next-line node/no-callback-literal
+        if (isFunction(callback))
+            return callback(...args);
+    }, []);
+    useEffect(() => {
+        return () => {
+            callbackMapRef.current = {};
+        };
+    }, []);
+    return invokeCallback;
+}

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

@@ -117,11 +117,11 @@ export interface PrivateInputProps {
 
 type FinalInputProps = InputProps & PrivateInputProps
 
-const keyboardTypeMap: Record<Type, string> = {
-  text: 'default',
+const inputModeMap: Record<Type, string> = {
+  text: 'text',
   number: 'numeric',
-  idcard: 'default',
-  digit: isIOS ? 'decimal-pad' : 'numeric'
+  idcard: 'text',
+  digit: 'decimal'
 }
 
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
@@ -181,7 +181,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     return ''
   }
 
-  const keyboardType = keyboardTypeMap[type]
+  const inputMode = inputModeMap[type]
   const defaultValue = parseValue(value)
   const textAlignVertical = multiline ? 'top' : 'auto'
 
@@ -438,7 +438,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
-        keyboardType: keyboardType,
+        inputMode: inputMode,
         secureTextEntry: !!password,
         defaultValue: defaultValue,
         value: inputValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4-beta.19",
+  "version": "2.10.4-beta.19-input",
   "description": "mpx compile core",
   "keywords": [
     "mpx"