@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -31,14 +31,16 @@
  * ✔ bindscrolltolower
  * ✔ bindscroll
  */
-
-import { View, ScrollView, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native';
-import React, { useRef, useState, useEffect, forwardRef } from 'react';
-import useInnerProps, { getCustomEvent } from './getInnerListeners';
+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 { warn } from '@mpxjs/utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils'
 
 interface ScrollViewProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   enhanced?: boolean;
   bounces?: boolean;
   style?: ViewStyle;
@@ -57,6 +59,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;
@@ -67,6 +74,7 @@ interface ScrollViewProps {
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
 }
 type ScrollAdditionalProps = {
   pinchGestureEnabled: boolean;
@@ -79,19 +87,22 @@ type ScrollAdditionalProps = {
   showsHorizontalScrollIndicator: boolean;
   showsVerticalScrollIndicator: boolean;
   scrollEnabled: boolean;
-  ref: React.RefObject<ScrollView>;
+  ref: RefObject<ScrollView>;
   bounces?: boolean;
   pagingEnabled?: boolean;
   style?: ViewStyle;
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
-const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((props: ScrollViewProps = {}, ref): React.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,
@@ -102,31 +113,47 @@ 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;
-  const [snapScrollTop, setSnapScrollTop] = useState(0);
-  const [snapScrollLeft, setSnapScrollLeft] = useState(0);
-  const [refreshing, setRefreshing] = useState(true);
-  const [scrollEnabled, setScrollEnabled] = useState(true);
-  const layoutRef = useRef({})
+    '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 snapScrollTop = useRef(0)
+  const snapScrollLeft = useRef(0)
+
   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 {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { textStyle, innerStyle } = splitStyle(normalStyle)
+
   const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
     scrollOffset: scrollOptions,
     node: {
-      scrollEnabled,
+      scrollEnabled: scrollX || scrollY,
       bounces,
       showScrollbar,
       pagingEnabled,
@@ -136,107 +163,110 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   })
 
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
+
+  if (scrollX && scrollY) {
+    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 !== props['scroll-top'] ||
-      snapScrollLeft !== props['scroll-left']
+      snapScrollTop.current !== props['scroll-top'] ||
+      snapScrollLeft.current !== props['scroll-left']
     ) {
-      setSnapScrollTop(props['scroll-top'] || 0);
-      setSnapScrollLeft(props['scroll-left'] || 0);
-    }
-  }, [props['scroll-top'], props['scroll-left']]);
+      snapScrollTop.current = props['scroll-top'] || 0
+      snapScrollLeft.current = props['scroll-left'] || 0
 
-  useEffect(() => {
-    if (refreshing !== props['refresher-triggered']) {
-      setRefreshing(!!props['refresher-triggered']);
-    }
-  }, [props['refresher-triggered']]);
+      initialTimeout.current = setTimeout(() => {
+        scrollToOffset(snapScrollLeft.current, snapScrollTop.current)
+      }, 0)
 
-  useEffect(() => {
-    if (!props['scroll-x'] && !props['scroll-y']) {
-      setScrollEnabled(false);
-    } else {
-      setScrollEnabled(true);
+      return () => {
+        initialTimeout.current && clearTimeout(initialTimeout.current)
+      }
     }
-  }, [props['scroll-x'], props['scroll-y']]);
+  }, [props['scroll-top'], props['scroll-left']])
 
   useEffect(() => {
-    if (snapScrollTop || snapScrollLeft) {
-      initialTimeout.current = setTimeout(() => {
-        scrollToOffset(snapScrollLeft, snapScrollTop);
-      }, 0);
+    if (refreshing !== props['refresher-triggered']) {
+      setRefreshing(!!props['refresher-triggered'])
     }
+  }, [props['refresher-triggered']])
 
-    return () => {
-      initialTimeout.current && clearTimeout(initialTimeout.current);
-    };
-  }, [snapScrollTop, snapScrollLeft]);
-
-  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) {
+    const layout = e.nativeEvent.layout || {}
+    scrollOptions.current.visibleLength = selectLength(layout)
   }
 
-  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 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
     }
   }
 
-  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(
@@ -247,62 +277,69 @@ 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 })
+  }
 
-    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,
-      scrollTop,
-      visibleLength,
-    };
-    onStartReached(e);
-    onEndReached(e);
+  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(
+        getCustomEvent('scrollend', e, {
+          detail: {
+            scrollLeft,
+            scrollTop,
+            scrollHeight,
+            scrollWidth
+          },
+          layoutRef
+        }, props)
+      )
+    updateScrollOptions(e, { scrollLeft, scrollTop })
+    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 &&
         binddragstart(
           getCustomEvent('dragstart', e, {
             detail: {
-              scrollLeft: scrollOptions.current.scrollLeft || 0,
-              scrollTop: scrollOptions.current.scrollTop || 0,
+              scrollLeft: scrollOptions.current.scrollLeft,
+              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 &&
@@ -310,7 +347,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)
@@ -318,48 +355,53 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
-  function onScrollTouchEnd(e: NativeSyntheticEvent<TouchEvent>) {
-    const { binddragend, bindtouchend, enhanced } = props;
-    bindtouchend && bindtouchend(e);
+  function onScrollEndDrag (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { binddragend, enhanced } = props
     if (enhanced) {
+      const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
+      const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
       binddragend &&
         binddragend(
           getCustomEvent('dragend', e, {
             detail: {
-              scrollLeft: scrollOptions.current.scrollLeft || 0,
-              scrollTop: scrollOptions.current.scrollTop || 0,
+              scrollLeft: scrollLeft,
+              scrollTop: scrollTop,
+              scrollHeight,
+              scrollWidth
             },
             layoutRef
           }, props)
         )
+      updateScrollOptions(e, { scrollLeft, scrollTop })
     }
   }
 
   let scrollAdditionalProps: ScrollAdditionalProps = {
+    style: { ...innerStyle, ...layoutStyle },
     pinchGestureEnabled: false,
-    horizontal: scrollX || !scrollY,
+    horizontal: scrollX && !scrollY,
     scrollEventThrottle: scrollEventThrottle,
     scrollsToTop: enableBackToTop,
     showsHorizontalScrollIndicator: scrollX && showScrollbar,
     showsVerticalScrollIndicator: scrollY && showScrollbar,
-    scrollEnabled: scrollEnabled,
+    scrollEnabled: scrollX || scrollY,
     ref: scrollViewRef,
     onScroll: onScroll,
     onContentSizeChange: onContentSizeChange,
     bindtouchstart: onScrollTouchStart,
-    bindtouchend: onScrollTouchEnd,
     bindtouchmove: onScrollTouchMove,
-    onLayout
-  };
+    onScrollEndDrag,
+    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',
@@ -383,30 +425,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