@mpxjs/webpack-plugin 2.10.20 → 2.10.21

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

@@ -1,20 +1,37 @@
-import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, 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 { VarContext, ScrollViewContext, RouteContext, TextPassThroughContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
 import { Gesture } from 'react-native-gesture-handler';
-export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
+export const TEXT_STYLE_MAP = {
+    color: true,
+    letterSpacing: true,
+    lineHeight: true,
+    includeFontPadding: true,
+    writingDirection: true
+};
 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|allowFontScaling/;
+export const SVG_REGEXP = /\.svg(?:[?#].*)?$/i;
+export const BACKGROUND_STYLE_MAP = {
+    backgroundImage: true,
+    backgroundSize: true,
+    backgroundRepeat: true,
+    backgroundPosition: true
+};
+export const TEXT_PROPS_MAP = {
+    ellipsizeMode: true,
+    numberOfLines: true
+};
 export const DEFAULT_FONT_SIZE = 16;
 export const HIDDEN_STYLE = {
     opacity: 0
 };
+export const DEFAULT_BOX_SIZING_STYLE = {
+    boxSizing: 'content-box'
+};
 export const isIOS = __mpx_mode__ === 'ios';
 export const isAndroid = __mpx_mode__ === 'android';
 export const isHarmony = __mpx_mode__ === 'harmony';
@@ -23,9 +40,19 @@ const varUseRegExp = /var\(/;
 const unoVarDecRegExp = /^--un-/;
 const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
-const calcPercentExp = /^calc\(.*-?\d+(\.\d+)?%.*\)$/;
 const envUseRegExp = /env\(/;
-const filterRegExp = /(calc|env|%)/;
+const boxSizingAffectingStyleMap = {
+    padding: true,
+    paddingTop: true,
+    paddingRight: true,
+    paddingBottom: true,
+    paddingLeft: true,
+    borderWidth: true,
+    borderTopWidth: true,
+    borderRightWidth: true,
+    borderBottomWidth: true,
+    borderLeftWidth: true
+};
 const safeAreaInsetMap = {
     'safe-area-inset-top': 'top',
     'safe-area-inset-right': 'right',
@@ -33,6 +60,21 @@ const safeAreaInsetMap = {
     'safe-area-inset-left': 'left'
 };
 export const extendObject = Object.assign;
+export function getDefaultAllowFontScaling() {
+    return global.__mpx?.config?.rnConfig?.allowFontScaling ?? false;
+}
+export function transformBoxSizing(style = {}, hasBoxSizingAffectingStyle = false) {
+    if (hasBoxSizingAffectingStyle && style.boxSizing === undefined) {
+        style.boxSizing = global.__mpx?.config?.rnConfig?.defaultBoxSizing ?? DEFAULT_BOX_SIZING_STYLE.boxSizing;
+    }
+    return style;
+}
+export function isBoxSizingAffectingStyle(key) {
+    return hasOwn(boxSizingAffectingStyleMap, key);
+}
+function isTextStyle(key) {
+    return hasOwn(TEXT_STYLE_MAP, key) || key.startsWith('font') || key.startsWith('text');
+}
 function getSafeAreaInset(name, navigation) {
     const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets);
     return insets[safeAreaInsetMap[name]];
@@ -86,9 +128,12 @@ export function isText(ele) {
     }
     return false;
 }
-export function every(children, callback) {
-    const childrenArray = Array.isArray(children) ? children : [children];
-    return childrenArray.every((child) => callback(child));
+export function isStringChildren(children) {
+    if (typeof children === 'string')
+        return true;
+    if (!Array.isArray(children))
+        return false;
+    return children.every((child) => typeof child === 'string');
 }
 export function groupBy(obj, callback, group = {}) {
     Object.entries(obj).forEach(([key, val]) => {
@@ -98,12 +143,13 @@ export function groupBy(obj, callback, group = {}) {
     });
     return group;
 }
-export function splitStyle(styleObj) {
-    return groupBy(styleObj, (key) => {
-        if (TEXT_STYLE_REGEX.test(key)) {
+export function splitStyle(styleObj, sideEffect) {
+    return groupBy(styleObj, (key, val) => {
+        sideEffect && sideEffect(key, val);
+        if (isTextStyle(key)) {
             return 'textStyle';
         }
-        else if (BACKGROUND_REGEX.test(key)) {
+        else if (hasOwn(BACKGROUND_STYLE_MAP, key)) {
             return 'backgroundStyle';
         }
         else {
@@ -357,6 +403,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, transformRadiusPer
     let hasVarDec = false;
     let hasVarUse = false;
     let hasSelfPercent = false;
+    let hasBoxSizingAffectingStyle = false;
     const varKeyPaths = [];
     const unoVarKeyPaths = [];
     const percentKeyPaths = [];
@@ -394,18 +441,18 @@ export function useTransformStyle(styleObj = {}, { enableVar, transformRadiusPer
             }
         }
     }
+    function boxSizingVisitor({ key, keyPath }) {
+        if (keyPath.length === 1 && !hasBoxSizingAffectingStyle && isBoxSizingAffectingStyle(key)) {
+            hasBoxSizingAffectingStyle = true;
+        }
+    }
     function envVisitor({ value, keyPath }) {
         if (envUseRegExp.test(value)) {
             envKeyPaths.push(keyPath.slice());
         }
     }
-    function calcVisitor({ key, value, keyPath }) {
+    function calcVisitor({ value, keyPath }) {
         if (calcUseRegExp.test(value)) {
-            // calc translate & border-radius 的百分比计算
-            if (hasOwn(selfPercentRule, key) && calcPercentExp.test(value)) {
-                hasSelfPercent = true;
-                percentKeyPaths.push(keyPath.slice());
-            }
             calcKeyPaths.push(keyPath.slice());
         }
     }
@@ -421,12 +468,12 @@ export function useTransformStyle(styleObj = {}, { enableVar, transformRadiusPer
         }
     }
     function visitOther({ target, key, value, keyPath }) {
-        if (filterRegExp.test(value)) {
+        if (typeof value === 'string' && (value.includes('%') || value.includes('calc(') || value.includes('env('))) {
             [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }));
         }
     }
     // traverse var & generate normalStyle
-    traverseStyle(styleObj, [varVisitor]);
+    traverseStyle(styleObj, [varVisitor, boxSizingVisitor]);
     hasVarDec = hasVarDec || !!externalVarContext;
     enableVar = enableVar || hasVarDec || hasVarUse;
     const enableVarRef = useRef(enableVar);
@@ -467,6 +514,9 @@ export function useTransformStyle(styleObj = {}, { enableVar, transformRadiusPer
     // apply calc
     transformCalc(normalStyle, calcKeyPaths, (value, key) => {
         if (PERCENT_REGEX.test(value)) {
+            if (hasOwn(selfPercentRule, key)) {
+                hasSelfPercent = true;
+            }
             const resolved = resolvePercent(value, key, percentConfig);
             return typeof resolved === 'number' ? resolved : 0;
         }
@@ -489,6 +539,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, transformRadiusPer
     transformBoxShadow(normalStyle);
     // transform 字符串格式转化数组格式(先转数组再处理css var)
     transformTransform(normalStyle);
+    transformBoxSizing(normalStyle, hasBoxSizingAffectingStyle);
     return {
         hasVarDec,
         varContextRef,
@@ -539,7 +590,7 @@ export function setStyle(styleObj, keyPath, setter) {
 }
 export function splitProps(props) {
     return groupBy(props, (key) => {
-        if (TEXT_PROPS_REGEX.test(key)) {
+        if (hasOwn(TEXT_PROPS_MAP, key)) {
             return 'textProps';
         }
         else {
@@ -578,16 +629,34 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
         layoutProps
     };
 };
-export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, textProps }) {
+export function useTextPassThroughValue(textStyle, textProps, { inheritTextProps = true, disabled = false } = {}) {
+    const parent = useContext(TextPassThroughContext);
+    const valueRef = useRef(null);
+    if (disabled)
+        return null;
+    if (!textStyle && !textProps && (inheritTextProps || !parent?.pendingTextProps))
+        return null;
+    const nextTextStyle = textStyle
+        ? extendObject({}, parent?.textStyle, textStyle)
+        : parent?.textStyle;
+    const nextTextProps = inheritTextProps
+        ? textProps
+            ? extendObject({}, parent?.pendingTextProps, textProps)
+            : parent?.pendingTextProps
+        : textProps;
+    const nextValue = {
+        textStyle: nextTextStyle,
+        pendingTextProps: nextTextProps
+    };
+    if (diffAndCloneA(valueRef.current, nextValue).diff) {
+        valueRef.current = nextValue;
+    }
+    return valueRef.current;
+}
+export function wrapChildren(props = {}, { hasVarDec, varContext, textPassThrough }) {
     let { children } = props;
-    if (textStyle || textProps) {
-        children = Children.map(children, (child) => {
-            if (isText(child)) {
-                const style = extendObject({}, textStyle, child.props.style);
-                return cloneElement(child, extendObject({}, textProps, { style }));
-            }
-            return child;
-        });
+    if (textPassThrough) {
+        children = <TextPassThroughContext.Provider value={textPassThrough} key='textPassThroughWrap'>{children}</TextPassThroughContext.Provider>;
     }
     if (hasVarDec && varContext) {
         children = <VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>;

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

@@ -325,6 +325,7 @@ const useInnerProps = (
     'parent-font-size',
     'parent-width',
     'parent-height',
+    'enable-text-pass-through',
     ...userRemoveProps,
     ...rawEventKeys
   ]

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

@@ -19,7 +19,7 @@
  * ✘ app-parameter
  * ✘ show-message-card
  * ✘ phone-number-no-quota-toast
- * ✘ bindgetuserinfo
+ * ✔ bindgetuserinfo
  * ✘ bindcontact
  * ✘ createliveactivity
  * ✘ bindgetphonenumber
@@ -47,7 +47,7 @@ import {
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover, useTextPassThroughValue } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
@@ -308,6 +308,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
+  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
 
   if (backgroundStyle) {
     warn('Button does not support background image-related styles!')
@@ -395,7 +396,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       'hover-start-time',
       'hover-stay-time',
       'open-type',
-      'form-type'
+      'form-type',
+      'bindgetuserinfo'
     ],
     {
       layoutRef,
@@ -409,8 +411,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       {
         hasVarDec,
         varContext: varContextRef.current,
-        textStyle,
-        textProps
+        textPassThrough
       }
     )
   )

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

@@ -328,6 +328,7 @@ const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: Ca
       'mode',
       'resolution',
       'frame-size',
+      'device-position',
       'bindinitdone',
       'bindstop',
       'flash',

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

@@ -103,7 +103,10 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
         style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
       }
     ),
-    [],
+    [
+      'originWhitelist',
+      'binderror'
+    ],
     {
       layoutRef
     }

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -128,7 +128,8 @@ const CheckboxGroup = forwardRef<
       }
     ),
     [
-      'name'
+      'name',
+      'bindchange'
     ],
     {
       layoutRef

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

@@ -26,7 +26,7 @@ import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
 import Portal from './mpx-portal'
 
@@ -148,6 +148,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
+    const textPassThrough = useTextPassThroughValue(textStyle, textProps)
 
     if (backgroundStyle) {
       warn('Checkbox does not support background image-related styles!')
@@ -178,7 +179,9 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       [
         'value',
         'disabled',
-        'checked'
+        'checked',
+        'color',
+        '_onChange'
       ],
       {
         layoutRef
@@ -224,8 +227,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         {
           hasVarDec,
           varContext: varContextRef.current,
-          textStyle,
-          textProps
+          textPassThrough
         }
       )
     )

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

@@ -9,7 +9,7 @@ import { JSX, useRef, forwardRef, ReactNode, useMemo, createElement } from 'reac
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils'
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
 interface FormProps {
   style?: Record<string, any>
   children?: ReactNode
@@ -48,6 +48,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
 
   const formRef = useRef(null)
   useNodesRef(props, ref, formRef, {
@@ -117,8 +118,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
       {
         hasVarDec,
         varContext: varContextRef.current,
-        textStyle,
-        textProps
+        textPassThrough
       }
     )
   ))

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

@@ -99,7 +99,11 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
           style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
         }
       ),
-      [],
+      [
+        'type',
+        'size',
+        'color'
+      ],
       {
         layoutRef
       }

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

@@ -20,10 +20,11 @@ import {
   ImageErrorEventData,
   LayoutChangeEvent,
   DimensionValue,
-  ImageLoadEventData
+  ImageLoadEventData,
+  ImageSourcePropType
 } from 'react-native'
 import { noop } from '@mpxjs/utils'
-import { SvgCssUri } from 'react-native-svg/css'
+import { LocalSvg, SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
@@ -46,7 +47,7 @@ export type Mode =
   | 'bottom right'
 
 export interface ImageProps {
-  src?: string
+  src?: string | ImageSourcePropType
   mode?: Mode
   style?: ImageStyle & Record<string, any>
   'enable-offset'?: boolean
@@ -56,6 +57,7 @@ export interface ImageProps {
   'parent-width'?: number
   'parent-height'?: number
   'enable-fast-image'?: boolean
+  'is-svg'?: boolean
   bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void
   binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void
 }
@@ -70,7 +72,6 @@ interface ImageState {
 
 const DEFAULT_IMAGE_WIDTH = 320
 const DEFAULT_IMAGE_HEIGHT = 240
-
 const cropMode: Mode[] = [
   'top',
   'bottom',
@@ -98,6 +99,32 @@ const relativeCenteredSize = (viewSize: number, imageSize: number) => {
   return (viewSize - imageSize) / 2
 }
 
+function normalizeImageSource (src: string | ImageSourcePropType): ImageSourcePropType {
+  return typeof src === 'string' ? { uri: src } : src
+}
+
+function getImageUri (src: string | ImageSourcePropType) {
+  return typeof src === 'string' ? src : RNImage.resolveAssetSource(src)?.uri || ''
+}
+
+function isSvgSource (src: string | ImageSourcePropType) {
+  const uri = getImageUri(src)
+  return SVG_REGEXP.test(uri)
+}
+
+function getImageSize (src: string | ImageSourcePropType, success: (width: number, height: number) => void, fail: () => void = noop) {
+  if (typeof src === 'string') {
+    RNImage.getSize(src, success, fail)
+    return
+  }
+  const source = RNImage.resolveAssetSource(src)
+  if (source && source.width && source.height) {
+    success(source.width, source.height)
+  } else {
+    fail()
+  }
+}
+
 // 获取能完全显示图片的缩放比例：长宽方向的缩放比例最小值即为能完全展示的比例
 function getFitScale (width1: number, height1: number, width2: number, height2: number) {
   return Math.min(width2 / width1, height2 / height1)
@@ -136,6 +163,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     'enable-fast-image': enableFastImage,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
+    'is-svg': isSvgProp,
     bindload,
     binderror
   } = props
@@ -157,7 +185,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     defaultStyle
   })
 
-  const isSvg = SVG_REGEXP.test(src)
+  const isSvg = isSvgProp || isSvgSource(src)
   const isWidthFixMode = mode === 'widthFix'
   const isHeightFixMode = mode === 'heightFix'
   const isCropMode = cropMode.includes(mode)
@@ -379,7 +407,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const onImageLoad = (evt: NativeSyntheticEvent<ImageLoadEventData>) => {
     evt.persist()
-    RNImage.getSize(src, (width: number, height: number) => {
+    const triggerLoad = (width: number, height: number) => {
       bindload!(
         getCustomEvent(
           'load',
@@ -391,7 +419,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           props
         )
       )
-    })
+    }
+    const { source } = evt.nativeEvent
+    if (source && source.width && source.height) {
+      triggerLoad(source.width, source.height)
+      return
+    }
+    getImageSize(src, triggerLoad)
   }
 
   const onImageError = (evt: NativeSyntheticEvent<ImageErrorEventData>) => {
@@ -410,7 +444,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   useEffect(() => {
     if (!isSvg && isLayoutMode) {
-      RNImage.getSize(
+      getImageSize(
         src,
         (width: number, height: number) => {
           state.current.imageWidth = width
@@ -455,7 +489,11 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     ),
     [
       'src',
-      'mode'
+      'mode',
+      'is-svg',
+      'enable-fast-image',
+      'bindload',
+      'binderror'
     ],
     {
       layoutRef
@@ -463,18 +501,19 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   )
 
   function renderSvgImage () {
+    const svgProps = {
+      onLayout: onSvgLoad,
+      style: extendObject(
+        { transformOrigin: 'left top' },
+        modeStyle
+      )
+    }
     return createElement(
       View,
       innerProps,
-      createElement(SvgCssUri, {
-        uri: src,
-        onLayout: onSvgLoad,
-        onError: binderror && onSvgError,
-        style: extendObject(
-          { transformOrigin: 'left top' },
-          modeStyle
-        )
-      })
+      typeof src === 'string'
+        ? createElement(SvgCssUri, extendObject({ uri: src, onError: binderror && onSvgError }, svgProps))
+        : createElement(LocalSvg, extendObject({ asset: src }, svgProps))
     )
   }
 
@@ -482,7 +521,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     return renderImage(
       extendObject(
         {
-          source: { uri: src },
+          source: normalizeImageSource(src),
           resizeMode: resizeMode,
           onLoad: bindload && onImageLoad,
           onError: binderror && onImageError,

package/lib/runtime/components/react/mpx-inline-text.tsx

@@ -1,16 +1,21 @@
 import { Text, TextProps } from 'react-native'
-import { JSX, createElement } from 'react'
+import { JSX, createElement, useContext } from 'react'
 
-import { extendObject } from './utils'
+import { extendObject, getDefaultAllowFontScaling } from './utils'
+import { TextPassThroughContext } from './context'
 
 const InlineText = (props: TextProps): JSX.Element => {
+  const inheritedText = useContext(TextPassThroughContext)
+  const style = extendObject({}, inheritedText?.textStyle, props.style)
+  const mergedProps = extendObject({}, inheritedText?.pendingTextProps, props, { style })
   const {
-    allowFontScaling = false
-  } = props
+    allowFontScaling,
+    children
+  } = mergedProps
 
-  return createElement(Text, extendObject({}, props, {
-    allowFontScaling
-  }))
+  return createElement(Text, extendObject({}, mergedProps, {
+    allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling()
+  }), children)
 }
 
 InlineText.displayName = 'MpxInlineText'

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

@@ -54,7 +54,7 @@ import {
   NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid, getDefaultAllowFontScaling } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -131,7 +131,7 @@ const inputModeMap: Record<Type, string> = {
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
   const {
     style = {},
-    allowFontScaling = false,
+    allowFontScaling,
     type = 'text',
     value,
     password,
@@ -483,7 +483,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
-        allowFontScaling,
+        allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling(),
         inputMode: originalKeyboardType ? undefined : inputModeMap[type],
         keyboardType: originalKeyboardType,
         secureTextEntry: !!password,
@@ -512,7 +512,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
     ),
     [
+      'name',
       'type',
+      'maxlength',
+      'cursor-spacing',
+      'adjust-position',
+      'hold-keyboard',
+      'keyboard-type',
+      'auto-height',
       'password',
       'placeholder-style',
       'disabled',
@@ -523,7 +530,13 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       'cursor',
       'cursor-color',
       'selection-start',
-      'selection-end'
+      'selection-end',
+      'bindinput',
+      'bindfocus',
+      'bindblur',
+      'bindconfirm',
+      'bindselectionchange',
+      'bindlinechange'
     ],
     {
       layoutRef