Merge branch 'feat-react-template-compiler-cr' of github.com:didi/mpx…

… into feat-react-template-compiler-cr

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -1,21 +1,28 @@
-import React, { ReactNode } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import { View } from 'react-native';
+import useInnerProps from './getInnerListeners'
+import useNodesRef from '../../useNodesRef'
 
 interface SwiperItemProps {
   'item-id'?: string
   children?: ReactNode;
 }
 
-const SwiperItem = (props: SwiperItemProps) => {
+const SwiperItem = forwardRef((props: SwiperItemProps, ref) => {
   const { children, ...restProps } = props
+  const { nodeRef } = useNodesRef(props, ref, {
+  })
+  const innerProps = useInnerProps(props, {}, [], { touchable: true })
+
   return (
     <View
+      ref={nodeRef}
       data-itemId={props['item-id']}
       {...restProps}
-    >
+      {...innerProps}>
       {children}
     </View>
   )
-}
+})
 
 export default SwiperItem

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx

@@ -5,6 +5,7 @@ import React, { forwardRef, useState, useRef, useEffect, ReactNode  } from 'reac
 import { View, ScrollView, Dimensions } from 'react-native'
 import { CarouseProps, CarouseState } from './type'
 import { getCustomEvent } from '../getInnerListeners'
+import useNodesRef from '../../../useNodesRef'
 
 /**
  * 默认的Style类型
@@ -60,16 +61,20 @@ const _Carouse = forwardRef((props: CarouseProps, ref) => {
   const defaultHeight = 150
   const dir = props.horizontal === false ? 'y' : 'x'
   // state的offset默认值
-  const defaultX = width * (props.circular ? props.index + 1 : props.index) || 0
-  const defaultY = defaultHeight * (props.circular ? props.index + 1 : props.index) || 0
+  const defaultX = width * (props.circular ? props.current + 1 : props.current) || 0
+  const defaultY = defaultHeight * (props.circular ? props.current + 1 : props.current) || 0
   // 内部存储上一次的offset值
   const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children
   // 默认设置为初次渲染
   const initRenderRef = useRef(true)
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout>>(null)
   const loopJumpTimerRef = useRef<ReturnType <typeof setTimeout>>(null) 
-  const scrollViewRef = useRef<ScrollView>(null);
+  // const scrollViewRef = useRef<ScrollView>(null);
+  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
+  })
   const autoplayEndRef = useRef(false)
+  // 存储layout布局信息
+  const layoutRef = useRef({})
   // 内部存储上一次的偏移量
   const internalsRef = useRef({
     offset: {
@@ -99,7 +104,7 @@ const _Carouse = forwardRef((props: CarouseProps, ref) => {
     } else {
       startSwiperLoop()
     }
-  }, [props.autoplay, props.index, state.index]);
+  }, [props.autoplay, props.current, state.index]);
 
   /**
    * 更新index，以视图的offset计算当前的索引
@@ -128,7 +133,6 @@ const _Carouse = forwardRef((props: CarouseProps, ref) => {
     // 存储当前的偏移量
     internalsRef.current.offset = scrollViewOffset
     // 这里需不需要区分是否loop，初始化？？？？
-    console.warn('---------------------------eventData：before')
     setState((preState) => {
       const newState =  {
         ...preState,
@@ -140,8 +144,7 @@ const _Carouse = forwardRef((props: CarouseProps, ref) => {
     })
     internalsRef.current.isScrolling = false
     // getCustomEvent
-    const eventData = getCustomEvent('change', {}, { detail: {current: newIndex }})
-    console.warn('---------------------------eventData', eventData)
+    const eventData = getCustomEvent('change', {}, { detail: {current: newIndex, source: 'touch' }, layoutRef: layoutRef })
     props.bindchange && props.bindchange(eventData)
     // 更新完状态之后, 开启新的loop
   }
@@ -258,7 +261,13 @@ const _Carouse = forwardRef((props: CarouseProps, ref) => {
    * 水平方向时，获取单个元素的布局，更新
   */
   function onWrapperLayout (event) {
-    const { width, height } = event.nativeEvent.layout
+    // const { width, height } = event.nativeEvent.layout
+    // layoutRef.current = event.nativeEvent.layout
+    scrollViewRef.current.measure((x, y, width, height, offsetLeft, offsetTop) => {
+      // console.log('--------------measure------', x, y, offsetLeft, offsetTop)
+      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+      props.getInnerLayout && props.getInnerLayout(layoutRef)
+    })
     if (state.dir === 'y') return
     if (!state.offset.x && !state.offset.y) {
       state.offset = internalsRef.current.offset

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import Carouse from './carouse'
 import { SwiperProps } from './type'
-import useInnerTouchable from '../getInnerListeners'
+import useInnerProps from '../getInnerListeners'
 import useNodesRef from '../../../useNodesRef'
 
 /**
@@ -21,9 +21,10 @@ import useNodesRef from '../../../useNodesRef'
  */
 const _SwiperWrapper = forwardRef((props: SwiperProps, ref) => {
   const { children } = props
+  let innerLayout = useRef(true)
   const swiperProp = {
     circular: props.circular,
-    index: props.current,
+    current: props.current,
     autoplay: props.autoplay,
     duration: props.duration || 500,
     interval: props.interval || 5000,
@@ -37,20 +38,31 @@ const _SwiperWrapper = forwardRef((props: SwiperProps, ref) => {
     bindchange: props.bindchange
   }
   const { nodeRef } = useNodesRef(props, ref, {
+    innerLayout
   })
-  const innerTouchable = useInnerTouchable({
-    ...props
-  });
+  const innerProps = useInnerProps(props, {}, [
+    'indicator-dots',
+    'indicator-color',
+    'indicator-active-color',
+    'previous-margin',
+    'next-margin'
+  ], { touchable: true })
+
+  const getInnerLayout = (layout) => {
+    innerLayout = layout.current
+  }
+
   return (
       <Carouse
         ref={nodeRef}
+        getInnerLayout={getInnerLayout}
         {...swiperProp}
-        {...innerTouchable}>
+        {...innerProps}>
         {children}
       </Carouse>
 
   )
 })
-_SwiperWrapper.displayName = '_Swiper';
+_SwiperWrapper.displayName = 'mpx-swiper';
 
 export default _SwiperWrapper

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/type.ts

@@ -21,7 +21,7 @@ export interface SwiperProps {
 export interface CarouseProps {
   children?: ReactNode;
   circular?: boolean;
-  index: number;
+  current: number;
   autoplay?: boolean;
   duration?: number;
   interval?: number;
@@ -34,6 +34,7 @@ export interface CarouseProps {
   previousMargin?: string;
   nextMargin?: string;
   bindchange: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+  getInnerLayout: Function
 }
 
 export interface CarouseState {