2015-03-23 20:28:42 +00:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
|
|
* All rights reserved.
|
|
|
|
*
|
|
|
|
* This source code is licensed under the BSD-style license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
|
|
*/
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
#import <UIKit/UIKit.h>
|
|
|
|
|
2016-07-15 11:28:10 +00:00
|
|
|
#import <CSSLayout/CSSLayout.h>
|
2015-08-06 22:44:15 +00:00
|
|
|
#import "RCTComponent.h"
|
2015-10-26 22:39:04 +00:00
|
|
|
#import "RCTRootView.h"
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
@class RCTSparseArray;
|
|
|
|
|
2015-03-01 23:33:55 +00:00
|
|
|
typedef NS_ENUM(NSUInteger, RCTUpdateLifecycle) {
|
|
|
|
RCTUpdateLifecycleUninitialized = 0,
|
|
|
|
RCTUpdateLifecycleComputed,
|
|
|
|
RCTUpdateLifecycleDirtied,
|
2015-02-20 04:10:52 +00:00
|
|
|
};
|
|
|
|
|
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
|
|
|
|
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
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
@property (nonatomic, weak, readonly) RCTShadowView *superview;
|
2016-07-20 15:46:00 +00:00
|
|
|
@property (nonatomic, assign, readonly) CSSNodeRef cssNode;
|
2015-03-17 10:51:58 +00:00
|
|
|
@property (nonatomic, copy) NSString *viewName;
|
2015-03-08 18:22:08 +00:00
|
|
|
@property (nonatomic, strong) UIColor *backgroundColor; // Used to propagate to children
|
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
|
|
|
|
|
|
|
/**
|
|
|
|
* 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;
|
|
|
|
|
2016-05-17 17:31:07 +00:00
|
|
|
/**
|
|
|
|
* isHidden - RCTUIManager uses this to determine whether or not the UIView should be hidden. Useful if the
|
|
|
|
* ShadowView determines that its UIView will be clipped and wants to hide it.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign, getter=isHidden) BOOL hidden;
|
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
/**
|
|
|
|
* Position and dimensions.
|
|
|
|
* Defaults to { 0, 0, NAN, NAN }.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign) CGFloat top;
|
|
|
|
@property (nonatomic, assign) CGFloat left;
|
2015-03-17 10:51:58 +00:00
|
|
|
@property (nonatomic, assign) CGFloat bottom;
|
|
|
|
@property (nonatomic, assign) CGFloat right;
|
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
@property (nonatomic, assign) CGFloat width;
|
|
|
|
@property (nonatomic, assign) CGFloat height;
|
2016-06-15 16:44:34 +00:00
|
|
|
|
|
|
|
@property (nonatomic, assign) CGFloat minWidth;
|
|
|
|
@property (nonatomic, assign) CGFloat maxWidth;
|
|
|
|
@property (nonatomic, assign) CGFloat minHeight;
|
|
|
|
@property (nonatomic, assign) CGFloat maxHeight;
|
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
@property (nonatomic, assign) CGRect frame;
|
|
|
|
|
|
|
|
- (void)setTopLeft:(CGPoint)topLeft;
|
|
|
|
- (void)setSize:(CGSize)size;
|
|
|
|
|
2016-03-01 18:13:22 +00:00
|
|
|
/**
|
|
|
|
* Set the natural size of the view, which is used when no explicit size is set.
|
|
|
|
* Use UIViewNoIntrinsicMetric to ignore a dimension.
|
|
|
|
*/
|
|
|
|
- (void)setIntrinsicContentSize:(CGSize)size;
|
|
|
|
|
2015-02-20 04:10:52 +00:00
|
|
|
/**
|
|
|
|
* Border. Defaults to { 0, 0, 0, 0 }.
|
|
|
|
*/
|
2015-07-31 18:23:29 +00:00
|
|
|
@property (nonatomic, assign) CGFloat borderWidth;
|
2015-03-26 04:29:28 +00:00
|
|
|
@property (nonatomic, assign) CGFloat borderTopWidth;
|
|
|
|
@property (nonatomic, assign) CGFloat borderLeftWidth;
|
|
|
|
@property (nonatomic, assign) CGFloat borderBottomWidth;
|
|
|
|
@property (nonatomic, assign) CGFloat borderRightWidth;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Margin. Defaults to { 0, 0, 0, 0 }.
|
|
|
|
*/
|
2015-07-31 18:23:29 +00:00
|
|
|
@property (nonatomic, assign) CGFloat margin;
|
|
|
|
@property (nonatomic, assign) CGFloat marginVertical;
|
|
|
|
@property (nonatomic, assign) CGFloat marginHorizontal;
|
2015-02-20 04:10:52 +00:00
|
|
|
@property (nonatomic, assign) CGFloat marginTop;
|
|
|
|
@property (nonatomic, assign) CGFloat marginLeft;
|
|
|
|
@property (nonatomic, assign) CGFloat marginBottom;
|
|
|
|
@property (nonatomic, assign) CGFloat marginRight;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Padding. Defaults to { 0, 0, 0, 0 }.
|
|
|
|
*/
|
2015-07-31 18:23:29 +00:00
|
|
|
@property (nonatomic, assign) CGFloat padding;
|
|
|
|
@property (nonatomic, assign) CGFloat paddingVertical;
|
|
|
|
@property (nonatomic, assign) CGFloat paddingHorizontal;
|
2015-02-20 04:10:52 +00:00
|
|
|
@property (nonatomic, assign) CGFloat paddingTop;
|
|
|
|
@property (nonatomic, assign) CGFloat paddingLeft;
|
|
|
|
@property (nonatomic, assign) CGFloat paddingBottom;
|
|
|
|
@property (nonatomic, assign) CGFloat paddingRight;
|
|
|
|
|
|
|
|
- (UIEdgeInsets)paddingAsInsets;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Flexbox properties. All zero/disabled by default
|
|
|
|
*/
|
2016-07-20 13:40:26 +00:00
|
|
|
@property (nonatomic, assign) CSSFlexDirection flexDirection;
|
|
|
|
@property (nonatomic, assign) CSSJustify justifyContent;
|
|
|
|
@property (nonatomic, assign) CSSAlign alignSelf;
|
|
|
|
@property (nonatomic, assign) CSSAlign alignItems;
|
|
|
|
@property (nonatomic, assign) CSSPositionType position;
|
|
|
|
@property (nonatomic, assign) CSSWrapType flexWrap;
|
2015-02-20 04:10:52 +00:00
|
|
|
@property (nonatomic, assign) CGFloat flex;
|
2016-08-30 10:09:52 +00:00
|
|
|
@property (nonatomic, assign) CGFloat flexGrow;
|
|
|
|
@property (nonatomic, assign) CGFloat flexShrink;
|
|
|
|
@property (nonatomic, assign) CGFloat flexBasis;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
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 14:40:25 +00:00
|
|
|
/**
|
|
|
|
* z-index, used to override sibling order in the view
|
|
|
|
*/
|
2016-06-09 16:48:56 +00:00
|
|
|
@property (nonatomic, assign) NSInteger zIndex;
|
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 14:40:25 +00:00
|
|
|
|
2016-08-30 07:58:15 +00:00
|
|
|
/**
|
|
|
|
* Clipping properties
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign) CSSOverflow overflow;
|
|
|
|
|
2015-03-01 23:33:55 +00:00
|
|
|
/**
|
|
|
|
* Calculate property changes that need to be propagated to the view.
|
|
|
|
* The applierBlocks set contains RCTApplierBlock functions that must be applied
|
|
|
|
* on the main thread in order to update the view.
|
|
|
|
*/
|
2015-11-03 22:45:46 +00:00
|
|
|
- (void)collectUpdatedProperties:(NSMutableSet<RCTApplierBlock> *)applierBlocks
|
2015-11-14 18:25:00 +00:00
|
|
|
parentProperties:(NSDictionary<NSString *, id> *)parentProperties;
|
2015-06-01 15:34:09 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Process the updated properties and apply them to view. Shadow view classes
|
|
|
|
* that add additional propagating properties should override this method.
|
|
|
|
*/
|
2015-11-14 18:25:00 +00:00
|
|
|
- (NSDictionary<NSString *, id> *)processUpdatedProperties:(NSMutableSet<RCTApplierBlock> *)applierBlocks
|
|
|
|
parentProperties:(NSDictionary<NSString *, id> *)parentProperties NS_REQUIRES_SUPER;
|
2015-03-01 23:33:55 +00:00
|
|
|
|
2015-06-01 15:34:09 +00:00
|
|
|
/**
|
2016-05-31 17:18:37 +00:00
|
|
|
* Can be called by a parent on a child in order to calculate all views whose frame needs
|
|
|
|
* updating in that branch. Adds these frames to `viewsWithNewFrame`. Useful if layout
|
|
|
|
* enters a view where flex doesn't apply (e.g. Text) and then you want to resume flex
|
|
|
|
* layout on a subview.
|
|
|
|
*/
|
|
|
|
- (void)collectUpdatedFrames:(NSMutableSet<RCTShadowView *> *)viewsWithNewFrame
|
|
|
|
withFrame:(CGRect)frame
|
|
|
|
hidden:(BOOL)hidden
|
|
|
|
absolutePosition:(CGPoint)absolutePosition;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Apply the CSS layout.
|
|
|
|
* This method also calls `applyLayoutToChildren:` internally. The functionality
|
|
|
|
* is split into two methods so subclasses can override `applyLayoutToChildren:`
|
|
|
|
* while using default implementation of `applyLayoutNode:`.
|
2015-06-01 15:34:09 +00:00
|
|
|
*/
|
2016-07-20 15:46:00 +00:00
|
|
|
- (void)applyLayoutNode:(CSSNodeRef)node
|
2015-11-03 22:45:46 +00:00
|
|
|
viewsWithNewFrame:(NSMutableSet<RCTShadowView *> *)viewsWithNewFrame
|
2015-06-01 15:34:09 +00:00
|
|
|
absolutePosition:(CGPoint)absolutePosition NS_REQUIRES_SUPER;
|
2015-02-20 04:10:52 +00:00
|
|
|
|
2016-05-31 17:18:37 +00:00
|
|
|
/**
|
|
|
|
* Enumerate the child nodes and tell them to apply layout.
|
|
|
|
*/
|
2016-07-20 15:46:00 +00:00
|
|
|
- (void)applyLayoutToChildren:(CSSNodeRef)node
|
2016-05-31 17:18:37 +00:00
|
|
|
viewsWithNewFrame:(NSMutableSet<RCTShadowView *> *)viewsWithNewFrame
|
|
|
|
absolutePosition:(CGPoint)absolutePosition;
|
|
|
|
|
2016-07-20 09:49:13 +00:00
|
|
|
/**
|
|
|
|
* Return whether or not this node acts as a leaf node in the eyes of CSSLayout. For example
|
|
|
|
* RCTShadowText has children which it does not want CSSLayout to lay out so in the eyes of
|
|
|
|
* CSSLayout it is a leaf node.
|
|
|
|
*/
|
|
|
|
- (BOOL)isCSSLeafNode;
|
|
|
|
|
2015-06-01 15:34:09 +00:00
|
|
|
- (void)dirtyPropagation NS_REQUIRES_SUPER;
|
2015-02-20 04:10:52 +00:00
|
|
|
- (BOOL)isPropagationDirty;
|
|
|
|
|
2015-06-01 15:34:09 +00:00
|
|
|
- (void)dirtyText NS_REQUIRES_SUPER;
|
|
|
|
- (void)setTextComputed NS_REQUIRES_SUPER;
|
2015-02-20 04:10:52 +00:00
|
|
|
- (BOOL)isTextDirty;
|
|
|
|
|
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
|