Files
react-native/ReactCommon/react/renderer/components/textinput/iostextinput/primitives.h
T
Tony Du 1e3cb91707 Allow multiline TextInputs be submittable without blurring (#33653)
Summary:
For multiline TextInputs, it's possible to send the submit event when pressing the return key only with `blurOnSubmit`. However, there's currently no way to do so without blurring the input and dismissing the keyboard. This problem is apparent when we want to use a TextInput to span multiple lines but still have it be submittable (but not blurrable), like one might want for a TODO list.

![multiline-momentary-blur](https://user-images.githubusercontent.com/22553678/163596940-aae779f5-4d2a-4425-8ed0-e4aa77b90699.gif)

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Added] - Add `returnKeyAction` prop to `TextInput` component
[General] [Deprecated] - Remove usages of `blurOnSubmit` in native code and convert `blurOnSubmit` to `returnKeyAction` in the JavaScript conversion layer

Pull Request resolved: https://github.com/facebook/react-native/pull/33653

Test Plan:
Verified old usages of combinations of `blurOnSubmit` and `multiline` matched previous behavior and that the new `returnKeyAction` prop behaves as expected.

| Android | iOS |
| --- | -- |
| ![android-returnkeyaction-test](https://user-images.githubusercontent.com/22553678/163597864-2e306f98-7b6e-4ddf-8a35-625d397d3dce.gif) | ![ios-returnkeyaction-test](https://user-images.githubusercontent.com/22553678/163598407-9e059f74-3549-4b46-8e03-c19bfaa6dd3d.gif)  |

With the changes, the TODO list example from before now looks like this:

![multiline-no-momentary-blur](https://user-images.githubusercontent.com/22553678/163598810-f3a71d62-5514-486e-bf6a-79169fe86378.gif)

Reviewed By: yungsters

Differential Revision: D35735249

Pulled By: makovkastar

fbshipit-source-id: 1f2237a2a5e11dd141165d7568c91c9824bd6f25
2022-07-22 13:08:45 -07:00

230 lines
4.2 KiB
C++

/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#pragma once
#include <optional>
#include <string>
namespace facebook {
namespace react {
// iOS & Android.
enum class AutocapitalizationType {
None,
Words,
Sentences,
Characters,
};
// iOS-only
enum class KeyboardAppearance {
Default,
Light,
Dark,
};
enum class ReturnKeyType {
// Universal
Default,
Done,
Go,
Next,
Search,
Send,
// Android-only
None,
Previous,
// iOS-only
EmergencyCall,
Google,
Join,
Route,
Yahoo,
Continue,
};
// iOS & Android.
enum class SubmitBehavior {
Default,
Submit,
BlurAndSubmit,
Newline,
};
// iOS-only
enum class TextInputAccessoryVisibilityMode {
Never,
WhileEditing,
UnlessEditing,
Always,
};
enum class KeyboardType {
// Universal
Default,
EmailAddress,
Numeric,
PhonePad,
NumberPad,
DecimalPad,
// iOS-only
ASCIICapable,
NumbersAndPunctuation,
URL,
NamePhonePad,
Twitter,
WebSearch,
ASCIICapableNumberPad,
// Android-only
VisiblePassword,
};
class Selection final {
public:
int start{0};
int end{0};
};
/*
* Controls features of text inputs.
*/
class TextInputTraits final {
public:
/*
* iOS & Android
* Default value: `false`.
*/
bool multiline{false};
/*
* iOS & Android
* Default value: `Sentences`.
*/
AutocapitalizationType autocapitalizationType{
AutocapitalizationType::Sentences};
/*
* Can be empty (`null` in JavaScript) which means `default`.
* iOS & Android
* Default value: `empty` (`null`).
*/
std::optional<bool> autoCorrect{};
/*
* iOS & Android
* Default value: `false`.
*/
bool contextMenuHidden{false};
/*
* iOS & Android
* Default value: `true`.
*/
bool editable{true};
/*
* iOS-only (implemented only on iOS for now)
* If `true`, will automatically disable return key when text widget has
* zero-length contents, and will automatically enable when text widget has
* non-zero-length contents.
* Default value: `false`.
*/
bool enablesReturnKeyAutomatically{false};
/*
* Some values iOS- or Android-only (inherently particular-OS-specific)
* Default value: `Default`.
*/
KeyboardAppearance keyboardAppearance{KeyboardAppearance::Default};
/*
* Controls the annotation of misspelled words for a text input.
* iOS-only (implemented only on iOS for now)
* Can be empty (`null` in JavaScript) which means `default`.
* Default value: `empty` (`null`).
*/
std::optional<bool> spellCheck{};
/*
* iOS & Android
* Default value: `false`.
*/
bool caretHidden{false};
/*
* Controls the visibility of a `Clean` button.
* iOS-only (implemented only on iOS for now)
* Default value: `Never`.
*/
TextInputAccessoryVisibilityMode clearButtonMode{
TextInputAccessoryVisibilityMode::Never};
/*
* iOS-only (implemented only on iOS for now)
* Default value: `true`.
*/
bool scrollEnabled{true};
/*
* iOS & Android
* Default value: `false`.
*/
bool secureTextEntry{false};
/*
* iOS & Android
* Default value: `Default`.
*/
SubmitBehavior submitBehavior{SubmitBehavior::Default};
/*
* iOS-only (implemented only on iOS for now)
* Default value: `false`.
*/
bool clearTextOnFocus{false};
/*
* Some values iOS- or Android-only (inherently particular-OS-specific)
* Default value: `Default`.
*/
KeyboardType keyboardType{KeyboardType::Default};
/*
* iOS & Android
* Default value: `true`.
*/
bool showSoftInputOnFocus{true};
/*
* Some values iOS- or Android-only (inherently particular-OS-specific)
* Default value: `Default`.
*/
ReturnKeyType returnKeyType{ReturnKeyType::Default};
/*
* iOS & Android
* Default value: `false`.
*/
bool selectTextOnFocus{false};
/*
* iOS-only (inherently iOS-specific)
* Default value: `<empty string>` (default content type).
*/
std::string textContentType{};
/*
* iOS-only (inherently iOS-specific)
* Default value: `<empty string>` (no rules).
*/
std::string passwordRules{};
};
} // namespace react
} // namespace facebook