@mpxjs/webpack-plugin 2.10.1-beta.7 → 2.10.2

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -89,7 +89,7 @@ const _WebView = forwardRef((props, ref) => {
         return null;
     }
     const _reload = function () {
-        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+        if (__mpx_mode__ === 'android') {
             fristLoaded.current = false; // 安卓需要重新设置
         }
         setPageLoadErr(false);
@@ -133,7 +133,7 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const _onLoadProgress = function (event) {
-        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+        if (__mpx_mode__ === 'android') {
             canGoBack.current = event.nativeEvent.canGoBack;
         }
     };
@@ -251,8 +251,8 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const onLoadEnd = function (res) {
-        res.persist();
-        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+        if (__mpx_mode__ === 'android') {
+            res.persist();
             setTimeout(() => {
                 onLoadEndHandle(res);
             }, 0);

package/lib/runtime/components/react/dist/utils.jsx

@@ -19,7 +19,6 @@ export const HIDDEN_STYLE = {
 };
 export const isIOS = __mpx_mode__ === 'ios';
 export const isAndroid = __mpx_mode__ === 'android';
-export const isHarmony = __mpx_mode__ === 'harmony';
 const varDecRegExp = /^--/;
 const varUseRegExp = /var\(/;
 const unoVarDecRegExp = /^--un-/;
@@ -68,20 +67,6 @@ export const useUpdateEffect = (effect, deps) => {
         }
     }, deps);
 };
-/**
- * 解析行内样式
- * @param inlineStyle
- * @returns
- */
-export const parseInlineStyle = (inlineStyle = '') => {
-    return inlineStyle.split(';').reduce((styleObj, style) => {
-        const [k, v, ...rest] = style.split(':');
-        if (rest.length || !v || !k)
-            return styleObj;
-        const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
-        return extendObject(styleObj, { [key]: global.__formatValue(v.trim()) });
-    }, {});
-};
 export const parseUrl = (cssUrl = '') => {
     if (!cssUrl)
         return;

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

@@ -411,7 +411,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       onLayout: onSvgLoad,
       onError: binderror && onSvgError,
       style: extendObject(
-        { transformOrigin: 'top left' },
+        { transformOrigin: 'left top' },
         modeStyle
       )
     })
@@ -426,7 +426,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
         onError: binderror && onImageError,
         style: extendObject(
           {
-            transformOrigin: 'top left',
+            transformOrigin: 'left top',
             width: isCropMode ? imageWidth : '100%',
             height: isCropMode ? imageHeight : '100%'
           },

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

@@ -4,7 +4,7 @@
  * ✔ password
  * ✔ placeholder
  * - placeholder-style: Only support color.
- * ✘ placeholder-class
+ * - placeholder-class: Only support color.
  * ✔ disabled
  * ✔ maxlength
  * ✔ cursor-spacing
@@ -54,7 +54,7 @@ import {
   TextInputSubmitEditingEventData
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -73,6 +73,8 @@ type InputStyle = Omit<
 
 type Type = 'text' | 'number' | 'idcard' | 'digit'
 
+type ConfirmType = 'done' | 'send' | 'search' | 'next' | 'go' | 'return'
+
 export interface InputProps {
   name?: string
   style?: InputStyle & Record<string, any>
@@ -85,13 +87,13 @@ export interface InputProps {
   maxlength?: number
   'auto-focus'?: boolean
   focus?: boolean
-  'confirm-type'?: 'done' | 'send' | 'search' | 'next' | 'go'
+  'confirm-type'?: ConfirmType
   'confirm-hold'?: boolean
   cursor?: number
   'cursor-color'?: string
   'selection-start'?: number
   'selection-end'?: number
-  'placeholder-style'?: string
+  'placeholder-style'?: { color?: string }
   'enable-offset'?: boolean,
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
@@ -133,7 +135,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     type = 'text',
     value,
     password,
-    'placeholder-style': placeholderStyle,
+    'placeholder-style': placeholderStyle = {},
     disabled,
     maxlength = 140,
     'cursor-spacing': cursorSpacing = 0,
@@ -185,10 +187,9 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const keyboardType = keyboardTypeMap[type]
   const defaultValue = parseValue(value)
-  const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color
   const textAlignVertical = multiline ? 'top' : 'auto'
 
-  const tmpValue = useRef<string | undefined>(defaultValue)
+  const tmpValue = useRef<string>(defaultValue)
   const cursorIndex = useRef<number>(0)
   const lineCount = useRef<number>(0)
 
@@ -200,7 +201,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     { padding: 0, backgroundColor: '#fff' },
     style,
     multiline && autoHeight
-      ? { minHeight: Math.max((style as any)?.minHeight || 35, contentHeight) }
+      ? { height: 'auto', minHeight: Math.max((style as any)?.minHeight || 35, contentHeight) }
       : {}
   )
 
@@ -232,55 +233,64 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }, [cursor, selectionStart, selectionEnd])
 
-  const onTextInput = ({ nativeEvent }: NativeSyntheticEvent<TextInputTextInputEventData>) => {
-    if (!bindinput && !bindblur) return
-    const {
-      range: { start, end },
-      text
-    } = nativeEvent
-    cursorIndex.current = start < end ? start : start + text.length
+  // have not selection on the Android platformg
+  const getCursorIndex = (
+    changedSelection: TextInputSelectionChangeEventData['selection'] | undefined,
+    prevValue: string,
+    curValue: string
+  ) => {
+    if (changedSelection) return changedSelection.end
+    if (!prevValue || !curValue || prevValue.length === curValue.length) return curValue.length
+    const prevStr = prevValue.substring(cursorIndex.current)
+    const curStr = curValue.substring(cursorIndex.current)
+    return cursorIndex.current + curStr.length - prevStr.length
   }
 
-  const onChange = (evt: NativeSyntheticEvent<TextInputChangeEventData>) => {
-    tmpValue.current = evt.nativeEvent.text
-    if (!bindinput) return
-    const result = bindinput(
-      getCustomEvent(
-        'input',
-        evt,
-        {
-          detail: {
-            value: evt.nativeEvent.text,
-            cursor: cursorIndex.current
+  const onChange = (evt: NativeSyntheticEvent<TextInputChangeEventData & TextInputSelectionChangeEventData>) => {
+    const { text, selection } = evt.nativeEvent
+    // will trigger twice on the Android platformg, prevent the second trigger
+    if (tmpValue.current === text) return
+    const index = getCursorIndex(selection, tmpValue.current, text)
+    tmpValue.current = text
+    cursorIndex.current = index
+    if (bindinput) {
+      const result = bindinput(
+        getCustomEvent(
+          'input',
+          evt,
+          {
+            detail: {
+              value: tmpValue.current,
+              cursor: cursorIndex.current
+            },
+            layoutRef
           },
-          layoutRef
-        },
-        props
+          props
+        )
       )
-    )
-    if (typeof result === 'string') {
-      tmpValue.current = result
-      setInputValue(result)
+      if (typeof result === 'string') {
+        tmpValue.current = result
+        setInputValue(result)
+      } else {
+        setInputValue(tmpValue.current)
+      }
     } else {
       setInputValue(tmpValue.current)
     }
   }
 
   const setKeyboardAvoidContext = () => {
-    if (adjustPosition && keyboardAvoid?.current) {
-      extendObject(keyboardAvoid.current, {
-        cursorSpacing,
-        ref: nodeRef
-      })
+    if (adjustPosition && keyboardAvoid) {
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef }
     }
   }
 
-  const onInputTouchStart = () => {
+  const onTouchStart = () => {
     // sometimes the focus event occurs later than the keyboardWillShow event
     setKeyboardAvoidContext()
   }
 
-  const onInputFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
     bindfocus && bindfocus(
       getCustomEvent(
@@ -297,7 +307,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     )
   }
 
-  const onInputBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     bindblur && bindblur(
       getCustomEvent(
         'blur',
@@ -348,15 +358,18 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onSelectionChange = (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-    setSelection(evt.nativeEvent.selection)
+    const { selection } = evt.nativeEvent
+    const { start, end } = selection
+    cursorIndex.current = start
+    setSelection(selection)
     bindselectionchange && bindselectionchange(
       getCustomEvent(
         'selectionchange',
         evt,
         {
           detail: {
-            selectionStart: evt.nativeEvent.selection.start,
-            selectionEnd: evt.nativeEvent.selection.end
+            selectionStart: start,
+            selectionEnd: end
           },
           layoutRef
         },
@@ -444,26 +457,25 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         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,
+        placeholderTextColor: placeholderStyle?.color,
         multiline: !!multiline
       },
+      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType },
       layoutProps,
       {
-        onTouchStart: onInputTouchStart,
-        onFocus: onInputFocus,
-        onBlur: onInputBlur,
+        onTouchStart,
+        onFocus,
+        onBlur,
+        onChange,
+        onSelectionChange,
+        onContentSizeChange,
         onKeyPress: bindconfirm && onKeyPress,
-        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: onSelectionChange,
-        onTextInput: onTextInput,
-        onChange: onChange,
-        onContentSizeChange: onContentSizeChange
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing
       }
     ),
     [

package/lib/runtime/components/react/mpx-picker-view-column.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
 import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
@@ -140,7 +140,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
         y: initialIndex * itemRawH,
         animated: false
       })
-    }, isAndroid || isHarmony ? 200 : 0)
+    }, isAndroid ? 200 : 0)
     activeIndex.current = initialIndex
   }, [itemRawH, maxIndex, initialIndex])
 

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -124,7 +124,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'paging-enabled': pagingEnabled = false,
     'upper-threshold': upperThreshold = 50,
     'lower-threshold': lowerThreshold = 50,
-    'scroll-with-animation': scrollWithAnimation,
+    'scroll-with-animation': scrollWithAnimation = false,
     'refresher-enabled': refresherEnabled,
     'refresher-default-style': refresherDefaultStyle,
     'refresher-background': refresherBackground,
@@ -189,7 +189,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       pagingEnabled,
       fastDeceleration: false,
       decelerationDisabled: false,
-      scrollTo: scrollToOffset
+      scrollTo
     },
     gestureRef: scrollViewRef
   })
@@ -236,6 +236,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     firstScrollIntoViewChange.current = true
   }, [scrollIntoView])
 
+  function scrollTo ({ top = 0, left = 0, animated = false } : { top?: number; left?: number; animated?: boolean }) {
+    scrollToOffset(left, top, animated)
+  }
+
   function handleScrollIntoView () {
     const refs = __selectRef!(`#${scrollIntoView}`, 'node')
     if (!refs) return
@@ -371,9 +375,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       }
     }
   }
-  function scrollToOffset (x = 0, y = 0) {
+  function scrollToOffset (x = 0, y = 0, animated = scrollWithAnimation) {
     if (scrollViewRef.current) {
-      scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation })
+      scrollViewRef.current.scrollTo({ x, y, animated })
       scrollOptions.current.scrollLeft = x
       scrollOptions.current.scrollTop = y
       snapScrollLeft.current = x

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

@@ -3,14 +3,14 @@
  *   Subtraction:
  *     type, password, confirm-hold
  *   Addition:
- *     - confirm-type: Not support `return`
+ *     ✔ confirm-type
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
 import { JSX, forwardRef, createElement } from 'react'
-import { Keyboard, TextInput } from 'react-native'
+import { TextInput } from 'react-native'
 import Input, { InputProps, PrivateInputProps } from './mpx-input'
 import { omit, extendObject } from './utils'
 import { HandlerRef } from './useNodesRef'
@@ -25,7 +25,10 @@ const DEFAULT_TEXTAREA_HEIGHT = 150
 
 const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
   (props, ref): JSX.Element => {
-    const { style = {} } = props
+    const {
+      style = {},
+      'confirm-type': confirmType = 'return'
+    } = props
 
     const restProps = omit(props, [
       'ref',
@@ -33,16 +36,17 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
       'style',
       'password',
       'multiline',
+      'confirm-type',
       'confirm-hold'
     ])
 
     return createElement(
       Input,
       extendObject(restProps, {
-        ref: ref,
+        ref,
+        confirmType,
         multiline: true,
-        confirmType: 'next',
-        bindblur: () => Keyboard.dismiss(),
+        'confirm-type': confirmType,
         style: extendObject({
           width: DEFAULT_TEXTAREA_WIDTH,
           height: DEFAULT_TEXTAREA_HEIGHT

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -140,7 +140,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   const _reload = function () {
-    if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+    if (__mpx_mode__ === 'android') {
       fristLoaded.current = false // 安卓需要重新设置
     }
     setPageLoadErr(false)
@@ -186,7 +186,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   const _onLoadProgress = function (event: WebViewProgressEvent) {
-    if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+    if (__mpx_mode__ === 'android') {
       canGoBack.current = event.nativeEvent.canGoBack
     }
   }
@@ -302,8 +302,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
   }
   const onLoadEnd = function (res: WebViewEvent) {
-    res.persist()
-    if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+    if (__mpx_mode__ === 'android') {
+      res.persist()
       setTimeout(() => {
         onLoadEndHandle(res)
       }, 0)

package/lib/runtime/components/react/types/global.d.ts

@@ -1,4 +1,4 @@
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios'
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
   export function isFunction (fn: unknown): boolean

package/lib/runtime/components/react/utils.tsx

@@ -20,11 +20,10 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
-declare const __mpx_mode__: 'ios' | 'android' | 'harmony'
+declare const __mpx_mode__: 'ios' | 'android'
 
 export const isIOS = __mpx_mode__ === 'ios'
 export const isAndroid = __mpx_mode__ === 'android'
-export const isHarmony = __mpx_mode__ === 'harmony'
 
 const varDecRegExp = /^--/
 const varUseRegExp = /var\(/
@@ -81,20 +80,6 @@ export const useUpdateEffect = (effect: any, deps: any) => {
   }, deps)
 }
 
-/**
- * 解析行内样式
- * @param inlineStyle
- * @returns
- */
-export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
-  return inlineStyle.split(';').reduce((styleObj, style) => {
-    const [k, v, ...rest] = style.split(':')
-    if (rest.length || !v || !k) return styleObj
-    const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
-    return extendObject(styleObj, { [key]: global.__formatValue(v.trim()) })
-  }, {})
-}
-
 export const parseUrl = (cssUrl = '') => {
   if (!cssUrl) return
   const match = cssUrl.match(URL_REGEX)