@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

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 })
 
@@ -246,44 +254,41 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onInputFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    bindfocus &&
-      bindfocus(
-        getCustomEvent(
-          'focus',
-          evt,
-          {
-            detail: {
-              value: tmpValue.current || ''
-            },
-            layoutRef
+    bindfocus!(
+      getCustomEvent(
+        'focus',
+        evt,
+        {
+          detail: {
+            value: tmpValue.current || ''
           },
-          props
-        )
+          layoutRef
+        },
+        props
       )
+    )
   }
 
   const onInputBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    bindblur &&
-      bindblur(
-        getCustomEvent(
-          'blur',
-          evt,
-          {
-            detail: {
-              value: tmpValue.current || '',
-              cursor: cursorIndex.current
-            },
-            layoutRef
+    bindblur!(
+      getCustomEvent(
+        'blur',
+        evt,
+        {
+          detail: {
+            value: tmpValue.current || '',
+            cursor: cursorIndex.current
           },
-          props
-        )
+          layoutRef
+        },
+        props
       )
+    )
   }
 
   const onKeyPress = (evt: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-    bindconfirm &&
-      evt.nativeEvent.key === 'Enter' &&
-      bindconfirm(
+    evt.nativeEvent.key === 'Enter' &&
+      bindconfirm!(
         getCustomEvent(
           'confirm',
           evt,
@@ -299,21 +304,36 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onSubmitEditing = (evt: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
-    bindconfirm &&
-      multiline &&
-      bindconfirm(
-        getCustomEvent(
-          'confirm',
-          evt,
-          {
-            detail: {
-              value: tmpValue.current || ''
-            },
-            layoutRef
+    bindconfirm!(
+      getCustomEvent(
+        'confirm',
+        evt,
+        {
+          detail: {
+            value: tmpValue.current || ''
           },
-          props
-        )
+          layoutRef
+        },
+        props
       )
+    )
+  }
+
+  const onSelectionChange = (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+    bindselectionchange!(
+      getCustomEvent(
+        'selectionchange',
+        evt,
+        {
+          detail: {
+            selectionStart: evt.nativeEvent.selection.start,
+            selectionEnd: evt.nativeEvent.selection.end
+          },
+          layoutRef
+        },
+        props
+      )
+    )
   }
 
   const onContentSizeChange = (evt: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
@@ -342,24 +362,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }
 
-  const onSelectionChange = (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-    bindselectionchange &&
-      bindselectionchange(
-        getCustomEvent(
-          'selectionchange',
-          evt,
-          {
-            detail: {
-              selectionStart: evt.nativeEvent.selection.start,
-              selectionEnd: evt.nativeEvent.selection.end
-            },
-            layoutRef
-          },
-          props
-        )
-      )
-  }
-
   const resetValue = () => {
     setInputValue('')
   }
@@ -376,6 +378,18 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }
 
+  useEffect(() => {
+    return () => {
+      if (formValuesMap && props.name) {
+        formValuesMap.delete(props.name)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    setKeyboardAvoidEnabled?.(adjustPosition)
+  }, [adjustPosition])
+
   useUpdateEffect(() => {
     if (!nodeRef?.current) {
       return
@@ -385,54 +399,62 @@ 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
-  },
-  [],
-  {
-    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}
-      onFocus={onInputFocus}
-      onBlur={onInputBlur}
-      onKeyPress={onKeyPress}
-      onSubmitEditing={onSubmitEditing}
-      onContentSizeChange={onContentSizeChange}
-      onSelectionChange={onSelectionChange}
-    />
+    ),
+    [
+      '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 = 'mpx-input'
+Input.displayName = 'MpxInput'
 
 export default Input

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

@@ -1,12 +1,12 @@
 /**
  * ✘ for
  */
-import { JSX, useRef, forwardRef, ReactNode } from 'react'
+import { JSX, useRef, forwardRef, ReactNode, useCallback, createElement } 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 { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { LabelContext, LabelContextValue } from './context'
 
 export interface LabelProps {
@@ -25,6 +25,7 @@ export interface LabelProps {
 const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
   (labelProps, ref): JSX.Element => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps)
+    const propsRef = useRef<any>({})
 
     const {
       style = {},
@@ -32,18 +33,16 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       'external-var-context': externalVarContext,
       'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
-      'parent-height': parentHeight,
-      bindtap
+      'parent-height': parentHeight
     } = props
 
+    propsRef.current = props
+
     const defaultStyle = {
       flexDirection: 'row'
     }
 
-    const styleObj = {
-      ...defaultStyle,
-      ...style
-    }
+    const styleObj = extendObject({}, defaultStyle, style)
 
     const {
       hasSelfPercent,
@@ -55,11 +54,11 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     } = 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 { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
     if (backgroundStyle) {
       warn('Label does not support background image-related styles!')
@@ -69,43 +68,46 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       triggerChange: noop
     })
 
-    const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
-      contextRef.current.triggerChange?.(evt)
-    }
+    const onTap = useCallback((evt: NativeSyntheticEvent<TouchEvent>) => {
+      const { bindtap } = propsRef.current
+      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }))
+      contextRef.current.triggerChange(evt)
+    }, [])
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap
-      },
+      extendObject(
+        {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
+        },
+        layoutProps,
+        {
+          bindtap: onTap
+        }
+      ),
       [],
       {
         layoutRef
       }
     )
 
-    return <View {...innerProps}>
-      <LabelContext.Provider value={contextRef}>
+    return createElement(View, innerProps, createElement(
+      LabelContext.Provider,
+      { value: contextRef },
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
         }
-      </LabelContext.Provider>
-    </View>
+      )
+    ))
   }
 )
 
-Label.displayName = 'mpx-label'
+Label.displayName = 'MpxLabel'
 
 export default Label

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

@@ -2,12 +2,12 @@
  * ✘ scale-area
  */
 
-import { View, LayoutChangeEvent } from 'react-native'
-import { JSX, useState, useEffect, forwardRef, ReactNode, useRef } from 'react'
+import { View } from 'react-native'
+import { JSX, forwardRef, ReactNode, useRef, useMemo, createElement } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, wrapChildren, useLayout } from './utils'
+import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
 
 interface MovableAreaProps {
   style?: Record<string, any>;
@@ -23,14 +23,7 @@ interface MovableAreaProps {
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
-  const [areaWidth, setAreaWidth] = useState(0)
-  const [areaHeight, setAreaHeight] = useState(0)
-
-  useEffect(() => {
-    setAreaWidth(width)
-    setAreaHeight(height)
-  }, [width, height])
+  const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
 
   const {
     hasSelfPercent,
@@ -42,41 +35,35 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const movableViewRef = useRef(null)
-  useNodesRef(props, ref, movableViewRef)
+  useNodesRef(props, ref, movableViewRef, {
+    style: normalStyle
+  })
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    const { width = 10, height = 10 } = e.nativeEvent.layout
-    setAreaWidth(width)
-    setAreaHeight(height)
-  }
+  const contextValue = useMemo(() => ({
+    height: normalStyle.height || 10,
+    width: normalStyle.width || 10
+  }), [normalStyle.width, normalStyle.height])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout })
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 
-  const innerProps = useInnerProps(props, {
-    style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
-    ref: movableViewRef,
-    ...layoutProps
-  }, [], { layoutRef })
+  const innerProps = useInnerProps(props, extendObject({
+    style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+    ref: movableViewRef
+  }, layoutProps), [], { layoutRef })
 
-  return (
-    <MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
-      <View
-        {...innerProps}
-      >
+  return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
+    View,
+    innerProps,
+    wrapChildren(
+      props,
       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current
-          }
-        )
+        hasVarDec,
+        varContext: varContextRef.current
       }
-      </View>
-    </MovableAreaContext.Provider>
-  )
+    )
+  ))
 })
 
-_MovableArea.displayName = 'mpx-movable-area'
+_MovableArea.displayName = 'MpxMovableArea'
 
 export default _MovableArea