@mpxjs/webpack-plugin 2.9.59 → 2.9.62

package/lib/runtime/components/react/mpx-radio-group.tsx

@@ -0,0 +1,147 @@
+/**
+ * ✔ bindchange
+ */
+import {
+  JSX,
+  useRef,
+  forwardRef,
+  ReactNode,
+  useContext
+} from 'react'
+import {
+  View,
+  NativeSyntheticEvent,
+  ViewStyle
+} from 'react-native'
+import { FormContext, FormFieldValue, RadioGroupContext, GroupValue } from './context'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { throwReactWarning } from './utils'
+
+export interface radioGroupProps {
+  name: string
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  children: ReactNode
+  bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+}
+
+const radioGroup = forwardRef<
+  HandlerRef<View, radioGroupProps>,
+  radioGroupProps
+>((props, ref): JSX.Element => {
+  const {
+    style = {},
+    'enable-offset': enableOffset,
+    children,
+    bindchange,
+  } = props
+
+  const layoutRef = useRef({})
+
+  const formContext = useContext(FormContext)
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined;
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  const groupValue: GroupValue = useRef({}).current
+
+  const defaultStyle = {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    ...style
+  }
+
+  const { nodeRef } = useNodesRef(props, ref, {
+    defaultStyle
+  })
+
+  const onLayout = () => {
+    nodeRef.current?.measure(
+      (
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        offsetLeft: number,
+        offsetTop: number
+      ) => {
+        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+      }
+    )
+  }
+
+  const getSelectionValue = (): string | undefined => {
+    for (let key in groupValue) {
+      if (groupValue[key].checked) {
+        return key
+      }
+    }
+  }
+
+  const getValue = () => {
+    return getSelectionValue()
+  }
+
+  const resetValue = () => {
+    Object.keys(groupValue).forEach((key) => {
+      groupValue[key].checked = false
+      groupValue[key].setValue(false)
+    })
+  }
+
+  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 notifyChange = (
+    evt: NativeSyntheticEvent<TouchEvent>
+  ) => {
+    bindchange &&
+      bindchange(
+        getCustomEvent(
+          'tap',
+          evt,
+          {
+            layoutRef,
+            detail: {
+              value: getSelectionValue()
+            }
+          },
+          props
+        )
+      )
+  }
+
+  const innerProps = useInnerProps(
+    props,
+    {
+      ref: nodeRef,
+      style: defaultStyle,
+      ...(enableOffset ? { onLayout } : {})
+    },
+    ['enable-offset'],
+    {
+      layoutRef
+    }
+  )
+
+  return (
+    <View {...innerProps}>
+      <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
+        {children}
+      </RadioGroupContext.Provider>
+    </View>
+  )
+})
+
+radioGroup.displayName = 'mpx-radio-group'
+
+export default radioGroup

package/lib/runtime/components/react/mpx-radio.tsx

@@ -0,0 +1,246 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  NativeSyntheticEvent,
+  TextStyle
+} from 'react-native'
+import { LabelContext, RadioGroupContext } from './context'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils'
+import Icon from './mpx-icon'
+
+export interface RadioProps {
+  value?: string
+  checked?: boolean
+  disabled?: boolean
+  color?: string
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  children: ReactNode
+  bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    borderColor: '#D1D1D1',
+    borderWidth: 1,
+    borderRadius: 12,
+    backgroundColor: '#ffffff',
+    marginRight: 5,
+    overflow: 'hidden'
+  },
+  wrapperChecked: {
+    borderWidth: 0
+  },
+  wrapperDisabled: {
+    backgroundColor: '#E1E1E1'
+  },
+  icon: {
+    opacity: 0
+  },
+  iconDisabled: {
+    backgroundColor: '#ADADAD'
+  },
+  iconChecked: {
+    opacity: 1
+  }
+})
+
+const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
+  (props, ref): JSX.Element => {
+    const {
+      value = '',
+      disabled = false,
+      checked = false,
+      color = '#09BB07',
+      style = [],
+      'enable-offset': enableOffset,
+      children,
+      bindtap,
+      catchtap,
+    } = props
+
+    const layoutRef = useRef({})
+
+    const [isChecked, setIsChecked] = useState<boolean>(!!checked)
+
+    const groupContext = useContext(RadioGroupContext)
+    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined;
+    let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined;
+
+    const labelContext = useContext(LabelContext)
+
+    const { textStyle, imageStyle, innerStyle } = splitStyle(style)
+
+    if (imageStyle) {
+      throwReactWarning('[Mpx runtime warn]: Radio does not support background image-related styles!')
+    }
+
+    const defaultStyle = {
+      ...styles.wrapper,
+      ...(isChecked && styles.wrapperChecked),
+      ...(disabled && styles.wrapperDisabled),
+    }
+
+    const viewStyle = {
+      ...defaultStyle,
+      ...innerStyle
+    }
+
+    const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      if (disabled || isChecked) return
+      setIsChecked(!isChecked)
+      if (groupValue) {
+        for (const [key, radio] of Object.entries(groupValue)) {
+          if (!radio) continue
+          radio.setValue(key === value)
+          radio.checked = key === value
+        }
+      }
+      notifyChange && notifyChange(evt)
+    }
+
+    const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      if (disabled) return
+      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
+      onChange(evt)
+    }
+
+    const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      if (disabled) return
+      catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
+    }
+
+    const { nodeRef } = useNodesRef(props, ref, {
+      defaultStyle,
+      change: onChange
+    })
+
+    const onLayout = () => {
+      nodeRef.current?.measure(
+        (
+          x: number,
+          y: number,
+          width: number,
+          height: number,
+          offsetLeft: number,
+          offsetTop: number
+        ) => {
+          layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+        }
+      )
+    }
+
+    const wrapChildren = (
+      children: ReactNode,
+      textStyle?: TextStyle
+    ) => {
+      if (!children) return children
+      const { textProps } = splitProps(props)
+
+      if (every(children, (child) => isText(child))) {
+        if (textStyle || textProps) {
+          children = <Text key='radioTextWrap' style={textStyle || {}} {...(textProps || {})}>
+            {children}
+          </Text>
+        }
+      } else {
+        if (textStyle) {
+          throwReactWarning(
+            '[Mpx runtime warn]: Text style will be ignored unless every child of the Radio is Text node!'
+          )
+        }
+      }
+
+      return children
+    }
+
+    if (groupContext) {
+      groupValue = groupContext.groupValue
+      notifyChange = groupContext.notifyChange
+    }
+
+    if (labelContext) {
+      labelContext.current.triggerChange = onChange
+    }
+
+    const innerProps = useInnerProps(
+      props,
+      {
+        ref: nodeRef,
+        style: styles.container,
+        bindtap: onTap,
+        catchtap: catchTap,
+        ...(enableOffset ? { onLayout } : {})
+      },
+      ['enable-offset'],
+      {
+        layoutRef
+      }
+    )
+
+    useEffect(() => {
+      if (groupValue) {
+        groupValue[value] = {
+          checked: checked,
+          setValue: setIsChecked
+        }
+      }
+      return () => {
+        if (groupValue) {
+          delete groupValue[value]
+        }
+      }
+    }, [])
+
+    useEffect(() => {
+      if (checked !== isChecked) {
+        setIsChecked(checked)
+        if (groupValue) {
+          groupValue[value].checked = checked
+        }
+      }
+    }, [checked])
+
+    return (
+      <View {...innerProps}>
+        <View style={viewStyle}>
+          <Icon
+            type='success'
+            size={24}
+            color={disabled ? '#E1E1E1' : color}
+            style={{
+              ...styles.icon,
+              ...(isChecked && styles.iconChecked),
+              ...(disabled && styles.iconDisabled)
+            }}
+          />
+        </View>
+        {wrapChildren(children, textStyle)}
+      </View>
+    )
+  }
+)
+
+Radio.displayName = 'mpx-radio'
+
+export default Radio

package/lib/runtime/components/react/mpx-root-portal.tsx

@@ -0,0 +1,25 @@
+/**
+ * ✔ enable
+ */
+import { ReactNode } from 'react'
+import { Portal } from '@ant-design/react-native'
+
+interface RootPortalProps {
+  enable?: boolean
+  children: ReactNode
+}
+const _RootPortal = (props: RootPortalProps) => {
+  const { children, enable = true } = props
+  return enable ? (
+    // @ts-ignore
+    <Portal>
+      {children}
+    </Portal>
+  ) : (
+    <>{children}</>
+  );
+}
+
+_RootPortal.displayName = 'mpx-root-portal'
+
+export default _RootPortal

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

@@ -31,14 +31,15 @@
  * ✔ bindscrolltolower
  * ✔ bindscroll
  */
-
-import { View, ScrollView, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native';
-import React, { useRef, useState, useEffect, forwardRef } from 'react';
+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 useNodesRef, { HandlerRef } from './useNodesRef'
+import { throwReactWarning } from './utils'
 
 interface ScrollViewProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   enhanced?: boolean;
   bounces?: boolean;
   style?: ViewStyle;
@@ -67,6 +68,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,15 +81,17 @@ 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>((props: ScrollViewProps = {}, ref): JSX.Element => {
   const {
     children,
     enhanced = false,
@@ -105,10 +109,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     '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 snapScrollTop = useRef(0);
+  const snapScrollLeft = useRef(0);
+
   const layoutRef = useRef({})
   const scrollOptions = useRef({
     contentLength: 0,
@@ -126,7 +132,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
     scrollOffset: scrollOptions,
     node: {
-      scrollEnabled,
+      scrollEnabled: scrollX || scrollY,
       bounces,
       showScrollbar,
       pagingEnabled,
@@ -135,14 +141,25 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       scrollTo: scrollToOffset
     }
   })
-
+  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')
+  }
   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);
+
+      snapScrollTop.current = props['scroll-top'] || 0
+      snapScrollLeft.current = props['scroll-left'] || 0
+
+      initialTimeout.current = setTimeout(() => {
+        scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
+      }, 0);
+
+      return () => {
+        initialTimeout.current && clearTimeout(initialTimeout.current);
+      };
     }
   }, [props['scroll-top'], props['scroll-left']]);
 
@@ -152,26 +169,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }, [props['refresher-triggered']]);
 
-  useEffect(() => {
-    if (!props['scroll-x'] && !props['scroll-y']) {
-      setScrollEnabled(false);
-    } else {
-      setScrollEnabled(true);
-    }
-  }, [props['scroll-x'], props['scroll-y']]);
-
-  useEffect(() => {
-    if (snapScrollTop || snapScrollLeft) {
-      initialTimeout.current = setTimeout(() => {
-        scrollToOffset(snapScrollLeft, snapScrollTop);
-      }, 0);
-    }
-
-    return () => {
-      initialTimeout.current && clearTimeout(initialTimeout.current);
-    };
-  }, [snapScrollTop, snapScrollLeft]);
-
   function selectLength(size: { height: number; width: number }) {
     return !scrollX ? size.height : size.width;
   }
@@ -234,6 +231,20 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
+  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;
@@ -252,18 +263,27 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
           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,
-    };
+  }
+
+  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);
   }
@@ -292,15 +312,14 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         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;
     bindtouchmove && bindtouchmove(e)
@@ -318,38 +337,43 @@ 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 = {
     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
+    onLayout,
+    onScrollEndDrag,
+    onMomentumScrollEnd: onScrollEnd
   };
   if (enhanced) {
     scrollAdditionalProps = {