@mpxjs/webpack-plugin 2.9.69-beta.1 → 2.9.69-beta.11

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

@@ -0,0 +1,127 @@
+import { useEffect, useRef, ReactNode } from 'react'
+import {
+  View,
+  DeviceEventEmitter,
+  EventSubscription,
+  NativeEventEmitter,
+  StyleSheet
+} from 'react-native'
+import PortalManager from './portal-manager'
+import { getFocusedNavigation } from '@mpxjs/utils'
+import { PortalManagerContextValue, PortalContext } from '../context'
+
+export type PortalHostProps = {
+  children: ReactNode
+}
+
+type addIdsMapsType = {
+  [key: number]: number[]
+}
+
+export type Operation =
+  | { type: 'mount'; key: number; children: ReactNode }
+  | { type: 'update'; key: number; children: ReactNode }
+  | { type: 'unmount'; key: number }
+
+// events
+const addType = 'MPX_RN_ADD_PORTAL'
+const removeType = 'MPX_RN_REMOVE_PORTAL'
+const updateType = 'MPX_RN_UPDATE_PORTAL'
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter()
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
+class PortalGuard {
+  private nextKey = 10000
+  add = (e: ReactNode) => {
+    const key = this.nextKey++
+    TopViewEventEmitter.emit(addType, e, key)
+    return key
+  }
+
+  remove = (key: number) => {
+    TopViewEventEmitter.emit(removeType, key)
+  }
+
+  update = (key: number, e: ReactNode) => {
+    TopViewEventEmitter.emit(updateType, key, e)
+  }
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard()
+
+const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
+  const _nextKey = useRef(0)
+  const _queue = useRef<Operation[]>([])
+  const _addType = useRef<EventSubscription | null>(null)
+  const _removeType = useRef<EventSubscription | null>(null)
+  const _updateType = useRef<EventSubscription | null>(null)
+  const manager = useRef<PortalManagerContextValue | null>(null)
+  let currentPageId: number | undefined
+  const _mount = (children: ReactNode, _key?: number, curPageId?: number) => {
+    const navigation = getFocusedNavigation()
+    const pageId = navigation?.pageId
+    if (pageId !== (curPageId ?? currentPageId)) {
+      return
+    }
+    const key = _key || _nextKey.current++
+    if (manager.current) {
+      manager.current.mount(key, children)
+    }
+    return key
+  }
+
+  const _unmount = (key: number) => {
+    if (manager.current) {
+      manager.current.unmount(key)
+    }
+  }
+
+  const _update = (key: number, children?: ReactNode, curPageId?: number) => {
+    const navigation = getFocusedNavigation()
+    const pageId = navigation?.pageId
+    if (pageId !== (curPageId ?? currentPageId)) {
+      return
+    }
+    if (manager.current) {
+      manager.current.update(key, children)
+    }
+  }
+
+  useEffect(() => {
+    const navigation = getFocusedNavigation()
+    currentPageId = navigation?.pageId
+    _addType.current = TopViewEventEmitter.addListener(addType, _mount)
+    _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount)
+    _updateType.current = TopViewEventEmitter.addListener(updateType, _update)
+
+    return () => {
+      _addType.current?.remove()
+      _removeType.current?.remove()
+      _updateType.current?.remove()
+    }
+  }, [])
+  return (
+    <PortalContext.Provider
+      value={{
+        mount: _mount,
+        update: _update,
+        unmount: _unmount
+      }}
+      >
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager} />
+    </PortalContext.Provider>
+  )
+}
+
+export default PortalHost

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

@@ -0,0 +1,64 @@
+import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+export type State = {
+  portals: Array<{
+    key: number
+    children: ReactNode
+  }>
+}
+
+type PortalManagerProps = {
+}
+
+const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<unknown>): ReactElement => {
+  const [state, setState] = useState<State>({
+    portals: []
+  })
+
+  const mount = useCallback((key: number, children: ReactNode) => {
+    setState((prevState) => ({
+      portals: [...prevState.portals, { key, children }]
+    }))
+  }, [state])
+
+  const update = useCallback((key: number, children: ReactNode) => {
+    setState((prevState) => ({
+      portals: prevState.portals.map((item) => {
+        if (item.key === key) {
+          return { ...item, children }
+        }
+        return item
+      })
+    }))
+  }, [state])
+
+  const unmount = useCallback((key: number) => {
+    setState((prevState) => ({
+      portals: prevState.portals.filter((item) => item.key !== key)
+    }))
+  }, [])
+
+  useImperativeHandle(ref, () => ({
+    mount,
+    update,
+    unmount,
+    portals: state.portals
+  }))
+
+  return (
+    <>
+      {state.portals.map(({ key, children }, i) => (
+        <View
+          key={key}
+          collapsable={false} // Need collapsable=false here to clip the elevations
+          pointerEvents="box-none"
+          style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}>
+          {children}
+        </View>
+      ))}
+    </>
+  )
+})
+
+export default _PortalManager

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+import { PortalContext, PortalContextValue, VarContext } from './context'
+import PortalConsumer from './mpx-portal/portal-consumer'
+import PortalHost, { portal } from './mpx-portal/portal-host'
+
+export type PortalProps = {
+  /**
+   * Content of the `Portal`.
+   */
+  children?: ReactNode
+  key?: string
+  manager?: PortalContextValue,
+  varContext?: Record<string, any> | undefined
+}
+
+const Portal = ({ children, varContext }:PortalProps): JSX.Element => {
+  const hasVarContext = varContext && Object.keys(varContext).length
+  if (hasVarContext) {
+      children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>)
+  }
+  return (
+    <PortalContext.Consumer>
+      {(manager) => (
+        <PortalConsumer manager={manager}>{children}</PortalConsumer>
+      )}
+    </PortalContext.Consumer>
+  )
+}
+
+Portal.Host = PortalHost
+Portal.add = portal.add
+Portal.remove = portal.remove
+Portal.update = portal.update
+
+export default Portal

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

@@ -0,0 +1,51 @@
+import { ReactNode, createContext, useMemo } from 'react'
+import LocaleProvider, { LocaleContextProps } from './locale-provider'
+import Portal from './mpx-portal'
+import { extendObject } from './utils'
+
+export type Theme = typeof defaultTheme & { [key: string]: any }
+
+export interface ProviderProps {
+  locale?: LocaleContextProps
+  theme?: Partial<Theme>
+  children: ReactNode
+}
+const defaultTheme = {
+  color_text_base: '#000000', // 基本
+  color_text_base_inverse: '#ffffff', // 基本 _ 反色
+  color_text_secondary: '#a4a9b0', // 辅助色
+  color_text_placeholder: '#bbbbbb', // 文本框提示
+  color_text_disabled: '#bbbbbb', // 失效
+  color_text_caption: '#888888', // 辅助描述
+  color_text_paragraph: '#333333', // 段落
+  color_error: '#ff4d4f', // 错误(form validate)
+  color_warning: '#faad14', // 警告
+  color_success: '#52c41a',
+  color_primary: '#1677ff'
+}
+export const ThemeContext = createContext(defaultTheme)
+
+export type PartialTheme = Partial<Theme>
+
+export interface ThemeProviderProps {
+  value?: PartialTheme
+  children?: React.ReactNode
+}
+
+const ThemeProvider = (props: ThemeProviderProps) => {
+  const { value, children } = props
+  const theme = useMemo(() => (extendObject({}, defaultTheme, value)), [value])
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+}
+
+const Provider = ({ locale, theme, children }:ProviderProps): JSX.Element => {
+  return (
+    <LocaleProvider locale={locale}>
+      <ThemeProvider value={theme}>
+        <Portal.Host>{children}</Portal.Host>
+      </ThemeProvider>
+    </LocaleProvider>
+  )
+}
+
+export default Provider

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

@@ -1,9 +1,10 @@
 /**
  * ✔ enable
  */
-import { ReactNode, createElement, Fragment } from 'react'
-import { Portal } from '@ant-design/react-native'
+import { ReactNode, createElement, Fragment, useContext } from 'react'
+import Portal from './mpx-portal'
 import { warn } from '@mpxjs/utils'
+import { VarContext } from './context'
 interface RootPortalProps {
   enable?: boolean
   children: ReactNode
@@ -15,8 +16,9 @@ const _RootPortal = (props: RootPortalProps) => {
   if (props.style) {
     warn('The root-portal component does not support the style prop.')
   }
+  const varContext = useContext(VarContext)
   return enable
-    ? createElement(Portal, null, children)
+    ? createElement(Portal, { varContext }, children)
     : createElement(Fragment, null, children)
 }
 

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

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler'
-import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
+import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Platform } from 'react-native'
 import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
@@ -40,7 +40,6 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
-
 interface ScrollViewProps {
   children?: ReactNode;
   enhanced?: boolean;
@@ -338,11 +337,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }, props)
       )
     updateScrollOptions(e, { scrollLeft, scrollTop })
-    if (enableTriggerIntersectionObserver && intersectionObservers) {
-      for (const key in intersectionObservers) {
-        intersectionObservers[key].throttleMeasure()
-      }
-    }
   }
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -364,8 +358,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateScrollOptions(e, { scrollLeft, scrollTop })
     onStartReached(e)
     onEndReached(e)
+    updateIntersection()
+  }
+  function updateIntersection () {
+    if (enableTriggerIntersectionObserver && intersectionObservers) {
+      for (const key in intersectionObservers) {
+        intersectionObservers[key].throttleMeasure();
+      }
+    }
   }
-
   function scrollToOffset (x = 0, y = 0) {
     if (scrollViewRef.current) {
       scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation })
@@ -435,6 +436,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   function onScrollDrag (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
     updateScrollOptions(e, { scrollLeft, scrollTop })
+    updateIntersection()
   }
 
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(

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

@@ -16,7 +16,7 @@ interface SwiperItemProps {
   'parent-height'?: number;
   children?: ReactNode;
   style?: Object;
-  customStyle: [];
+  customStyle: Object;
   itemIndex: number;
 }
 
@@ -24,6 +24,7 @@ interface ContextType {
   offset: SharedValue<number>;
   step: SharedValue<number>;
   scale: boolean;
+  dir: string;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
@@ -39,6 +40,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   const offset = contextValue.offset || 0
   const step = contextValue.step || 0
   const scale = contextValue.scale || false
+  const dir = contextValue.dir || 'x'
   const { textProps } = splitProps(props)
   const nodeRef = useRef(null)
 
@@ -70,22 +72,26 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     'enable-offset',
     'style'
   ], { layoutRef })
-
   const itemAnimatedStyle = useAnimatedStyle(() => {
     if (!step.value) return {}
     const inputRange = [step.value, 0]
     const outputRange = [0.7, 1]
-    return {
-      transform: [{
+    // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现
+    const outerLayoutStyle = dir === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value }
+    const transformStyle = []
+    if (scale) {
+      transformStyle.push({
         scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
-      }]
+      })
     }
+    return Object.assign(outerLayoutStyle, {
+      transform: transformStyle
+    })
   })
-  const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle)
   return (
     <Animated.View
       {...innerProps}
-      style={mergeStyle}
+      style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]}
       data-itemId={props['item-id']}>
       {
         wrapChildren(