@mpxjs/webpack-plugin 2.9.62 → 2.9.64

package/lib/runtime/components/react/mpx-swiper/carouse.tsx

@@ -1,11 +1,12 @@
 /**
  * swiper 实现
  */
-import { Animated, View, ScrollView, Dimensions, NativeSyntheticEvent, NativeScrollEvent, NativeScrollPoint, Platform } from 'react-native'
+import { Animated, View, ScrollView, Dimensions, NativeSyntheticEvent, NativeScrollEvent, NativeScrollPoint, Platform, LayoutChangeEvent } from 'react-native'
 import { JSX, forwardRef, useState, useRef, useEffect, ReactNode } from 'react'
 import { CarouseProps, CarouseState } from './type'
 import { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from '../utils'
 
 /**
  * 默认的Style类型
@@ -15,10 +16,10 @@ const styles: { [key: string]: Object } = {
     backgroundColor: 'transparent'
   },
   container_x: {
-    position: 'relative',
+    position: 'relative'
   },
   container_y: {
-    position: 'relative',
+    position: 'relative'
   },
   pagination_x: {
     position: 'absolute',
@@ -28,7 +29,7 @@ const styles: { [key: string]: Object } = {
     flexDirection: 'row',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   },
 
   pagination_y: {
@@ -39,21 +40,44 @@ const styles: { [key: string]: Object } = {
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   }
 }
 
-
-const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>((props , ref): JSX.Element => {
+const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, CarouseProps>((props, ref): JSX.Element => {
   // 默认取水平方向的width
   const { width } = Dimensions.get('window')
-  const { styleObj } = props
+  const {
+    style,
+    previousMargin = 0,
+    nextMargin = 0,
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  } = props
+  // 计算transfrom之类的
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+  const { textStyle, innerStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(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 defaultHeight = (normalStyle?.height || 150)
+  const defaultWidth = (normalStyle?.width || width || 375)
   const dir = props.horizontal === false ? 'y' : 'x'
   // state的offset默认值
   // const initIndex = props.circular ? props.current + 1: (props.current || 0)
@@ -61,16 +85,17 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   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 autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
-  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView, CarouseProps>(props, ref, {
-  })
-  // 存储layout布局信息
-  const layoutRef = useRef({})
+  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView & View, CarouseProps>(props, ref, {})
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps,
+    layoutStyle
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onWrapperLayout })
   // 内部存储上一次的偏移量
   const internalsRef = useRef({
     offset: {
@@ -82,18 +107,17 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   const isDragRef = useRef(false)
   const [state, setState] = useState({
     children: newChild,
-    width: defaultWidth || 375,
-    height: defaultHeight,
+    width: dir === 'x' && typeof defaultWidth === 'number' ? defaultWidth - previousMargin - nextMargin : defaultWidth,
+    height: dir === 'y' && typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight,
     // 真正的游标索引, 从0开始
     index: initIndex,
     total: totalElements,
     offset: {
       x: dir === 'x' ? defaultX : 0,
-      y: dir === 'y' ? defaultY: 0
+      y: dir === 'y' ? defaultY : 0
     },
     dir
-  } as CarouseState);
-
+  } as CarouseState)
   /**
    * @desc: 开启下一次自动轮播
   */
@@ -109,39 +133,68 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     if (props.autoplay) {
       createAutoPlay()
     }
-  }, [props.autoplay, props.current, state.index, state.width, state.height]);
+  }, [props.autoplay, props.current, state.index, state.width, state.height])
 
+  useEffect(() => {
+    // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
+    if (!props.autoplay && props.current !== state.index) {
+      const initIndex = props.current || 0
+      // 这里要排除超过元素个数的设置
+      const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0)
+      const defaultX = (defaultWidth * initOffsetIndex) || 0
+      const offset = {
+        x: dir === 'x' ? defaultX : 0,
+        y: dir === 'y' ? defaultY : 0
+      }
+      state.offset = offset
+      internalsRef.current.offset = offset
+      setState((preState) => {
+        return {
+          ...preState,
+          offset
+        }
+      })
+    }
+  }, [props.current])
   /**
    * @desc: 更新状态: index和offset, 并响应索引变化的事件
    * scrollViewOffset: 移动到的目标位置
   */
   function updateIndex (scrollViewOffset: NativeScrollPoint, useIndex = false) {
     const { nextIndex, nextOffset } = getNextConfig(scrollViewOffset)
-    internalsRef.current.offset = nextOffset
+    updateState(nextIndex, nextOffset)
+    // 更新完状态之后, 开启新的loop
+  }
+
+  /**
+   * 更新索引状态
+  */
+  function updateState (index: number, offset: { x: number, y: number}) {
+    internalsRef.current.offset = offset
     setState((preState) => {
-      const newState =  {
+      const newState = {
         ...preState,
-        index: nextIndex,
+        index: index,
         // offset用来指示当前scrollView的偏移量
-        offset: nextOffset,
+        offset: offset
       }
       return newState
     })
     internalsRef.current.isScrolling = false
     // getCustomEvent
-    const eventData = getCustomEvent('change', {}, { detail: {current: nextIndex, source: 'touch' }, layoutRef: layoutRef })
+    const eventData = getCustomEvent('change', {}, { detail: { current: index, source: 'touch' }, layoutRef: layoutRef })
     props.bindchange && props.bindchange(eventData)
-    // 更新完状态之后, 开启新的loop
   }
 
   /**
    * @desc: 获取下一个位置的索引、scrollView的contentOffset、scrollTo到的offset
    * @desc: 包括正循环、反向循环、不循环
-   * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset, 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
+   * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset,
+   * 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
   */
   function getNextConfig (scrollViewOffset: NativeScrollPoint) {
     const step = state.dir === 'x' ? state.width : state.height
-    let currentOffset = state.offset
+    const currentOffset = state.offset
     let nextIndex = state.index + 1
     let nextOffset = currentOffset
     // autoMoveOffset scrollView 滚动到前后增加的位置
@@ -163,17 +216,17 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
           autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 })
           nextIndex = state.total - 1
           // 反向: 数组最后一个index
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total }),
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total })
           isAutoEnd = true
         } else {
           // 反向非最后一个
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: ( nextIndex + 1 ) * step })
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step })
         }
       } else {
         if (nextIndex > state.total - 1) {
-          autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * ( nextIndex + 1 )})
+          autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * (nextIndex + 1) })
           nextIndex = 0
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step }),
+          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step })
           isAutoEnd = true
         } else {
           // nextIndex =  nextIndex,
@@ -182,8 +235,11 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
       }
     }
     return {
+      // 下一个要滚动到的实际元素的索引
       nextIndex,
+      // 下一个要滚动到实际元素的offset
       nextOffset,
+      // scrollTo一个位置的坐标, 虚拟元素的位置
       autoMoveOffset,
       isAutoEnd
     }
@@ -206,40 +262,34 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     // 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 })
+        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 })
+          scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.x, animated: true })
         } else {
-          scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true })
+          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 })
+        scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true })
         onScrollEnd({
           nativeEvent: {
-            // @ts-ignore
-            x: +nextOffset['x'],
-            y: +nextOffset['y']
+            contentOffset: {
+              x: +nextOffset.x,
+              y: +nextOffset.y
+            }
           }
-        })
+        } as NativeSyntheticEvent<NativeScrollEvent>)
       } else {
-        setTimeout(() => {
-          onScrollEnd({
-            nativeEvent: {
-              // @ts-ignore
-              x: 0,
-              y: 0
-            }
-          })
-        }, 10)
+        // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
         if (state.dir === 'x') {
           scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true })
-          // scrollViewRef.current?.scrollTo({ x: autoMoveOffset['x'], y: autoMoveOffset['x'], animated: true })
+          // scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.y, animated: true })
         } else {
-          scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true })
+          scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true })
         }
+        updateState(0, nextOffset)
       }
     }
   }
@@ -274,16 +324,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
     const internalOffset = internalsRef.current.offset
     const previousOffset = props.horizontal ? internalOffset.x : internalOffset.y
     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 (previousOffset === moveOffset && (index === 0 || index === total - 1)) {
       internalsRef.current.isScrolling = false
     }
@@ -292,9 +332,13 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
   /**
    * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
   */
-  function onWrapperLayout () {
+  function onWrapperLayout (e: LayoutChangeEvent) {
+    if (hasSelfPercent) {
+      const { width, height } = e?.nativeEvent?.layout || {}
+      setWidth(width || 0)
+      setHeight(height || 0)
+    }
     if (props.enableOffset) {
-      // @ts-ignore
       scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
         layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
         const isWDiff = state.width !== width
@@ -304,12 +348,14 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
             width: isWDiff ? width : state.width,
             height: isHDiff ? height : state.height
           }
-          let correctOffset = Object.assign({}, state.offset, {
+          const attr = state.dir === 'x' ? 'width' : 'height'
+          changeState[attr] = changeState[attr] - previousMargin - nextMargin
+          const correctOffset = Object.assign({}, state.offset, {
             [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
           })
           state.offset = correctOffset
-          state.width = width
-          state.height = height
+          state.width = changeState.width
+          state.height = changeState.height
           setState((preState) => {
             return {
               ...preState,
@@ -318,18 +364,38 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
               height: changeState.height
             }
           })
-          scrollViewRef.current?.scrollTo({ x: correctOffset['x'], y: correctOffset['y'], animated: false })
+          scrollViewRef.current?.scrollTo({ x: correctOffset.x, y: correctOffset.y, animated: false })
         }
         props.getInnerLayout && props.getInnerLayout(layoutRef)
       })
     }
   }
 
+  function getOffset (): Array<number> {
+    const step = state.dir === 'x' ? state.width : state.height
+    if (!step || Number.isNaN(+step)) return []
+    const offsetArray = []
+    if (previousMargin) {
+      offsetArray.push(0)
+      for (let i = 1; i < totalElements; i++) {
+        offsetArray.push(i * step - previousMargin)
+      }
+    } else {
+      for (let i = 0; i < totalElements; i++) {
+        offsetArray.push(i * step)
+      }
+    }
+    return offsetArray
+  }
+
   function renderScrollView (pages: ReactNode) {
-    let scrollElementProps = {
+    const offsetsArray = getOffset()
+    const scrollElementProps = {
       ref: scrollViewRef,
       horizontal: props.horizontal,
-      pagingEnabled: true,
+      pagingEnabled: false,
+      snapToOffsets: offsetsArray,
+      decelerationRate: 0.99, // 'fast'
       showsHorizontalScrollIndicator: false,
       showsVerticalScrollIndicator: false,
       bounces: false,
@@ -355,8 +421,8 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
 
   function renderPagination () {
     if (state.total <= 1) return null
-    let dots: Array<ReactNode> = []
-    const activeDotStyle = [          {
+    const dots: Array<ReactNode> = []
+    const activeDotStyle = [{
       backgroundColor: props.activeDotColor || '#007aff',
       width: 8,
       height: 8,
@@ -392,54 +458,66 @@ const _Carouse = forwardRef<HandlerRef<ScrollView, CarouseProps>, CarouseProps>(
       </View>
     )
   }
-  
+
   function renderPages () {
     const { width, height, total, children } = state
     const { circular } = props
     const pageStyle = { width: width, height: height }
+    // 设置了previousMargin或者nextMargin,
+    // 1. 元素的宽度是减去这两个数目之和
+    // 2. previousMargin设置marginLeft正值, nextmargin设置marginRight负值
+    // 3. 第一个元素设置previousMargin 和 nextMargin, 最后一个元素
     if (total > 1 && Array.isArray(children)) {
       let arrElements: (Array<ReactNode>) = []
       // pages = ["2", "0", "1", "2", "0"]
-      let pages = Array.isArray(children) && Object.keys(children) || []
+      const pages = Array.isArray(children) ? Object.keys(children) : []
       /* 无限循环的时候 */
       if (circular) {
         pages.unshift(total - 1 + '')
         pages.push('0')
       }
       arrElements = pages.map((page, i) => {
-        return (
-          <View style={[pageStyle, styles.slide]} key={ 'page' + i}>
-            {children[+page]}
-          </View>
-        )
+        const extraStyle = {} as {
+          [key: string]: any
+        }
+        if (i === 0 && dir === 'x' && typeof width === 'number') {
+          previousMargin && (extraStyle.marginLeft = previousMargin)
+        } else if (i === pages.length - 1 && typeof width === 'number') {
+          nextMargin && (extraStyle.marginRight = nextMargin)
+        }
+        // return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>{children[+page]}</View>)
+        return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>
+          {wrapChildren(
+            {
+              children: children[+page]
+            },
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )}
+        </View>)
       })
       return arrElements
     } else {
-      return (
+      const realElement = (
         <View style={pageStyle} key={0}>
           {children}
         </View>
       )
+      return realElement
     }
   }
 
   const pages: Array<ReactNode> | ReactNode = renderPages()
-  const strStyle: string = 'container_' + state.dir
-  const eventProps = props.innerProps || {}
-  const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth }
-
-  return (<View style={[layoutStyle]}>
-    <View
-      style={[styles[strStyle], layoutStyle]}
-      {...eventProps}
-      onLayout={onWrapperLayout}>
+  return (<View style={[normalStyle, innerStyle, layoutStyle]} {...layoutProps}>
       {renderScrollView(pages)}
-    </View>
-    <View>{props.showsPagination && renderPagination()}</View>
+      {props.showsPagination && renderPagination()}
   </View>)
-  
 })
 
-_Carouse.displayName = '_Carouse';
+_Carouse.displayName = '_Carouse'
 
 export default _Carouse

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

@@ -1,6 +1,6 @@
 import { ScrollView } from 'react-native'
 import { JSX, MutableRefObject, forwardRef, useRef } from 'react'
-import { default as Carouse } from './carouse'
+import Carouse from './carouse'
 import { SwiperProps } from './type'
 import useInnerProps from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
@@ -22,7 +22,7 @@ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
  */
 const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperProps>((props: SwiperProps, ref): JSX.Element => {
   const { children } = props
-  let innerLayout = useRef({})
+  const innerLayout = useRef({})
   const swiperProp = {
     circular: props.circular || false,
     current: props.current || 0,
@@ -30,18 +30,22 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     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,
-    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'] || 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<ScrollView, SwiperProps>(props, ref, {
-  })
+  const { nodeRef } = useNodesRef<ScrollView, SwiperProps>(props, ref, {})
   const innerProps = useInnerProps(props, {
     ref: nodeRef
   }, [
@@ -49,19 +53,24 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     'indicator-color',
     'indicator-active-color',
     'previous-margin',
-    'next-margin'
+    'vertical',
+    'previous-margin',
+    'next-margin',
+    'easing-function'
   ], { layoutRef: innerLayout })
+
   const getInnerLayout = (layout: MutableRefObject<{}>) => {
     innerLayout.current = layout.current
   }
+
   return <Carouse
     getInnerLayout={getInnerLayout}
     innerProps={innerProps}
+    {...innerProps}
     {...swiperProp}>
     {children}
   </Carouse>
-
 })
-_SwiperWrapper.displayName = 'mpx-swiper';
+_SwiperWrapper.displayName = 'mpx-swiper'
 
 export default _SwiperWrapper

package/lib/runtime/components/react/mpx-swiper/type.ts

@@ -14,11 +14,18 @@ export interface SwiperProps {
   'indicator-color'?: string;
   'indicator-active-color'?: string;
   vertical?: boolean;
-  style?: Object;
+  style: {
+    [key: string]: any
+  };
   'easing-function'?: EaseType;
   'previous-margin'?: string;
   'next-margin'?: string;
   'enable-offset'?: boolean;
+  'enable-var': boolean;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  'external-var-context'?: Record<string, any>;
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 
@@ -37,13 +44,17 @@ export interface CarouseProps {
   previousMargin?: number;
   nextMargin?: number;
   enableOffset?: boolean;
+  parentFontSize?: number;
+  parentWidth?: number;
+  parentHeight?: number;
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
-  getInnerLayout: Function,
+  getInnerLayout: Function;
   innerProps: Object;
-  styleObj: {
-    height?: number;
-    width?: number
+  style: {
+    [key: string]: any
   };
+  enableVar: boolean;
+  externalVarContext?: Record<string, any>;
 }
 
 export interface CarouseState {