@mpxjs/webpack-plugin 2.9.62 → 2.9.65

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -32,11 +32,13 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler'
-import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native';
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef } from 'react';
-import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef } from 'react'
+import { useAnimatedRef } from 'react-native-reanimated'
+import { warn } from '@mpxjs/utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { throwReactWarning } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils'
 
 interface ScrollViewProps {
   children?: ReactNode;
@@ -58,6 +60,11 @@ interface ScrollViewProps {
   'scroll-top'?: number;
   'scroll-left'?: number;
   'enable-offset'?: boolean;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
   bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -91,11 +98,12 @@ type ScrollAdditionalProps = {
   onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
-const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((props: ScrollViewProps = {}, ref): JSX.Element => {
+const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
   const {
-    children,
     enhanced = false,
     bounces = true,
+    style = {},
     'scroll-x': scrollX = false,
     'scroll-y': scrollY = false,
     'enable-back-to-top': enableBackToTop = false,
@@ -106,30 +114,45 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'refresher-enabled': refresherEnabled,
     'refresher-default-style': refresherDefaultStyle,
     'refresher-background': refresherBackground,
-    'enable-offset': enableOffset,
-    'show-scrollbar': showScrollbar = true
-  } = props;
+    'show-scrollbar': showScrollbar = true,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
 
-  const [refreshing, setRefreshing] = useState(true);
+  const [refreshing, setRefreshing] = useState(true)
 
-  const snapScrollTop = useRef(0);
-  const snapScrollLeft = useRef(0);
+  const snapScrollTop = useRef(0)
+  const snapScrollLeft = useRef(0)
 
-  const layoutRef = useRef({})
   const scrollOptions = useRef({
     contentLength: 0,
     offset: 0,
     scrollLeft: 0,
     scrollTop: 0,
-    visibleLength: 0,
-  });
+    visibleLength: 0
+  })
 
-  const scrollEventThrottle = 50;
-  const hasCallScrollToUpper = useRef(true);
-  const hasCallScrollToLower = useRef(false);
+  const scrollEventThrottle = 50
+  const hasCallScrollToUpper = useRef(true)
+  const hasCallScrollToLower = useRef(false)
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { textStyle, innerStyle } = splitStyle(normalStyle)
+
+  const scrollViewRef = useAnimatedRef<ScrollView>()
+  useNodesRef(props, ref, scrollViewRef, {
     scrollOffset: scrollOptions,
     node: {
       scrollEnabled: scrollX || scrollY,
@@ -141,113 +164,111 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       scrollTo: scrollToOffset
     }
   })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
+
   if (scrollX && scrollY) {
-    throwReactWarning('[Mpx runtime warn]: scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
+    warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
   }
   useEffect(() => {
     if (
       snapScrollTop.current !== props['scroll-top'] ||
       snapScrollLeft.current !== props['scroll-left']
     ) {
-
       snapScrollTop.current = props['scroll-top'] || 0
       snapScrollLeft.current = props['scroll-left'] || 0
 
       initialTimeout.current = setTimeout(() => {
-        scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
-      }, 0);
+        scrollToOffset(snapScrollLeft.current, snapScrollTop.current)
+      }, 0)
 
       return () => {
-        initialTimeout.current && clearTimeout(initialTimeout.current);
-      };
+        initialTimeout.current && clearTimeout(initialTimeout.current)
+      }
     }
-  }, [props['scroll-top'], props['scroll-left']]);
+  }, [props['scroll-top'], props['scroll-left']])
 
   useEffect(() => {
     if (refreshing !== props['refresher-triggered']) {
-      setRefreshing(!!props['refresher-triggered']);
+      setRefreshing(!!props['refresher-triggered'])
     }
-  }, [props['refresher-triggered']]);
+  }, [props['refresher-triggered']])
 
-  function selectLength(size: { height: number; width: number }) {
-    return !scrollX ? size.height : size.width;
+  function selectLength (size: { height: number; width: number }) {
+    return !scrollX ? size.height : size.width
   }
 
-  function selectOffset(position: { x: number; y: number }) {
-    return !scrollX ? position.y : position.x;
+  function selectOffset (position: { x: number; y: number }) {
+    return !scrollX ? position.y : position.x
   }
 
-  function onStartReached(e: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { bindscrolltoupper } = props;
-    const { offset } = scrollOptions.current;
+  function onStartReached (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { bindscrolltoupper } = props
+    const { offset } = scrollOptions.current
     if (bindscrolltoupper && (offset <= upperThreshold)) {
       if (!hasCallScrollToUpper.current) {
         bindscrolltoupper(
           getCustomEvent('scrolltoupper', e, {
             detail: {
-              direction: scrollX ? 'left' : 'top',
+              direction: scrollX ? 'left' : 'top'
             },
             layoutRef
-          }, props),
-        );
-        hasCallScrollToUpper.current = true;
+          }, props)
+        )
+        hasCallScrollToUpper.current = true
       }
     } else {
-      hasCallScrollToUpper.current = false;
+      hasCallScrollToUpper.current = false
     }
   }
 
-  function onEndReached(e: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { bindscrolltolower } = props;
-    const { contentLength, visibleLength, offset } = scrollOptions.current;
-    const distanceFromEnd = contentLength - visibleLength - offset;
+  function onEndReached (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { bindscrolltolower } = props
+    const { contentLength, visibleLength, offset } = scrollOptions.current
+    const distanceFromEnd = contentLength - visibleLength - offset
     if (bindscrolltolower && (distanceFromEnd < lowerThreshold)) {
       if (!hasCallScrollToLower.current) {
-        hasCallScrollToLower.current = true;
+        hasCallScrollToLower.current = true
         bindscrolltolower(
           getCustomEvent('scrolltolower', e, {
             detail: {
-              direction: scrollX ? 'right' : 'botttom',
+              direction: scrollX ? 'right' : 'botttom'
             },
             layoutRef
-          }, props),
-        );
+          }, props)
+        )
       }
     } else {
-      hasCallScrollToLower.current = false;
+      hasCallScrollToLower.current = false
     }
   }
 
-  function onContentSizeChange(width: number, height: number) {
-    scrollOptions.current.contentLength = selectLength({ height, width });
+  function onContentSizeChange (width: number, height: number) {
+    scrollOptions.current.contentLength = selectLength({ height, width })
   }
 
-  function onLayout(e: LayoutChangeEvent) {
-    scrollOptions.current.visibleLength = selectLength(e.nativeEvent.layout);
-    if (enableOffset) {
-      scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      })
-    }
+  function onLayout (e: LayoutChangeEvent) {
+    const layout = e.nativeEvent.layout || {}
+    scrollOptions.current.visibleLength = selectLength(layout)
   }
 
-  function updateScrollOptions(e: NativeSyntheticEvent<NativeScrollEvent>, position: Record<string, any>) {
-    const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
-    const contentLength = selectLength(e.nativeEvent.contentSize);
-    const offset = selectOffset(e.nativeEvent.contentOffset);
+  function updateScrollOptions (e: NativeSyntheticEvent<NativeScrollEvent>, position: Record<string, any>) {
+    const visibleLength = selectLength(e.nativeEvent.layoutMeasurement)
+    const contentLength = selectLength(e.nativeEvent.contentSize)
+    const offset = selectOffset(e.nativeEvent.contentOffset)
     scrollOptions.current = {
       ...scrollOptions.current,
       contentLength,
       offset,
       scrollLeft: position.scrollLeft,
       scrollTop: position.scrollTop,
-      visibleLength,
+      visibleLength
     }
   }
 
-  function onScroll(e: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { bindscroll } = props;
-    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+  function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { bindscroll } = props
+    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
     const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
     bindscroll &&
       bindscroll(
@@ -258,18 +279,17 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
             scrollHeight,
             scrollWidth,
             deltaX: scrollLeft - scrollOptions.current.scrollLeft,
-            deltaY: scrollTop - scrollOptions.current.scrollTop,
+            deltaY: scrollTop - scrollOptions.current.scrollTop
           },
           layoutRef
         }, props)
-      );
+      )
     updateScrollOptions(e, { scrollLeft, scrollTop })
-
   }
 
-  function onScrollEnd(e: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { bindscrollend } = props;
-    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+  function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { bindscrollend } = props
+    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
     const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
     bindscrollend &&
       bindscrollend(
@@ -282,30 +302,30 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
           },
           layoutRef
         }, props)
-      );
+      )
     updateScrollOptions(e, { scrollLeft, scrollTop })
-    onStartReached(e);
-    onEndReached(e);
+    onStartReached(e)
+    onEndReached(e)
   }
 
-  function scrollToOffset(x = 0, y = 0) {
+  function scrollToOffset (x = 0, y = 0) {
     if (scrollViewRef.current) {
-      scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
+      scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation })
       scrollOptions.current.scrollLeft = x
       scrollOptions.current.scrollTop = y
     }
   }
 
-  function onRefresh() {
-    const { bindrefresherrefresh } = props;
+  function onRefresh () {
+    const { bindrefresherrefresh } = props
     bindrefresherrefresh &&
       bindrefresherrefresh(
-        getCustomEvent('refresherrefresh', {}, { layoutRef }, props),
-      );
+        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
+      )
   }
 
-  function onScrollTouchStart(e: NativeSyntheticEvent<TouchEvent>) {
-    const { binddragstart, bindtouchstart, enhanced } = props;
+  function onScrollTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
+    const { binddragstart, bindtouchstart, enhanced } = props
     bindtouchstart && bindtouchstart(e)
     if (enhanced) {
       binddragstart &&
@@ -313,15 +333,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
           getCustomEvent('dragstart', e, {
             detail: {
               scrollLeft: scrollOptions.current.scrollLeft,
-              scrollTop: scrollOptions.current.scrollTop,
+              scrollTop: scrollOptions.current.scrollTop
             },
             layoutRef
           }, props)
         )
     }
   }
-  function onScrollTouchMove(e: NativeSyntheticEvent<TouchEvent>) {
-    const { binddragging, bindtouchmove, enhanced } = props;
+  function onScrollTouchMove (e: NativeSyntheticEvent<TouchEvent>) {
+    const { binddragging, bindtouchmove, enhanced } = props
     bindtouchmove && bindtouchmove(e)
     if (enhanced) {
       binddragging &&
@@ -329,7 +349,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
           getCustomEvent('dragging', e, {
             detail: {
               scrollLeft: scrollOptions.current.scrollLeft || 0,
-              scrollTop: scrollOptions.current.scrollTop || 0,
+              scrollTop: scrollOptions.current.scrollTop || 0
             },
             layoutRef
           }, props)
@@ -337,10 +357,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
-  function onScrollEndDrag(e: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { binddragend, enhanced } = props;
+  function onScrollEndDrag (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { binddragend, enhanced } = props
     if (enhanced) {
-      const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+      const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
       const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
       binddragend &&
         binddragend(
@@ -359,6 +379,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   }
 
   let scrollAdditionalProps: ScrollAdditionalProps = {
+    style: { ...innerStyle, ...layoutStyle },
     pinchGestureEnabled: false,
     horizontal: scrollX && !scrollY,
     scrollEventThrottle: scrollEventThrottle,
@@ -371,19 +392,18 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     onContentSizeChange: onContentSizeChange,
     bindtouchstart: onScrollTouchStart,
     bindtouchmove: onScrollTouchMove,
-    onLayout,
     onScrollEndDrag,
-    onMomentumScrollEnd: onScrollEnd
-  };
+    onMomentumScrollEnd: onScrollEnd,
+    ...layoutProps
+  }
   if (enhanced) {
     scrollAdditionalProps = {
       ...scrollAdditionalProps,
       bounces,
-      pagingEnabled,
-    };
+      pagingEnabled
+    }
   }
   const innerProps = useInnerProps(props, scrollAdditionalProps, [
-    'enable-offset',
     'scroll-x',
     'scroll-y',
     'enable-back-to-top',
@@ -407,30 +427,42 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'bindscrolltoupper',
     'bindscrolltolower',
     'bindrefresherrefresh'
-  ], { layoutRef });
+  ], { layoutRef })
 
   const refreshColor = {
-    'black': ['#000'],
-    'white': ['#fff']
+    black: ['#000'],
+    white: ['#fff']
   }
 
   return (
     <ScrollView
       {...innerProps}
-      refreshControl={refresherEnabled ? (
+      refreshControl={refresherEnabled
+        ? (
         <RefreshControl
           progressBackgroundColor={refresherBackground}
           refreshing={refreshing}
           onRefresh={onRefresh}
           {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}
         />
-      ) : undefined}
+          )
+        : undefined}
     >
-      {children}
+       {
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
+        )
+      }
     </ScrollView>
-  );
+  )
 })
 
-_ScrollView.displayName = 'mpx-scroll-view';
+_ScrollView.displayName = 'mpx-scroll-view'
 
 export default _ScrollView