Commit Graph

111 Commits

Author SHA1 Message Date
Spencer Ahrens 96c9ce811a Fix Text + TouchableWithoutFeedback
Summary:
Arrow functions don't have `arguments`...whoops :(

public

Reviewed By: vjeux, ericvicenti

Differential Revision: D2741448

fb-gh-sync-id: 15e9fb0446909e4cbbbb5e30024dde58d872e725
2015-12-09 17:18:26 -08:00
Spencer Ahrens 4ce03582a0 Improve Text perf
Summary:
public

Most apps create tons of text components but they are actually quite heavy because of the the Touchable mixin which requires binding tons of functions for every instance created.

This diff makes the binding lazy, so that the main handlers are only bound if there is a valid touch action configured (e.g. onPress), and the Touchable mixin functions are only bound the first time the node is actually touched and becomes the responder.

ScanLab testing shows 5-10% win on render time and memory for various products.

Reviewed By: sebmarkbage

Differential Revision: D2716823

fb-gh-sync-id: 30adb2ed2231c5635c9336369616cf31c776b930
2015-12-07 23:12:28 -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
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
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
Patrick O'Meara b3cfc598ce allowFontScaling false changing lineHeight
Summary: * allowFontScaling false was still changing lineHeight as if it were true

fixes #2783
Closes https://github.com/facebook/react-native/pull/3840

Reviewed By: svcscm

Differential Revision: D2615710

Pulled By: nicklockwood

fb-gh-sync-id: 7e4205c58967640762deb5837ecaa2dde236782c
2015-11-05 09:02:22 -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
Josh Berdine c357943dfb Only make backgroundColor opaque if non-nil
Summary: public

Do not set a default backgroundColor of white when top-level RCTShadowText has
backgroundColor == nil.

Reviewed By: nicklockwood

Differential Revision: D2605636

fb-gh-sync-id: f2076d302e7ed574f7804080ccc80db1c9b9401c
2015-11-04 08:55:36 -08:00
Josh Berdine 6b9e4ec4b2 Mimic opacity style of nested Text nodes using alpha color component
Summary: public

Added opacity property to RCTShadowText, and use it to adjust the alpha
color component of nested text nodes when collapsing the RCTShadowText tree
into an NSAttributedString.  The opacity is propagated down the tree,
multiplying the aggregate with the current node's opacity at each step.  Also,
foreground and background colors are propagated down the tree so that in case
a node has an opacity style but no colors, the ancestor's colors can be used
when adjusting the alpha components.

Reviewed By: nicklockwood

Differential Revision: D2600402

fb-gh-sync-id: 2adb7b598b0a73c984bb2edaab545c02ab911c6b
2015-11-04 08:55:30 -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
Nick Lockwood c5b990f65f Added lightweight generic annotations
Summary: public

Added lightweight genarics annotations to make the code more readable and help the compiler catch bugs.

Fixed some type bugs and improved bridge validation in a few places.

Reviewed By: javache

Differential Revision: D2600189

fb-gh-sync-id: f81e22f2cdc107bf8d0b15deec6d5b83aacc5b56
2015-11-03 14:49:30 -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
Martin Kralik 8989ff925d nil instead of empty `RCTViewManagerUIBlock` block
Summary: There is no point in returning empty block here. It's a tiny bit wasteful and prevents us from knowing if there are any UI updates.

Depends on D2571122 (not really).

public

Reviewed By: jspahrsummers

Differential Revision: D2571137

fb-gh-sync-id: 4a872f33f05eaf2d858009aa04ea89feaa23576c
2015-10-27 05:09:31 -07:00
Bill Glover 8fb9cc8fc1 Fix 16 linter warnings in Examples/
Summary: Partially fixes #3316 by addressing 16 linter warnings:
 - Strings should be singlequote
 - Missing semicolon

Travis build jobs 1.1 through 1.4 complete successfully. 1.5 fails through what appears to be an unrelated issue on master.
Closes https://github.com/facebook/react-native/pull/3332

Reviewed By: @​svcscm

Differential Revision: D2531718

Pulled By: @javache

fb-gh-sync-id: ca22fbeac5fe3b4f725775a72f21b6dd7a75d94b
2015-10-16 04:03:23 -07:00
Quentin Adam c73ceff914 Corrected computation of RCText element height with padding
Summary: Corrected computation of RCText element height with padding (padding was counted twice).
See also issue #2466.
Closes https://github.com/facebook/react-native/pull/2838

Reviewed By: @​svcscm

Differential Revision: D2535924

Pulled By: @nicklockwood

fb-gh-sync-id: b9527803c0a5a6eed1db7e37c98b628750ab2045
2015-10-13 06:44:32 -07:00
Nick Lockwood 91e6c98ecd Implemented inline image support for <Text>
Summary: @​public

This diff implements inline image support for <Text> nodes. Images are specified using <Image> tags, however all properties of the image are currently ignored apart from the source (including width/height styles).

Images are loaded asyncronously, and will trigger a text re-layout when they have loaded.

Reviewed By: @javache

Differential Revision: D2507725

fb-gh-sync-id: 59d0696d00a1bc531915cc35242a16b2dec96e85
2015-10-08 11:56:25 -07: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
Nick Lockwood 8d1e02b8bd Convert alloc/init to new to please linter 2015-08-17 08:46:00 -07: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
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
Alex Akers 3e21f39a77 Remove rendered RCTText contents when moving offscreen
Summary:
When an `RCTText` instance moves offscreen (possibly due to parent clipping), we unset the layer's contents until it comes onscreen again.
2015-08-03 05:43:16 -08:00
Nick Lockwood 1fb26d4319 Cleanup 2015-07-31 11:33:22 -08:00
Vladislav Alexeev 53fb5b6cee Dynamic Text Sizes for Text component
Summary:
Dynamic Text Sizes for Text component.
Text gains new prop - allowFontScaling (false by default).
There is also AccessibilityManager module that allows you to tune multipliers per each content size category.
2015-07-31 07:42:41 -08:00
Nick Lockwood 0e5422f36c Fixed text highlight alignment when text has nonzero padding.
Summary:
Previously the text highlight overlay did not take padding into account in its positioning, so it would be misaligned for padded text. This fixes that.
2015-07-27 07:11:29 -08:00
Martin Konicek f69e33e6a8 [ReactNative] Text docs
Summary:
In preparation for open sourcing React Native for Android, document which Text props are platform-specific.
2015-07-27 06:38:27 -08:00
Nick Lockwood ef5cec4f08 Text highlighting on iOS
Summary:
This diff implements highlighting of tapped text subranges for the iOS `<Text>` component, styled to match how iOS webkit views highlight links (translucent grey overlay with rounded corners).

Highlighting is enabled by default for any `<Text>` component which has an onPress handler. To disable the highlight, add `suppressHighlighting={true}` to the component props.
2015-07-24 08:41:58 -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
Spencer Ahrens c43e93d1b4 Reverted ca9d1b3bf5a6f46ec29babe8685634690ff9a2bc to unbreak groups 2015-07-17 04:03:01 -08:00
Kevin Gozali 2e9d156fad [ReactNative] revert D2233419: 'Dynamic Text Sizes for Text component' 2015-07-14 15:55:06 -08:00
Vladislav Alexeev be2cabc3f8 Dynamic Text Sizes for Text component
Summary:
Dynamic Text Sizes for Text component.
Text gains new prop - allowFontScaling (true by default).
There is also AccessibilityManager module that allows you to tune multipliers per each content size category, but predefined multipliers are there.
This could potentially break some apps so please test carefully.
2015-07-14 03:13:32 -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 a886e4c66b Migrated RCTText into FBReactKit 2015-07-08 07:13:00 -08:00
KJlmfe b57a14d07c <Text> module add textDecoration style attributes
Summary:
This is simply a rebased and squashed version of @KJlmfe's PR over at https://github.com/facebook/react-native/pull/845

It was actually already squashed into one commit, but for some reason that was hard to see from the original PR.
Closes https://github.com/facebook/react-native/pull/1869
Github Author: KJlmfe <kjlmfe@gmail.com>
2015-07-07 06:15:20 -08:00
Alexsander Akers 02db374e50 [React Native] Remove layout-only nodes (Take 2!)
Summary:
Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes.

This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this.

The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later.
2015-07-07 05:06:50 -08:00
chaceliang 7159a4e947 Revert "[React Native] Remove layout-only nodes" 2015-06-25 13:30:06 -08:00
Alex Akers 3c5b4b0a9f [React Native] Remove layout-only nodes
Summary:
Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes.

This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this.

The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later.

@public

Test Plan: There are tests in `RCTUIManagerTests.m` that test the tag- and index-manipulation logic works. There are various scenarios including add-only, remove-only, and move. In addition, two scenario tests verify that the optimization works by checking the number of views and shadow views after various situations happen.
2015-06-25 09:12:00 -08:00
Alex Akers caffd60a3f [React Native] Update description on RCTText 2015-06-19 07:59:41 -08:00
Nick Lockwood d83ee3bd5a Better text background behavior 2015-06-17 05:35:57 -08:00
Alex Akers 3ce8b1a1c8 [React Native] Implement -(recursiveD|d)escription for RCT(Shadow)View 2015-06-15 12:08:45 -08:00