feat: update props

Author: duom青源

android/src/main/java/com/variabletextinput/VariableTextInputViewManager.java

@@ -4,6 +4,7 @@
 import android.graphics.drawable.Drawable;
 import android.os.Build;
 import android.text.InputFilter;
+import android.text.InputType;
 import android.text.Layout;
 import android.util.Log;
 import android.view.Gravity;
@@ -201,6 +202,24 @@ public void setSelectionColor(EditText view, @Nullable Integer color) {
       view.setHighlightColor(color);
     }
   }
+  @ReactProp(name = "disableFullscreenUI", defaultBoolean = false)
+  public void setDisableFullscreenUI(VariableTextInput view, boolean disableFullscreenUI) {
+    view.setDisableFullscreenUI(disableFullscreenUI);
+  }
+  @ReactProp(name = "returnKeyType")
+  public void setReturnKeyType(VariableTextInput view, String returnKeyType) {
+    view.setReturnKeyType(returnKeyType);
+  }
+  private static final int IME_ACTION_ID = 0x670;
+
+  @ReactProp(name = "returnKeyLabel")
+  public void setReturnKeyLabel(VariableTextInput view, String returnKeyLabel) {
+    view.setImeActionLabel(returnKeyLabel, IME_ACTION_ID);
+  }
+  @ReactProp(name = "submitBehavior")
+  public void setSubmitBehavior(VariableTextInput view, @Nullable String submitBehavior) {
+    view.setSubmitBehavior(submitBehavior);
+  }
   @ReactProp(name = "underlineColorAndroid", customType = "Color")
   public void setUnderlineColor(VariableTextInput view, @Nullable Integer underlineColor) {
     // Drawable.mutate() can sometimes crash due to an AOSP bug:
@@ -235,6 +254,14 @@ public void setUnderlineColor(VariableTextInput view, @Nullable Integer underlin
       }
     }
   }
+  @ReactProp(name = "onSelectionChange", defaultBoolean = false)
+  public void setOnSelectionChange(final VariableTextInput view, boolean onSelectionChange) {
+    if (onSelectionChange) {
+      view.setSelectionWatcher(new ReactSelectionWatcher(view));
+    } else {
+      view.setSelectionWatcher(null);
+    }
+  }
   @ReactProp(name = "keyboardType")
   public void setKeyboardType(VariableTextInput view, String keyboardType) {
     switch (keyboardType) {
@@ -324,6 +351,6 @@ public Map<String, Object> getConstants() {
       "onAndroidChange",
       MapBuilder.of("registrationName", "onAndroidChange")
     ).put( "onAndroidContentSizeChange",
-      MapBuilder.of("registrationName", "onAndroidContentSizeChange")).build();
+      MapBuilder.of("registrationName", "onAndroidContentSizeChange")).put("onAndroidSubmitEditing",MapBuilder.of("registrationName","onAndroidSubmitEditing")).build();
   }
 }

android/src/main/java/com/variabletextinput/view/VariableEditText.java

@@ -3,12 +3,16 @@
 import android.content.Context;
 import android.util.AttributeSet;
 
+import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatEditText;
 
 public class VariableEditText extends AppCompatEditText {
 
   private OnMenuItemCallBack mOnMenuItemCallBack;
 
+  private @Nullable
+  String mSubmitBehavior = null;
+
   public VariableEditText(Context context) {
     super(context);
   }
@@ -20,7 +24,38 @@ public VariableEditText(Context context, AttributeSet attrs) {
   public VariableEditText(Context context, AttributeSet attrs, int defStyleAttr) {
     super(context, attrs, defStyleAttr);
   }
+  public boolean shouldSubmitOnReturn() {
+    String submitBehavior = getSubmitBehavior();
+    boolean shouldSubmit;
+
+    // Default shouldSubmit
+    if (submitBehavior == null) {
+      shouldSubmit = false;
+    } else {
+      shouldSubmit = submitBehavior.equals("submit") || submitBehavior.equals("blurAndSubmit");
+    }
+
+    return shouldSubmit;
+  }
+  public void setSubmitBehavior(String submitBehavior) {
+    mSubmitBehavior = submitBehavior;
+  }
+  public boolean shouldBlurOnReturn() {
+    String submitBehavior = getSubmitBehavior();
+    boolean shouldBlur;
+
+    // Default shouldBlur
+    if (submitBehavior == null) {
+      shouldBlur = false;
+    } else {
+      shouldBlur = submitBehavior.equals("blurAndSubmit");
+    }
 
+    return shouldBlur;
+  }
+  public String getSubmitBehavior() {
+    return mSubmitBehavior;
+  }
   @Override
   public boolean isLayoutRequested() {
     // If we are watching and updating container height based on content size

android/src/main/java/com/variabletextinput/view/VariableTextInput.java

@@ -21,8 +21,10 @@
 import android.util.Log;
 import android.view.ActionMode;
 import android.view.Gravity;
+import android.view.KeyEvent;
 import android.view.Menu;
 import android.view.MenuItem;
+import android.view.inputmethod.EditorInfo;
 import android.view.inputmethod.InputMethodManager;
 import android.widget.LinearLayout;
 import android.widget.ScrollView;
@@ -35,6 +37,7 @@
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.Spacing;
+import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.facebook.react.views.text.ReactFontManager;
 import com.facebook.react.views.view.ReactViewBackgroundDrawable;
@@ -66,6 +69,8 @@ public class VariableTextInput extends LinearLayout {
   private SpannableString mSpannableString;
   private Editable mEditable;
   private ReactViewBackgroundDrawable reactViewBackgroundDrawable;
+  private @Nullable String mReturnKeyType;
+  private boolean mDisableFullscreen;
   private static final InputFilter[] EMPTY_FILTERS = new InputFilter[0];
   public VariableTextInput(Context context) {
     super(context);
@@ -80,6 +85,8 @@ public VariableTextInput(Context context) {
     editText.setInputType(editText.getInputType() | InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
         | InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_MULTI_LINE);
     editText.setPadding(0, 0, 0, 0);
+    editText.setImeOptions(EditorInfo.IME_ACTION_NONE);
+    mDisableFullscreen = false;
     // This was used in conjunction with setting raw input type for selecting lock
     // notes.
     // However, it causes the keyboard to not come up for editing existing notes.
@@ -198,6 +205,55 @@ public void onPaste() {
         }
       }
     });
+    editText.setOnEditorActionListener(
+      new TextView.OnEditorActionListener() {
+        @Override
+        public boolean onEditorAction(TextView v, int actionId, KeyEvent keyEvent) {
+          if ((actionId & EditorInfo.IME_MASK_ACTION) != 0 || actionId == EditorInfo.IME_NULL) {
+            boolean isMultiline = true;
+
+            boolean shouldSubmit = editText.shouldSubmitOnReturn();
+            boolean shouldBlur = editText.shouldBlurOnReturn();
+            // Motivation:
+            // * shouldSubmit => Clear focus; prevent default behavior (return true);
+            // * shouldBlur => Submit; prevent default behavior (return true);
+            // * !shouldBlur && !shouldSubmit && isMultiline => Perform default behavior (return
+            // false);
+            // * !shouldBlur && !shouldSubmit && !isMultiline => Prevent default behavior (return
+            // true);
+            if (shouldSubmit) {
+              WritableMap event = Arguments.createMap();
+              event.putString("text", editText.getText().toString());
+              final Context context = getContext();
+              if (context instanceof ReactContext) {
+                ((ReactContext) context).getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "onAndroidSubmitEditing", event);
+              }
+            }
+
+            if (shouldBlur) {
+              editText.clearFocus();
+            }
+
+            // Prevent default behavior except when we want it to insert a newline.
+            if (shouldBlur || shouldSubmit || !isMultiline) {
+              return true;
+            }
+
+            // If we've reached this point, it means that the TextInput has 'submitBehavior' set
+            // nullish and 'multiline' set to true. But it's still possible to get IME_ACTION_NEXT
+            // and IME_ACTION_PREVIOUS here in case if 'disableFullscreenUI' is false and Android
+            // decides to render this EditText in the full screen mode (when a phone has the
+            // landscape orientation for example). The full screen EditText also renders an action
+            // button specified by the 'returnKeyType' prop. We have to prevent Android from
+            // requesting focus from the next/previous focusable view since it must only be
+            // controlled from JS.
+            return actionId == EditorInfo.IME_ACTION_NEXT
+              || actionId == EditorInfo.IME_ACTION_PREVIOUS;
+          }
+
+          return true;
+        }
+      });
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       editText.setCustomSelectionActionModeCallback(new ActionMode.Callback() {
         @Override
@@ -377,7 +433,9 @@ public void setBorderWidth(int position, float width) {
   public void setBorderColor(int position, float color, float alpha) {
     reactViewBackgroundDrawable.setBorderColor(position, color, alpha);
   }
-
+  public void setSubmitBehavior(String submitBehavior) {
+    editText.setSubmitBehavior(submitBehavior);
+  }
   public int getBorderColor(int position) {
     return reactViewBackgroundDrawable.getBorderColor(position);
   }
@@ -472,8 +530,55 @@ public void setPlaceholder(String placeholder) {
   public void setPlaceholderColor(int placeholderColor){
     editText.setHintTextColor(placeholderColor);
   }
-  public void setUnderLineColorAndroid(Integer color) {
-    editText.setBackgroundTintList(ColorStateList.valueOf(color));
+  public void setReturnKeyType(String returnKeyType) {
+    mReturnKeyType = returnKeyType;
+    updateImeOptions();
+  }
+  private void updateImeOptions() {
+    // Default to IME_ACTION_DONE
+    int returnKeyFlag = EditorInfo.IME_ACTION_DONE;
+    if (mReturnKeyType != null) {
+      switch (mReturnKeyType) {
+        case "go":
+          returnKeyFlag = EditorInfo.IME_ACTION_GO;
+          break;
+        case "next":
+          returnKeyFlag = EditorInfo.IME_ACTION_NEXT;
+          break;
+        case "none":
+          returnKeyFlag = EditorInfo.IME_ACTION_NONE;
+          break;
+        case "previous":
+          returnKeyFlag = EditorInfo.IME_ACTION_PREVIOUS;
+          break;
+        case "search":
+          returnKeyFlag = EditorInfo.IME_ACTION_SEARCH;
+          break;
+        case "send":
+          returnKeyFlag = EditorInfo.IME_ACTION_SEND;
+          break;
+        case "done":
+          returnKeyFlag = EditorInfo.IME_ACTION_DONE;
+          break;
+      }
+    }
+
+    if (mDisableFullscreen) {
+      setImeOptions(returnKeyFlag | EditorInfo.IME_FLAG_NO_FULLSCREEN);
+    } else {
+      setImeOptions(returnKeyFlag);
+    }
+  }
+  public void setImeActionLabel(String returnKeyLabel,int imID){
+    editText.setImeActionLabel(returnKeyLabel,imID);
+  }
+  public void setDisableFullscreenUI(boolean disableFullscreenUI) {
+    mDisableFullscreen = disableFullscreenUI;
+    updateImeOptions();
+  }
+
+  public boolean getDisableFullscreenUI() {
+    return mDisableFullscreen;
   }
   public void setFontSize(Integer fontSize) {
     editText.setTextSize(fontSize);

example/src/App.tsx

@@ -7,7 +7,6 @@ import {
   ImageResolvedAssetSource,
   Image,
   View,
-  TextInput,
 } from 'react-native';
 import {
   IATTextViewBase,
@@ -89,6 +88,9 @@ export const App = () => {
   const focus = () => {
     inPutRef.current?.focus();
   };
+  const sub = (e: any) => {
+    console.log('rrrrr===>', e);
+  };
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <VariableTextInputView
@@ -98,39 +100,9 @@ export const App = () => {
         placeholder={'测试测试测试'}
         placeholderTextColor={'#fff'}
         underlineColorAndroid={'rgba(0,0,0,0)'}
-      />
-      <TextInput
-        multiline={true}
-        placeholder="测试测试"
-        style={{
-          height: 50,
-          backgroundColor: 'red',
-          width: '100%',
-          borderRadius: 5,
-          borderTopColor: 'red',
-          borderTopEndRadius: 5,
-          borderTopLeftRadius: 5,
-          borderTopRightRadius: 5,
-          borderTopStartRadius: 5,
-          borderTopWidth: 1,
-          borderLeftColor: 'red',
-          borderLeftWidth: 1,
-          borderBottomColor: 'red',
-          borderBottomEndRadius: 5,
-          borderBottomLeftRadius: 5,
-          borderBottomRightRadius: 5,
-          borderBottomStartRadius: 5,
-          borderBottomWidth: 1,
-          borderColor: 'red',
-          borderEndColor: 'red',
-          borderEndWidth: 1,
-          borderRightColor: 'red',
-          borderRightWidth: 1,
-          borderStartColor: 'red',
-          borderStartWidth: 1,
-          borderWidth: 1,
-          borderStyle: 'dashed',
-        }}
+        blurOnSubmit={true}
+        onSubmitEditing={sub}
+        keyboardAppearance={'dark'}
       />
       <View style={{ flexDirection: 'row', marginTop: 40 }}>
         <TouchableOpacity onPress={blur} style={{ marginLeft: 20 }}>
@@ -179,28 +151,5 @@ const styles = StyleSheet.create({
     width: '100%',
     minHeight: 100,
     borderRadius: 5,
-    borderTopColor: 'red',
-    borderTopEndRadius: 5,
-    borderTopLeftRadius: 5,
-    borderTopRightRadius: 5,
-    borderTopStartRadius: 5,
-    borderTopWidth: 1,
-    borderLeftColor: 'red',
-    borderLeftWidth: 1,
-    borderBottomColor: 'red',
-    borderBottomEndRadius: 5,
-    borderBottomLeftRadius: 5,
-    borderBottomRightRadius: 5,
-    borderBottomStartRadius: 5,
-    borderBottomWidth: 1,
-    borderColor: 'red',
-    borderEndColor: 'red',
-    borderEndWidth: 1,
-    borderRightColor: 'red',
-    borderRightWidth: 1,
-    borderStartColor: 'red',
-    borderStartWidth: 1,
-    borderWidth: 1,
-    borderStyle: 'dashed',
   },
 });

ios/VariableTextInput.h

@@ -44,6 +44,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property(assign, nonatomic, getter=isSupport) BOOL bSupport;
 @property(nonatomic, copy) RCTBubblingEventBlock onChange;
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onContentSizeChange;
+@property(nonatomic, copy) RCTBubblingEventBlock onSubmitEditing;
 @property(nonatomic, copy, nullable) RCTDirectEventBlock onTextInput;
 @property(nonatomic, strong) NSDictionary *defultTypingAttributes;
 @property(nonatomic, strong) NSArray *tags;
@@ -57,6 +58,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) CGFloat paddingHorizontal;
 @property (nonatomic, assign) CGFloat paddingVertical;
 @property (nonatomic, assign) CGFloat padding;
+@property (nonatomic, assign) BOOL blurOnSubmit;
 - (void)setPlaceholderVisibleForText:(NSString *)str;
 - (NSString *)getStrContentInRange:(NSRange)range;
 @end

ios/VariableTextInput.m

@@ -620,4 +620,16 @@ - (void)setPaddingVertical:(CGFloat)paddingVertical
     UIEdgeInsets insets = self.textContainerInset;
     [self setPaddingTop:paddingVertical left:insets.left bottom:paddingVertical right:insets.right];
 }
+- (BOOL)textInputShouldReturn
+{
+  // We send `submit` event here, in `textInputShouldReturn`
+  // (not in `textInputDidReturn)`, because of semantic of the event:
+  // `onSubmitEditing` is called when "Submit" button
+  // (the blue key on onscreen keyboard) did pressed
+  // (no connection to any specific "submitting" process).
+  if (self.onSubmitEditing) {
+    self.onSubmitEditing(@{@"text": [self.textStorage getPlainString]});
+  }
+  return _blurOnSubmit;
+}
 @end