Commit Graph

190 Commits

Author SHA1 Message Date
Jacob Parker 68d483e041 Centre text in case where the distance between baselines is larger th…
Summary:
…an the font size (per CSS spec)

Extending upon work https://github.com/facebook/react-native/pull/7603
Closes https://github.com/facebook/react-native/pull/8851

![screen shot 2016-08-04 at 14 49 21](https://cloud.githubusercontent.com/assets/7275322/17404165/bd67bc48-5a52-11e6-9ba1-5a8524f18867.png)
![screen shot 2016-08-04 at 14 49 24](https://cloud.githubusercontent.com/assets/7275322/17404167/be5f4044-5a52-11e6-9014-391349f9c5e1.png)
Closes https://github.com/facebook/react-native/pull/9211

Differential Revision: D3706347

fbshipit-source-id: 0adfff8e8418b02f9b5d6671f5c89669e41abec3
2016-08-11 16:58:33 -07:00
tfallon@mail.depaul.edu c6b6f53ae7 Initial implementation of adjustsFontSizeToFit.
Summary: Closes https://github.com/facebook/react-native/pull/4026

Differential Revision: D2678492

Pulled By: nicklockwood

fbshipit-source-id: 0467814f810fee997ac50960ffb1daa74d52acba
2016-08-10 11:28:37 -07:00
Jacob Parker f951da912d Add iOS support for CSS property font-variant, accepting tabular-nums…
Summary:
Ground work for allowing `font-variant`s. Currently allows switching between `tabular-nums` and `proportional-nums`. I will need guidance on how to test this, and a few pointers on code style (new to Objective C, and had to make one or two hacks).
Closes https://github.com/facebook/react-native/pull/9045

Reviewed By: majak

Differential Revision: D3664338

Pulled By: javache

fbshipit-source-id: 032f326c37ee6150348da2b33b6a3fc1988e8920
2016-08-09 08:43:34 -07:00
David Aurelio 94666f16c7 Auto-fix lint errors
Reviewed By: bestander

Differential Revision: D3683952

fbshipit-source-id: 9484d0b0e86859e8edaca0da1aa13a667f200905
2016-08-09 06:43:46 -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
James Ide f8f7a1540d Prefix isUndefined with "CSS"
Summary:
Consistently namespace all of css-layout's public C API with "CSS". The only function that needed to be renamed was isUndefined, which I renamed to CSSValueIsUndefined.

Fixes #210.
Closes https://github.com/facebook/css-layout/pull/211

Reviewed By: lucasr

Differential Revision: D3674922

Pulled By: emilsjolander

fbshipit-source-id: 1752f477bde45586db112fe2654d0404cc52e1d1
2016-08-05 06:28:38 -07:00
yueshuaijie 15bf2c57b8 Add TextInput.dataDetectorTypes prop.
Summary:
On iOS, if `TextInput` is used with prop `multiline={true}`, the backend view is `UITextView`. Sometimes we need `UITextView.dataDetectorTypes` to detect clickable url in the text view. The PR add this prop to `TextInput`, so we can use it like this:

`<TextInput`
`    defaultValue="Detect phone number: 88888888."`
`    editable={false}`
`    multiline={true}`
`    dataDetectorTypes="all"`
`    />`

Similar as #8743 .
Closes https://github.com/facebook/react-native/pull/8863

Differential Revision: D3648027

fbshipit-source-id: 987bd4f46fb5be74099b62988135a32115d9269c
2016-07-31 14:28:28 -07:00
Christoph Pojer 75ecaf4190 Update to 14.0
Reviewed By: kassens

Differential Revision: D3627753

fbshipit-source-id: 35b8246c8cb61e60908d8c233a6e72063bf67096
2016-07-27 22:13:26 -07:00
Sokovikov 857d2b8eae change lineBreakMode to ellipsizeMode
Summary:
lineBreakMode only in rc so I think we can replace property without any deprecation warnings. satya164
Closes https://github.com/facebook/react-native/pull/9008

Differential Revision: D3614901

fbshipit-source-id: 724227c0a89192825a24850b930b80884571a51f
2016-07-25 13:13:35 -07:00
Emil Sjolander 471eefcb74 Move dirty layout into css-layout
Reviewed By: majak

Differential Revision: D3610634

fbshipit-source-id: 1dc9017c0a34ced231b5bebe334591f3d0b89bf3
2016-07-25 03:58:41 -07:00
Wenjing Wang 15dfa5b224 Reverted commit D3598946
Reviewed By: majak

Differential Revision: D3598946

fbshipit-source-id: fb70f5b031a85f30a6207eb95b7fd0ccd7d78039
2016-07-23 01:28:31 -07:00
Emil Sjolander 55638f804d Move dirty layout into css-layout
Reviewed By: majak

Differential Revision: D3598946

fbshipit-source-id: fdbbbf3b9bd262e0b14b5b9a40171a1c039695a7
2016-07-22 11:43:21 -07:00
Emil Sjolander 1af9270e45 Revamp API
Reviewed By: majak

Differential Revision: D3579423

fbshipit-source-id: 040ecab2f20216aa136ccb8a9e7e15ffa882b313
2016-07-20 08:58:59 -07:00
Emil Sjolander 1aa7ad0ab8 CamelCase
Reviewed By: majak

Differential Revision: D3576069

fbshipit-source-id: cecda2cdb67f2f66ac92e336068d58731ccdb101
2016-07-20 06:43:32 -07:00
Emil Sjolander 0587c85094 Add [RCTShadowView isCSSLeaf] for skipping css tree of children
Summary: RCTShadowText currently overrides a couple methods from RCTShadowView to reset the count of the cssNode children to 0. This diff instead moves that logic into RCTShadowView behind a configurable flag making it easier to reason about.

Reviewed By: javache

Differential Revision: D3586434

fbshipit-source-id: 4389a8119dc49e3fc4357174c87c0c69287ae385
2016-07-20 02:58:39 -07:00
Emil Sjolander 102577565a Remove fillCSSNode method
Summary: fillCSSNode was only ever used in RCTShadowView to set the child count which is already performed in insert/remove subview calls and in RCTShadowText is was used to set the measure function which can be done in the initializer instead.

Reviewed By: majak, javache

Differential Revision: D3586418

fbshipit-source-id: de2155daf0f1702c8977bf23183a3b6a650d016b
2016-07-20 02:58:39 -07:00
Mengjue Wang 9e142a18dd Provide RTL support for RCTShadowText
Reviewed By: majak

Differential Revision: D3524891

fbshipit-source-id: e67c35cc85b2764ab2eea3b14f7970afa06154b5
2016-07-15 18:58:30 -07:00
Emil Sjolander 4e056e94ff Use library imports for csslayout
Reviewed By: javache

Differential Revision: D3561526

fbshipit-source-id: b1b420f52230c323d64406deb813ee104dd6f7b5
2016-07-15 04:43:40 -07:00
Pieter De Baets 23e087fc26 Fix TextInput stack overflow when pasting text in multiline input with maxlength
Summary: When pasting text longer than maxlenght, the textDidChange: call we did would end calling back into textView:shouldChange: because we saw an unexpected multi-character change. Since this is an expected mutation, update predictedText appropriately.

Reviewed By: majak

Differential Revision: D3561524

fbshipit-source-id: 07bb78d830ccfa3aed6ee274dc30adeadce9e1f8
2016-07-14 07:43:32 -07:00
Emil Sjolander a939f310ab Name library header same as library
Reviewed By: javache

Differential Revision: D3561336

fbshipit-source-id: fd4ccd4c731443c72252f6d20286b2772fc40a3c
2016-07-14 06:13:50 -07:00
Janic Duplessis 2537157d99 Implement TextInput onContentSizeChange
Summary:
This adds proper support for tracking a TextInput content size as discussed in #6552 by adding a new callback that is called every time the content size changes including when first rendering the view.

Some points that are up for discussion are what do we want to do with the onChange callback as I don't see any use left for it now that we can track text change in onChangeText and size changes in onContentSizeChange. Also a bit off topic but should we consider renaming onChangeText to onTextChange to keep the naming more consistent (see [this naming justification](https://twitter.com/notbrent/status/709445076850597888)).

This is split in 2 commits for easier review, one for iOS and one for android.

The iOS implementation simply checks if the content size has changed everytime we update it and fire the callback, the only small issue was that the content size had several different values on initial render so I added a check to not fire events before the layoutSubviews where at this point the value is g
Closes https://github.com/facebook/react-native/pull/8457

Differential Revision: D3528202

Pulled By: dmmiller

fbshipit-source-id: fefe83f10cc5bfde1f5937c48c88b10408e58d9d
2016-07-07 09:00:01 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Christoph Pojer 7c53addcd5 First snapshot test, rendering "native" React component.
Reviewed By: frantic

Differential Revision: D3449781

fbshipit-source-id: 7abf9280f98cee06d04d7e222b884de1744afb8d
2016-06-29 21:58:17 -07:00
Joel Marcey 30376aef13 Update Text Component
Summary:
This updates the documentation for the `Text` component itself and the embedded `Text.md` that goes with it.

- React Native Web Player
- Document all props
  - NOTE: I actually added a new prop to `Text` called `accessible` since it was set by default and thus shown in the Props list
    in the original documentation (but with an empty description).
- Stylistic fixes
Closes https://github.com/facebook/react-native/pull/8445

Differential Revision: D3493112

Pulled By: JoelMarcey

fbshipit-source-id: b428d4eb09065db5c6cb1ae5524ad22084fd2a82
2016-06-28 07:43:21 -07:00
Pieter De Baets d29e8ae0ca Implement onTextInput events for RCTTextView
Reviewed By: blairvanderhoof

Differential Revision: D3475581

fbshipit-source-id: df2fb8e1e898dfe6af455db0f96ecb23b4aa0721
2016-06-24 06:43:37 -07:00
Pieter De Baets cc959273da Fix multi-character TextInput
Reviewed By: hnery

Differential Revision: D3457105

fbshipit-source-id: dcb364123ed82842d4fb2dee9108f2805249a8f9
2016-06-23 03:58:33 -07:00
Mike Lambert 6cd712713b Support selectable={true} property on Text fields on Android.
Summary:
Explain the **motivation** for making this change. What existing problem does the pull request solve?

This adds support for a text field that the user can click-and-drag to select text (which can then be copied using the native selected-text-hover-widget).

I'd love to add this to iOS too, but iOS appears to draw glyphs directly to the screen for its <Text> widget (versus using UITextField), so it might be too difficult to support there. But at least I can support my Android users with this change.

Let me know if/what kind of "demonstrate the code is solid" you would like for this. A screenshot of selected text with this property set?
Closes https://github.com/facebook/react-native/pull/8028

Differential Revision: D3474196

Pulled By: bestander

fbshipit-source-id: 8d3656681265a0e6229bfa13ff2ae021e894d3cd
2016-06-22 19:13:32 -07:00
Dave 97c483ec29 adds textAlignment to placeholder to match textViews alignment (for m…
Summary:
Submitting PR for adding textAlignment to the placeholder of textView so that it matches the alignment of the actual value text
Closes https://github.com/facebook/react-native/pull/7429

Differential Revision: D3422007

fbshipit-source-id: e255c2d86dbaa0e197328a56ec81cbab2735c53d
2016-06-10 20:28:23 -07:00
Tucker Connelly 4f4b6d467a Reverted commit D3417257
Summary:
First PR!!

This fixes https://github.com/facebook/react-native/issues/2991 :)
Closes https://github.com/facebook/react-native/pull/7603

Differential Revision: D3417257

Pulled By: bestander

fbshipit-source-id: fca990a973edaf7bae5481d03f5da5de0c085c16
2016-06-10 09:13:26 -07:00
Sokovikov c03b166854 line break mode for ios
Summary:
What do you think is ```lineBreakMode``` a good name? For android it is called ```ellipsize```.

<img src="https://cloud.githubusercontent.com/assets/1488195/15628555/7372f8d0-250c-11e6-8919-722f28a38d60.png"" width="300" />
Closes https://github.com/facebook/react-native/pull/7819

Differential Revision: D3417256

fbshipit-source-id: 189441a23ff554bf7f6d67fa8510959351e9e5cc
2016-06-10 04:28:37 -07:00
Tucker Connelly 33dfc9db92 Vertically center iOS text if lineHeight is set
Summary:
First PR!!

This fixes https://github.com/facebook/react-native/issues/2991 :)
Closes https://github.com/facebook/react-native/pull/7603

Differential Revision: D3417257

fbshipit-source-id: 074d56c1dfc0a9ba713e59c804286fd915589eeb
2016-06-10 04:28:37 -07:00
Nick Lockwood 79dcbc7b29 Fix unit tests
Reviewed By: bestander

Differential Revision: D3398431

fbshipit-source-id: 37561bea78c933673595625530cf083c85c3fbbd
2016-06-07 08:43:22 -07:00
Nick Lockwood 46c02b6ae5 Refactored subview management
Summary:
This diff refactors the view update process into two stages:

1. The `reactSubviews` array is set, whose order matches the order of the JS components and shadowView components, as specified by the UIManager.
2. The `didUpdateReactSubviews` method is called, which actually inserts the reactSubviews into the view hierarchy.

This simplifies a lot of the hacks we had for special-case treatment of subviews: In many cases we don't want to actually insert `reactSubviews` into the parentView, and we had a bunch of component-specific solutions for that (typically overriding all of the reactSubviews methods to store views in an array). Now, we can simply override the `didUpdateReactSubviews` method for those views to do nothing, or do something different.

Reviewed By: wwjholmes

Differential Revision: D3396594

fbshipit-source-id: 92fc56fd31db0cfc66aac3d1634a4d4ae3903085
2016-06-07 00:14:39 -07:00
Nick Lockwood 93c7a93de9 Reverted commit D3392214
Reviewed By: javache

Differential Revision: D3392214

fbshipit-source-id: 4136c8b0eb160f4b245df2e4b5d67d00efd7b1a7
2016-06-06 16:28:21 -07:00
Ben Nham 1fce89176b Explicitly set default background color in RCTTextView
Summary:
RCTShadowText currently explicitly defaults to black text color:

https://github.com/facebook/react-native/blob/d46ac11/Libraries/Text/RCTShadowText.m#L204

However, the UITextView used by RCTTextInput doesn't explicitly default to black text color.

This causes issues when RCTTextInput is in rich text editing mode (i.e. when the <TextInput> element uses child <Text> nodes to provide extra styling info) and the client doesn't provide us with any explicit color info. In this case, the following series of badness occurs:

1. -[UITextView attributedText] will return an attributed string without the NSColor property set.
2. -[RCTShadowText attributedString] will return an attributed string with NSColor equal to blackColor.
3. The `[_textView.attributedText isEqualToAttributedString:_pendingAttributedText]` check in -performPendingTextUpdate will fail and causes -[UITextView setText:] to be called.
4. -setText: clears the marked text range in the text view, which breaks multi-character autocomplete (e.g. QWERTY input methods for CJK languages).

The easiest fix for now is to just make sure RCTUITextView and RCTShadowText default to the same text color.

Reviewed By: nicklockwood

Differential Revision: D3368726

fbshipit-source-id: a92cb188c60bac80d963af6b1f2a09f27ae084f5
2016-06-06 12:58:37 -07:00
Nick Lockwood 44c9cf3a91 Refactored subview management
Reviewed By: javache

Differential Revision: D3392214

fbshipit-source-id: 6f16841df5cf866dda5ac27dd244e266ec85a86e
2016-06-06 10:28:33 -07:00
Nathan Azaria 724134746b Changed RCTTextView to check for failed focus
Reviewed By: nicklockwood

Differential Revision: D3378236

fbshipit-source-id: b4a33f7808ffe116b51631cde35f5cd0042caee9
2016-06-03 16:13:19 -07:00
Martín Bigio bbc6139baf Reverted commit D3348218
Summary:
The TextInput when configured with `multiline=true` has a minor issue due to which if the initial text doesn't fit in one line, the input won't span multiple lines. The root cause of the problem is that the `onChange` event is not fired for the initial render. This issue has been reported on open-source: 481f560f64

This is an attempt to fix this problem by moving the logic to fire the event to the method that updates the content size. This way we can guarantee that anytime the content size changes we'll trigger the JS event.

The downside of this approach is that it's possible that multiple events get fired for a single character change. As per the comment that was removed, this was already happening when adding a character that when rendered, would increase the content size. By moving the code to the new place, this can happen more often (twice per character tapped). Let me know if you think this is an issue.

I don't know this code much, so please be careful reviewing. I'm happy to add more test cases I may have missed to the test plan :).

Reviewed By: nicklockwood

Differential Revision: D3348218

fbshipit-source-id: 6b457624c9126e771c326eac61cd1cdd6496671d
2016-06-01 13:38:33 -07:00
Martín Bigio 572a85fa24 Fix multiline TextField initial render
Summary:
The TextInput when configured with `multiline=true` has a minor issue due to which if the initial text doesn't fit in one line, the input won't span multiple lines. The root cause of the problem is that the `onChange` event is not fired for the initial render. This issue has been reported on open-source: 481f560f64

This is an attempt to fix this problem by moving the logic to fire the event to the method that updates the content size. This way we can guarantee that anytime the content size changes we'll trigger the JS event.

The downside of this approach is that it's possible that multiple events get fired for a single character change. As per the comment that was removed, this was already happening when adding a character that when rendered, would increase the content size. By moving the code to the new place, this can happen more often (twice per character tapped). Let me know if you think this is an issue.

I don't know this code much, so please be careful reviewing. I'm happy to add more test cases I may have missed to the test plan :).

Reviewed By: nicklockwood

Differential Revision: D3348218

fbshipit-source-id: d3da3c0da1a0da9b9960625441191497e91d322e
2016-06-01 08:13:27 -07:00
Adam Comella 486dbe4e8f iOS: Enable views to be nested within <Text>
Summary:
Previously, only Text and Image could be nested within Text. Now, any
view can be nested within Text. One restriction of this feature is
that developers must give inline views a width and a height via
the style prop.

Previously, inline Images were supported by using iOS's built-in support
for rendering images with an NSAttributedString via NSTextAttachment.
However, NSAttributedString doesn't support rendering arbitrary views.

This change adds support for nesting views within Text by creating one
NSTextAttachment per inline view. The NSTextAttachments act as placeholders.
They are set to be the size of the corresponding view. After the text is
laid out, we query the text system to find out where it has positioned each
NSTextAttachment. We then position the views to be at those locations.

This commit also contains a change in `RCTShadowText.m`
`_setParagraphStyleOnAttributedString:heightOfTallestSubview:`. It now only sets
`lineHeight`, `textAlign`, and `writingDirection` when they've actua
Closes https://github.com/facebook/react-native/pull/7304

Reviewed By: javache

Differential Revision: D3365373

Pulled By: nicklockwood

fbshipit-source-id: 66d149eb80c5c6725311e1e46d7323eec086ce64
2016-05-31 10:28:25 -07:00
Nick Lockwood a4b5f1bf10 Test perf effect of reverting D3269333
Reviewed By: javache

Differential Revision: D3346235

fbshipit-source-id: 2008f8fb9df5d61da59bb0067b25acd5a71f256f
2016-05-27 09:58:28 -07:00
Nick Lockwood 57e9df4af2 Fixed multiline textinput onChange event
Summary: Broken in d9737571c4

Reviewed By: tadeuzagallo

Differential Revision: D3346276

fbshipit-source-id: 0cd67edb38b9f80b0976616059f9c2454cb34448
2016-05-25 06:13:25 -07:00
Basil Hosmer ac5636dd59 explicit type args in react-native-github
Reviewed By: vjeux

Differential Revision: D3342856

fbshipit-source-id: ba5a4d5529fc9d1d1efe98cc175d718c5f044a5b
2016-05-24 18:28:26 -07:00
Nick Lockwood d9737571c4 Updated AppState module to use new emitter system
Summary: AppState now subclasses NativeEventEmitter instead of using global RCTDeviceEventEmitter.

Reviewed By: javache

Differential Revision: D3310488

fbshipit-source-id: f0116599223f4411307385c0dab683659d8d63b6
2016-05-23 09:13:37 -07:00
Adam Comella fe5c0d2d06 iOS: Enable views to be nested within <Text>
Summary:
Previously, only Text and Image could be nested within Text. Now, any
view can be nested within Text. One restriction of this feature is
that developers must give inline views a width and a height via
the style prop.

Previously, inline Images were supported by using iOS's built-in support
for rendering images with an NSAttributedString via NSTextAttachment.
However, NSAttributedString doesn't support rendering arbitrary views.

This change adds support for nesting views within Text by creating one
NSTextAttachment per inline view. The NSTextAttachments act as placeholders.
They are set to be the size of the corresponding view. After the text is
laid out, we query the text system to find out where it has positioned each
NSTextAttachment. We then position the views to be at those locations.

This commit also contains a change in `RCTShadowText.m`
`_setParagraphStyleOnAttributedString:heightOfTallestSubview:`. It now only sets
`lineHeight`, `textAlign`, and `writingDirection` when they've actua
Closes https://github.com/facebook/react-native/pull/7304

Differential Revision: D3269333

Pulled By: nicklockwood

fbshipit-source-id: 2b59f1c5445a4012f9c29df9f10f5010060ea517
2016-05-17 10:43:30 -07:00
Nick Lockwood 37f4ec6e16 Removed placeholder image logic
Summary: To prevent layout popping, when inserting images inside text we would render a blank placeholder image while the real image was loading. It turns out that this isn't necessary, as we can just specify the size of the image without having an actual image to display.

Reviewed By: javache

Differential Revision: D3212766

fb-gh-sync-id: e98851b32a2d0ae809fc0a4be47e6b77f3b17996
fbshipit-source-id: e98851b32a2d0ae809fc0a4be47e6b77f3b17996
2016-04-25 03:31:19 -07:00
Mike Grabowski 02578df4f7 Fallback for textAlign: justify
Summary:Fixes #5408 as per ide and vjeux suggestions here https://github.com/facebook/react-native/issues/529#issuecomment-107328799

Could've been probably done in a single `if` clause, but this is more explicit and leaves potential place for future implementation (if we ever decide to do so)
Closes https://github.com/facebook/react-native/pull/7197

Differential Revision: D3217740

Pulled By: vjeux

fb-gh-sync-id: aa08a5c42e43c1abe17b72a424ee96146f2667f6
fbshipit-source-id: aa08a5c42e43c1abe17b72a424ee96146f2667f6
2016-04-24 11:29:23 -07:00
Mike Grabowski f022681a1e Implement Text onLongPress
Summary:Fixes #5855

Tested with `UIExplorer`, first <Text> is the `onPress`, second is the `onLongPress`.
Closes https://github.com/facebook/react-native/pull/7099

Differential Revision: D3212436

Pulled By: mkonicek

fb-gh-sync-id: 0a1cbcd4eaf39ad4fe67d861c3be2e042e1acb27
fbshipit-source-id: 0a1cbcd4eaf39ad4fe67d861c3be2e042e1acb27
2016-04-23 18:14:20 -07:00
Pieter De Baets 09f1e8293a Prevent measuring text in RCTShadowText child nodes
Summary: We only measure text at the root node, we shouldn't be trying to build a text storage later on for tree lower in the shadow node tree.

Reviewed By: nicklockwood

Differential Revision: D3212614

fb-gh-sync-id: 574fa7f2c029ca9ad2d5fabe7bbb148157f85ca7
fbshipit-source-id: 574fa7f2c029ca9ad2d5fabe7bbb148157f85ca7
2016-04-22 10:14:29 -07:00