@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.1

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

@@ -25,7 +25,7 @@ import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
 
 interface Selection {
@@ -46,7 +46,7 @@ export interface CheckboxProps extends Selection {
   'parent-height'?: number;
   children?: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  _onChange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown, { checked }: { checked: boolean }) => void
 }
 
 const styles = StyleSheet.create({
@@ -92,7 +92,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       'parent-width': parentWidth,
       'parent-height': parentHeight,
       bindtap,
-      catchtap
+      _onChange
     } = props
 
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
@@ -101,15 +101,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
-    const defaultStyle = {
-      ...styles.wrapper,
-      ...(disabled && styles.wrapperDisabled)
-    }
+    const defaultStyle = extendObject(
+      {},
+      styles.wrapper,
+      disabled ? styles.wrapperDisabled : null
+    )
 
-    const styleObj = {
-      ...styles.container,
-      ...style
-    }
+    const styleObj = extendObject({}, styles.container, style)
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled) return
@@ -119,20 +117,15 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         groupValue[value].checked = checked
       }
       notifyChange && notifyChange(evt)
+      // Called when the switch type attribute is checkbox
+      _onChange && _onChange(evt, { checked })
     }
 
     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))
-      onChange(evt)
-    }
-
     const {
       hasSelfPercent,
       normalStyle,
@@ -145,13 +138,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const nodeRef = useRef(null)
 
     useNodesRef(props, ref, nodeRef, {
-      defaultStyle,
+      style: extendObject({}, defaultStyle, normalStyle),
       change: onChange
     })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
     if (backgroundStyle) {
       warn('Checkbox does not support background image-related styles!')
@@ -170,14 +163,21 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap,
-        catchtap: catchTap
-      },
-      [],
+      extendObject(
+        {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
+        },
+        layoutProps,
+        {
+          bindtap: !disabled && onTap
+        }
+      ),
+      [
+        'value',
+        'disabled',
+        'checked'
+      ],
       {
         layoutRef
       }

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

@@ -9,7 +9,7 @@ import { JSX, useRef, forwardRef, ReactNode, useMemo, useCallback } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils'
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils'
 interface FormProps {
   style?: Record<string, any>;
   children?: ReactNode;
@@ -47,21 +47,23 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { textStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   const formRef = useRef(null)
-  useNodesRef(props, ref, formRef)
+  useNodesRef(props, ref, formRef, {
+    style: normalStyle
+  })
 
   const propsRef = useRef<FormProps>({})
   propsRef.current = props
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
-  const innerProps = useInnerProps(props, {
-    style: { ...innerStyle, ...layoutStyle },
-    ref: formRef,
-    ...layoutProps
-  }, [
+  const innerProps = useInnerProps(props, extendObject({
+    style: extendObject({}, innerStyle, layoutStyle),
+    ref: formRef
+  }, layoutProps)
+  , [
     'bindsubmit',
     'bindreset'
   ], { layoutRef })

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

@@ -7,7 +7,7 @@ import { JSX, forwardRef, useRef } from 'react'
 import { Text, TextStyle, Image } from 'react-native'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { useLayout, useTransformStyle } from './utils'
+import { useLayout, useTransformStyle, extendObject } from './utils'
 
 export type IconType =
   | 'success'
@@ -63,10 +63,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
 
     const defaultStyle = { width: ~~size, height: ~~size }
 
-    const styleObj = {
-      ...defaultStyle,
-      ...style
-    }
+    const styleObj = extendObject({}, defaultStyle, style)
 
     const {
       hasSelfPercent,
@@ -76,22 +73,20 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
     const nodeRef = useRef(null)
-    useNodesRef(props, ref, nodeRef, { defaultStyle })
+    useNodesRef(props, ref, nodeRef, { style: normalStyle })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: {
-          ...normalStyle,
-          ...layoutStyle,
-          tintColor: color
+      extendObject(
+        {
+          ref: nodeRef,
+          source: { uri },
+          style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
         },
-        source: { uri },
-        ...layoutProps
-      },
+        layoutProps
+      ),
       [],
       {
         layoutRef

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

@@ -0,0 +1,396 @@
+/**
+ * ✔ src
+ * ✔ mode
+ * ✘ show-menu-by-longpress
+ * ✔ binderror
+ * ✔ bindload
+ * ✘ fade-in
+ * ✔ webp
+ * ✘ lazy-load
+ * ✔ bindtap
+ * ✔ DEFAULT_SIZE
+ */
+import { useEffect, useMemo, useState, useRef, forwardRef } from 'react'
+import {
+  Image as RNImage,
+  View,
+  ImageStyle,
+  ImageResizeMode,
+  NativeSyntheticEvent,
+  ImageErrorEventData,
+  LayoutChangeEvent,
+  DimensionValue,
+  ImageLoadEventData
+} from 'react-native'
+import { SvgCssUri } from 'react-native-svg/css'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { SVG_REGEXP, useLayout, useTransformStyle, extendObject } from './utils'
+
+export type Mode =
+  | 'scaleToFill'
+  | 'aspectFit'
+  | 'aspectFill'
+  | 'widthFix'
+  | 'heightFix'
+  | 'top'
+  | 'bottom'
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top left'
+  | 'top right'
+  | 'bottom left'
+  | 'bottom right'
+
+export interface ImageProps {
+  src?: string
+  mode?: Mode
+  svg?: boolean
+  style?: ImageStyle & Record<string, any>
+  'enable-offset'?: boolean;
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void
+  binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void
+}
+
+const DEFAULT_IMAGE_WIDTH = 320
+const DEFAULT_IMAGE_HEIGHT = 240
+
+const cropMode: Mode[] = [
+  'top',
+  'bottom',
+  'center',
+  'right',
+  'left',
+  'top left',
+  'top right',
+  'bottom left',
+  'bottom right'
+]
+
+const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
+  ['scaleToFill', 'stretch'],
+  ['aspectFit', 'contain'],
+  ['aspectFill', 'cover'],
+  ['widthFix', 'stretch'],
+  ['heightFix', 'stretch'],
+  ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
+])
+
+const isNumber = (value: DimensionValue) => typeof value === 'number'
+
+const relativeCenteredSize = (viewSize: number, imageSize: number) => (viewSize - imageSize) / 2
+
+function noMeetCalcRule (isSvg: boolean, mode: Mode, viewWidth: number, viewHeight: number, ratio: number) {
+  const isMeetSize = viewWidth && viewHeight && ratio
+  if (isSvg && !isMeetSize) return true
+  if (!isSvg && !['scaleToFill', 'aspectFit', 'aspectFill'].includes(mode) && !isMeetSize) return true
+  return false
+}
+
+const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, ref): JSX.Element => {
+  const {
+    src = '',
+    mode = 'scaleToFill',
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    bindload,
+    binderror
+  } = props
+
+  const defaultStyle = {
+    width: DEFAULT_IMAGE_WIDTH,
+    height: DEFAULT_IMAGE_HEIGHT
+  }
+
+  const styleObj = extendObject(
+    {},
+    defaultStyle,
+    style,
+    { overflow: 'hidden' }
+  )
+
+  const nodeRef = useRef(null)
+
+  const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
+    setViewWidth(width)
+    setViewHeight(height)
+  }
+
+  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout })
+
+  const { width, height } = normalStyle
+
+  const isSvg = SVG_REGEXP.test(src)
+  const isWidthFixMode = mode === 'widthFix'
+  const isHeightFixMode = mode === 'heightFix'
+  const isCropMode = cropMode.includes(mode)
+  const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode
+  const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch'
+
+  const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0)
+  const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0)
+  const [imageWidth, setImageWidth] = useState(0)
+  const [imageHeight, setImageHeight] = useState(0)
+  const [ratio, setRatio] = useState(0)
+
+  const fixedHeight = useMemo(() => {
+    const fixed = viewWidth * ratio
+    return !fixed ? viewHeight : fixed
+  }, [ratio, viewWidth, viewHeight])
+
+  const fixedWidth = useMemo(() => {
+    if (!ratio) return viewWidth
+    const fixed = viewHeight / ratio
+    return !fixed ? viewWidth : fixed
+  }, [ratio, viewWidth, viewHeight])
+
+  const modeStyle: ImageStyle = useMemo(() => {
+    if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio)) return {}
+    switch (mode) {
+      case 'scaleToFill':
+      case 'aspectFit':
+        if (isSvg) {
+          const scale = ratio <= 1
+            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
+          return {
+            transform: [
+              { scale },
+              ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+            ]
+          }
+        }
+        return {}
+      case 'aspectFill':
+        if (isSvg) {
+          const scale = ratio >= 1
+            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
+          return {
+            transform: [
+              { scale },
+              ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+            ]
+          }
+        }
+        return {}
+      case 'widthFix':
+      case 'heightFix':
+        if (isSvg) {
+          const scale = ratio >= 1
+            ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
+            : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight
+          return {
+            transform: [{ scale }]
+          }
+        }
+        return {}
+      case 'top':
+        return {
+          transform: [
+            { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+          ]
+        }
+      case 'bottom':
+        return {
+          transform: [
+            { translateY: viewHeight - imageHeight },
+            { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+          ]
+        }
+      case 'center':
+        return {
+          transform: [
+            { translateY: relativeCenteredSize(viewHeight, imageHeight) },
+            { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+          ]
+        }
+      case 'left':
+        return {
+          transform: [
+            { translateY: relativeCenteredSize(viewHeight, imageHeight) }
+          ]
+        }
+      case 'right':
+        return {
+          transform: [
+            { translateY: relativeCenteredSize(viewHeight, imageHeight) },
+            { translateX: viewWidth - imageWidth }
+          ]
+        }
+      case 'top left':
+        return {}
+      case 'top right':
+        return {
+          transform: [
+            { translateX: viewWidth - imageWidth }
+          ]
+        }
+      case 'bottom left':
+        return {
+          transform: [
+            { translateY: viewHeight - imageHeight }
+          ]
+        }
+      case 'bottom right':
+        return {
+          transform: [
+            { translateY: viewHeight - imageHeight },
+            { translateX: viewWidth - imageWidth }
+          ]
+        }
+      default:
+        return {}
+    }
+  }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight])
+
+  const onSvgLoad = (evt: LayoutChangeEvent) => {
+    const { width, height } = evt.nativeEvent.layout
+    setRatio(!width ? 0 : height / width)
+    setImageWidth(width)
+    setImageHeight(height)
+
+    bindload && bindload(
+      getCustomEvent(
+        'load',
+        evt,
+        {
+          detail: { width, height },
+          layoutRef
+        },
+        props
+      )
+    )
+  }
+
+  const onSvgError = (evt: Error) => {
+    binderror!(
+      getCustomEvent(
+        'error',
+        evt,
+        {
+          detail: { errMsg: evt?.message },
+          layoutRef
+        },
+        props
+      )
+    )
+  }
+
+  const onImageLoad = (evt: NativeSyntheticEvent<ImageLoadEventData>) => {
+    evt.persist()
+    RNImage.getSize(src, (width: number, height: number) => {
+      bindload!(
+        getCustomEvent(
+          'load',
+          evt,
+          {
+            detail: { width, height },
+            layoutRef
+          },
+          props
+        )
+      )
+    })
+  }
+
+  const onImageError = (evt: NativeSyntheticEvent<ImageErrorEventData>) => {
+    binderror!(
+      getCustomEvent(
+        'error',
+        evt,
+        {
+          detail: { errMsg: evt.nativeEvent.error },
+          layoutRef
+        },
+        props
+      )
+    )
+  }
+
+  useEffect(() => {
+    if (!isSvg && isLayoutMode) {
+      RNImage.getSize(src, (width: number, height: number) => {
+        setRatio(!width ? 0 : height / width)
+        setImageWidth(width)
+        setImageHeight(height)
+      })
+    }
+  }, [src, isSvg, isLayoutMode])
+
+  const innerProps = useInnerProps(
+    props,
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject(
+          {},
+          normalStyle,
+          layoutStyle,
+          isHeightFixMode ? { width: fixedWidth } : {},
+          isWidthFixMode ? { height: fixedHeight } : {}
+        )
+      },
+      layoutProps
+    ),
+    [
+      'src',
+      'mode',
+      'svg'
+    ],
+    {
+      layoutRef
+    }
+  )
+
+  return (
+    <View {...innerProps}>
+      {
+        isSvg
+          ? <SvgCssUri
+              uri={src}
+              onLayout={onSvgLoad}
+              onError={binderror && onSvgError}
+              style={extendObject(
+                { transformOrigin: 'top left' },
+                modeStyle
+              )}
+            />
+          : <RNImage
+              source={{ uri: src }}
+              resizeMode={resizeMode}
+              onLoad={bindload && onImageLoad}
+              onError={binderror && onImageError}
+              style={extendObject(
+                {
+                  transformOrigin: 'top left',
+                  width: isCropMode ? imageWidth : '100%',
+                  height: isCropMode ? imageHeight : '100%'
+                },
+                isCropMode ? modeStyle : {}
+              )}
+            />
+      }
+    </View>
+  )
+})
+
+Image.displayName = 'mpx-image'
+
+export default Image