2015-03-23 20:28:42 +00:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
|
|
*
|
2018-02-17 02:24:55 +00:00
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
2015-03-23 20:28:42 +00:00
|
|
|
*/
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
#import <UIKit/UIKit.h>
|
|
|
|
|
2016-11-23 15:47:52 +00:00
|
|
|
#import <React/RCTComponent.h>
|
2018-02-12 08:04:16 +00:00
|
|
|
#import <React/RCTLayout.h>
|
2016-11-23 15:47:52 +00:00
|
|
|
#import <React/RCTRootView.h>
|
2017-01-11 11:58:03 +00:00
|
|
|
#import <yoga/Yoga.h>
|
2015-02-20 04:10:52 +00:00
|
|
|
|
2017-08-24 06:44:01 +00:00
|
|
|
@class RCTRootShadowView;
|
2015-02-20 04:10:52 +00:00
|
|
|
@class RCTSparseArray;
|
|
|
|
|
2015-11-14 18:25:00 +00:00
|
|
|
typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry);
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* ShadowView tree mirrors RCT view tree. Every node is highly stateful.
|
|
|
|
* 1. A node is in one of three lifecycles: uninitialized, computed, dirtied.
|
|
|
|
* 1. RCTBridge may call any of the padding/margin/width/height/top/left setters. A setter would dirty
|
|
|
|
* the node and all of its ancestors.
|
|
|
|
* 2. At the end of each Bridge transaction, we call collectUpdatedFrames:widthConstraint:heightConstraint
|
|
|
|
* at the root node to recursively lay out the entire hierarchy.
|
|
|
|
* 3. If a node is "computed" and the constraint passed from above is identical to the constraint used to
|
|
|
|
* perform the last computation, we skip laying out the subtree entirely.
|
|
|
|
*/
|
2015-08-06 22:44:15 +00:00
|
|
|
@interface RCTShadowView : NSObject <RCTComponent>
|
2015-02-20 04:10:52 +00:00
|
|
|
|
2017-04-27 19:48:53 +00:00
|
|
|
/**
|
|
|
|
* Yoga Config which will be used to create `yogaNode` property.
|
|
|
|
* Override in subclass to enable special Yoga features.
|
|
|
|
* Defaults to suitable to current device configuration.
|
|
|
|
*/
|
|
|
|
+ (YGConfigRef)yogaConfig;
|
|
|
|
|
2016-06-07 07:08:16 +00:00
|
|
|
/**
|
|
|
|
* RCTComponent interface.
|
|
|
|
*/
|
|
|
|
- (NSArray<RCTShadowView *> *)reactSubviews NS_REQUIRES_SUPER;
|
|
|
|
- (RCTShadowView *)reactSuperview NS_REQUIRES_SUPER;
|
|
|
|
- (void)insertReactSubview:(RCTShadowView *)subview atIndex:(NSInteger)atIndex NS_REQUIRES_SUPER;
|
|
|
|
- (void)removeReactSubview:(RCTShadowView *)subview NS_REQUIRES_SUPER;
|
2015-11-03 22:45:46 +00:00
|
|
|
|
2017-08-24 06:44:01 +00:00
|
|
|
@property (nonatomic, weak, readonly) RCTRootShadowView *rootView;
|
2015-02-20 04:10:52 +00:00
|
|
|
@property (nonatomic, weak, readonly) RCTShadowView *superview;
|
2017-02-21 16:43:34 +00:00
|
|
|
@property (nonatomic, assign, readonly) YGNodeRef yogaNode;
|
2015-03-17 10:51:58 +00:00
|
|
|
@property (nonatomic, copy) NSString *viewName;
|
Added mechanism for directly mapping JS event handlers to blocks
Summary:
Currently, the system for mapping JS event handlers to blocks is quite clean on the JS side, but is clunky on the native side. The event property is passed as a boolean, which can then be checked by the native side, and if true, the native side is supposed to send an event via the event dispatcher.
This diff adds the facility to declare the property as a block instead. This means that the event side can simply call the block, and it will automatically send the event. Because the blocks for bubbling and direct events are named differently, we can also use this to generate the event registration data and get rid of the arrays of event names.
The name of the event is inferred from the property name, which means that the property for an event called "load" must be called `onLoad` or the mapping won't work. This can be optionally remapped to a different property name on the view itself if necessary, e.g.
RCT_REMAP_VIEW_PROPERTY(onLoad, loadEventBlock, RCTDirectEventBlock)
If you don't want to use this mechanism then for now it is still possible to declare the property as a BOOL instead and use the old mechanism (this approach is now deprecated however, and may eventually be removed altogether).
2015-09-02 12:58:10 +00:00
|
|
|
@property (nonatomic, copy) RCTDirectEventBlock onLayout;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
2018-02-12 08:04:16 +00:00
|
|
|
/**
|
|
|
|
* Computed layout of the view.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign) RCTLayoutMetrics layoutMetrics;
|
|
|
|
|
2017-09-25 05:57:28 +00:00
|
|
|
/**
|
|
|
|
* In some cases we need a way to specify some environmental data to shadow view
|
|
|
|
* to improve layout (or do something similar), so `localData` serves these needs.
|
|
|
|
* For example, any stateful embedded native views may benefit from this.
|
|
|
|
* Have in mind that this data is not supposed to interfere with the state of
|
|
|
|
* the shadow view.
|
|
|
|
* Please respect one-directional data flow of React.
|
|
|
|
* Use `-[RCTUIManager setLocalData:forView:]` to set this property
|
|
|
|
* (to provide local/environmental data for a shadow view) from the main thread.
|
|
|
|
*/
|
2017-10-09 17:35:13 +00:00
|
|
|
- (void)setLocalData:(NSObject *)localData;
|
2017-09-25 05:57:28 +00:00
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
/**
|
|
|
|
* isNewView - Used to track the first time the view is introduced into the hierarchy. It is initialized YES, then is
|
|
|
|
* set to NO in RCTUIManager after the layout pass is done and all frames have been extracted to be applied to the
|
|
|
|
* corresponding UIViews.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign, getter=isNewView) BOOL newView;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Position and dimensions.
|
|
|
|
* Defaults to { 0, 0, NAN, NAN }.
|
|
|
|
*/
|
2017-01-11 11:58:03 +00:00
|
|
|
@property (nonatomic, assign) YGValue top;
|
|
|
|
@property (nonatomic, assign) YGValue left;
|
|
|
|
@property (nonatomic, assign) YGValue bottom;
|
|
|
|
@property (nonatomic, assign) YGValue right;
|
2017-10-19 02:29:40 +00:00
|
|
|
@property (nonatomic, assign) YGValue start;
|
|
|
|
@property (nonatomic, assign) YGValue end;
|
2015-03-17 10:51:58 +00:00
|
|
|
|
2017-01-11 11:58:03 +00:00
|
|
|
@property (nonatomic, assign) YGValue width;
|
|
|
|
@property (nonatomic, assign) YGValue height;
|
2016-06-15 16:44:34 +00:00
|
|
|
|
2017-01-11 11:58:03 +00:00
|
|
|
@property (nonatomic, assign) YGValue minWidth;
|
|
|
|
@property (nonatomic, assign) YGValue maxWidth;
|
|
|
|
@property (nonatomic, assign) YGValue minHeight;
|
|
|
|
@property (nonatomic, assign) YGValue maxHeight;
|
2016-06-15 16:44:34 +00:00
|
|
|
|
2016-03-01 18:13:22 +00:00
|
|
|
/**
|
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 20:59:26 +00:00
|
|
|
* Convenient alias to `width` and `height` in pixels.
|
2018-01-13 06:03:51 +00:00
|
|
|
* Defaults to NAN in case of non-pixel dimension.
|
2016-03-01 18:13:22 +00:00
|
|
|
*/
|
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 20:59:26 +00:00
|
|
|
@property (nonatomic, assign) CGSize size;
|
2016-03-01 18:13:22 +00:00
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
/**
|
|
|
|
* Border. Defaults to { 0, 0, 0, 0 }.
|
|
|
|
*/
|
2016-10-26 20:12:26 +00:00
|
|
|
@property (nonatomic, assign) float borderWidth;
|
|
|
|
@property (nonatomic, assign) float borderTopWidth;
|
|
|
|
@property (nonatomic, assign) float borderLeftWidth;
|
|
|
|
@property (nonatomic, assign) float borderBottomWidth;
|
|
|
|
@property (nonatomic, assign) float borderRightWidth;
|
2017-10-19 02:29:42 +00:00
|
|
|
@property (nonatomic, assign) float borderStartWidth;
|
|
|
|
@property (nonatomic, assign) float borderEndWidth;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Margin. Defaults to { 0, 0, 0, 0 }.
|
|
|
|
*/
|
2017-01-11 11:58:03 +00:00
|
|
|
@property (nonatomic, assign) YGValue margin;
|
|
|
|
@property (nonatomic, assign) YGValue marginVertical;
|
|
|
|
@property (nonatomic, assign) YGValue marginHorizontal;
|
|
|
|
@property (nonatomic, assign) YGValue marginTop;
|
|
|
|
@property (nonatomic, assign) YGValue marginLeft;
|
|
|
|
@property (nonatomic, assign) YGValue marginBottom;
|
|
|
|
@property (nonatomic, assign) YGValue marginRight;
|
2017-10-19 02:29:46 +00:00
|
|
|
@property (nonatomic, assign) YGValue marginStart;
|
|
|
|
@property (nonatomic, assign) YGValue marginEnd;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Padding. Defaults to { 0, 0, 0, 0 }.
|
|
|
|
*/
|
2017-01-11 11:58:03 +00:00
|
|
|
@property (nonatomic, assign) YGValue padding;
|
|
|
|
@property (nonatomic, assign) YGValue paddingVertical;
|
|
|
|
@property (nonatomic, assign) YGValue paddingHorizontal;
|
|
|
|
@property (nonatomic, assign) YGValue paddingTop;
|
|
|
|
@property (nonatomic, assign) YGValue paddingLeft;
|
|
|
|
@property (nonatomic, assign) YGValue paddingBottom;
|
|
|
|
@property (nonatomic, assign) YGValue paddingRight;
|
2017-10-19 02:29:44 +00:00
|
|
|
@property (nonatomic, assign) YGValue paddingStart;
|
|
|
|
@property (nonatomic, assign) YGValue paddingEnd;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Flexbox properties. All zero/disabled by default
|
|
|
|
*/
|
2016-12-02 13:47:43 +00:00
|
|
|
@property (nonatomic, assign) YGFlexDirection flexDirection;
|
|
|
|
@property (nonatomic, assign) YGJustify justifyContent;
|
|
|
|
@property (nonatomic, assign) YGAlign alignSelf;
|
|
|
|
@property (nonatomic, assign) YGAlign alignItems;
|
Expose alignContent to react native
Summary:
This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage.
```
class Playground extends React.Component {
render() {
return (
<View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white', flexWrap: 'wrap', alignContent: 'space-between'}}>
<View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
<View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
<View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
<View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
<View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
<View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
<View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
</View>
);
}
}
```
Reviewed By: astreet
Differential Revision: D4611803
fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2
2017-03-01 17:12:48 +00:00
|
|
|
@property (nonatomic, assign) YGAlign alignContent;
|
2016-12-02 13:47:43 +00:00
|
|
|
@property (nonatomic, assign) YGPositionType position;
|
|
|
|
@property (nonatomic, assign) YGWrap flexWrap;
|
2017-03-01 17:12:50 +00:00
|
|
|
@property (nonatomic, assign) YGDisplay display;
|
2016-10-26 20:12:26 +00:00
|
|
|
|
2017-03-13 12:58:09 +00:00
|
|
|
@property (nonatomic, assign) float flex;
|
2016-10-26 20:12:26 +00:00
|
|
|
@property (nonatomic, assign) float flexGrow;
|
|
|
|
@property (nonatomic, assign) float flexShrink;
|
2017-01-11 11:58:03 +00:00
|
|
|
@property (nonatomic, assign) YGValue flexBasis;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
2016-11-23 15:32:08 +00:00
|
|
|
@property (nonatomic, assign) float aspectRatio;
|
|
|
|
|
2017-02-07 04:58:23 +00:00
|
|
|
/**
|
|
|
|
* Interface direction (LTR or RTL)
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign) YGDirection direction;
|
|
|
|
|
2016-08-30 07:58:15 +00:00
|
|
|
/**
|
|
|
|
* Clipping properties
|
|
|
|
*/
|
2016-12-02 13:47:43 +00:00
|
|
|
@property (nonatomic, assign) YGOverflow overflow;
|
2016-08-30 07:58:15 +00:00
|
|
|
|
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 20:59:26 +00:00
|
|
|
/**
|
|
|
|
* Represents the natural size of the view, which is used when explicit size is not set or is ambiguous.
|
|
|
|
* Defaults to `{UIViewNoIntrinsicMetric, UIViewNoIntrinsicMetric}`.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign) CGSize intrinsicContentSize;
|
|
|
|
|
2018-02-12 08:04:16 +00:00
|
|
|
#pragma mark - Layout
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Initiates layout starts from the view.
|
|
|
|
*/
|
|
|
|
- (void)layoutWithMinimumSize:(CGSize)minimumSize
|
|
|
|
maximumSize:(CGSize)maximumSize
|
|
|
|
layoutDirection:(UIUserInterfaceLayoutDirection)layoutDirection
|
|
|
|
layoutContext:(RCTLayoutContext)layoutContext;
|
|
|
|
|
2016-05-31 17:18:37 +00:00
|
|
|
/**
|
2018-02-12 08:04:16 +00:00
|
|
|
* Applies computed layout metrics to the view.
|
2015-06-01 15:34:09 +00:00
|
|
|
*/
|
2018-02-12 08:04:16 +00:00
|
|
|
- (void)layoutWithMetrics:(RCTLayoutMetrics)layoutMetrics
|
|
|
|
layoutContext:(RCTLayoutContext)layoutContext;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
2018-02-12 08:04:16 +00:00
|
|
|
/**
|
|
|
|
* Calculates (if needed) and applies layout to subviews.
|
|
|
|
*/
|
|
|
|
- (void)layoutSubviewsWithContext:(RCTLayoutContext)layoutContext;
|
2018-01-24 07:17:57 +00:00
|
|
|
|
2016-05-31 17:18:37 +00:00
|
|
|
/**
|
2018-02-12 08:04:16 +00:00
|
|
|
* Measures shadow view without side-effects.
|
|
|
|
* Default implementation uses Yoga for measuring.
|
2016-05-31 17:18:37 +00:00
|
|
|
*/
|
2018-02-12 08:04:16 +00:00
|
|
|
- (CGSize)sizeThatFitsMinimumSize:(CGSize)minimumSize
|
|
|
|
maximumSize:(CGSize)maximumSize;
|
2016-05-31 17:18:37 +00:00
|
|
|
|
2016-07-20 09:49:13 +00:00
|
|
|
/**
|
2017-06-21 00:09:52 +00:00
|
|
|
* Returns whether or not this view can have any subviews.
|
|
|
|
* Adding/inserting a child view to leaf view (`canHaveSubviews` equals `NO`)
|
|
|
|
* will throw an error.
|
|
|
|
* Return `NO` for components which must not have any descendants
|
|
|
|
* (like <Image>, for example.)
|
|
|
|
* Defaults to `YES`. Can be overridden in subclasses.
|
|
|
|
* Don't confuse this with `isYogaLeafNode`.
|
|
|
|
*/
|
|
|
|
- (BOOL)canHaveSubviews;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns whether or not this node acts as a leaf node in the eyes of Yoga.
|
2017-12-20 03:48:22 +00:00
|
|
|
* For example `RCTTextShadowView` has children which it does not want Yoga
|
2017-02-21 16:43:34 +00:00
|
|
|
* to lay out so in the eyes of Yoga it is a leaf node.
|
2017-06-21 00:09:52 +00:00
|
|
|
* Defaults to `NO`. Can be overridden in subclasses.
|
|
|
|
* Don't confuse this with `canHaveSubviews`.
|
2016-07-20 09:49:13 +00:00
|
|
|
*/
|
2017-02-21 16:43:34 +00:00
|
|
|
- (BOOL)isYogaLeafNode;
|
2016-07-20 09:49:13 +00:00
|
|
|
|
2016-06-07 07:08:16 +00:00
|
|
|
/**
|
|
|
|
* As described in RCTComponent protocol.
|
|
|
|
*/
|
|
|
|
- (void)didUpdateReactSubviews NS_REQUIRES_SUPER;
|
2015-11-27 10:52:14 +00:00
|
|
|
- (void)didSetProps:(NSArray<NSString *> *)changedProps NS_REQUIRES_SUPER;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Computes the recursive offset, meaning the sum of all descendant offsets -
|
|
|
|
* this is the sum of all positions inset from parents. This is not merely the
|
|
|
|
* sum of `top`/`left`s, as this function uses the *actual* positions of
|
|
|
|
* children, not the style specified positions - it computes this based on the
|
|
|
|
* resulting layout. It does not yet compensate for native scroll view insets or
|
2015-03-25 00:37:03 +00:00
|
|
|
* transforms or anchor points.
|
2015-02-20 04:10:52 +00:00
|
|
|
*/
|
2015-03-25 00:37:03 +00:00
|
|
|
- (CGRect)measureLayoutRelativeToAncestor:(RCTShadowView *)ancestor;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
2016-08-03 11:01:45 +00:00
|
|
|
/**
|
|
|
|
* Checks if the current shadow view is a descendant of the provided `ancestor`
|
|
|
|
*/
|
|
|
|
- (BOOL)viewIsDescendantOf:(RCTShadowView *)ancestor;
|
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
@end
|