@mpxjs/webpack-plugin 2.9.69 → 2.9.70

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

@@ -0,0 +1,436 @@
+/**
+ * ✔ src
+ * ✔ mode
+ * ✘ show-menu-by-longpress
+ * ✔ binderror
+ * ✔ bindload
+ * ✘ fade-in
+ * ✔ webp
+ * ✘ lazy-load
+ * ✔ bindtap
+ * ✔ DEFAULT_SIZE
+ */
+import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react'
+import {
+  Image as RNImage,
+  View,
+  ImageStyle,
+  ImageResizeMode,
+  NativeSyntheticEvent,
+  ImageErrorEventData,
+  LayoutChangeEvent,
+  DimensionValue,
+  ImageLoadEventData
+} from 'react-native'
+import { noop } from '@mpxjs/utils'
+import { SvgCssUri } from 'react-native-svg/css'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, 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
+  'enable-fast-image'?: boolean
+  bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void
+  binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void
+}
+
+interface ImageState {
+  viewWidth?: number
+  viewHeight?: number
+  imageWidth?: number
+  imageHeight?: number
+  ratio?: number
+}
+
+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,
+    'enable-fast-image': enableFastImage,
+    '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 state = useRef<ImageState>({})
+
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, {
+    defaultStyle
+  })
+
+  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 onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
+    state.current.viewWidth = width
+    state.current.viewHeight = height
+
+    if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+      setViewWidth(width)
+      setViewHeight(height)
+      setRatio(state.current.ratio)
+      setImageWidth(state.current.imageWidth)
+      setImageHeight(state.current.imageHeight)
+      state.current = {}
+      setLoaded(true)
+    }
+  }
+
+  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef,
+    onLayout: isLayoutMode ? onLayout : noop
+  })
+
+  const { width, height } = normalStyle
+
+  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 [loaded, setLoaded] = useState(!isLayoutMode)
+
+  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) => {
+        state.current.imageWidth = width
+        state.current.imageHeight = height
+        state.current.ratio = !width ? 0 : height / width
+
+        if (isWidthFixMode
+          ? state.current.viewWidth
+          : isHeightFixMode
+            ? state.current.viewHeight
+            : state.current.viewWidth && state.current.viewHeight) {
+          state.current.viewWidth && setViewWidth(state.current.viewWidth)
+          state.current.viewHeight && setViewHeight(state.current.viewHeight)
+          setRatio(!width ? 0 : height / width)
+          setImageWidth(width)
+          setImageHeight(height)
+          state.current = {}
+          setLoaded(true)
+        }
+      })
+    }
+  }, [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 createElement(View, innerProps,
+    isSvg
+      ? createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
+        style: extendObject(
+          { transformOrigin: 'top left' },
+          modeStyle
+        )
+      })
+      : loaded && renderImage({
+        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 : {}
+        )
+      }, enableFastImage)
+  )
+})
+
+Image.displayName = 'mpx-image'
+
+export default Image

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

@@ -17,7 +17,7 @@
  * ✔ cursor-color
  * ✔ selection-start
  * ✔ selection-end
- * ✘ adjust-position
+ * ✔ adjust-position
  * ✘ hold-keyboard
  * ✘ safe-password-cert-path
  * ✘ safe-password-length
@@ -37,7 +37,7 @@
  * ✘ bind:keyboardcompositionend
  * ✘ bind:onkeyboardheightchange
  */
-import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react'
+import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect, createElement } from 'react'
 import {
   KeyboardTypeOptions,
   Platform,
@@ -55,10 +55,10 @@ import {
   TextInputSubmitEditingEventData
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils'
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { FormContext, FormFieldValue } from './context'
+import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
 
 type InputStyle = Omit<
   TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>,
@@ -98,6 +98,7 @@ export interface InputProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
+  'adjust-position': boolean,
   bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void
   bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
   bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
@@ -106,6 +107,7 @@ export interface InputProps {
 }
 
 export interface PrivateInputProps {
+  allowFontScaling?: boolean
   multiline?: boolean
   'auto-height'?: boolean
   bindlinechange?: (evt: NativeSyntheticEvent<TextInputContentSizeChangeEventData> | unknown) => void
@@ -127,6 +129,7 @@ const keyboardTypeMap: Record<Type, string> = {
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
   const {
     style = {},
+    allowFontScaling = false,
     type = 'text',
     value,
     password,
@@ -146,6 +149,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
+    'adjust-position': adjustPosition = true,
     bindinput,
     bindfocus,
     bindblur,
@@ -159,6 +163,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const formContext = useContext(FormContext)
 
+  const setKeyboardAvoidEnabled = useContext(KeyboardAvoidContext)
+
   let formValuesMap: Map<string, FormFieldValue> | undefined
 
   if (formContext) {
@@ -170,20 +176,20 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color
   const textAlignVertical = multiline ? 'top' : 'auto'
 
-  const tmpValue = useRef<string>()
+  const tmpValue = useRef<string | undefined>(defaultValue)
   const cursorIndex = useRef<number>(0)
   const lineCount = useRef<number>(0)
 
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
 
-  const styleObj = {
-    padding: 0,
-    ...style,
-    ...multiline && autoHeight && {
-      height: Math.max((style as any)?.minHeight || 35, contentHeight)
-    }
-  }
+  const styleObj = extendObject(
+    { padding: 0, backgroundColor: '#fff' },
+    style,
+    multiline && autoHeight
+      ? { minHeight: Math.max((style as any)?.minHeight || 35, contentHeight) }
+      : {}
+  )
 
   const {
     hasSelfPercent,
@@ -193,7 +199,9 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef)
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
@@ -378,6 +386,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }, [])
 
+  useEffect(() => {
+    setKeyboardAvoidEnabled?.(adjustPosition)
+  }, [adjustPosition])
+
   useUpdateEffect(() => {
     if (!nodeRef?.current) {
       return
@@ -387,52 +399,60 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       : (nodeRef.current as TextInput)?.blur()
   }, [focus])
 
-  const composeStyle = { ...normalStyle, ...layoutStyle }
-
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: {
-      padding: 0,
-      ...composeStyle,
-      ...multiline && autoHeight && {
-        height: Math.max((composeStyle as any)?.minHeight || 35, contentHeight)
+  const innerProps = useInnerProps(
+    props,
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        allowFontScaling,
+        keyboardType: keyboardType,
+        secureTextEntry: !!password,
+        defaultValue: defaultValue,
+        value: inputValue,
+        maxLength: maxlength === -1 ? undefined : maxlength,
+        editable: !disabled,
+        autoFocus: !!autoFocus || !!focus,
+        returnKeyType: confirmType,
+        selection: selection,
+        selectionColor: cursorColor,
+        blurOnSubmit: !multiline && !confirmHold,
+        underlineColorAndroid: 'rgba(0,0,0,0)',
+        textAlignVertical: textAlignVertical,
+        placeholderTextColor: placeholderTextColor,
+        multiline: !!multiline
+      },
+      layoutProps,
+      {
+        onFocus: bindfocus && onInputFocus,
+        onBlur: bindblur && onInputBlur,
+        onKeyPress: bindconfirm && onKeyPress,
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
+        onSelectionChange: bindselectionchange && onSelectionChange,
+        onTextInput: onTextInput,
+        onChange: onChange,
+        onContentSizeChange: onContentSizeChange
       }
-    },
-    ...layoutProps,
-    onFocus: bindfocus && onInputFocus,
-    onBlur: bindblur && onInputBlur,
-    onKeyPress: bindconfirm && onKeyPress,
-    onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-    onSelectionChange: bindselectionchange && onSelectionChange
-  },
-  [],
-  {
-    layoutRef
-  })
-
-  return (
-    <TextInput
-      {...innerProps}
-      keyboardType={keyboardType as KeyboardTypeOptions}
-      secureTextEntry={!!password}
-      defaultValue={defaultValue}
-      value={inputValue}
-      maxLength={maxlength === -1 ? undefined : maxlength}
-      editable={!disabled}
-      autoFocus={!!autoFocus || !!focus}
-      returnKeyType={confirmType}
-      selection={selection}
-      selectionColor={cursorColor}
-      blurOnSubmit={!multiline && !confirmHold}
-      underlineColorAndroid="rgba(0,0,0,0)"
-      textAlignVertical={textAlignVertical}
-      placeholderTextColor={placeholderTextColor}
-      multiline={!!multiline}
-      onTextInput={onTextInput}
-      onChange={onChange}
-      onContentSizeChange={onContentSizeChange}
-    />
+    ),
+    [
+      'type',
+      'password',
+      'placeholder-style',
+      'disabled',
+      'auto-focus',
+      'focus',
+      'confirm-type',
+      'confirm-hold',
+      'cursor',
+      'cursor-color',
+      'selection-start',
+      'selection-end'
+    ],
+    {
+      layoutRef
+    }
   )
+  return createElement(TextInput, innerProps)
 })
 
 Input.displayName = 'MpxInput'