@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -0,0 +1,292 @@
+/**
+ * ✔ src
+ * ✔ mode
+ * ✘ show-menu-by-longpress
+ * ✔ binderror
+ * ✔ bindload
+ * ✘ fade-in
+ * ✔ webp
+ * ✘ lazy-load
+ * ✔ bindtap
+ * ✔ DEFAULT_SIZE
+ */
+import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react';
+import { Image as RNImage, View } from 'react-native';
+import { noop } from '@mpxjs/utils';
+import { SvgCssUri } from 'react-native-svg/css';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils';
+const DEFAULT_IMAGE_WIDTH = 320;
+const DEFAULT_IMAGE_HEIGHT = 240;
+const cropMode = [
+    'top',
+    'bottom',
+    'center',
+    'right',
+    'left',
+    'top left',
+    'top right',
+    'bottom left',
+    'bottom right'
+];
+const ModeMap = new Map([
+    ['scaleToFill', 'stretch'],
+    ['aspectFit', 'contain'],
+    ['aspectFill', 'cover'],
+    ['widthFix', 'stretch'],
+    ['heightFix', 'stretch'],
+    ...cropMode.map(mode => [mode, 'stretch'])
+]);
+const isNumber = (value) => typeof value === 'number';
+const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
+function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
+    const isMeetSize = viewWidth && viewHeight && ratio;
+    if (isSvg && !isMeetSize)
+        return true;
+    if (!isSvg && !['scaleToFill', 'aspectFit', 'aspectFill'].includes(mode) && !isMeetSize)
+        return true;
+    return false;
+}
+const Image = forwardRef((props, ref) => {
+    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
+    const defaultStyle = {
+        width: DEFAULT_IMAGE_WIDTH,
+        height: DEFAULT_IMAGE_HEIGHT
+    };
+    const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
+    const state = useRef({});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        defaultStyle
+    });
+    const isSvg = SVG_REGEXP.test(src);
+    const isWidthFixMode = mode === 'widthFix';
+    const isHeightFixMode = mode === 'heightFix';
+    const isCropMode = cropMode.includes(mode);
+    const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode;
+    const resizeMode = ModeMap.get(mode) || 'stretch';
+    const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
+        state.current.viewWidth = width;
+        state.current.viewHeight = height;
+        if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+            setViewWidth(width);
+            setViewHeight(height);
+            setRatio(state.current.ratio);
+            setImageWidth(state.current.imageWidth);
+            setImageHeight(state.current.imageHeight);
+            state.current = {};
+            setLoaded(true);
+        }
+    };
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef,
+        onLayout: isLayoutMode ? onLayout : noop
+    });
+    const { width, height } = normalStyle;
+    const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0);
+    const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0);
+    const [imageWidth, setImageWidth] = useState(0);
+    const [imageHeight, setImageHeight] = useState(0);
+    const [ratio, setRatio] = useState(0);
+    const [loaded, setLoaded] = useState(!isLayoutMode);
+    const fixedHeight = useMemo(() => {
+        const fixed = viewWidth * ratio;
+        return !fixed ? viewHeight : fixed;
+    }, [ratio, viewWidth, viewHeight]);
+    const fixedWidth = useMemo(() => {
+        if (!ratio)
+            return viewWidth;
+        const fixed = viewHeight / ratio;
+        return !fixed ? viewWidth : fixed;
+    }, [ratio, viewWidth, viewHeight]);
+    const modeStyle = useMemo(() => {
+        if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio))
+            return {};
+        switch (mode) {
+            case 'scaleToFill':
+            case 'aspectFit':
+                if (isSvg) {
+                    const scale = ratio <= 1
+                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    return {
+                        transform: [
+                            { scale },
+                            ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                        ]
+                    };
+                }
+                return {};
+            case 'aspectFill':
+                if (isSvg) {
+                    const scale = ratio >= 1
+                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    return {
+                        transform: [
+                            { scale },
+                            ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                        ]
+                    };
+                }
+                return {};
+            case 'widthFix':
+            case 'heightFix':
+                if (isSvg) {
+                    const scale = ratio >= 1
+                        ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
+                        : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight;
+                    return {
+                        transform: [{ scale }]
+                    };
+                }
+                return {};
+            case 'top':
+                return {
+                    transform: [
+                        { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+                    ]
+                };
+            case 'bottom':
+                return {
+                    transform: [
+                        { translateY: viewHeight - imageHeight },
+                        { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+                    ]
+                };
+            case 'center':
+                return {
+                    transform: [
+                        { translateY: relativeCenteredSize(viewHeight, imageHeight) },
+                        { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+                    ]
+                };
+            case 'left':
+                return {
+                    transform: [
+                        { translateY: relativeCenteredSize(viewHeight, imageHeight) }
+                    ]
+                };
+            case 'right':
+                return {
+                    transform: [
+                        { translateY: relativeCenteredSize(viewHeight, imageHeight) },
+                        { translateX: viewWidth - imageWidth }
+                    ]
+                };
+            case 'top left':
+                return {};
+            case 'top right':
+                return {
+                    transform: [
+                        { translateX: viewWidth - imageWidth }
+                    ]
+                };
+            case 'bottom left':
+                return {
+                    transform: [
+                        { translateY: viewHeight - imageHeight }
+                    ]
+                };
+            case 'bottom right':
+                return {
+                    transform: [
+                        { translateY: viewHeight - imageHeight },
+                        { translateX: viewWidth - imageWidth }
+                    ]
+                };
+            default:
+                return {};
+        }
+    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight]);
+    const onSvgLoad = (evt) => {
+        const { width, height } = evt.nativeEvent.layout;
+        setRatio(!width ? 0 : height / width);
+        setImageWidth(width);
+        setImageHeight(height);
+        bindload && bindload(getCustomEvent('load', evt, {
+            detail: { width, height },
+            layoutRef
+        }, props));
+    };
+    const onSvgError = (evt) => {
+        binderror(getCustomEvent('error', evt, {
+            detail: { errMsg: evt?.message },
+            layoutRef
+        }, props));
+    };
+    const onImageLoad = (evt) => {
+        evt.persist();
+        RNImage.getSize(src, (width, height) => {
+            bindload(getCustomEvent('load', evt, {
+                detail: { width, height },
+                layoutRef
+            }, props));
+        });
+    };
+    const onImageError = (evt) => {
+        binderror(getCustomEvent('error', evt, {
+            detail: { errMsg: evt.nativeEvent.error },
+            layoutRef
+        }, props));
+    };
+    useEffect(() => {
+        if (!isSvg && isLayoutMode) {
+            RNImage.getSize(src, (width, height) => {
+                state.current.imageWidth = width;
+                state.current.imageHeight = height;
+                state.current.ratio = !width ? 0 : height / width;
+                if (isWidthFixMode
+                    ? state.current.viewWidth
+                    : isHeightFixMode
+                        ? state.current.viewHeight
+                        : state.current.viewWidth && state.current.viewHeight) {
+                    state.current.viewWidth && setViewWidth(state.current.viewWidth);
+                    state.current.viewHeight && setViewHeight(state.current.viewHeight);
+                    setRatio(!width ? 0 : height / width);
+                    setImageWidth(width);
+                    setImageHeight(height);
+                    state.current = {};
+                    setLoaded(true);
+                }
+            });
+        }
+    }, [src, isSvg, isLayoutMode]);
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
+    }, layoutProps), [
+        'src',
+        'mode',
+        'svg'
+    ], {
+        layoutRef
+    });
+    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,
+        onError: binderror && onImageError,
+        style: extendObject({
+            transformOrigin: 'top left',
+            width: isCropMode ? imageWidth : '100%',
+            height: isCropMode ? imageHeight : '100%'
+        }, isCropMode ? modeStyle : {})
+    }, isLayoutMode ? {} : innerProps), enableFastImage);
+    const LayoutImage = createElement(View, innerProps, loaded && BaseImage);
+    return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
+});
+Image.displayName = 'mpx-image';
+export default Image;

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -0,0 +1,292 @@
+/**
+ * ✔ value
+ * - type: Partially. Not support `safe-password`、`nickname`
+ * ✔ password
+ * ✔ placeholder
+ * - placeholder-style: Only support color.
+ * ✘ placeholder-class
+ * ✔ disabled
+ * ✔ maxlength
+ * ✔ cursor-spacing
+ * ✔ auto-focus
+ * ✔ focus
+ * ✔ confirm-type
+ * ✘ always-embed
+ * ✔ confirm-hold
+ * ✔ cursor
+ * ✔ cursor-color
+ * ✔ selection-start
+ * ✔ selection-end
+ * ✔ adjust-position
+ * ✘ hold-keyboard
+ * ✘ safe-password-cert-path
+ * ✘ safe-password-length
+ * ✘ safe-password-time-stamp
+ * ✘ safe-password-nonce
+ * ✘ safe-password-salt
+ * ✘ safe-password-custom-hash
+ * - bindinput: No `keyCode` info.
+ * - bindfocus: No `height` info.
+ * - bindblur: No `encryptedValue`、`encryptError` info.
+ * ✔ bindconfirm
+ * ✘ bindkeyboardheightchange
+ * ✘ bindnicknamereview
+ * ✔ bind:selectionchange
+ * ✘ bind:keyboardcompositionstart
+ * ✘ bind:keyboardcompositionupdate
+ * ✘ bind:keyboardcompositionend
+ * ✘ bind:onkeyboardheightchange
+ */
+import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
+import { Platform, TextInput } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { FormContext, KeyboardAvoidContext } from './context';
+const keyboardTypeMap = {
+    text: 'default',
+    number: 'numeric',
+    idcard: 'default',
+    digit: Platform.select({
+        ios: 'decimal-pad',
+        android: 'numeric'
+    }) || ''
+};
+const Input = forwardRef((props, ref) => {
+    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    // private
+    multiline, 'auto-height': autoHeight, bindlinechange } = props;
+    const formContext = useContext(FormContext);
+    const keyboardAvoid = useContext(KeyboardAvoidContext);
+    let formValuesMap;
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const parseValue = (value) => {
+        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 = parseValue(value);
+    const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
+    const textAlignVertical = multiline ? 'top' : 'auto';
+    const tmpValue = useRef(defaultValue);
+    const cursorIndex = useRef(0);
+    const lineCount = useRef(0);
+    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' }, style, multiline && autoHeight
+        ? { minHeight: Math.max(style?.minHeight || 35, contentHeight) }
+        : {});
+    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 });
+    useEffect(() => {
+        if (inputValue !== value) {
+            setInputValue(parseValue(value));
+        }
+    }, [value]);
+    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]);
+    const onTextInput = ({ nativeEvent }) => {
+        if (!bindinput && !bindblur)
+            return;
+        const { range: { start, end }, text } = nativeEvent;
+        cursorIndex.current = start < end ? start : start + text.length;
+    };
+    const onChange = (evt) => {
+        tmpValue.current = evt.nativeEvent.text;
+        if (!bindinput)
+            return;
+        const result = bindinput(getCustomEvent('input', evt, {
+            detail: {
+                value: evt.nativeEvent.text,
+                cursor: cursorIndex.current
+            },
+            layoutRef
+        }, props));
+        if (typeof result === 'string') {
+            tmpValue.current = result;
+            setInputValue(result);
+        }
+        else {
+            setInputValue(tmpValue.current);
+        }
+    };
+    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) => {
+        setKeyboardAvoidContext();
+        bindfocus && bindfocus(getCustomEvent('focus', evt, {
+            detail: {
+                value: tmpValue.current || ''
+            },
+            layoutRef
+        }, props));
+    };
+    const onInputBlur = (evt) => {
+        bindblur && bindblur(getCustomEvent('blur', evt, {
+            detail: {
+                value: tmpValue.current || '',
+                cursor: cursorIndex.current
+            },
+            layoutRef
+        }, props));
+    };
+    const onKeyPress = (evt) => {
+        evt.nativeEvent.key === 'Enter' &&
+            bindconfirm(getCustomEvent('confirm', evt, {
+                detail: {
+                    value: tmpValue.current || ''
+                },
+                layoutRef
+            }, props));
+    };
+    const onSubmitEditing = (evt) => {
+        bindconfirm(getCustomEvent('confirm', evt, {
+            detail: {
+                value: tmpValue.current || ''
+            },
+            layoutRef
+        }, props));
+    };
+    const onSelectionChange = (evt) => {
+        setSelection(evt.nativeEvent.selection);
+        bindselectionchange && bindselectionchange(getCustomEvent('selectionchange', evt, {
+            detail: {
+                selectionStart: evt.nativeEvent.selection.start,
+                selectionEnd: evt.nativeEvent.selection.end
+            },
+            layoutRef
+        }, props));
+    };
+    const onContentSizeChange = (evt) => {
+        const { width, height } = evt.nativeEvent.contentSize;
+        if (width && height) {
+            if (!multiline || !autoHeight || height === contentHeight)
+                return;
+            lineCount.current += height > contentHeight ? 1 : -1;
+            const lineHeight = lineCount.current === 0 ? 0 : height / lineCount.current;
+            bindlinechange &&
+                bindlinechange(getCustomEvent('linechange', evt, {
+                    detail: {
+                        height,
+                        lineHeight,
+                        lineCount: lineCount.current
+                    },
+                    layoutRef
+                }, props));
+            setContentHeight(height);
+        }
+    };
+    const resetValue = () => {
+        setInputValue('');
+    };
+    const getValue = () => {
+        return inputValue;
+    };
+    if (formValuesMap) {
+        if (!props.name) {
+            warn('If a form component is used, the name attribute is required.');
+        }
+        else {
+            formValuesMap.set(props.name, { getValue, resetValue });
+        }
+    }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (focus) {
+            setKeyboardAvoidContext();
+        }
+    }, [focus]);
+    useUpdateEffect(() => {
+        if (!nodeRef?.current) {
+            return;
+        }
+        focus
+            ? nodeRef.current?.focus()
+            : nodeRef.current?.blur();
+    }, [focus]);
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        allowFontScaling,
+        keyboardType: keyboardType,
+        secureTextEntry: !!password,
+        defaultValue: defaultValue,
+        value: inputValue,
+        maxLength: maxlength === -1 ? undefined : maxlength,
+        editable: !disabled,
+        autoFocus: !!autoFocus || !!focus,
+        returnKeyType: confirmType,
+        selection: selection,
+        selectionColor: cursorColor,
+        blurOnSubmit: !multiline && !confirmHold,
+        underlineColorAndroid: 'rgba(0,0,0,0)',
+        textAlignVertical: textAlignVertical,
+        placeholderTextColor: placeholderTextColor,
+        multiline: !!multiline
+    }, layoutProps, {
+        onTouchStart: onInputTouchStart,
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
+        onKeyPress: bindconfirm && onKeyPress,
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
+        onSelectionChange: onSelectionChange,
+        onTextInput: onTextInput,
+        onChange: onChange,
+        onContentSizeChange: onContentSizeChange
+    }), [
+        'type',
+        'password',
+        'placeholder-style',
+        'disabled',
+        'auto-focus',
+        'focus',
+        'confirm-type',
+        'confirm-hold',
+        'cursor',
+        'cursor-color',
+        'selection-start',
+        'selection-end'
+    ], {
+        layoutRef
+    });
+    return createElement(TextInput, innerProps);
+});
+Input.displayName = 'MpxInput';
+export default Input;

package/lib/runtime/components/react/dist/mpx-label.jsx

@@ -0,0 +1,52 @@
+/**
+ * ✘ for
+ */
+import { useRef, forwardRef, useCallback, createElement } from 'react';
+import { View } from 'react-native';
+import { noop, warn } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import { LabelContext } from './context';
+const Label = forwardRef((labelProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(labelProps);
+    const propsRef = useRef({});
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    propsRef.current = props;
+    const defaultStyle = {
+        flexDirection: 'row'
+    };
+    const styleObj = extendObject({}, defaultStyle, style);
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, 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 { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Label does not support background image-related styles!');
+    }
+    const contextRef = useRef({
+        triggerChange: noop
+    });
+    const onTap = useCallback((evt) => {
+        const { bindtap } = propsRef.current;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
+        contextRef.current.triggerChange(evt);
+    }, []);
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
+        bindtap: onTap
+    }), [], {
+        layoutRef
+    });
+    return createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+Label.displayName = 'MpxLabel';
+export default Label;

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -0,0 +1,32 @@
+/**
+ * ✘ scale-area
+ */
+import { View } from 'react-native';
+import { forwardRef, useRef, useMemo, createElement } from 'react';
+import useNodesRef from './useNodesRef';
+import useInnerProps from './getInnerListeners';
+import { MovableAreaContext } from './context';
+import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+const _MovableArea = forwardRef((props, ref) => {
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const movableViewRef = useRef(null);
+    useNodesRef(props, ref, movableViewRef, {
+        style: normalStyle
+    });
+    const contextValue = useMemo(() => ({
+        height: normalStyle.height || 10,
+        width: normalStyle.width || 10
+    }), [normalStyle.width, normalStyle.height]);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
+    const innerProps = useInnerProps(props, extendObject({
+        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        ref: movableViewRef
+    }, layoutProps), [], { layoutRef });
+    return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
+});
+_MovableArea.displayName = 'MpxMovableArea';
+export default _MovableArea;