@mpxjs/webpack-plugin 2.9.67 → 2.9.69

package/lib/runtime/components/react/pickerFaces.ts

@@ -0,0 +1,104 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+
+export type Faces = {
+  index: number
+  deg: number
+  offsetY: number
+  opacity: number
+  screenHeight: number
+}
+
+export const degToRad = (deg: number) => (Math.PI * deg) / 180
+
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree: number, itemHeight: number) =>
+  itemHeight * Math.cos(degToRad(degree))
+
+export const calcPickerHeight = (faces: Faces[], itemHeight: number) => {
+  if (faces.length === 7) {
+    return itemHeight * 5
+  }
+  return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0)
+}
+
+export const createFaces = (
+  itemHeight: number,
+  visibleCount: number
+): Faces[] => {
+  // e.g [30, 60, 90]
+  const getDegreesRelativeCenter = () => {
+    const maxStep = Math.trunc((visibleCount + 2) / 2) // + 2 because there are 2 more faces at 90 degrees
+    const stepDegree = 90 / maxStep
+
+    const result = []
+    for (let i = 1; i <= maxStep; i++) {
+      result.push(i * stepDegree)
+    }
+    return result
+  }
+
+  const getScreenHeightsAndOffsets = <T extends readonly number[]>(
+    degrees: T
+  ): [T, T] => {
+    const screenHeights = degrees.map((deg) =>
+      calcHeight(deg, itemHeight)
+    ) as unknown as T
+    const freeSpaces = screenHeights.map(
+      (screenHeight) => itemHeight - screenHeight
+    )
+    const offsets = freeSpaces.map((freeSpace, index) => {
+      let offset = freeSpace / 2
+      for (let i = 0; i < index; i++) {
+        offset += freeSpaces[i]
+      }
+      return offset
+    }) as unknown as T
+    return [screenHeights, offsets]
+  }
+
+  const getOpacity = (index: number) => {
+    const map: Record<number, number> = {
+      0: 0,
+      1: 0.2,
+      2: 0.35,
+      3: 0.45,
+      4: 0.5
+    }
+    return map[index] ?? Math.min(1, map[4] + index * 0.5)
+  }
+
+  const degrees = getDegreesRelativeCenter()
+  const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
+
+  return [
+    // top items
+    ...degrees
+      .map<Faces>((degree, index) => {
+        return {
+          index: -1 * (index + 1),
+          deg: degree,
+          opacity: getOpacity(degrees.length - 1 - index),
+          offsetY: -1 * offsets[index],
+          screenHeight: screenHeight[index]
+        }
+      })
+      .reverse(),
+
+    // center item
+    { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+
+    // bottom items
+    ...degrees.map<Faces>((degree, index) => {
+      return {
+        index: index + 1,
+        deg: -1 * degree,
+        opacity: getOpacity(degrees.length - 1 - index),
+        offsetY: offsets[index],
+        screenHeight: screenHeight[index]
+      }
+    })
+  ]
+}

package/lib/runtime/components/react/pickerOverlay.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+type OverlayProps = {
+  itemHeight: number
+  overlayItemStyle?: StyleProp<ViewStyle>
+  overlayContainerStyle?: StyleProp<ViewStyle>
+}
+
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+  return (
+    <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selection: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.05)',
+    alignSelf: 'stretch'
+  }
+})
+
+export default React.memo(Overlay)

package/lib/runtime/components/react/types/common.ts

@@ -16,3 +16,5 @@ export type ExtendedViewStyle = ViewStyle & {
 export type ExtendedFunctionComponent = FunctionComponent & {
   isCustomText?: boolean
 }
+
+export type AnyFunc = (...args: ReadonlyArray<any>) => any

package/lib/runtime/components/react/types/global.d.ts

@@ -16,6 +16,7 @@ declare module 'react-native-svg/css' {
 
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
+  export function isFunction (fn: unknown): boolean
   export function hasOwn (obj: Object, key: string): boolean
   export function noop (...arg: any): void
   export function diffAndCloneA<A, B> (a: A, b?: B): {
@@ -26,6 +27,7 @@ declare module '@mpxjs/utils' {
   export function isObject (value): value is Object
   export function error (msg: string, location?: string, e?: any): void
   export function warn (msg: string, location?: string, e?: any): void
+  export function collectDataset (props: Record<string, any>, needParse?: boolean): Record<string, any>
   export function getFocusedNavigation (): {
     insets: {
       top: number

package/lib/runtime/components/react/utils.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle } from 'react-native'
-import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
+import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
+import { isObject, isFunction, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
 import { VarContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import type { ExtendedFunctionComponent } from './types/common'
+import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
+import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -78,7 +79,7 @@ export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
     const [k, v, ...rest] = style.split(':')
     if (rest.length || !v || !k) return styleObj
     const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
-    return Object.assign(styleObj, { [key]: v.trim() })
+    return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) })
   }, {})
 }
 
@@ -525,9 +526,52 @@ export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varC
   return children
 }
 
+export const debounce = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  let timer: any
+  const wrapper = (...args: ReadonlyArray<any>) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+  wrapper.clear = () => {
+    clearTimeout(timer)
+  }
+  return wrapper
+}
+
+export const useDebounceCallback = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  const debounced = useMemo(() => debounce(func, delay), [func])
+  return debounced
+}
+
+export const useStableCallback = <T extends AnyFunc | null | undefined> (
+  callback: T
+): T extends AnyFunc ? T : () => void => {
+  const ref = useRef<T>(callback)
+  ref.current = callback
+  return useCallback<any>(
+    (...args: any[]) => ref.current?.(...args),
+    []
+  )
+}
+
+export const usePrevious = <T, > (value: T): T | undefined => {
+  const ref = useRef<T | undefined>(undefined)
+  const prev = ref.current
+  ref.current = value
+  return prev
+}
+
 export interface GestureHandler {
-  nodeRefs?: Array<{ getNodeInstance: () => { nodeRef: unknown } }>;
-  current?: unknown;
+  nodeRefs?: Array<{ getNodeInstance: () => { nodeRef: unknown } }>
+  current?: unknown
 }
 
 export function flatGesture (gestures: Array<GestureHandler> = []) {
@@ -539,3 +583,30 @@ export function flatGesture (gestures: Array<GestureHandler> = []) {
     return gesture?.current ? [gesture] : []
   })) || []
 }
+
+export function extendObject (...args: Record<string, any>[]) {
+  return Object.assign({}, ...args)
+}
+
+export function getCurrentPage (pageId: number | null) {
+  if (!global.getCurrentPages) return
+  const pages = global.getCurrentPages()
+  return pages.find((page: any) => isFunction(page.getPageId) && page.getPageId() === pageId)
+}
+
+export function renderImage (
+  imageProps: ImageProps | FastImageProps,
+  enableFastImage = false
+) {
+  const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? FastImage : Image
+  return <Component {...imageProps} />
+}
+
+export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string) {
+  return pickedKeys.reduce<Record<string, any>>((acc, key) => {
+    if (key in styleObj) {
+      acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key]
+    }
+    return acc
+  }, {})
+}

package/lib/template-compiler/compiler.js

@@ -1374,7 +1374,8 @@ function processEvent (el, options) {
 function processSlotReact (el, meta) {
   if (el.tag === 'slot') {
     el.slot = {
-      name: getAndRemoveAttr(el, 'name').val
+      name: getAndRemoveAttr(el, 'name').val,
+      slot: getAndRemoveAttr(el, 'slot').val
     }
     meta.options = meta.options || {}
     meta.options.disableMemo = true
@@ -2619,8 +2620,8 @@ function processElement (el, root, options, meta) {
     // 预处理代码维度条件编译
     processIf(el)
     processFor(el)
+    processRefReact(el, meta)
     if (!pass) {
-      processRefReact(el, meta)
       processStyleReact(el, options)
       processEventReact(el)
       processComponentIs(el, options)

package/lib/template-compiler/gen-node-react.js

@@ -56,8 +56,8 @@ function genNode (node) {
             return map
           }, {})
           if (node.slot) {
-            const name = node.slot.name
-            exp += `__getSlot(${name ? s(name) : ''})`
+            const { name, slot } = node.slot
+            exp += `__getSlot(${name ? s(name) : ''}${slot ? `, ${s(slot)}` : ''})`
           } else {
             exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
             if (node.attrsList.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.67",
+  "version": "2.9.69",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.9.67",
+    "@mpxjs/utils": "^2.9.69",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -82,7 +82,8 @@
   },
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
-    "@mpxjs/api-proxy": "^2.9.67",
+    "@d11/react-native-fast-image": "^8.6.12",
+    "@mpxjs/api-proxy": "^2.9.69",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -97,5 +98,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "b23d3850c16543c5998811b8d1d8e6ee7988c0f8"
+  "gitHead": "e23c51acc4c2ffdd31fcc6c27aae1aed42d1ade2"
 }