@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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,7 +9,7 @@ interface SvgProps {
   height?: string | number
 }
 
-const Svg = ({ local = false, src, style, width, height }: SvgProps): React.JSX.Element => {
+const Svg = ({ local = false, src, style, width, height }: SvgProps): JSX.Element => {
   return local ? (
     <WithLocalSvg style={style} asset={src as ImageSourcePropType} width={width} height={height} />
   ) : (

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,10 @@ import {
   TextInputChangeEventData,
   TextInputSubmitEditingEventData
 } from 'react-native'
-import { parseInlineStyle, useUpdateEffect } from './utils'
+import { parseInlineStyle, useUpdateEffect, throwReactWarning } 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'>,
@@ -73,7 +73,8 @@ 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
@@ -116,9 +117,9 @@ const keyboardTypeMap: Record<Type, string> = {
     }) || '',
 }
 
-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,
@@ -145,6 +146,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     bindlinechange,
   } = props
 
+  const formContext = useContext(FormContext)
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
   const { nodeRef } = useNodesRef(props, ref)
 
   const keyboardType = keyboardTypeMap[type]
@@ -157,9 +166,15 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   const cursorIndex = useRef<number>(0)
   const lineCount = useRef<number>(0)
 
-  const [inputValue, setInputValue] = useState()
+  const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
 
+  useEffect(() => {
+    if (inputValue !== value) {
+      setInputValue(value)
+    }
+  }, [value])
+
   const selection = useMemo(() => {
     if (selectionStart >= 0 && selectionEnd >= 0) {
       return { start: selectionStart, end: selectionEnd }
@@ -197,8 +212,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)
     }
   }
 
@@ -323,6 +338,22 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     })
   }
 
+  const resetValue = () => {
+    setInputValue('')
+  }
+
+  const getValue = () => {
+    return inputValue
+  }
+
+  if (formValuesMap) {
+    if (!props.name) {
+      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(props.name, { getValue, resetValue })
+    }
+  }
+
   useUpdateEffect(() => {
     if (!nodeRef?.current) {
       return
@@ -336,13 +367,12 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     ref: nodeRef,
     ...(enableOffset ? { onLayout } : {}),
   },
-  [
-    'enable-offset'
-  ],
-  {
-    layoutRef
-  })
-
+    [
+      'enable-offset'
+    ],
+    {
+      layoutRef
+    })
 
   return (
     <TextInput
@@ -370,16 +400,14 @@ 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),
-          },
-      ]}
+      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,115 @@
+/**
+ * ✘ for
+ */
+import { JSX, useRef, forwardRef, ReactNode } from 'react'
+import {
+  View,
+  Text,
+  ViewStyle,
+  NativeSyntheticEvent,
+  TextStyle,
+} from 'react-native'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils'
+import { LabelContext, LabelContextValue } from './context'
+
+export interface LabelProps {
+  for?: string
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  children: ReactNode
+  bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+}
+
+const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
+  (props, ref): JSX.Element => {
+    const {
+      style = {},
+      'enable-offset': enableOffset,
+      children,
+      bindtap
+    } = props
+
+    const { textStyle, imageStyle, innerStyle } = splitStyle(style)
+
+    if (imageStyle) {
+      throwReactWarning('[Mpx runtime warn]: Label does not support background image-related styles!')
+    }
+
+    const defaultStyle = {
+      flexDirection: 'row',
+    }
+
+    const contextRef: LabelContextValue = useRef({
+      triggerChange: () => { }
+    })
+
+    const layoutRef = useRef({})
+
+    const { nodeRef } = useNodesRef(props, ref, {
+      defaultStyle
+    })
+
+    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 onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
+      contextRef.current.triggerChange?.(evt)
+    }
+
+    const wrapChildren = (
+      children: ReactNode,
+      textStyle?: TextStyle
+    ) => {
+      const { textProps } = splitProps(props)
+
+      if (every(children, (child) => isText(child))) {
+        if (textStyle || textProps) {
+          children = <Text key='labelTextWrap' style={textStyle || {}} {...(textProps || {})}>{children}</Text>
+        }
+      } else {
+        if (textStyle) throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Label is Text node!')
+      }
+
+      return children
+    }
+
+    const innerProps = useInnerProps(
+      props,
+      {
+        ref: nodeRef,
+        style: { ...defaultStyle, ...innerStyle },
+        bindtap: onTap,
+        ...(enableOffset ? { onLayout } : {})
+      },
+      ['enable-offset'],
+      {
+        layoutRef
+      }
+    )
+
+    return <View {...innerProps}>
+      <LabelContext.Provider value={contextRef}>
+        {wrapChildren(children, textStyle)}
+      </LabelContext.Provider>
+    </View>
+  }
+)
+
+Label.displayName = 'mpx-label'
+
+export default Label

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -0,0 +1,67 @@
+/**
+ * ✘ scale-area
+ */
+
+import { View, LayoutChangeEvent } from 'react-native'
+import { JSX, useState, useEffect, useRef, forwardRef, ReactNode } from 'react'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import useInnerProps from './getInnerListeners'
+import { MovableAreaContext } from './context'
+
+interface MovableAreaProps {
+  style?: Record<string, any>;
+  children: ReactNode;
+  width?: number;
+  height?: number;
+}
+
+const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
+  const { children, style = {}, width = 10, height = 10 } = props;
+  const [areaWidth, setAreaWidth] = useState(0);
+  const [areaHeight, setAreaHeight] = useState(0);
+
+  const layoutRef = useRef<any>({})
+
+  useEffect(() => {
+    setAreaWidth(width)
+    setAreaHeight(height)
+  }, [width, height])
+
+  const { nodeRef: movableViewRef } = useNodesRef(props, ref)
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width = 10, height = 10 } = e.nativeEvent.layout
+    setAreaWidth(width)
+    setAreaHeight(height)
+    movableViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
+      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+    })
+  }
+  const innerProps = useInnerProps(props, {
+    ref: movableViewRef,
+    onLayout
+  }, [
+    'children',
+    'style',
+  ], { layoutRef })
+
+  return (
+    <MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
+      <View
+        {...innerProps}
+        style={{
+          height: areaHeight,
+          width: areaWidth,
+          overflow: 'hidden',
+          ...style
+        }}
+      >
+        {children}
+      </View>
+    </MovableAreaContext.Provider>
+  );
+})
+
+_MovableArea.displayName = 'mpx-movable-area';
+
+export default _MovableArea