@mpxjs/webpack-plugin 2.9.59 → 2.9.64

package/lib/runtime/components/react/dist/mpx-swiper/index.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useRef } from 'react';
-import { default as Carouse } from './carouse';
+import { forwardRef, useRef } from 'react';
+import Carouse from './carouse';
 import useInnerProps from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 /**
@@ -13,13 +13,14 @@ import useNodesRef from '../useNodesRef'; // 引入辅助函数
  * ✔ circular
  * ✔ vertical
  * ✘ display-multiple-items
- * ✔ previous-margin
- * ✔ next-margin
+ * ✘ previous-margin
+ * ✘ next-margin
+ * ✔ easing-function  ="easeOutCubic"
  * ✘ snap-to-edge
  */
 const _SwiperWrapper = forwardRef((props, ref) => {
     const { children } = props;
-    let innerLayout = useRef({});
+    const innerLayout = useRef({});
     const swiperProp = {
         circular: props.circular || false,
         current: props.current || 0,
@@ -27,14 +28,20 @@ const _SwiperWrapper = forwardRef((props, ref) => {
         duration: props.duration || 500,
         interval: props.interval || 5000,
         showsPagination: props['indicator-dots'],
-        dotColor: props['indicator-color'] || "rgba(0, 0, 0, .3)",
+        dotColor: props['indicator-color'] || 'rgba(0, 0, 0, .3)',
         activeDotColor: props['indicator-active-color'] || '#000000',
         horizontal: props.vertical !== undefined ? !props.vertical : true,
-        style: props.style,
         previousMargin: props['previous-margin'] ? parseInt(props['previous-margin']) : 0,
         nextMargin: props['next-margin'] ? parseInt(props['next-margin']) : 0,
-        enableOffset: props['enable-offset'] || false,
-        bindchange: props.bindchange
+        enableOffset: props['enable-offset'] || true,
+        enableVar: props['enable-var'] || false,
+        parentFontSize: props['parent-font-size'],
+        parentWidth: props['parent-width'],
+        parentHeight: props['parent-height'],
+        style: props.style || {},
+        externalVarContext: props['external-var-context'],
+        bindchange: props.bindchange,
+        easingFunction: props['easing-function'] || 'default'
     };
     const { nodeRef } = useNodesRef(props, ref, {});
     const innerProps = useInnerProps(props, {
@@ -44,12 +51,15 @@ const _SwiperWrapper = forwardRef((props, ref) => {
         'indicator-color',
         'indicator-active-color',
         'previous-margin',
-        'next-margin'
+        'vertical',
+        'previous-margin',
+        'next-margin',
+        'easing-function'
     ], { layoutRef: innerLayout });
     const getInnerLayout = (layout) => {
         innerLayout.current = layout.current;
     };
-    return <Carouse getInnerLayout={getInnerLayout} innerProps={innerProps} {...swiperProp} {...innerProps}>
+    return <Carouse getInnerLayout={getInnerLayout} innerProps={innerProps} {...innerProps} {...swiperProp}>
     {children}
   </Carouse>;
 });

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -1,24 +1,32 @@
 import { View } from 'react-native';
-import React, { forwardRef, useRef } from 'react';
+import { forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
 const _SwiperItem = forwardRef((props, ref) => {
-    const { children, 'enable-offset': enableOffset } = props;
-    const layoutRef = useRef({});
+    const { 'enable-offset': enableOffset, 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
+    const { textProps } = splitProps(props);
     const { nodeRef } = useNodesRef(props, ref, {});
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { 
+    // 存储layout布局信息
+    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const innerProps = useInnerProps(props, {
-        ...(enableOffset ? { onLayout } : {}),
+        style: { ...innerStyle, ...layoutStyle },
+        ref: nodeRef,
+        ...layoutProps
     }, [
         'children',
         'enable-offset'
     ], { layoutRef });
-    return (<View ref={nodeRef} data-itemId={props['item-id']} {...innerProps}>
-      {children}
+    return (<View data-itemId={props['item-id']} {...innerProps}>
+       {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
     </View>);
 });
 _SwiperItem.displayName = 'mpx-swiper-item';

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

@@ -0,0 +1,79 @@
+/**
+ * ✔ checked
+ * ✔ type
+ * ✔ disabled
+ * ✔ color
+ */
+import { Switch } from 'react-native';
+import { useEffect, forwardRef, useState, useContext } from 'react';
+import { warn } from '@mpxjs/utils';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import CheckBox from './mpx-checkbox';
+import { FormContext } from './context';
+import { useTransformStyle, useLayout } from './utils';
+const _Switch = forwardRef((props, ref) => {
+    const { style = {}, checked = false, type = 'switch', disabled = false, color = '#04BE02', 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange, catchchange } = props;
+    const [isChecked, setIsChecked] = useState(checked);
+    const changeHandler = bindchange || catchchange;
+    let formValuesMap;
+    const formContext = useContext(FormContext);
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    useEffect(() => {
+        setIsChecked(checked);
+    }, [checked]);
+    const { nodeRef } = useNodesRef(props, ref);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const onChange = (evt, { checked } = {}) => {
+        if (type === 'switch') {
+            setIsChecked(evt);
+            changeHandler && changeHandler(getCustomEvent('change', {}, { layoutRef, detail: { value: evt } }, props));
+        }
+        else {
+            setIsChecked(checked);
+            changeHandler && changeHandler(getCustomEvent('change', evt, { layoutRef, detail: { value: checked } }, props));
+        }
+    };
+    const resetValue = () => {
+        setIsChecked(false);
+    };
+    const getValue = () => {
+        return isChecked;
+    };
+    if (formValuesMap) {
+        if (!props.name) {
+            warn('If a form component is used, the name attribute is required.');
+        }
+        else {
+            formValuesMap.set(props.name, { getValue, resetValue });
+        }
+    }
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: { ...normalStyle, ...layoutStyle },
+        ...layoutProps,
+        ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
+    }, [
+        'checked',
+        'disabled',
+        'type',
+        'color'
+    ], {
+        layoutRef
+    });
+    if (type === 'checkbox') {
+        return <CheckBox {...innerProps} color={color} style={normalStyle} checked={isChecked}/>;
+    }
+    return <Switch {...innerProps} style={normalStyle} value={isChecked} trackColor={{ false: '#FFF', true: color }} thumbColor={isChecked ? '#FFF' : '#f4f3f4'} ios_backgroundColor="#FFF"/>;
+});
+_Switch.displayName = 'mpx-switch';
+export default _Switch;

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

@@ -3,65 +3,37 @@
  * ✘ space
  * ✘ decode
  */
-import { Text, StyleSheet } from 'react-native';
-import { useRef, useEffect, forwardRef } from 'react';
+import { Text } from 'react-native';
+import { useRef, forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
-// @ts-ignore
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { PERCENT_REGEX } from './utils';
-const DEFAULT_STYLE = {
-    fontSize: 16
-};
-const transformStyle = (styleObj) => {
-    let { lineHeight } = styleObj;
-    if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) {
-        lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize);
-        styleObj.lineHeight = lineHeight;
-    }
-};
+import { useTransformStyle, wrapChildren } from './utils';
 const _Text = forwardRef((props, ref) => {
-    const { style = [], children, selectable, 'enable-offset': enableOffset, 'user-select': userSelect, 'disable-default-style': disableDefaultStyle = false, } = props;
+    const { style = {}, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const layoutRef = useRef({});
-    const styleObj = StyleSheet.flatten(style);
-    let defaultStyle = {};
-    if (!disableDefaultStyle) {
-        defaultStyle = DEFAULT_STYLE;
-        transformStyle(styleObj);
-    }
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle
+    const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
     });
+    const { nodeRef } = useNodesRef(props, ref);
     const innerProps = useInnerProps(props, {
-        ref: nodeRef
+        ref: nodeRef,
+        style: normalStyle,
+        selectable: !!selectable || !!userSelect
     }, [
-        'style',
-        'children',
-        'selectable',
-        'user-select',
-        'useInherit',
-        'enable-offset'
+        'user-select'
     ], {
         layoutRef
     });
-    useEffect(() => {
-        let measureTimeout = null;
-        if (enableOffset) {
-            measureTimeout = setTimeout(() => {
-                nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                    layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-                });
-            });
-            return () => {
-                if (measureTimeout) {
-                    clearTimeout(measureTimeout);
-                    measureTimeout = null;
-                }
-            };
-        }
-    }, []);
-    return (<Text style={{ ...defaultStyle, ...styleObj }} selectable={!!selectable || !!userSelect} {...innerProps}>
-        {children}
-      </Text>);
+    return (<Text {...innerProps}>
+      {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        })}
+    </Text>);
 });
 _Text.displayName = 'mpx-text';
 export default _Text;

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

@@ -9,7 +9,7 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Keyboard } from 'react-native';
 import Input from './mpx-input';
 import { omit } from './utils';
@@ -19,7 +19,7 @@ const Textarea = forwardRef((props, ref) => {
         'type',
         'password',
         'multiline',
-        'confirm-hold',
+        'confirm-hold'
     ]);
     return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
 });