Commit Graph

85 Commits

Author SHA1 Message Date
Valentin Shergin e361ce8673 `RCTShadowViews`'s `cssNode` property was renamed to `yogaNode`
Reviewed By: javache

Differential Revision: D4590104

fbshipit-source-id: 7767aaa62bcbdce2746c3a26543052dd46be63e0
2017-02-21 08:45:05 -08:00
Emil Sjolander 1b5eb36e2f Fix up some small issues with YGUnitAuto
Reviewed By: wwjholmes

Differential Revision: D4567045

fbshipit-source-id: ace5fd89bd534a6bb5ec7dba0c3afbf13d62d7c9
2017-02-16 06:59:33 -08:00
David Hart 67f6b32409 Rename YGUnitPixel to YGPoint...
Summary:
...to reflect the modern world we live in with dynamic DPI platforms :)
Closes https://github.com/facebook/yoga/pull/375

Reviewed By: dshahidehpour

Differential Revision: D4528518

Pulled By: emilsjolander

fbshipit-source-id: e422bd4ae148e02c598a7b484a6adfa8c0e1e0c9
2017-02-14 14:31:31 -08:00
Lukas Wöhrl dbaa687518 Feature auto margin
Summary:
Even so I know there are some opinions against ```margin: 0 auto``` it's still part of the spec: https://www.w3.org/TR/css-flexbox-1/#auto-margins and pretty usefull if you have to position via ```justify-content```.

This PR adds an implementation for that.

It adds an additonal ```YGUnitAuto``` and margins got ```YGNodeStyleSetMarginAuto``` functions as well.
Closes https://github.com/facebook/yoga/pull/357

Reviewed By: astreet

Differential Revision: D4501142

Pulled By: emilsjolander

fbshipit-source-id: 86519f8632496f46e78a7c9dbc5b21e212e3e0c7
2017-02-14 14:31:31 -08:00
Valentin Shergin 7686274e13 Removed RTL workaround in RCTShadowText
Reviewed By: fkgozali

Differential Revision: D4511274

fbshipit-source-id: f658afb4e1c943cc9ecab2dd2a91f251edd3fa36
2017-02-13 12:00:57 -08:00
Valentin Shergin ec673d0771 Added support of `direction` style property
Summary: Now layout direction (LTR or LTR) can be specified not only for whole app but also for view subtree via `direction` style property.

Reviewed By: mmmulani

Differential Revision: D4510206

fbshipit-source-id: 4e56c5886b6e42f2343165eb76be897e681c5ba4
2017-02-06 21:00:16 -08:00
Valentin Shergin 91910d87de Better RTL support especially for ScrollView's
Reviewed By: fkgozali

Differential Revision: D4478913

fbshipit-source-id: 525c17fa109ad3c35161b10940776f1426ba2535
2017-02-02 09:58:30 -08:00
Valentin Shergin f33f84e75f Deprecating/removing `setFrame`, `setLeftTop`, and co.
Summary:
Motivation:
 * `RCTShadowView`'s `frame` property actually represents computed layout of the view. We must not use it as a setter for yoga node styles;
 * Using `frame` and `setLeftTop` in existing way actually works only for view with absolute positioning, so it is super rare and special case;
 * Internally, setting `frame` only make sense to `RootView`, and in that case there we always must not change `origin` we are introducing `setSize` method.

Changes:
 * `[-RCTShadowView setFrame:]` was removed, `frame` property is readonly now;
 * `[-RCTShadowView setLeftTop:]` was removed; no replacement provided;
 * `[-RCTShadowView size]` read-write property was added;
 * `[-RCTUIManager setFrame:forView:]` was deprecated, use (just introduced) `setSize:forView:` instead;
 * `[-RCTUIManager setSize:forView:]` was added.

If you are still need some of removed methods, you are probably doing something wrong. Consider using `setIntrinsicContentSize`-family methods,
`setSize`-family methods, or (in the worst case) accessing `yogaNode` directly.

Reviewed By: javache

Differential Revision: D4491384

fbshipit-source-id: 56dd84567324c5a86e4c870a41c38322dc1224d2
2017-02-01 13:13:27 -08:00
Valentin Shergin d1990f8fc4 Better (right) implementation of `intrinsicContentSize`
Reviewed By: emilsjolander

Differential Revision: D4486767

fbshipit-source-id: d37ea11f9f48425d4d99c29e8bfb6c8ed2353f04
2017-01-31 16:58:32 -08:00
Emil Sjolander 3f49e743be Add percentage support to react native
Summary:
Adds support for percentage value in react native.

syntax: property: 100 | property | '100%'

supported properties:
padding
margin
width
height
minWidth
minHeight
maxWidth
maxHeight
flexBasis

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: 'white', padding: 10, paddingTop: 30, height: '100%'}}>
        <Text>
          If you want to quickly test out something,
          open the Playground.js file and start coding.
        </Text>
        <View style={{backgroundColor: 'red', height: 50, width: 50}}/>
        <View style={{backgroundColor: 'blue', height: '50%', width: '50%'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4376549

fbshipit-source-id: c41d68a7555396f95d063a7527ee081773ac56dc
2017-01-11 03:58:37 -08:00
Emil Sjolander 5d6ce0e4ae Rely on yoga to enforces precedence rules
Reviewed By: javache

Differential Revision: D4376526

fbshipit-source-id: b37e541f74674ce0c918cc4993943a972bc4dc87
2017-01-06 06:43:45 -08:00
Emil Sjolander 828addcf55 Use layout padding instead of style padding
Reviewed By: javache

Differential Revision: D4377071

fbshipit-source-id: c4a534a07f335c39ec50214e33a41aeff0389bf1
2017-01-06 06:43:45 -08:00
Lukas Woehrl 16359ec8ee Add feature to use percentage as value unit
Summary:
Adds the feature to use percentage as a value unit.

You can use the function ```YGPx(float)``` and ```YGPercent(float)``` for convenience.

I did some benchmarks:

```
Without Percentage Feature - Release x86:

Stack with flex: median: 0.000000 ms, stddev: 0.146683 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.490101 ms
Huge nested layout: median: 23.000000 ms, stddev: 0.928291 ms

Stack with flex: median: 0.000000 ms, stddev: 0.170587 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.143384 ms
Nested flex: median: 0.000000 ms, stddev: 0.477791 ms
Huge nested layout: median: 22.000000 ms, stddev: 2.129779 ms

With Percentage Feature - Release x86:

Stack with flex: median: 0.000000 ms, stddev: 0.132951 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.489570 ms
Huge nested layout: median: 21.000000 ms, stddev: 1.390476 ms
Closes https://github.com/facebook/yoga/pull/258

Reviewed By: dshahidehpour

Differential Revision: D4361945

Pulled By: emilsjolander

fbshipit-source-id: a8f5bc63ad352eb9410d792729e56664468cd76a
2017-01-02 05:28:30 -08:00
David Hart c1aff605ed Transform the Count enum values into private constants
Summary:
Hides implementation details for the C, Objective-C and Swift APIs.
Closes https://github.com/facebook/yoga/pull/292

Differential Revision: D4351523

Pulled By: emilsjolander

fbshipit-source-id: 18a1149d169f0d52bd078714295000b5d07434dd
2016-12-22 02:58:59 -08:00
Emil Sjolander 45fdcdc93a YGNodeChildCount -> YGNodeGetChildCount for consistency
Reviewed By: gkassabli

Differential Revision: D4333480

fbshipit-source-id: 17058f18fa9e26b3e02f7a1651f7295cae59acad
2016-12-16 04:44:18 -08:00
Emil Sjolander 85ac5fc354 Rename C api
Differential Revision: D4259190

fbshipit-source-id: 26c8b356ca464d4304f5f9dc4192bff10cea2dc9
2016-12-03 04:44:10 -08:00
Emil Sjolander 779508c0ba Rename enums
Differential Revision: D4244360

fbshipit-source-id: c9fcbdd231098c9ff230a6055676bbc7cbd11001
2016-12-02 05:58:45 -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
Emil Sjolander 5850165795 Add support for aspectRatio style prop
Summary:
Expose aspectRatio style prop from css-layout to React Native.

This means the following will now work:

    <View style={{backgroundColor: 'blue', aspectRatio: 1}}/>

Reviewed By: javache

Differential Revision: D4226472

fbshipit-source-id: c8709a7c0abbf77089a4e867879b42dcd9116f65
2016-11-23 07:43:28 -08:00
Emil Sjolander ffcdf25281 Autogenerate enum defenitions for all languages
Reviewed By: gkassabli

Differential Revision: D4174263

fbshipit-source-id: 478961a8f683e196704d3c6ea1505a05c85fcb10
2016-11-15 08:44:30 -08:00
Emil Sjolander a2cafb062e rename CSSWrapType to shorter CSSWrap matching java and csharp
Reviewed By: gkassabli

Differential Revision: D4174257

fbshipit-source-id: ba0bfab996ba158b07863d8c72cf2a41262c9592
2016-11-14 03:28:38 -08:00
Emil Sjolander 454c33884a Revert D4133643: [react-native] Fix incorrect pixel-rounding in RCTShadowView.
Differential Revision: D4133643

fbshipit-source-id: bb17e0c84ba9d85c5d03129c602d1d432ee0aa56
2016-11-10 15:13:43 -08:00
Dustin Shahidehpour 4d35f65eb7 Fix incorrect pixel-rounding in RCTShadowView.
Reviewed By: emilsjolander

Differential Revision: D4133643

fbshipit-source-id: 28a4408ba8da797138b9e100fa1555ddb0856ceb
2016-11-07 15:58:43 -08:00
Mehdi Mulani a96b4ab5a0 Warn when height/width is set in style without correct flex
Reviewed By: emilsjolander, yungsters

Differential Revision: D4095399

fbshipit-source-id: 6246e47a39ebbc60835bc1ce5e9fb78c6630a851
2016-10-28 12:13:37 -07:00
Emil Sjolander 8e69a9f695 BREAKING - Make first parameter of measure and print functions CSSNodeRef instead of just context
Reviewed By: javache

Differential Revision: D4081544

fbshipit-source-id: d49679025cea027cf7b8482898de0a01fe0f9d40
2016-10-27 10:58:42 -07:00
Pieter De Baets 82911a8204 s/CGFloat/float in RCTShadowView
Reviewed By: emilsjolander

Differential Revision: D4081788

fbshipit-source-id: 91da6af0fff1317ff4661572e8e7c1cc5594f810
2016-10-26 13:13:47 -07:00
Pieter De Baets 4ea359a4f3 Remove getter for RCTShadowView flex
Reviewed By: emilsjolander

Differential Revision: D4081779

fbshipit-source-id: 4e2a1780738423396111c7cfde2fe12010ad0e93
2016-10-26 13:13:47 -07:00
Emil Sjolander ea6458b63e Remove flex shorthand getter because it doesnt make a lot of sense
Reviewed By: gkassabli

Differential Revision: D4064674

fbshipit-source-id: 69935b85042020b4e8c61a393c1be8f4d42a6674
2016-10-24 03:44:22 -07:00
Emil Sjolander 899adf5343 Expose flexGrow, flexShrink, and flexBasis properties
Reviewed By: javache, astreet

Differential Revision: D3785140

fbshipit-source-id: a735602c53da72e3bce69ba30936c4ed25d76b88
2016-08-30 03:13:39 -07:00
Adam Comella 4178d21e96 Expose overflow prop to layout engine
Summary:
The overflow prop needs to be set on the shadow view so that it can make its way into the layout engine. In some situations, the value of the overflow prop affects the calculations of the layout engine.

**Test plan (required)**

Verified in a test app that the `overflow` prop makes its way into the layout engine. Also, my team's app is currently using this change.

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

Differential Revision: D3790552

fbshipit-source-id: 61513ece63ae214f48c6cb6f40fb29757a0ac706
2016-08-30 00:59:00 -07:00
Emil Sjolander f7a22bc33c Use single function for margin, position, padding, and border
Reviewed By: lucasr

Differential Revision: D3715201

fbshipit-source-id: ea81ed426f0f7853bb542355c01fc16ae4360238
2016-08-15 09:28:41 -07:00
Pieter De Baets 6775d1f136 Set property ivar for shadow view frame
Reviewed By: emilsjolander

Differential Revision: D3683649

fbshipit-source-id: d818cb0eea064baca99be2bc6edf1b61b90bb64b
2016-08-10 10:58:49 -07:00
Pieter De Baets 335132ad63 Fix some analyzer warnings
Reviewed By: majak

Differential Revision: D3683672

fbshipit-source-id: 879578b050186bc779d01a17822d41bf7e473123
2016-08-09 03:58:36 -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
alvaromb e52cab5a7f Adds the ability to use UIManager to check if a node is an ancestor
Summary:
Sometimes is handy to check if a React node is a descendant of another node or not. For instance, I want to check if the focused `TextInput` is descendant of an specific `ScrollView`:

```js
const currentlyFocusedField = TextInput.State.currentlyFocusedField()
UIManager.viewIsAncestorOf(
  currentlyFocusedField,
  this.getInnerViewNode(),
  (isAncestor) => {
    if (isAncestor) {
      console.log('The focused field is a descendant of this ScrollView!')
    }
  }
)
```

This function uses the same strategy as the `measureLayout` method to check if one node is an ancestor of other node. As the `measureLayout` method, this is performed outside the main thread.

By now I've only implemented the iOS version and its tests, but if this function is going to be merged I'll implement the Android version too. I have objc experience but no Java or Android, so I prefer to validate this functionality before jumping into developing the Android part.
Closes https://github.com/facebook/react-native/pull/7876

Differential Revision: D3662045

Pulled By: javache

fbshipit-source-id: b9668e8ea94fd01db76651f16243926cf9c2566f
2016-08-03 04:13:43 -07:00
Emil Sjolander 42fc2e80db shouldUpdate -> hasNewLayout
Reviewed By: majak

Differential Revision: D3613695

fbshipit-source-id: 4e16e8d4de90660a09d6e1d3a43c6c5e89349993
2016-08-01 05:28:28 -07:00
Mengjue Wang 66514869aa Provide RTL support for RCTShadowView
Summary:
The make current RCTShadowView support RTL layout.
Two changes I made:
1 Change all left/right to start/end for margin, padding, boarder and position
2 Change the paddingAsInsets to support RTL

Reviewed By: majak

Differential Revision: D3548002

fbshipit-source-id: 15cc5228d2d28d0e12a7147daf57967e5b87ee63
2016-07-28 17:28:32 -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 0df569dc7f Handle children internally in CSSLayout
Reviewed By: javache

Differential Revision: D3588205

fbshipit-source-id: 27f701a9a85cc0e86bb1d233a6bc74b529a8d4d4
2016-07-20 13:28:30 -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
Skotch Vail bcf4bb6edd Automated changes to remove implicit capture of self in blocks: Libraries/FBReactKit/BUCK
Reviewed By: javache

Differential Revision: D3442470

fbshipit-source-id: 584a2bb3df5f7122166778b8fd44fae45560491e
2016-07-07 12:44:14 -07:00
Pieter De Baets 3ffaedaeaa Fix typo in maxHeight
Reviewed By: andreicoman11

Differential Revision: D3481774

fbshipit-source-id: 98e025fe0c5c7f2d8a80edcb1c07fbd30d7425ef
2016-06-24 09:13:47 -07:00
Pieter De Baets 78b892906b Support {min,max}{Width,Height} on RCTView
Reviewed By: majak

Differential Revision: D2939842

fbshipit-source-id: c8726f1160269e432afc7562c58886313e42963c
2016-06-15 09:58:52 -07:00
Nick Lockwood a05e05fafb Converted zIndex to integers
Summary: Converted the zIndex property on iOS to NSInteger instead of double. This is consistent with the CSS spec, and helps to simplify the Android implementation.

Reviewed By: javache

Differential Revision: D3411491

fbshipit-source-id: 902ebc29aac39a65f7e8707a28607655f9f5052c
2016-06-09 09:58:31 -07:00
Nick Lockwood d64368b9e2 Implement CSS z-index for iOS
Summary:
This diff implement the CSS z-index for React Native iOS views. We've had numerous pull request for this feature, but they've all attempted to use the `layer.zPosition` property, which is problematic for two reasons:

1. zPosition only affects rendering order, not event processing order. Views with a higher zPosition will appear in front of others in the hierarchy, but won't be the first to receive touch events, and may be blocked by views that are visually behind them.
2. when using a perspective transform matrix, views with a nonzero zPosition will be rendered in a different position due to parallax, which probably isn't desirable.

See https://github.com/facebook/react-native/pull/7825 for further discussion of this problem.

So instead of using `layer.zPosition`, I've implemented this by actually adjusting the order of the subviews within their parent based on the zIndex. This can't be done on the JS side because it would affect layout, which is order-dependent, so I'm doing it inside the view itself.

It works as follows:

1. The `reactSubviews` array is set, whose order matches the order of the JS components and shadowView components, as specified by the UIManager.
2. `didUpdateReactSubviews` is called, which in turn calls `sortedSubviews` (which lazily generates a sorted array of  `reactSubviews` by zIndex) and inserts the result into the view.
3.  If a subview is added or removed, or the zIndex of any subview is changed, the previous `sortedSubviews` array is cleared and  `didUpdateReactSubviews` is called again.

To demonstrate it working, I've modified the UIExplorer example from https://github.com/facebook/react-native/pull/7825

Reviewed By: javache

Differential Revision: D3365717

fbshipit-source-id: b34aa8bfad577bce023f8af5414f9b974aafd8aa
2016-06-07 07:43:49 -07:00