Commit Graph

27 Commits

Author SHA1 Message Date
Valentin Shergin d69e60bb7a TextInput: Unified support of `clearTextOnFocus` prop
Summary: The implementation of `clearTextOnFocus` was unified and moved to baseclass.

Reviewed By: javache

Differential Revision: D5299489

fbshipit-source-id: ff166f9bb0673ff8766f20b677f56810f64d7b2d
2017-07-18 14:46:22 -07:00
Valentin Shergin ee9697e515 Introducing `RCTBackedTextInputDelegate`
Summary:
Nothing behavioral changed in this diff; just moving code around.

`RCTBackedTextInputDelegate` is the new protocol which supposed to be common determinator among of UITextFieldDelegate and UITextViewDelegate
(and bunch of events and notifications around UITextInput and UITextView).

We need this reach two goals in the future:
 * Incapsulate UIKit imperfections related hack in dedicated protocol adapter. So, doing this we can fix more UIKit related bugs without touching real RN text handling logic. (Yes, we still have a bunch of bugs, which we cannot fix because it is undoable with the current architecture. This diff does NOT fix anything though.)
 * We can unify logic in RCTTextField and RCTTextView (even more!), moving it to a superclass. If we do so, we can fix another bunch of bugs related to RN imperfections. And have singleline/multiline inputs implementations even more consistent.

Reviewed By: mmmulani

Differential Revision: D5296041

fbshipit-source-id: 318fd850e946a3c34933002a6bde34a0a45a6293
2017-07-18 14:46:22 -07:00
Valentin Shergin 1081b21f3e Bunch of <TextInput> props was unified
Reviewed By: mmmulani

Differential Revision: D5144743

fbshipit-source-id: ee82f84d7a54a60c72c14fd24396bf65fa60639e
2017-06-27 16:22:45 -07:00
Valentin Shergin 6ba8e29c89 Introducing `RCTBackedTextInputViewProtocol`
Summary: RCTBackedTextInputViewProtocol is supposed to unify interface of backed text inputs which will make them accessible from managers and wrapper views.

Reviewed By: mmmulani

Differential Revision: D5144428

fbshipit-source-id: 473e7364d4af2edcd87c5555200e1325c38a8214
2017-06-27 16:22:44 -07:00
Valentin Shergin e13b9c6e49 RCTTextField was spliited into two classes
Summary:
Motivation:
 * We maintain two different implementation of <TextInput> (multilined and singlelined), this change makes the implementations much similar which will help us to support and improve both of them in the (near) future;
 * We have to have separated RCTView-based container view for (TextField) to support sofisticated bordering and so on;
 * It opens to us possibility to unify UITextView and UITextField subclasses and remove code duplication across RCTTextView and RCTTextField;
 * Making things decoupled in general will allow us to fix existing bugs with events.

Reviewed By: mmmulani

Differential Revision: D5083010

fbshipit-source-id: 2f2d42c2244d2b39256c51480c1f16f4e3947c01
2017-05-29 16:01:11 -07:00
Valentin Shergin 44af4d19d3 Fixed <TextInput>'s padding and border size computation and layout
Summary: Previosly `borderWidth` did not affect actual content inset (which was a problem).

Reviewed By: mmmulani

Differential Revision: D5072483

fbshipit-source-id: d43cba7414a9335b9f9fd4d1565d7aee403cce0e
2017-05-29 16:01:04 -07:00
Valentin Shergin ea9d6746df Singleline <TextInput> now has intrinsic size
Summary:
Singleline <TextInput> now has intrinsic size which is equal to size of placeholder.
And if <TextInput> does not have placeholder it still has intrinsic height.
So, we don't need to set the size up manually every single time anymore!

(Multiline <TextInput> already has this feature.)

Reviewed By: mmmulani

Differential Revision: D5069971

fbshipit-source-id: f65c1062a812259b66d287929314dc571dc1f3ee
2017-05-29 16:00:58 -07:00
Valentin Shergin 5058e7eb05 Several layout related helper methods of RCTShadowView was moved to new (+Layout) category.
Reviewed By: javache

Differential Revision: D4865327

fbshipit-source-id: 4df71b57433370ee09c3f1288c4d6241a33f440a
2017-05-08 11:31:20 -07:00
Valentin Shergin fa30f41403 Better TextInput: RCTTextView and RCTTextField was marked as Yoga leaf nodes
Reviewed By: mmmulani

Differential Revision: D4639060

fbshipit-source-id: d4580303a61a7f86cf8bb6ec016fd9834340ffe0
2017-03-13 13:46:26 -07:00
Valentin Shergin a341e9d916 Fixed calling TextInput.onChange() on applying autocorrection (iOS), Second part
Reviewed By: mmmulani

Differential Revision: D4459603

fbshipit-source-id: f1ee25a9068213a54f2c088760297ba9c2838623
2017-01-30 15:43:28 -08:00
Adam Comella 0e55f5b26d iOS: Introduce spellCheck prop to TextInput
Summary:
This exposes iOS's spellCheckingType functionality to JavaScript. The native functionality is a three state enum. It gets exposed to JavaScript as a boolean. The initial value and JS null map to the third state.

An alternative design for this API would have been to expose a three state enum to JavaScript:
  - "on" which maps to UITextSpellCheckingTypeYes
  - "off" which maps to UITextSpellCheckingTypeNo
  - "auto" (default) which maps to UITextSpellCheckingTypeDefault

For consistency, I decided to use the same API design as spellCheck. We don't have many options for fixing spellCheck in #11055 without introducing a breaking change.

**Test plan (required)**

Verified that switching `spellCheck` between `true`, `false`, and `null` all work correctly in single line and multiline `TextInputs`.
Closes https://github.com/facebook/react-native/pull/11056

Differential Revision: D4232802

Pulled By: javache

fbshipit-source-id: 79e03307fa6a30a169f7e2fd0ec5ac826663e7c1
2016-11-25 04:28:28 -08:00
Pieter De Baets e1577df1fd Move all header imports to "<React/..>"
Summary:
To make React Native play nicely with our internal build infrastructure we need to properly namespace all of our header includes.

Where previously you could do `#import "RCTBridge.h"`, you must now write this as `#import <React/RCTBridge.h>`. If your xcode project still has a custom header include path, both variants will likely continue to work, but for new projects, we're defaulting the header include path to `$(BUILT_PRODUCTS_DIR)/usr/local/include`, where the React and CSSLayout targets will copy a subset of headers too. To make Xcode copy headers phase work properly, you may need to add React as an explicit dependency to your app's scheme and disable "parallelize build".

Reviewed By: mmmulani

Differential Revision: D4213120

fbshipit-source-id: 84a32a4b250c27699e6795f43584f13d594a9a82
2016-11-23 07:58:39 -08:00
Adam Comella 8016d838be iOS: Fix autoCorrect doesn't revert to initial state
Summary:
There's an inconsistency in autoCorrect's default state:
  - If you don't specify a value for autoCorrect, it defaults to on.
  - If you specify true/false for autoCorrect and later specify null, autoCorrect turns off. It should have reverted to its initial state of on.

The reason for this discrepancy is that autoCorrect is exposed to JS as a boolean but it is actually an enum with three states in native:
  - UITextAutocorrectionTypeDefault (the default value)
  - UITextAutocorrectionTypeYes
  - UITextAutocorrectionTypeNo

This is fixed by explicitly mapping JS null to UITextAutocorrectionTypeDefault.

**Test plan (required)**

Verified that switching `autoCorrect` between `true`, `false`, and `null` all work correctly in single line and multiline `TextInputs`.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/11055

Differential Revision: D4226419

Pulled By: javache

fbshipit-source-id: e3e5769a3aa537f00fb56ca4ae622ff4213481c5
2016-11-23 05:43:35 -08:00
Mehdi Mulani 40e8d8904b RN TextInput: don't let user more than maxLength when TextInput already exceeds it
Summary:
We had a classic integer underflow problem here. Before we would let you type endlessly when the text already exceeded the TextInput maxLength, now we only let you erase characters.

There is still a small problem with the TextInput: how do you handle when the value (set from JS) exceeds the maxLength? This could happen pragmatically, just by passing in a very large value or when changing maxLength (e.g. when changing from 4 to 3 digits in the case of a AMEX security code -> VISA security code).

Me and achen1 discussed firing onChange in these cases and truncating the number manually (to ensure JS's data model) was aware of the change but it seemed fraught with bugs and general weirdness in what the caller would expect to happen.

Reviewed By: javache

Differential Revision: D3991210

fbshipit-source-id: dc401c4a7aefe09fa749cd1168d36343d39dc196
2016-10-18 08:13:41 -07:00
Janic Duplessis f0a3c56048 Add TextInput controlled selection prop on iOS
Summary:
This adds support for a controlled `selection` prop on `TextInput` on iOS (Android PR coming soon). This is based on the work by ehd in #2668 which hasn't been updated for a while, kept the original commit and worked on fixing what was missing based on the feedback in the original PR.

What I changed is:
- Make the prop properly controlled by JS
- Add a RCTTextSelection class to map the JS object into and the corresponding RCTConvert category
- Make sure the selection change event is properly triggered when the input is focused
- Cleanup setSelection
- Changed TextInput to use function refs to appease the linter

** Test plan **
Tested using the TextInput selection example in UIExplorer on iOS.
Also tested that it doesn't break Android.
Closes https://github.com/facebook/react-native/pull/8958

Differential Revision: D3771229

Pulled By: javache

fbshipit-source-id: b8ede46b97fb3faf3061bb2dac102160c4b20ce7
2016-08-25 17:28:37 -07:00
Pieter De Baets f571f016d9 Improve types in RCTFont API
Reviewed By: majak

Differential Revision: D3662880

fbshipit-source-id: f54e1ac164373337460047eb3708a588f578b5fc
2016-08-05 12:44:21 -07:00
Pieter De Baets c5a44b7ca3 Move font helpers to RCTFont
Reviewed By: majak

Differential Revision: D3662804

fbshipit-source-id: 2c03a094a74c617c0d6172e327bd77d23d0d44c2
2016-08-05 12:44:20 -07:00
Dave Miller 0c91931adf Add support for selectionColor on Android TextInput
Summary:
public
This adds support to set the highlight color on TextInput on Android.  See https://github.com/facebook/react-native/pull/5678 for the iOS implementation.

Note : We will merge these two properties with one name 'selectionColor' in a follow on diff, and may move it to a style.

Reviewed By: nicklockwood

Differential Revision: D2895253

fb-gh-sync-id: 6f2c08c812ff0028973185356a8af285f7dd7969
2016-02-03 05:49:32 -08:00
joranz c2233ef7e6 Add iOS tintColor prop to TextInput
Summary:
In response to https://github.com/facebook/react-native/issues/5595

Adds tintColor property to TextInput component for iOS:

<img width="375" alt="screen shot 2016-01-28 at 1 39 35 pm" src="https://cloud.githubusercontent.com/assets/3868826/12730689/eae58a36-c8e1-11e5-9453-70716617bfab.png">

Usage:

<img width="454" alt="screen shot 2016-01-28 at 1 42 37 pm" src="https://cloud.githubusercontent.com/assets/3868826/12730711/fedeed8e-c8e1-11e5-87d0-1621d19a0418.png">
Closes https://github.com/facebook/react-native/pull/5678

Reviewed By: svcscm

Differential Revision: D2895115

Pulled By: nicklockwood

fb-gh-sync-id: bfb52b992d5e02754fe47f409f6e8df426514718
2016-02-03 00:22:34 -08:00
Nick Lockwood fa0b45c58b Replaced RCTSparseArray with NSDictionary
Reviewed By: jspahrsummers

Differential Revision: D2651920

fb-gh-sync-id: 953e2ea33abfc7a3a553da95b13e9ab2bccc5a1c
2015-11-14 10:28:28 -08:00
Nick Lockwood 5a34a097f2 Open sourced the onSelectionChange event
Summary: public

Open-sourced the onSelectionChange event for RCTTextView, and also added onSelectionChange support for RCTTextField.

Reviewed By: javache

Differential Revision: D2647541

fb-gh-sync-id: ab0ab37f5f087e708a199461ffc33231a47d2133
2015-11-14 09:44:30 -08:00
Christopher Dro f407211131 Add keyboardAppearance prop to TextInput component.
Summary: Resolves #3649.
Closes https://github.com/facebook/react-native/pull/4012

Reviewed By: javache

Differential Revision: D2636538

Pulled By: nicklockwood

fb-gh-sync-id: 022e79d8f8fa684cad43af1a51f728d60ac652a8
2015-11-11 05:38:35 -08:00
Dave Sibiski 7af752403e Implements `blurOnSubmit`
Summary: The default value (to retain current behavior) is set to `true`. Setting the value to `false` will prevent the textField from blurring but still fire the `onSubmitEditing` callback. However, the `onEndEditing` callback will not be fired.

Addresses issue: https://github.com/facebook/react-native/issues/2129
Closes https://github.com/facebook/react-native/pull/2149

Reviewed By: svcscm

Differential Revision: D2619822

Pulled By: nicklockwood

fb-gh-sync-id: 9a61152892f4afb5c6c53e7b38dffae13bc7e13f
2015-11-04 21:05:42 -08:00
Dave Sibiski 6c7c845145 Implements `onKeyPress`
Summary: - When a key is pressed, it's `key value` is passed as an argument to the callback handler.
 - For `Enter` and `Backspace` keys, I'm using their `key value` as defined [here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Key_values). As per JonasJonny & brentvatne's [suggestion](https://github.com/facebook/react-native/issues/1882#issuecomment-123485883).

- Example
```javascript
 _handleKeyPress: function(e) {
      console.log(e.nativeEvent.key);
  },

  render: function() {
    return (
      <View style={styles.container}>
        <TextInput
            style={{width: 150, height: 25, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
        />
        <TextInput
            style={{width: 150, height: 100, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
            multiline={true}
        />
      </View>
    );
  }
```
- Implements [shouldChangeCharactersInRange](https://developer.apple.com/library/prerelease/ios/documentat
Closes https://github.com/facebook/react-native/pull/2082

Reviewed By: javache

Differential Revision: D2280460

Pulled By: nicklockwood

fb-gh-sync-id: 1f824f80649043dc2520c089e2531d428d799405
2015-11-02 09:15:31 -08:00
Tadeu Zagallo 48548fedbf [ReactNative] Fix RCTTextField crash on iOS7
Summary:
RCTTextField was its own delegate, that was causing a stall on the main thread,
see more here:
http://stackoverflow.com/questions/19758025/uitextfield-delegate-jumping-to-100-cpu-usage-and-crashing-upon-using-keyboard
2015-08-06 09:56:17 -08:00
Spencer Ahrens 961c1eb429 [ReactNative] TextInput bug fixes and features
Summary:
This introduces event counts to make sure JS doesn't set out of date values on
native text inputs, which can cause dropped characters and can mess with
autocomplete, and obviates the need for the input buffering which added lag and
complexity to the component.  Made sure to test simulated super-slow JS text
event processing to make sure characters aren't dropped, as well as typing
obviously correctable words and making sure autocomplete works as expected.

TextInput is now a controlled input by default without causing any issues for
most cases, so I removed the `controlled` prop.

Fixes selection state jumping by restoring it after setting new text values, so
highlighting the middle of some text in the new ReWrite example and hitting
space will replace that selection with an underscore and keep the cursor at a
sensible position as expected, instead of jumping to the end.

Ads `maxLength` prop to support the most commonly needed syncronous behavior:
preventing the user from typing too many characters.  It can also be used to
prevent users from continuing to type after entering special characters by
changing it to the current length after a regex match.  Made sure to verify it
works well with pasted input (including in the middle of existing text),
truncating it and collapsing the selection the same way it does on the web.

Fixes bug in TextEventsExample where it wouldn't show the submit and end events,
even though there were firing correctly.
2015-07-21 12:45:07 -08:00
Nick Lockwood a886e4c66b Migrated RCTText into FBReactKit 2015-07-08 07:13:00 -08:00