Commit Graph

28 Commits

Author SHA1 Message Date
Ben Nham 91dcc9ac8e Fix autocomplete in rich-text editing mode for CJK text input
Summary:This fixes autocomplete for CJK text input by making sure that the `<Text>` nodes that JS controls to produce attributed text matches the text view's attributed text as much as possible. This is done by giving the disconnected `<Text>` child the same style as the `<TextInput>` parent.

This works because `-[RKTextView performPendingTextUpdate]` avoids setting the attributedText property on textView if the JS attributedText and textView attributedText are equal. This is important because setting attributedText on a text view clears the autocomplete state (markedText property) on a text view, breaking autocomplete for multistage input styles like CJK with a phonetic keyboard.

Reviewed By: nicklockwood

Differential Revision: D3207513

fb-gh-sync-id: 02e582ea5f15191974f15a65ebc1820401715f8d
fbshipit-source-id: 02e582ea5f15191974f15a65ebc1820401715f8d
2016-04-21 12:10:25 -07:00
Nick 2a03182b1c CHORE - Remove Trailing Spaces
Summary:Remove Trailing Spaces.

Why:
Sometimes there are conflicts with trailing spaces
Saves space
Those whose tools automatically delete them will have their pr watered down with trailing space removal
Closes https://github.com/facebook/react-native/pull/6787

Differential Revision: D3144704

fb-gh-sync-id: d8a62f115a3f8a8a49d5b07f56c540a02af38cf8
fbshipit-source-id: d8a62f115a3f8a8a49d5b07f56c540a02af38cf8
2016-04-06 09:21:53 -07:00
Nick Lockwood 481f560f64 Added support for auto-resizing text fields
Summary:
public
This diff adds support for auto-resizing multiline text fields. This has been a long-requested feature, with several native solutions having been proposed (see https://github.com/facebook/react-native/pull/1229 and D2846915).

Rather than making this a feature of the native component, this diff simply exposes some extra information in the `onChange` event that makes it easy to implement this in pure JS code. I think this is preferable, since it's simpler, works cross-platform, and avoids any controversy about what the API should look like, or how the props should be named. It also makes it easier to implement custom min/max-height logic.

Reviewed By: sahrens

Differential Revision: D2849889

fb-gh-sync-id: d9ddf4ba4037d388dac0558aa467d958300aa691
2016-01-25 05:46:29 -08:00
Ben 09250aa184 multiline textinput view not wrapping in multiline on ios
Summary:
It's because the view doesn't update itself after setText.
Closes https://github.com/facebook/react-native/pull/5247

Reviewed By: svcscm

Differential Revision: D2819520

Pulled By: nicklockwood

fb-gh-sync-id: 06f5342d94f242fc63f862dac738da9b96842183
2016-01-11 03:33:30 -08:00
Andrew Crowell fe86771a22 Maintain cursor position when TextInput value is changed programmatically
Summary:
This is useful for applying input masks in the onChange handler that you then need to propagate down to the native component. In our case, we add commas as the user enters a price. Without this change, the cursor will end up in the wrong place when the text is transformed in our onChange handler.
Closes https://github.com/facebook/react-native/pull/4716

Reviewed By: svcscm

Differential Revision: D2766236

Pulled By: nicklockwood

fb-gh-sync-id: c4057d77d62507ec9e09eb0242888bf2858d822f
2015-12-17 10:23:26 -08:00
Nick Lockwood dde55c30ea This Fixes scroll to top and resigning first responder
Reviewed By: tadeuzagallo

Differential Revision: D2713488

fb-gh-sync-id: 99b2646f7bf8a3ee889bbb856c298beed6817321
2015-12-04 07:56:29 -08:00
Nick Lockwood 6d29f710e1 Fixed TextInput on iOS 8 and earlier
Summary:
public

The scrolling fix I added to RCTTextView doesn't work on iOS 8 because the underlying UITextField doesn't resize correctly, which breaks text input functionality. This diff fixes it.

Reviewed By: tadeuzagallo

Differential Revision: D2712618

fb-gh-sync-id: 1d0282df3a16f1cb6ddf9d005d640738bb1b5659
2015-12-02 10:37:26 -08:00
Nick Lockwood 37042573b8 Added blurOnSubmit support to multine TextInput (aka RCTTextView)
Summary:
public

Setting `blurOnSubmit=true` on a multiline `<TextInput>` now causes it to behave like a single-line input with respect to the return key:

With the default value of `false`, pressing return will enter a newline character into the field. If you set the value to `true`, pressing return will now blur the field and trigger the onSubmitEditing event. The newline character will *not* be added to the text.

(See associated github task for dicussion: https://github.com/facebook/react-native/pull/2149)

Reviewed By: javache

Differential Revision: D2710448

fb-gh-sync-id: c9706ae11f8b399932d3400ceb4c7558e455570d
2015-12-02 08:16:27 -08:00
Nick Lockwood 807e0d9310 Fixed Xcode warnings
Summary:
public

Fixed some Xcode warnings, and added some missing UIResponder methods to make the behavior of RCTTextView more self-consistent.

Reviewed By: javache

Differential Revision: D2712250

fb-gh-sync-id: d30038500194d7a5262d9e77d516c65d836a4420
2015-12-02 08:03:26 -08:00
Nick Lockwood 94f126ddbf Fixed TextInput.blur()
Reviewed By: helouree

Differential Revision: D2704065

fb-gh-sync-id: a4f5aa9c9b4fcb7980eb85289d16982840a980bd
2015-11-30 14:32:06 -08:00
Nick Lockwood 01a0facf33 Fixed onFocus/onBlur events for multiline TextInput
Summary: public

onFocus and onBlur were not firing for multiline TextInputs.

Reviewed By: tadeuzagallo

Differential Revision: D2699846

fb-gh-sync-id: 7e64309bc631a42a99f989f615fef927dc50217c
2015-11-27 07:47:28 -08:00
Nick Lockwood b5be05d82b Fix flaky scrolling for TextInput when using rich text
Summary: public

This diff fixes the jumpy scrolling for multiline `<TextInput>` when using nested `<Text>` components to implement rich text highlighting.

The fix is to disable scrolling on the underlying UITextView, and nest it inside another UIScrollView that we control.

Reviewed By: ericvicenti, tadeuzagallo

Differential Revision: D2674670

fb-gh-sync-id: bacee3ae485523cc26ca8102b714e081df230629
2015-11-24 15:38:27 -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
Nick Lockwood 7779e06a7f Added rich text input support
Summary: public

It is now possible to display and edit rich text inside a multiline `<textInput>` by nesting a `<Text>` node inside it.

Note that this doesn't yet provide everything needed to build a full rich text editor (as there is no facility to capture or control the selected text range, or insert/remove text) but it does make it possible to apply token-based styling to text as the user types.

See the 'Attributed text' example in the UIExplorer > TextInput demo for details.

Reviewed By: javache

Differential Revision: D2622493

fb-gh-sync-id: b6bc9a46005322c806934541966460edccb59e70
2015-11-06 07:26:27 -08:00
Nick Lockwood d799558db5 Fix Groups text input
Reviewed By: javache

Differential Revision: D2590712

fb-gh-sync-id: 453e20970460c703230547d8fd649383ba7d4c4a
2015-11-04 04:09:27 -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
Kushal Dave 1d77645a53 Set scrollsToTop = NO for UITextViews
Summary: Complete the work from 853d5b2221 by also fixing the placeholder view.
Closes https://github.com/facebook/react-native/pull/3129

Reviewed By: @​svcscm

Differential Revision: D2499753

Pulled By: @vjeux
2015-10-02 10:18:31 -07:00
James Ide 853d5b2221 [TextInput] Set scrollsToTop = NO for UITextViews
Summary:
Now that UITextViews have a delegate, they consume the "tap to scroll to top" gesture. This diff restores the original behavior of letting the top-level scroll view (if any) scroll to top instead.

I tried exposing scrollsToTop as a prop and was semi-successful in that I could turn scroll-to-top on and off for the top-level scroll view scroll, but the text view itself would never scroll to top. So instead of exposing it as a prop, this diff sets scrollsToTop always to NO, which is how TextInput behaved previously.

Closes https://github.com/facebook/react-native/pull/2333
Github Author: James Ide <ide@jameside.com>
2015-09-01 02:40:15 -08:00
Nick Lockwood 88e0bbc469 Ran Convert > To Modern Objective C Syntax 2015-08-25 01:08:49 -08:00
James Ide 08d1bc8c9f [TextInput] Fix multiline TextInput so text and cursor stay in bounds
Summary:
With a multiline TextInput, the text is initially rendered correctly but once you try to edit it, the cursor slides off the top of the view and out of its bounds. Also if the TextInput is scrollable, you can scroll the text out of the bounds of the view, which looks buggy unless you clip the overflow. This occurs because the top content inset is applied to the RCTTextView instead of the UITextView's text container.

This diff fixes both bugs by applying the vertical insets to the UITextView's textContainerInset instead of the RCTTextView's frame (which is a wrapper around a real UITextView).

The left inset is still applied to the frame because there is a bug with the text rendering when the left textContainerInset is negative: the initial text doesn't show up until you focus the text view. The bug doesn't occur when setting the right textContainerInset, so I apply this workaround to only the left inset.

Closes https://github.com/facebook/react-native/pull/2297
Github Author: James Ide <ide@jameside.com>
2015-08-12 14:50:42 -08:00
Nick Lockwood 48af214216 Simplified event registration
Summary:
Our events all follow a common pattern, so there's no good reason why the configuration should be so verbose. This diff eliminates that redundancy, and gives us the freedom to simplify the underlying mechanism in future without further churning the call sites.
2015-08-11 06:41:04 -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
LYK fc059857e2 [Text] Get the system font instead of Helvetica programmatically and add a virtual fontName called "System"
Summary:
Get the system font instead of Helvetica programmatically and add a virtual fontName called "System" that defaults to whatever the current system font is.
#1611
Closes https://github.com/facebook/react-native/pull/1635
Github Author: LYK <dalinaum@gmail.com>
2015-07-09 15:48:49 -08:00
Nick Lockwood 650fc9de4c Increased warning levels to -Wall -Wextra, and fixed Xcode 7 beta issues
Summary:
@public

I've increased the warning levels in the OSS frameworks, which caught a bunch of minor issues. I also fixed some new errors in Xcode 7 relating to designated initializers and TLS security.

Test Plan:
* Test the sample apps and make sure they still work.
* Run tests.
2015-06-15 07:52:50 -08:00
James Ide 4e412381f2 [TextView] Define missing properties and add getters
Summary:
Some of the RCTTextView properties weren't set up correctly which would cause bugs when you'd set a property and then unset it, trying to revert to the default. This requires reading the default value from the dummy view instance, but some of these properties didn't have getters which was causing issues.

Fixes #1174

Closes https://github.com/facebook/react-native/pull/1175
Github Author: James Ide <ide@jameside.com>

Test Plan:  Create a `<TextInput multiline={true}>` component. Give it a style with `color: 'blue'`, and then on the next render pass remove the style. No more red box.
2015-05-14 09:45:12 -08:00
Nick Lockwood 81e82d10ab Added missing features from Multiline Text commit 2015-04-29 15:27:15 -08:00
Brent Vatne c09bdebcd5 Add support for multiline TextInput via UITextView
Summary:
@nicklockwood - Could I get a review of this?

Just took `RCTTextField` and ported it from `UITextField` to `UITextView` as you mentioned in another discussion, and removed any `UITextField` specific attributes.

- How do you think this should behave when there are subviews?
- Do you know how we can respond to the `UIControlEventEditingDidEndOnExit` event to respond to submit? Because `UITextView` isn't a `UIControl` we can't just use `addTarget` with `UIControlEventEditingDidEndOnExit`.
- Any other feedback?

Still going to look over the `UITextView` docs in more detail and make sure we expose all important options, and add it to the UIExplorer example, just putting this out here for feedback.

![multiline](https://cloud.githubusercontent.com/assets/90494/7310854/32174d6a-e9e8-11e4-919e-71e54cf3c739.gif)

Closes https://github.com/facebook/react-native/pull/991
Github Author: Brent Vatne <brent.vatne@madriska.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-04-29 01:33:58 -08:00