@mpxjs/webpack-plugin 2.10.1 → 2.10.3

package/lib/dependencies/RecordPageConfigsMapDependency.js

@@ -0,0 +1,45 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+const isEmptyObject = require('../utils/is-empty-object')
+
+class RecordPageConfigMapDependency extends NullDependency {
+  constructor (resourcePath, jsonObj) {
+    super()
+    this.resourcePath = resourcePath || ''
+    this.jsonObj = jsonObj || {}
+  }
+
+  get type () {
+    return 'mpx record pageConfigsMap'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const pagePath = mpx.pagesMap[this.resourcePath]
+    if (pagePath && !isEmptyObject(this.jsonObj)) mpx.pageConfigsMap[pagePath] = this.jsonObj
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.resourcePath)
+    write(this.jsonObj)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.pagePath = read()
+    this.jsonObj = read()
+    super.deserialize(context)
+  }
+}
+
+RecordPageConfigMapDependency.Template = class RecordPageConfigMapDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RecordPageConfigMapDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordPageConfigMapDependency')
+
+module.exports = RecordPageConfigMapDependency

package/lib/index.js

@@ -34,6 +34,7 @@ const FixDescriptionInfoPlugin = require('./resolver/FixDescriptionInfoPlugin')
 // const RequireHeaderDependency = require('webpack/lib/dependencies/RequireHeaderDependency')
 // const RemovedModuleDependency = require('./dependencies/RemovedModuleDependency')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
+const RecordPageConfigMapDependency = require('./dependencies/RecordPageConfigsMapDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 const RecordGlobalComponentsDependency = require('./dependencies/RecordGlobalComponentsDependency')
 const RecordIndependentDependency = require('./dependencies/RecordIndependentDependency')
@@ -617,6 +618,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RemoveEntryDependency, new NullFactory())
       compilation.dependencyTemplates.set(RemoveEntryDependency, new RemoveEntryDependency.Template())
 
+      compilation.dependencyFactories.set(RecordPageConfigMapDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordPageConfigMapDependency, new RecordPageConfigMapDependency.Template())
+
       compilation.dependencyFactories.set(RecordResourceMapDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordResourceMapDependency, new RecordResourceMapDependency.Template())
 
@@ -656,6 +660,8 @@ class MpxWebpackPlugin {
           __vfs,
           // app信息，便于获取appName
           appInfo: {},
+          // pageConfig信息
+          pageConfigsMap: {},
           // pages全局记录，无需区分主包分包
           pagesMap: {},
           // 组件资源记录，依照所属包进行记录
@@ -1598,7 +1604,7 @@ class MpxWebpackPlugin {
         name: 'MpxWebpackPlugin',
         stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
       }, () => {
-        if (isWeb(mpx.mode) || isReact(mpx.mode)) return
+        if (isWeb(mpx.mode)) return
 
         if (this.options.generateBuildMap) {
           const pagesMap = compilation.__mpx__.pagesMap
@@ -1637,6 +1643,22 @@ class MpxWebpackPlugin {
 
           const originalSource = compilation.assets[chunkFile]
           const source = new ConcatSource()
+
+          if (isReact(mpx.mode)) {
+            // 添加 @refresh reset 注释用于在 React HMR 时刷新组件
+            source.add('/* @refresh reset */\n')
+            // 注入页面的配置，供screen前置设置导航情况
+            if (isRuntime) {
+              source.add('// inject pageconfigmap for screen\n' +
+                'var context = (function() { return this })() || Function("return this")();\n')
+              source.add(`context.__mpxPageConfigsMap = ${JSON.stringify(mpx.pageConfigsMap)};\n`)
+            }
+            source.add(originalSource)
+            compilation.assets[chunkFile] = source
+            processedChunk.add(chunk)
+            return
+          }
+
           source.add(`\nvar ${globalObject} = {};\n`)
 
           relativeChunks.forEach((relativeChunk, index) => {

package/lib/platform/style/wx/index.js

@@ -47,7 +47,7 @@ module.exports = function getSpec ({ warn, error }) {
     'flex-wrap': ['wrap', 'nowrap', 'wrap-reverse'],
     'pointer-events': ['auto', 'box-none', 'box-only', 'none'],
     'vertical-align': ['auto', 'top', 'bottom', 'center'],
-    position: ['relative', 'absolute'],
+    position: ['relative', 'absolute', 'fixed'],
     'font-variant': ['small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums'],
     'text-align': ['left', 'right', 'center', 'justify'],
     'font-style': ['normal', 'italic'],
@@ -395,22 +395,22 @@ module.exports = function getSpec ({ warn, error }) {
           case 'skewY':
           case 'perspective':
             // 单个值处理
+            // rotate 处理成 rotateZ
+            key = key === 'rotate' ? 'rotateZ' : key
             transform.push({ [key]: val })
             break
           case 'matrix':
-          case 'matrix3d':
             transform.push({ [key]: parseValues(val, ',').map(val => +val) })
             break
           case 'translate':
           case 'scale':
           case 'skew':
-          case 'rotate3d': // x y z angle
           case 'translate3d': // x y 支持 z不支持
           case 'scale3d': // x y 支持 z不支持
           {
             // 2 个以上的值处理
             key = key.replace('3d', '')
-            const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+            const vals = parseValues(val, ',').splice(0, 3)
             // scale(.5) === scaleX(.5) scaleY(.5)
             if (vals.length === 1 && key === 'scale') {
               vals.push(vals[0])
@@ -426,6 +426,8 @@ module.exports = function getSpec ({ warn, error }) {
           }
           case 'translateZ':
           case 'scaleZ':
+          case 'rotate3d': // x y z angle
+          case 'matrix3d':
           default:
             // 不支持的属性处理
             unsupportedPropError({ prop, value, selector }, { mode })

package/lib/platform/template/wx/component-config/input.js

@@ -92,7 +92,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(placeholder-style|placeholder-class|always-embed|hold-keyboard|safe-password-.+)$/,
+        test: /^(always-embed|hold-keyboard|safe-password-.+)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

package/lib/platform/template/wx/component-config/textarea.js

@@ -78,7 +78,7 @@ module.exports = function ({ print }) {
         }
       },
       {
-        test: /^(placeholder-style|placeholder-class|always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        test: /^(always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

package/lib/platform/template/wx/component-config/view.js

@@ -25,11 +25,11 @@ module.exports = function ({ print }) {
     },
     ios (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-view'
+      return el.isSimple ? 'mpx-simple-view' : 'mpx-view'
     },
     android (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-view'
+      return el.isSimple ? 'mpx-simple-view' : 'mpx-view'
     },
     qa (tag) {
       return 'div'
@@ -47,6 +47,16 @@ module.exports = function ({ print }) {
         test: /^(hover-stop-propagation)$/,
         android: androidPropLog,
         ios: iosPropLog
+      }, {
+        test: /^(is-simple)$/,
+        android (prop, { el }) {
+          el.isSimple = true
+          return false
+        },
+        ios (prop, { el }) {
+          el.isSimple = true
+          return false
+        }
       }
     ],
     // 组件事件中的差异部分

package/lib/react/index.js

@@ -85,7 +85,6 @@ module.exports = function ({
         srcMode,
         moduleId,
         isProduction,
-        componentGenerics,
         jsonConfig: jsonRes.jsonObj,
         outputPath: queryObj.outputPath || '',
         builtInComponentsMap: templateRes.builtInComponentsMap,

package/lib/react/processJSON.js

@@ -12,6 +12,7 @@ const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
+const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
 
 module.exports = function (jsonContent, {
   loaderContext,
@@ -79,7 +80,6 @@ module.exports = function (jsonContent, {
     })
   }
 
-  const isApp = ctorType === 'app'
   if (!jsonContent) {
     return callback()
   }
@@ -99,7 +99,7 @@ module.exports = function (jsonContent, {
       }
     }
 
-    if (!isApp) {
+    if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
     }
 
@@ -112,6 +112,17 @@ module.exports = function (jsonContent, {
     return callback(e)
   }
 
+  if (ctorType === 'page') {
+    const keysToExtract = ['navigationStyle']
+    const configObj = {}
+    keysToExtract.forEach(key => {
+      if (jsonObj[key]) {
+        configObj[key] = jsonObj[key]
+      }
+    })
+    loaderContext._module.addPresentationalDependency(new RecordPageConfigsMapDependency(parseRequest(loaderContext.resource).resourcePath, configObj))
+  }
+
   const fs = loaderContext._compiler.inputFileSystem
 
   const defaultTabbar = {

package/lib/react/processScript.js

@@ -12,9 +12,12 @@ module.exports = function (script, {
   outputPath,
   builtInComponentsMap,
   localComponentsMap,
-  localPagesMap
+  localPagesMap,
+  componentGenerics,
+  genericsInfo
 }, callback) {
   let scriptSrcMode = srcMode
+  const mode = loaderContext.getMpx().mode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
@@ -26,7 +29,7 @@ module.exports = function (script, {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+${mode === 'ios' ? "import { createNativeStackNavigator as createStackNavigator } from '@react-navigation/native-stack'" : "import { createStackNavigator } from '@react-navigation/stack'"}
 import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
 import { useHeaderHeight } from '@react-navigation/elements';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -34,7 +37,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createStackNavigator: createNativeStackNavigator,
+  createStackNavigator: createStackNavigator,
   useHeaderHeight: useHeaderHeight,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
@@ -67,7 +70,7 @@ global.__navigationHelper = {
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

package/lib/react/processTemplate.js

@@ -5,6 +5,8 @@ const loaderUtils = require('loader-utils')
 const templateCompiler = require('../template-compiler/compiler')
 const genNode = require('../template-compiler/gen-node-react')
 const bindThis = require('../template-compiler/bind-this')
+const isEmptyObject = require('../utils/is-empty-object')
+const dash2hump = require('../utils/hump-dash').dash2hump
 
 module.exports = function (template, {
   loaderContext,
@@ -75,16 +77,15 @@ module.exports = function (template, {
         defs,
         decodeHTMLText,
         externalClasses,
-        // todo 后续输出web也采用mpx的scoped处理
         hasScoped: false,
         moduleId,
         filePath: rawResourcePath,
         // react中模版i18n不需要特殊处理
         i18n: null,
         checkUsingComponents,
-        // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
+        // rn模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
         globalComponents: [],
-        // web模式下实现抽象组件
+        // rn模式下实现抽象组件
         componentGenerics,
         hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
         forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
@@ -148,6 +149,20 @@ ${e.stack}`)
       if (meta.options) {
         output += `global.currentInject.injectOptions = ${JSON.stringify(meta.options)};\n`
       }
+      if (!isEmptyObject(componentGenerics)) {
+        output += 'global.currentInject.injectProperties = {\n'
+        output += '  generichash: String,\n'
+
+        Object.keys(componentGenerics).forEach(genericName => {
+          const defaultValue = componentGenerics[genericName].default
+          if (defaultValue) {
+            output += `  generic${dash2hump(genericName)}: { type: String, value: '${genericName}default' },\n`
+          } else {
+             output += `  generic${dash2hump(genericName)}: String,\n`
+          }
+        })
+        output += '}\n'
+      }
     }
   }
 

package/lib/react/script-helper.js

@@ -89,7 +89,8 @@ function buildGlobalParams ({
   componentsMap,
   pagesMap,
   firstPage,
-  outputPath
+  outputPath,
+  genericsInfo
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -115,9 +116,22 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
       delete pageConfig.usingComponents
       content += `global.currentInject.pageConfig = ${JSON.stringify(pageConfig)}\n`
     }
-    content += `global.currentInject.getComponents = function () {
-  return ${shallowStringify(componentsMap)}
-}\n`
+
+    content += `
+
+    function getComponents() {
+      return ${shallowStringify(componentsMap)}
+    }
+
+    global.currentInject.getComponents = getComponents\n`
+    if (genericsInfo) {
+      content += `
+        const genericHash = ${JSON.stringify(genericsInfo.hash)}\n
+        global.__mpxGenericsMap[genericHash] = function (name) {
+          return getComponents()[name]
+        }
+      \n`
+    }
     if (ctorType === 'component') {
       content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`
     }

package/lib/runtime/components/react/context.ts

@@ -5,10 +5,9 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
-export type KeyboardAvoidContextValue = MutableRefObject<{
-  cursorSpacing: number
-  ref: MutableRefObject<any>
-}>
+export type KeyboardAvoidContextValue = MutableRefObject<
+  { cursorSpacing: number, ref: MutableRefObject<any> } | null
+>
 
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -272,7 +272,7 @@ const Image = forwardRef((props, ref) => {
         uri: src,
         onLayout: onSvgLoad,
         onError: binderror && onSvgError,
-        style: extendObject({ transformOrigin: 'top left' }, modeStyle)
+        style: extendObject({ transformOrigin: 'left top' }, modeStyle)
     }));
     const BaseImage = renderImage(extendObject({
         source: { uri: src },
@@ -280,7 +280,7 @@ const Image = forwardRef((props, ref) => {
         onLoad: bindload && onImageLoad,
         onError: binderror && onImageError,
         style: extendObject({
-            transformOrigin: 'top left',
+            transformOrigin: 'left top',
             width: isCropMode ? imageWidth : '100%',
             height: isCropMode ? imageHeight : '100%'
         }, isCropMode ? modeStyle : {})

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -4,7 +4,7 @@
  * ✔ password
  * ✔ placeholder
  * - placeholder-style: Only support color.
- * ✘ placeholder-class
+ * - placeholder-class: Only support color.
  * ✔ disabled
  * ✔ maxlength
  * ✔ cursor-spacing
@@ -40,7 +40,7 @@
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { Platform, TextInput } 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 from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
@@ -54,7 +54,7 @@ const keyboardTypeMap = {
     }) || ''
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
@@ -76,7 +76,6 @@ const Input = forwardRef((props, ref) => {
     };
     const keyboardType = keyboardTypeMap[type];
     const defaultValue = parseValue(value);
-    const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
     const textAlignVertical = multiline ? 'top' : 'auto';
     const tmpValue = useRef(defaultValue);
     const cursorIndex = useRef(0);
@@ -85,7 +84,7 @@ const Input = forwardRef((props, ref) => {
     const [contentHeight, setContentHeight] = useState(0);
     const [selection, setSelection] = useState({ start: -1, end: -1 });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
-        ? { minHeight: Math.max(style?.minHeight || 35, contentHeight) }
+        ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
     const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
@@ -106,44 +105,54 @@ const Input = forwardRef((props, ref) => {
             setSelection({ start: selectionStart, end: selectionEnd });
         }
     }, [cursor, selectionStart, selectionEnd]);
-    const onTextInput = ({ nativeEvent }) => {
-        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, prevValue, curValue) => {
+        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) => {
-        tmpValue.current = evt.nativeEvent.text;
-        if (!bindinput)
+        const { text, selection } = evt.nativeEvent;
+        // will trigger twice on the Android platformg, prevent the second trigger
+        if (tmpValue.current === text)
             return;
-        const result = bindinput(getCustomEvent('input', evt, {
-            detail: {
-                value: evt.nativeEvent.text,
-                cursor: cursorIndex.current
-            },
-            layoutRef
-        }, props));
-        if (typeof result === 'string') {
-            tmpValue.current = result;
-            setInputValue(result);
+        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
+            }, props));
+            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) => {
+    const onFocus = (evt) => {
         setKeyboardAvoidContext();
         bindfocus && bindfocus(getCustomEvent('focus', evt, {
             detail: {
@@ -152,7 +161,7 @@ const Input = forwardRef((props, ref) => {
             layoutRef
         }, props));
     };
-    const onInputBlur = (evt) => {
+    const onBlur = (evt) => {
         bindblur && bindblur(getCustomEvent('blur', evt, {
             detail: {
                 value: tmpValue.current || '',
@@ -161,15 +170,6 @@ const Input = forwardRef((props, ref) => {
             layoutRef
         }, props));
     };
-    const onKeyPress = (evt) => {
-        evt.nativeEvent.key === 'Enter' &&
-            bindconfirm(getCustomEvent('confirm', evt, {
-                detail: {
-                    value: tmpValue.current || ''
-                },
-                layoutRef
-            }, props));
-    };
     const onSubmitEditing = (evt) => {
         bindconfirm(getCustomEvent('confirm', evt, {
             detail: {
@@ -179,11 +179,14 @@ const Input = forwardRef((props, ref) => {
         }, props));
     };
     const onSelectionChange = (evt) => {
-        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
         }, props));
@@ -252,24 +255,21 @@ const Input = forwardRef((props, ref) => {
         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
-    }, layoutProps, {
-        onTouchStart: onInputTouchStart,
-        onFocus: onInputFocus,
-        onBlur: onInputBlur,
-        onKeyPress: bindconfirm && onKeyPress,
-        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: onSelectionChange,
-        onTextInput: onTextInput,
-        onChange: onChange,
-        onContentSizeChange: onContentSizeChange
+    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
+        onTouchStart,
+        onFocus,
+        onBlur,
+        onChange,
+        onSelectionChange,
+        onContentSizeChange,
+        onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
     }), [
         'type',
         'password',