@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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

@@ -1,14 +1,17 @@
 /**
  * swiper 实现
  */
-import { View, ScrollView, Dimensions } from 'react-native';
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Animated, View, Dimensions, Platform } from 'react-native';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 /**
  * 默认的Style类型
  */
 const styles = {
+    slide: {
+        backgroundColor: 'transparent'
+    },
     container_x: {
         position: 'relative',
     },
@@ -39,19 +42,27 @@ const styles = {
 const _Carouse = forwardRef((props, ref) => {
     // 默认取水平方向的width
     const { width } = Dimensions.get('window');
-    const defaultHeight = 150;
+    const { styleObj } = props;
+    const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children;
+    const totalElements = Array.isArray(newChild) ? newChild.length : (newChild ? 1 : 0);
+    // const defaultHeight = (styleObj?.height || 150) - previousMargin - nextMargin
+    // const defaultWidth = (styleObj?.width || width || 375) - previousMargin - nextMargin
+    const defaultHeight = (styleObj?.height || 150);
+    const defaultWidth = (styleObj?.width || width || 375);
     const dir = props.horizontal === false ? 'y' : 'x';
     // state的offset默认值
-    const defaultX = width * (props.circular ? props.current + 1 : props.current) || 0;
-    const defaultY = defaultHeight * (props.circular ? props.current + 1 : props.current) || 0;
+    // const initIndex = props.circular ? props.current + 1: (props.current || 0)
+    // 记录真正的下标索引, 不包括循环前后加入的索引, 游标
+    const initIndex = props.current || 0;
+    // 这里要排除超过元素个数的设置
+    const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0);
+    // const defaultX = (defaultWidth * initOffsetIndex + previousMargin) || 0
+    // const defaultY = (defaultHeight * initOffsetIndex + previousMargin) || 0
+    const defaultX = (defaultWidth * initOffsetIndex) || 0;
+    const defaultY = (defaultHeight * initOffsetIndex) || 0;
     // 内部存储上一次的offset值
-    const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children;
-    // 默认设置为初次渲染
-    const initRenderRef = useRef(true);
     const autoplayTimerRef = useRef(null);
-    let loopJumpTimerRef = useRef(null);
     const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {});
-    const autoplayEndRef = useRef(false);
     // 存储layout布局信息
     const layoutRef = useRef({});
     // 内部存储上一次的偏移量
@@ -62,123 +73,173 @@ const _Carouse = forwardRef((props, ref) => {
         },
         isScrolling: false
     });
+    const isDragRef = useRef(false);
     const [state, setState] = useState({
         children: newChild,
-        width: width || 375,
+        width: defaultWidth || 375,
         height: defaultHeight,
-        index: 0,
-        total: Array.isArray(newChild) ? newChild.length : (newChild ? 1 : 0),
+        // 真正的游标索引, 从0开始
+        index: initIndex,
+        total: totalElements,
         offset: {
             x: dir === 'x' ? defaultX : 0,
             y: dir === 'y' ? defaultY : 0
         },
-        loopJump: false,
         dir
     });
+    /**
+     * @desc: 开启下一次自动轮播
+    */
+    function createAutoPlay() {
+        autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current);
+        autoplayTimerRef.current = setTimeout(() => {
+            startAutoPlay();
+        }, props.interval || 500);
+    }
     useEffect(() => {
         // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
         if (props.autoplay) {
-            startAutoPlay();
-        }
-        else {
-            startSwiperLoop();
+            createAutoPlay();
         }
-    }, [props.autoplay, props.current, state.index]);
+    }, [props.autoplay, props.current, state.index, state.width, state.height]);
     /**
-     * 更新index，以视图的offset计算当前的索引
+     * @desc: 更新状态: index和offset, 并响应索引变化的事件
+     * scrollViewOffset: 移动到的目标位置
     */
-    function updateIndex(scrollViewOffset) {
-        const diff = scrollViewOffset[dir] - internalsRef.current.offset[state.dir];
-        if (!diff)
-            return;
-        const step = dir === 'x' ? state.width : state.height;
-        let loopJump = false;
-        let newIndex = state.index + Math.round(diff / step);
-        // 若是循环circular
-        // 1. 当前索引-1, 初始化为最后一个索引, 且scrollView的偏移量设置为 每个元素的步长 * 一共多少个元素， 这里为什么不减一呢
-        // 2. 当前索引>total, 初始化为第一个元素，且scrollView的偏移量设置为一个元素的步长
-        if (props.circular) {
-            if (state.index <= -1) {
-                newIndex = state.total - 1;
-                scrollViewOffset[state.dir] = step * state.total;
-                loopJump = true;
-            }
-            else if (newIndex >= state.total) {
-                newIndex = 0;
-                scrollViewOffset[state.dir] = step;
-                loopJump = true;
-            }
-        }
-        // 存储当前的偏移量
-        internalsRef.current.offset = scrollViewOffset;
-        // 这里需不需要区分是否loop，初始化？？？？
+    function updateIndex(scrollViewOffset, useIndex = false) {
+        const { nextIndex, nextOffset } = getNextConfig(scrollViewOffset);
+        internalsRef.current.offset = nextOffset;
         setState((preState) => {
             const newState = {
                 ...preState,
-                index: newIndex,
-                offset: scrollViewOffset,
-                loopJump
+                index: nextIndex,
+                // offset用来指示当前scrollView的偏移量
+                offset: nextOffset,
             };
             return newState;
         });
         internalsRef.current.isScrolling = false;
         // getCustomEvent
-        const eventData = getCustomEvent('change', {}, { detail: { current: newIndex, source: 'touch' }, layoutRef: layoutRef });
+        const eventData = getCustomEvent('change', {}, { detail: { current: nextIndex, source: 'touch' }, layoutRef: layoutRef });
         props.bindchange && props.bindchange(eventData);
         // 更新完状态之后, 开启新的loop
     }
     /**
-     * 用户手动点击播放
-     * 触发scrollView的onScrollEnd事件 => 然后更新索引 => 通过useEffect事件 => startSwiperLoop => 主动更新scrollView到指定的位置
-     * 若是circular, 到最后一个索引会更新为0，但是视觉要scrollView到下一个
-     * 若是circular, 到第一个再往前索引会更新为total-1, 但是视觉是展示的最后一个
+     * @desc: 获取下一个位置的索引、scrollView的contentOffset、scrollTo到的offset
+     * @desc: 包括正循环、反向循环、不循环
+     * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset, 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
     */
-    function startSwiperLoop() {
-        loopJumpTimerRef.current = setTimeout(() => {
-            let offset = { x: 0, y: 0, animated: false };
-            if (state.index > 0) {
-                offset = props.horizontal ? { x: state.width * state.index, y: 0, animated: false } : { x: 0, y: state.height * state.index, animated: false };
+    function getNextConfig(scrollViewOffset) {
+        const step = state.dir === 'x' ? state.width : state.height;
+        let currentOffset = state.offset;
+        let nextIndex = state.index + 1;
+        let nextOffset = currentOffset;
+        // autoMoveOffset scrollView 滚动到前后增加的位置
+        let autoMoveOffset = currentOffset;
+        let isBack = false;
+        let isAutoEnd = false;
+        // 如果是循环反向的
+        if (scrollViewOffset?.[state.dir] < currentOffset[state.dir]) {
+            isBack = true;
+            nextIndex = isBack ? nextIndex - 2 : nextIndex;
+        }
+        if (!props.circular) {
+            // nextIndex = isBack ? nextIndex - 2 : nextIndex
+            nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex });
+        }
+        else {
+            if (isBack) {
+                if (nextIndex < 0) {
+                    // 反向: scollView 滚动到虚拟的位置
+                    autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 });
+                    nextIndex = state.total - 1;
+                    // 反向: 数组最后一个index
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total }),
+                        isAutoEnd = true;
+                }
+                else {
+                    // 反向非最后一个
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step });
+                }
             }
-            if (props.circular) {
-                offset = props.horizontal ? { x: state.width * (state.index + 1), y: 0, animated: false } : { x: 0, y: state.height * (state.index + 1), animated: false };
+            else {
+                if (nextIndex > state.total - 1) {
+                    autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * (nextIndex + 1) });
+                    nextIndex = 0;
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step }),
+                        isAutoEnd = true;
+                }
+                else {
+                    // nextIndex =  nextIndex,
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step });
+                }
             }
-            scrollViewRef.current?.scrollTo(offset);
-            internalsRef.current.offset = offset;
-        }, props.duration || 500);
+        }
+        return {
+            nextIndex,
+            nextOffset,
+            autoMoveOffset,
+            isAutoEnd
+        };
     }
     /**
-     * 开启自动轮播
-     * 每间隔interval scrollView的offset更改到下一个位置，通过onScrollEnd来获取contentOffset再计算要更新的索引index
+     * @desc: 开启自动轮播
     */
     function startAutoPlay() {
-        // 已经开启过autopaly则不重新创建
-        if (!Array.isArray(state.children) || !props.autoplay || internalsRef.current.isScrolling || autoplayEndRef.current) {
+        if (state.width && isNaN(+state.width)) {
+            createAutoPlay();
             return;
         }
-        autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current);
-        // 非循环自动播放的形式下 到最后一帧 结束自动播放
-        if (!props.circular && state.index === state.total - 1) {
-            autoplayEndRef.current = true;
+        if (!Array.isArray(state.children)) {
             return;
         }
-        // 开启自动播放
-        autoplayTimerRef.current = setTimeout(() => {
-            if (state.total < 2)
-                return;
-            const nexStep = 1;
-            const toIndex = (props.circular ? 1 : 0) + nexStep + state.index;
-            let x = 0;
-            let y = 0;
-            if (state.dir === 'x')
-                x = toIndex * state.width;
-            if (state.dir === 'y')
-                y = toIndex * state.height;
-            // animated会影响切换的offset，先改为false
-            scrollViewRef.current?.scrollTo({ x, y, animated: false });
-            internalsRef.current.isScrolling = true;
-            autoplayEndRef.current = false;
-            updateIndex({ x, y });
-        }, props.interval || 5000);
+        const step = state.dir === 'x' ? state.width : state.height;
+        const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset);
+        // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
+        // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
+        if (Platform.OS === 'ios') {
+            if (!isAutoEnd) {
+                scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true });
+            }
+            else {
+                if (state.dir === 'x') {
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset['x'], y: autoMoveOffset['x'], animated: true });
+                }
+                else {
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true });
+                }
+            }
+        }
+        else {
+            if (!isAutoEnd) {
+                scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true });
+                onScrollEnd({
+                    nativeEvent: {
+                        // @ts-ignore
+                        x: +nextOffset['x'],
+                        y: +nextOffset['y']
+                    }
+                });
+            }
+            else {
+                setTimeout(() => {
+                    onScrollEnd({
+                        nativeEvent: {
+                            // @ts-ignore
+                            x: 0,
+                            y: 0
+                        }
+                    });
+                }, 10);
+                if (state.dir === 'x') {
+                    scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true });
+                    // scrollViewRef.current?.scrollTo({ x: autoMoveOffset['x'], y: autoMoveOffset['x'], animated: true })
+                }
+                else {
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true });
+                }
+            }
+        }
     }
     /**
      * 当用户开始拖动此视图时调用此函数, 更新当前在滚动态
@@ -186,10 +247,17 @@ const _Carouse = forwardRef((props, ref) => {
     function onScrollBegin() {
         internalsRef.current.isScrolling = true;
     }
+    /**
+     * 当用户开始拖动结束
+     */
     function onScrollEnd(event) {
+        // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+        if (totalElements === 1) {
+            return;
+        }
         internalsRef.current.isScrolling = false;
         // 用户手动滑动更新索引后，如果开启了自动轮播等重新开始
-        updateIndex(event.nativeEvent.contentOffset);
+        updateIndex(event.nativeEvent.contentOffset, true);
     }
     /**
      * 当拖拽结束时，检测是否可滚动
@@ -197,57 +265,58 @@ const _Carouse = forwardRef((props, ref) => {
     function onScrollEndDrag(event) {
         const { contentOffset } = event.nativeEvent;
         const { index, total } = state;
+        isDragRef.current = true;
         const internalOffset = internalsRef.current.offset;
         const previousOffset = props.horizontal ? internalOffset.x : internalOffset.y;
-        const newOffset = props.horizontal ? contentOffset.x : contentOffset.y;
-        if (previousOffset === newOffset && (index === 0 || index === total - 1)) {
-            internalsRef.current.isScrolling = false;
-        }
-    }
-    /**
-     * 垂直方向时，获取单个元素的布局，更新
-    */
-    function onItemLayout(event) {
-        if (!initRenderRef.current || state.dir === 'x')
-            return;
-        const { width, height } = event.nativeEvent.layout;
-        if (state.total > 1) {
-            internalsRef.current.offset[state.dir] = (state.dir === 'y' ? height * state.index : state.width * state.index);
-        }
-        if (!state.offset.x && !state.offset.y) {
-            state.offset = internalsRef.current.offset;
+        const moveOffset = props.horizontal ? contentOffset.x : contentOffset.y;
+        // const diff = moveOffset - previousOffset
+        /*
+        if (diff > 0 && state.index + 1 >= total) {
+          const { nextOffset } = getNextConfig(contentOffset)
+          // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: false })
+        } else if ( diff < 0 && state.index -1 < 0) {
+          const { nextOffset } = getNextConfig(contentOffset)
+          // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: false })
         }
-        if (initRenderRef.current && state.total > 1) {
-            scrollViewRef.current?.scrollTo({ ...internalsRef.current.offset, animated: false });
-            initRenderRef.current = false;
+        */
+        if (previousOffset === moveOffset && (index === 0 || index === total - 1)) {
+            internalsRef.current.isScrolling = false;
         }
-        setState((preState) => {
-            return {
-                ...preState,
-                height
-            };
-        });
     }
     /**
-     * 水平方向时，获取单个元素的布局，更新
+     * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
     */
     function onWrapperLayout() {
         if (props.enableOffset) {
             // @ts-ignore
             scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
                 layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+                const isWDiff = state.width !== width;
+                const isHDiff = state.height !== height;
+                if (isWDiff || isHDiff) {
+                    const changeState = {
+                        width: isWDiff ? width : state.width,
+                        height: isHDiff ? height : state.height
+                    };
+                    let correctOffset = Object.assign({}, state.offset, {
+                        [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
+                    });
+                    state.offset = correctOffset;
+                    state.width = width;
+                    state.height = height;
+                    setState((preState) => {
+                        return {
+                            ...preState,
+                            offset: correctOffset,
+                            width: changeState.width,
+                            height: changeState.height
+                        };
+                    });
+                    scrollViewRef.current?.scrollTo({ x: correctOffset['x'], y: correctOffset['y'], animated: false });
+                }
                 props.getInnerLayout && props.getInnerLayout(layoutRef);
             });
         }
-        if (state.dir === 'y')
-            return;
-        if (!state.offset.x && !state.offset.y) {
-            state.offset = internalsRef.current.offset;
-        }
-        if (!initRenderRef.current && state.total > 1) {
-            scrollViewRef.current?.scrollTo({ ...state.offset, animated: false });
-            initRenderRef.current = false;
-        }
     }
     function renderScrollView(pages) {
         let scrollElementProps = {
@@ -261,9 +330,10 @@ const _Carouse = forwardRef((props, ref) => {
             removeClippedSubviews: true,
             automaticallyAdjustContentInsets: false
         };
-        return (<ScrollView {...scrollElementProps} overScrollMode="always" contentOffset={state.offset} onScrollBeginDrag={onScrollBegin} onMomentumScrollEnd={onScrollEnd} onScrollEndDrag={onScrollEndDrag}>
+        const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth };
+        return (<Animated.ScrollView {...scrollElementProps} style={[layoutStyle]} overScrollMode="always" contentOffset={state.offset} onScrollBeginDrag={onScrollBegin} onMomentumScrollEnd={onScrollEnd} onScrollEndDrag={onScrollEndDrag}>
         {pages}
-      </ScrollView>);
+      </Animated.ScrollView>);
     }
     function renderPagination() {
         if (state.total <= 1)
@@ -303,7 +373,7 @@ const _Carouse = forwardRef((props, ref) => {
     }
     function renderPages() {
         const { width, height, total, children } = state;
-        const { circular, previousMargin, nextMargin, innerProps } = props;
+        const { circular } = props;
         const pageStyle = { width: width, height: height };
         if (total > 1 && Array.isArray(children)) {
             let arrElements = [];
@@ -315,17 +385,7 @@ const _Carouse = forwardRef((props, ref) => {
                 pages.push('0');
             }
             arrElements = pages.map((page, i) => {
-                let pageStyle2 = { width: width, height: height };
-                const extraStyle = {};
-                if (previousMargin) {
-                    extraStyle.left = +previousMargin;
-                }
-                if (nextMargin && state.index === i - 1) {
-                    const half = Math.floor(+nextMargin / 2);
-                    extraStyle.marginLeft = -half;
-                    extraStyle.paddingLeft = half;
-                }
-                return (<View style={[pageStyle2, extraStyle]} key={'page' + i} onLayout={onItemLayout}>
+                return (<View style={[pageStyle, styles.slide]} key={'page' + i}>
             {children[+page]}
           </View>);
             });
@@ -337,17 +397,16 @@ const _Carouse = forwardRef((props, ref) => {
         </View>);
         }
     }
-    const vStyle = {};
-    if (dir === 'y') {
-        vStyle.height = defaultHeight;
-    }
     const pages = renderPages();
     const strStyle = 'container_' + state.dir;
     const eventProps = props.innerProps || {};
-    return (<View style={[styles[strStyle], vStyle]} {...eventProps} onLayout={onWrapperLayout}>
+    const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth };
+    return (<View style={[layoutStyle]}>
+    <View style={[styles[strStyle], layoutStyle]} {...eventProps} onLayout={onWrapperLayout}>
       {renderScrollView(pages)}
-      {props.showsPagination && renderPagination()}
-    </View>);
+    </View>
+    <View>{props.showsPagination && renderPagination()}</View>
+  </View>);
 });
 _Carouse.displayName = '_Carouse';
 export default _Carouse;

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { default as Carouse } from './carouse';
 import useInnerProps from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
@@ -13,8 +13,9 @@ 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) => {
@@ -30,11 +31,12 @@ const _SwiperWrapper = forwardRef((props, ref) => {
         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,
+        styleObj: 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,
+        bindchange: props.bindchange,
+        easingFunction: props['easing-function'] || 'default'
     };
     const { nodeRef } = useNodesRef(props, ref, {});
     const innerProps = useInnerProps(props, {
@@ -49,7 +51,7 @@ const _SwiperWrapper = forwardRef((props, ref) => {
     const getInnerLayout = (layout) => {
         innerLayout.current = layout.current;
     };
-    return <Carouse getInnerLayout={getInnerLayout} innerProps={innerProps} {...swiperProp} {...innerProps}>
+    return <Carouse getInnerLayout={getInnerLayout} innerProps={innerProps} {...swiperProp}>
     {children}
   </Carouse>;
 });

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

@@ -1,9 +1,9 @@
 import { View } from 'react-native';
-import React, { forwardRef, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 const _SwiperItem = forwardRef((props, ref) => {
-    const { children, 'enable-offset': enableOffset } = props;
+    const { children, 'enable-offset': enableOffset, style } = props;
     const layoutRef = useRef({});
     const { nodeRef } = useNodesRef(props, ref, {});
     const onLayout = () => {
@@ -17,7 +17,7 @@ const _SwiperItem = forwardRef((props, ref) => {
         'children',
         'enable-offset'
     ], { layoutRef });
-    return (<View ref={nodeRef} data-itemId={props['item-id']} {...innerProps}>
+    return (<View ref={nodeRef} data-itemId={props['item-id']} style={[style]} {...innerProps}>
       {children}
     </View>);
 });

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

@@ -0,0 +1,76 @@
+/**
+ * ✔ checked
+ * ✔ type
+ * ✔ disabled
+ * ✔ color
+ */
+import { Switch } from 'react-native';
+import { useRef, useEffect, forwardRef, useState, useContext } from 'react';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import CheckBox from './mpx-checkbox';
+import { FormContext } from './context';
+import { throwReactWarning } from './utils';
+const _Switch = forwardRef((props, ref) => {
+    const { style = {}, checked = false, type = 'switch', disabled = false, color = '#04BE02', 'enable-offset': enableOffset, bindchange, catchchange, } = props;
+    const [isChecked, setIsChecked] = useState(checked);
+    const layoutRef = useRef({});
+    const changeHandler = bindchange || catchchange;
+    let formValuesMap;
+    const formContext = useContext(FormContext);
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    useEffect(() => {
+        setIsChecked(checked);
+    }, [checked]);
+    const { nodeRef } = useNodesRef(props, ref);
+    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) {
+            throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.');
+        }
+        else {
+            formValuesMap.set(props.name, { getValue, resetValue });
+        }
+    }
+    const onLayout = () => {
+        nodeRef.current?.measure?.((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        ...enableOffset ? { onLayout } : {},
+        ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
+    }, [
+        'style',
+        'checked',
+        'disabled',
+        'type',
+        'color'
+    ], {
+        layoutRef
+    });
+    if (type === 'checkbox') {
+        return <CheckBox {...innerProps} color={color} style={style} checked={isChecked}/>;
+    }
+    return (<Switch {...innerProps} style={style} value={isChecked} trackColor={{ false: "#FFF", true: color }} thumbColor={isChecked ? "#FFF" : "#f4f3f4"} ios_backgroundColor="#FFF"/>);
+});
+_Switch.displayName = 'mpx-switch';
+export default _Switch;