@mpxjs/webpack-plugin 2.9.69-beta.3 → 2.9.69-beta.4

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

@@ -1,5 +1,5 @@
 import { View } from 'react-native'
-import React, { forwardRef, useState, useRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import {
@@ -9,8 +9,6 @@ import {
   wrapChildren,
   parseInlineStyle,
   useTransformStyle,
-  useDebounceCallback,
-  useStableCallback,
   extendObject
 } from './utils'
 import type { AnyFunc } from './types/common'
@@ -21,21 +19,21 @@ import type { AnyFunc } from './types/common'
  * ✘ bindpickend
  * ✘ mask-class
  * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
+ * WebView Only:
  * ✘ indicator-class
- * ✘ mask-style
+ * ✔ mask-style
  * ✘ immediate-change
  */
 
 interface PickerViewProps {
   children: React.ReactNode
-  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），
-  // 数字大于 picker-view-column 可选项长度时，选择最后一项。
   value?: Array<number>
   bindchange?: AnyFunc
   style: {
     [key: string]: any
   }
   'indicator-style'?: string
+  'mask-style'?: string
   'enable-var': boolean
   'external-var-context'?: Record<string, any>,
   'enable-offset': boolean
@@ -62,6 +60,8 @@ const styles: { [key: string]: Object } = {
   }
 }
 
+const DefaultPickerItemH = 36
+
 const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
   const {
     children,
@@ -71,16 +71,16 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
-
-  // indicatorStyle 需要转换为rn的style
-  // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
+  const pickerMaskStyle = parseInlineStyle(props['mask-style'])
   const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle
-  const [pickMaxH, setPickMaxH] = useState(0)
   const nodeRef = useRef(null)
   const cloneRef = useRef(null)
   const activeValueRef = useRef(value)
   activeValueRef.current = value.slice()
+  const snapActiveValueRef = useRef<number[] | null>(null)
+
+  console.log('[mpx-picker-view] value=', value, Date.now())
 
   const {
     normalStyle,
@@ -96,7 +96,6 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   })
 
   const {
-    // 存储layout布局信息
     layoutRef,
     layoutProps,
     layoutStyle
@@ -104,33 +103,34 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   const { textProps } = splitProps(props)
   const { textStyle } = splitStyle(normalStyle)
 
-  const onColumnItemRawHChange = (height: number) => {
-    if (height > pickMaxH) {
-      setPickMaxH(height)
-    }
-  }
-
-  const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300)
-
   const onSelectChange = (columnIndex: number, selectedIndex: number) => {
-    bindchangeDebounce.clear()
     const activeValue = activeValueRef.current
     activeValue[columnIndex] = selectedIndex
+    console.log('[mpx-picker-view], onSelectChange ---> columnIndex=', columnIndex, 'selectedIndex=', selectedIndex, 'activeValue=', activeValue)
     const eventData = getCustomEvent(
       'change',
       {},
       { detail: { value: activeValue, source: 'change' }, layoutRef }
     )
-    bindchangeDebounce(eventData)
+    bindchange?.(eventData)
+    snapActiveValueRef.current = activeValueRef.current
   }
 
-  const onInitialChange = (value: number[]) => {
-    const eventData = getCustomEvent(
-      'change',
-      {},
-      { detail: { value, source: 'change' }, layoutRef }
-    )
-    bindchange?.(eventData) // immediate
+  const hasDiff = (a: number[] = [], b: number[]) => {
+    return a.some((v, i) => v !== b[i])
+  }
+
+  const onInitialChange = (isInvalid: boolean, value: number[]) => {
+    if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+      console.log('[mpx-picker-view], onInitialChange ===> value=', value)
+      const eventData = getCustomEvent(
+        'change',
+        {},
+        { detail: { value, source: 'change' }, layoutRef }
+      )
+      bindchange?.(eventData)
+      snapActiveValueRef.current = value.slice()
+    }
   }
 
   const innerProps = useInnerProps(
@@ -153,7 +153,6 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   )
 
   const renderColumn = (child: React.ReactElement, index: number, columnData: React.ReactNode[], initialIndex: number) => {
-    const extraProps = {}
     const childProps = child?.props || {}
     const wrappedProps = extendObject(
       {},
@@ -164,15 +163,15 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         columnIndex: index,
         key: `pick-view-${index}`,
         wrapperStyle: {
-          height: normalStyle?.height || 0,
-          itemHeight: indicatorH || 0
+          height: normalStyle?.height || DefaultPickerItemH,
+          itemHeight: indicatorH || DefaultPickerItemH
         },
-        onColumnItemRawHChange,
+        columnStyle: normalStyle,
         onSelectChange: onSelectChange.bind(null, index),
         initialIndex,
-        pickerOverlayStyle
-      },
-      extraProps
+        pickerOverlayStyle,
+        pickerMaskStyle
+      }
     )
     const realElement = React.cloneElement(child, wrappedProps)
     return wrapChildren(
@@ -215,7 +214,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
       validValue.push(validIndex)
       renderColumns.push(renderColumn(item, index, columnData, validIndex))
     })
-    isInvalid && onInitialChange(validValue)
+    onInitialChange(isInvalid, validValue)
     return renderColumns
   }
 
@@ -227,5 +226,4 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
 })
 
 _PickerView.displayName = 'MpxPickerView'
-
 export default _PickerView

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

@@ -0,0 +1,32 @@
+import { useEffect, useRef, ReactNode } from 'react'
+import { PortalContextValue } from '../context'
+import { getFocusedNavigation } from '@mpxjs/utils'
+
+export type PortalConsumerProps = {
+  manager: PortalContextValue
+  children?: ReactNode
+}
+const PortalConsumer = ({ manager, children } :PortalConsumerProps): JSX.Element | null => {
+  const keyRef = useRef<any>(null)
+  useEffect(() => {
+    const navigation = getFocusedNavigation()
+    const curPageId = navigation?.pageId
+    manager.update(keyRef.current, children, curPageId)
+  }, [children])
+  useEffect(() => {
+    if (!manager) {
+      throw new Error(
+        'Looks like you forgot to wrap your root component with `Provider` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal`.\n\n'
+      )
+    }
+    const navigation = getFocusedNavigation()
+    const curPageId = navigation?.pageId
+    keyRef.current = manager.mount(children, undefined, curPageId)
+    return () => {
+      manager.unmount(keyRef.current, curPageId)
+    }
+  }, [])
+  return null
+}
+
+export default PortalConsumer

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

@@ -0,0 +1,158 @@
+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'
+// 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)
+  }
+}
+/**
+ * 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 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)
+    } else {
+      _queue.current.push({ type: 'mount', key, children })
+    }
+    return key
+  }
+
+  const _unmount = (key: number, curPageId?: number) => {
+    const navigation = getFocusedNavigation()
+    const pageId = navigation?.pageId
+    if (pageId !== (curPageId ?? currentPageId)) {
+      return
+    }
+    if (manager.current) {
+      manager.current.unmount(key)
+    } else {
+      _queue.current.push({ type: '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)
+    } else {
+      const op: Operation = { type: 'mount', key, children }
+      const index = _queue.current.findIndex(
+        (o) => o.type === 'mount' || (o.type === 'update' && o.key === key)
+      )
+
+      if (index > -1) {
+        _queue.current[index] = op
+      } else {
+        _queue.current.push(op)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const navigation = getFocusedNavigation()
+    currentPageId = navigation?.pageId
+    _addType.current = TopViewEventEmitter.addListener(addType, _mount)
+    _removeType.current = TopViewEventEmitter.addListener(
+      removeType,
+      _unmount
+    )
+    return () => {
+      while (_queue.current.length && manager.current) {
+        const action = _queue.current.pop()
+        if (!action) {
+          continue
+        }
+        // tslint:disable-next-line:switch-default
+        switch (action.type) {
+          case 'mount':
+            manager.current?.mount(action.key, action.children)
+            break
+          case 'update':
+            manager.current?.update(action.key, action.children)
+            break
+          case 'unmount':
+            manager.current?.unmount(action.key)
+            break
+        }
+      }
+    }
+  }, [])
+  return (
+    <PortalContext.Provider
+      value={{
+        mount: _mount,
+        update: _update,
+        unmount: _unmount
+      }}
+      >
+      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+      <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,29 @@
+import { ReactNode } from 'react'
+import { PortalContext, PortalContextValue } 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
+}
+
+const Portal = ({ children }:PortalProps): JSX.Element => {
+  return (
+    <PortalContext.Consumer>
+      {(manager) => (
+        <PortalConsumer manager={manager}>{children}</PortalConsumer>
+      )}
+    </PortalContext.Consumer>
+  )
+}
+
+Portal.Host = PortalHost
+Portal.add = portal.add
+Portal.remove = portal.remove
+
+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-rich-text/index.tsx

@@ -3,10 +3,10 @@
  * ✔ nodes
  */
 import { View, ViewProps, ViewStyle } from 'react-native'
-import { useRef, forwardRef, JSX, useState } from 'react'
+import { useRef, forwardRef, JSX, useState, createElement } from 'react'
 import useInnerProps from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { useTransformStyle, useLayout } from '../utils'
+import { useTransformStyle, useLayout, extendObject } from '../utils'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { generateHTML } from './html'
 
@@ -91,28 +91,22 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     layoutRef
   })
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = useInnerProps(props, extendObject({
     ref: nodeRef,
-    style: { ...normalStyle, ...layoutStyle },
-    ...layoutProps
-  }, [], {
+    style: extendObject(normalStyle, layoutStyle)
+  }, layoutProps), [], {
     layoutRef
   })
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 
-  return (
-    <View
-      {...innerProps}
-    >
-      <WebView
-        source={{ html: generateHTML(html) }}
-        onMessage={(event: WebViewMessageEvent) => {
-          setWebViewHeight(+event.nativeEvent.data)
-        }}
-      >
-      </WebView>
-    </View>
+  return createElement(View, innerProps,
+    createElement(WebView, {
+      source: { html: generateHTML(html) },
+      onMessage: (event: WebViewMessageEvent) => {
+        setWebViewHeight(+event.nativeEvent.data)
+      }
+    })
   )
 })
 

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

@@ -2,7 +2,7 @@
  * ✔ enable
  */
 import { ReactNode, createElement, Fragment } from 'react'
-import { Portal } from '@ant-design/react-native'
+import Portal from './mpx-portal'
 import { warn } from '@mpxjs/utils'
 interface RootPortalProps {
   enable?: boolean

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

@@ -32,15 +32,14 @@
  * ✔ 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, useContext, createElement } from 'react'
+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'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
-import { IntersectionObserverContext } from './context'
-
+import { IntersectionObserverContext, ScrollViewContext } from './context'
 interface ScrollViewProps {
   children?: ReactNode;
   enhanced?: boolean;
@@ -194,6 +193,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
+  const contextValue = useMemo(() => {
+    return {
+      gestureRef: scrollViewRef
+    }
+  }, [])
+
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
   if (scrollX && scrollY) {
@@ -332,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>) {
@@ -358,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 })
@@ -429,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(
@@ -507,14 +515,17 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
         : undefined
     }),
-    wrapChildren(
-      props,
-      {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-      }
+    createElement(ScrollViewContext.Provider,
+      { value: contextValue },
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
     )
   )
 })