@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -10,19 +10,12 @@
  * ✔ bindtap
  * ✔ DEFAULT_SIZE
  */
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  forwardRef,
-  useRef,
-} from 'react'
+import { useEffect, useMemo, useState, useRef, forwardRef } from 'react'
+
 import {
   Image as RNImage,
   View,
   ImageStyle,
-  StyleProp,
   ImageSourcePropType,
   ImageResizeMode,
   StyleSheet,
@@ -30,10 +23,11 @@ import {
   ImageErrorEventData,
   LayoutChangeEvent,
   DimensionValue,
-  ImageLoadEventData,
+  ImageLoadEventData
 } from 'react-native'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
+import { useLayout, useTransformStyle } from '../utils'
 
 export type Mode =
   | 'scaleToFill'
@@ -57,8 +51,13 @@ export interface ImageProps {
   src?: string
   mode?: Mode
   svg?: boolean
-  style?: StyleProp<ImageStyle>
+  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
 }
@@ -86,7 +85,7 @@ const cropMode: Mode[] = [
   'top left',
   'top right',
   'bottom left',
-  'bottom right',
+  'bottom right'
 ]
 
 const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
@@ -95,7 +94,7 @@ const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
   ['aspectFill', 'cover'],
   ['widthFix', 'stretch'],
   ['heightFix', 'stretch'],
-  ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch']),
+  ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
 ])
 
 const isNumber = (value: DimensionValue) => typeof value === 'number'
@@ -110,27 +109,47 @@ const relativeCenteredSize = (viewSize: number, imageSize: number) => (viewSize
 //   </View>
 // )
 
-const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, ref): React.JSX.Element => {
+const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, ref): JSX.Element => {
   const {
     src = '',
     mode = 'scaleToFill',
     // svg = false,
-    style = [],
-    'enable-offset': enableOffset,
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     bindload,
     binderror
   } = props
 
-  const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = StyleSheet.flatten(style)
+  const defaultStyle = {
+    width: DEFAULT_IMAGE_WIDTH,
+    height: DEFAULT_IMAGE_HEIGHT
+  }
+
+  const styleObj = {
+    ...defaultStyle,
+    ...style,
+    overflow: 'hidden'
+  }
 
   const { nodeRef } = useNodesRef(props, ref, {
-    defaultStyle: {
-      width: DEFAULT_IMAGE_WIDTH,
-      height: DEFAULT_IMAGE_HEIGHT
-    }
+    defaultStyle
   })
 
-  const layoutRef = useRef({})
+  const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
+    setViewWidth(width)
+    setViewHeight(height)
+  }
+
+  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout })
+
+  const { width, height } = normalStyle
+
   const preSrc = useRef<string | undefined>()
 
   const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch'
@@ -140,8 +159,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const source: ImageSourcePropType = typeof src === 'string' ? { uri: src } : src
 
-  const [viewWidth, setViewWidth] = useState(isNumber(width) ? (width as number) : 0)
-  const [viewHeight, setViewHeight] = useState(isNumber(height) ? (height as number) : 0)
+  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)
@@ -186,6 +205,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const onImageLoad = (evt: NativeSyntheticEvent<ImageLoadEventData>) => {
     if (!bindload) return
     if (typeof src === 'string') {
+      evt.persist()
       RNImage.getSize(src, (width: number, height: number) => {
         bindload(
           getCustomEvent(
@@ -230,21 +250,6 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       )
   }
 
-  const onViewLayout = ({
-    nativeEvent: {
-      layout: { width, height },
-    },
-  }: LayoutChangeEvent) => {
-    setViewWidth(width)
-    setViewHeight(height)
-  }
-
-  const onImageLayout = () => {
-    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
-  }
-
   useEffect(() => {
     if (!isWidthFixMode && !isHeightFixMode && !isCropMode) {
       setLoaded(true)
@@ -281,14 +286,18 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    ...(enableOffset ? { onLayout: onImageLayout } : {})
+    style: {
+      ...normalStyle,
+      ...layoutStyle,
+      ...(isHeightFixMode && { width: fixedWidth }),
+      ...(isWidthFixMode && { height: fixedHeight })
+    },
+    ...layoutProps
   },
-    [
-      'enable-offset'
-    ],
-    {
-      layoutRef
-    }
+  [],
+  {
+    layoutRef
+  }
   )
 
   // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
@@ -312,34 +321,19 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   // }
 
   return (
-    <View
-      style={[
-        { width, height },
-        style,
-        {
-          ...(isHeightFixMode && { width: fixedWidth }),
-          ...(isWidthFixMode && { height: fixedHeight }),
-        },
-        { overflow: 'hidden' },
-      ]}
-      onLayout={onViewLayout}>
+    <View {...innerProps}>
       {
         loaded && <RNImage
-          {...innerProps}
           source={source}
           resizeMode={resizeMode}
           onLoad={onImageLoad}
           onError={onImageError}
-          style={[
-            StyleSheet.absoluteFill,
-            {
-              width: !isCropMode ? '100%' : imageWidth,
-              height: !isCropMode ? '100%' : imageHeight,
-            },
-            {
-              ...(isCropMode && cropModeStyle),
-            },
-          ]}
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            width: isCropMode ? imageWidth : '100%',
+            height: isCropMode ? imageHeight : '100%',
+            ...(isCropMode && cropModeStyle)
+          }}
         />
       }
     </View>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import type { ImageSourcePropType, ImageStyle, StyleProp } from 'react-native'
 import { SvgCssUri, WithLocalSvg } from 'react-native-svg/css'
 interface SvgProps {
@@ -9,12 +9,14 @@ interface SvgProps {
   height?: string | number
 }
 
-const Svg = ({ local = false, src, style, width, height }: SvgProps): React.JSX.Element => {
-  return local ? (
+const Svg = ({ local = false, src, style, width, height }: SvgProps): JSX.Element => {
+  return local
+    ? (
     <WithLocalSvg style={style} asset={src as ImageSourcePropType} width={width} height={height} />
-  ) : (
+      )
+    : (
     <SvgCssUri style={style} uri={src as string} width={width} height={height} />
-  )
+      )
 }
 
 export default Svg

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

@@ -37,11 +37,10 @@
  * ✘ bind:keyboardcompositionend
  * ✘ bind:onkeyboardheightchange
  */
-import React, { forwardRef, useMemo, useRef, useState } from 'react'
+import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react'
 import {
   KeyboardTypeOptions,
   Platform,
-  StyleProp,
   TextInput,
   TextStyle,
   ViewStyle,
@@ -55,9 +54,11 @@ import {
   TextInputChangeEventData,
   TextInputSubmitEditingEventData
 } from 'react-native'
-import { parseInlineStyle, useUpdateEffect } from './utils'
+import { warn } from '@mpxjs/utils'
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import { FormContext, FormFieldValue } from './context'
 
 type InputStyle = Omit<
   TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>,
@@ -72,8 +73,10 @@ type InputStyle = Omit<
 >
 
 type Type = 'text' | 'number' | 'idcard' | 'digit'
+
 export interface InputProps {
-  style?: StyleProp<InputStyle>
+  name?: string
+  style?: InputStyle & Record<string, any>
   value?: string
   type?: Type
   password?: boolean
@@ -90,6 +93,11 @@ export interface InputProps {
   'selection-end'?: number
   'placeholder-style'?: string
   'enable-offset'?: boolean,
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void
   bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
   bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
@@ -112,13 +120,13 @@ const keyboardTypeMap: Record<Type, string> = {
   digit:
     Platform.select({
       ios: 'decimal-pad',
-      android: 'numeric',
-    }) || '',
+      android: 'numeric'
+    }) || ''
 }
 
-const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): React.JSX.Element => {
+const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
   const {
-    style = [],
+    style = {},
     type = 'text',
     value,
     password,
@@ -133,7 +141,11 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'cursor-color': cursorColor,
     'selection-start': selectionStart = -1,
     'selection-end': selectionEnd = -1,
-    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     bindinput,
     bindfocus,
     bindblur,
@@ -142,24 +154,54 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     // private
     multiline,
     'auto-height': autoHeight,
-    bindlinechange,
+    bindlinechange
   } = props
 
-  const { nodeRef } = useNodesRef(props, ref)
+  const formContext = useContext(FormContext)
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
 
   const keyboardType = keyboardTypeMap[type]
   const defaultValue = type === 'number' && value ? value + '' : value
   const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color
   const textAlignVertical = multiline ? 'top' : 'auto'
 
-  const layoutRef = useRef({})
   const tmpValue = useRef<string>()
   const cursorIndex = useRef<number>(0)
   const lineCount = useRef<number>(0)
 
-  const [inputValue, setInputValue] = useState()
+  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 {
+    hasSelfPercent,
+    normalStyle,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { nodeRef } = useNodesRef(props, ref)
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+  useEffect(() => {
+    if (inputValue !== value) {
+      setInputValue(value)
+    }
+  }, [value])
+
   const selection = useMemo(() => {
     if (selectionStart >= 0 && selectionEnd >= 0) {
       return { start: selectionStart, end: selectionEnd }
@@ -172,7 +214,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     if (!bindinput && !bindblur) return
     const {
       range: { start, end },
-      text,
+      text
     } = nativeEvent
     cursorIndex.current = start < end ? start : start + text.length
   }
@@ -187,7 +229,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         {
           detail: {
             value: evt.nativeEvent.text,
-            cursor: cursorIndex.current,
+            cursor: cursorIndex.current
           },
           layoutRef
         },
@@ -197,8 +239,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     if (typeof result === 'string') {
       tmpValue.current = result
       setInputValue(result)
-    } else if (inputValue) {
-      setInputValue(undefined)
+    } else {
+      setInputValue(tmpValue.current)
     }
   }
 
@@ -210,7 +252,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           evt,
           {
             detail: {
-              value: tmpValue.current || '',
+              value: tmpValue.current || ''
             },
             layoutRef
           },
@@ -228,7 +270,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           {
             detail: {
               value: tmpValue.current || '',
-              cursor: cursorIndex.current,
+              cursor: cursorIndex.current
             },
             layoutRef
           },
@@ -246,7 +288,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           evt,
           {
             detail: {
-              value: tmpValue.current || '',
+              value: tmpValue.current || ''
             },
             layoutRef
           },
@@ -264,7 +306,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           evt,
           {
             detail: {
-              value: tmpValue.current || '',
+              value: tmpValue.current || ''
             },
             layoutRef
           },
@@ -288,7 +330,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
               detail: {
                 height,
                 lineHeight,
-                lineCount: lineCount.current,
+                lineCount: lineCount.current
               },
               layoutRef
             },
@@ -308,7 +350,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
           {
             detail: {
               selectionStart: evt.nativeEvent.selection.start,
-              selectionEnd: evt.nativeEvent.selection.end,
+              selectionEnd: evt.nativeEvent.selection.end
             },
             layoutRef
           },
@@ -317,10 +359,20 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       )
   }
 
-  const onLayout = () => {
-    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
+  const resetValue = () => {
+    setInputValue('')
+  }
+
+  const getValue = () => {
+    return inputValue
+  }
+
+  if (formValuesMap) {
+    if (!props.name) {
+      warn('If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(props.name, { getValue, resetValue })
+    }
   }
 
   useUpdateEffect(() => {
@@ -332,18 +384,24 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       : (nodeRef.current as TextInput)?.blur()
   }, [focus])
 
+  const composeStyle = { ...normalStyle, ...layoutStyle }
+
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    ...(enableOffset ? { onLayout } : {}),
+    style: {
+      padding: 0,
+      ...composeStyle,
+      ...multiline && autoHeight && {
+        height: Math.max((composeStyle as any)?.minHeight || 35, contentHeight)
+      }
+    },
+    ...layoutProps
   },
-  [
-    'enable-offset'
-  ],
+  [],
   {
     layoutRef
   })
 
-
   return (
     <TextInput
       {...innerProps}
@@ -370,16 +428,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       onSubmitEditing={onSubmitEditing}
       onContentSizeChange={onContentSizeChange}
       onSelectionChange={onSelectionChange}
-      style={[
-        {
-          padding: 0,
-        },
-        style,
-        multiline &&
-          autoHeight && {
-            height: Math.max((style as any)?.minHeight || 35, contentHeight),
-          },
-      ]}
     />
   )
 })

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

@@ -0,0 +1,110 @@
+/**
+ * ✘ for
+ */
+import { JSX, useRef, forwardRef, ReactNode } from 'react'
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native'
+import { noop, warn } from '@mpxjs/utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { LabelContext, LabelContextValue } from './context'
+
+export interface LabelProps {
+  for?: string
+  style?: ViewStyle & 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
+  children: ReactNode
+  bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+}
+
+const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
+  (labelProps, ref): JSX.Element => {
+    const { textProps, innerProps: props = {} } = splitProps(labelProps)
+
+    const {
+      style = {},
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight,
+      bindtap
+    } = props
+
+    const defaultStyle = {
+      flexDirection: 'row'
+    }
+
+    const styleObj = {
+      ...defaultStyle,
+      ...style
+    }
+
+    const {
+      hasSelfPercent,
+      normalStyle,
+      hasVarDec,
+      varContextRef,
+      setWidth,
+      setHeight
+    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+    const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+
+    if (backgroundStyle) {
+      warn('Label does not support background image-related styles!')
+    }
+
+    const contextRef: LabelContextValue = useRef({
+      triggerChange: noop
+    })
+
+    const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
+      contextRef.current.triggerChange?.(evt)
+    }
+
+    const innerProps = useInnerProps(
+      props,
+      {
+        ref: nodeRef,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
+        bindtap: onTap
+      },
+      [],
+      {
+        layoutRef
+      }
+    )
+
+    return <View {...innerProps}>
+      <LabelContext.Provider value={contextRef}>
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+        }
+      </LabelContext.Provider>
+    </View>
+  }
+)
+
+Label.displayName = 'mpx-label'
+
+export default Label