2015-03-23 22:07:33 +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 22:07:33 +00:00
|
|
|
*/
|
2015-01-30 01:10:49 +00:00
|
|
|
|
|
|
|
#import <UIKit/UIKit.h>
|
|
|
|
|
2016-11-23 15:47:52 +00:00
|
|
|
#import <React/RCTComponent.h>
|
2017-06-21 00:12:52 +00:00
|
|
|
#import <yoga/YGEnums.h>
|
2015-01-30 01:10:49 +00:00
|
|
|
|
2016-07-12 12:51:56 +00:00
|
|
|
@class RCTShadowView;
|
2015-01-30 01:10:49 +00:00
|
|
|
|
2015-08-06 22:44:15 +00:00
|
|
|
@interface UIView (React) <RCTComponent>
|
2015-01-30 01:10:49 +00:00
|
|
|
|
2016-06-07 07:08:16 +00:00
|
|
|
/**
|
|
|
|
* RCTComponent interface.
|
|
|
|
*/
|
|
|
|
- (NSArray<UIView *> *)reactSubviews NS_REQUIRES_SUPER;
|
|
|
|
- (UIView *)reactSuperview NS_REQUIRES_SUPER;
|
|
|
|
- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex NS_REQUIRES_SUPER;
|
|
|
|
- (void)removeReactSubview:(UIView *)subview NS_REQUIRES_SUPER;
|
|
|
|
|
2017-06-21 01:56:26 +00:00
|
|
|
/**
|
|
|
|
* The native id of the view, used to locate view from native codes
|
|
|
|
*/
|
|
|
|
@property (nonatomic, copy) NSString *nativeID;
|
|
|
|
|
2017-02-02 17:51:19 +00:00
|
|
|
/**
|
|
|
|
* Layout direction of the view.
|
|
|
|
* Internally backed to `semanticContentAttribute` property.
|
|
|
|
* Defaults to `LeftToRight` in case of ambiguity.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign) UIUserInterfaceLayoutDirection reactLayoutDirection;
|
|
|
|
|
2017-06-21 00:12:52 +00:00
|
|
|
/**
|
|
|
|
* Yoga `display` style property. Can be `flex` or `none`.
|
|
|
|
* Defaults to `flex`.
|
|
|
|
* May be used to temporary hide the view in a very efficient way.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, assign) YGDisplay reactDisplay;
|
|
|
|
|
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
|
|
|
/**
|
2017-05-29 04:35:38 +00:00
|
|
|
* The z-index of the view.
|
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-06-09 16:48:56 +00:00
|
|
|
@property (nonatomic, assign) NSInteger reactZIndex;
|
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
|
|
|
|
|
|
|
/**
|
2017-05-29 04:35:38 +00:00
|
|
|
* Subviews sorted by z-index. Note that this method doesn't do any caching (yet)
|
|
|
|
* and sorts all the views each call.
|
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
|
|
|
*/
|
2017-05-29 04:35:38 +00:00
|
|
|
- (NSArray<UIView *> *)reactZIndexSortedSubviews;
|
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-06-07 07:08:16 +00:00
|
|
|
/**
|
|
|
|
* Updates the subviews array based on the reactSubviews. Default behavior is
|
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
|
|
|
* to insert the sortedReactSubviews into the UIView.
|
2016-06-07 07:08:16 +00:00
|
|
|
*/
|
|
|
|
- (void)didUpdateReactSubviews;
|
2015-11-03 22:45:46 +00:00
|
|
|
|
2017-12-20 07:34:50 +00:00
|
|
|
/**
|
|
|
|
* Called each time props have been set.
|
|
|
|
* The default implementation does nothing.
|
|
|
|
*/
|
|
|
|
- (void)didSetProps:(NSArray<NSString *> *)changedProps;
|
|
|
|
|
2015-03-25 02:34:12 +00:00
|
|
|
/**
|
|
|
|
* Used by the UIIManager to set the view frame.
|
|
|
|
* May be overriden to disable animation, etc.
|
|
|
|
*/
|
|
|
|
- (void)reactSetFrame:(CGRect)frame;
|
|
|
|
|
2015-03-06 17:54:10 +00:00
|
|
|
/**
|
|
|
|
* This method finds and returns the containing view controller for the view.
|
|
|
|
*/
|
2015-07-31 18:23:29 +00:00
|
|
|
- (UIViewController *)reactViewController;
|
2015-03-06 17:54:10 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* This method attaches the specified controller as a child of the
|
|
|
|
* the owning view controller of this view. Returns NO if no view
|
|
|
|
* controller is found (which may happen if the view is not currently
|
|
|
|
* attached to the view hierarchy).
|
|
|
|
*/
|
2015-07-31 18:23:29 +00:00
|
|
|
- (void)reactAddControllerToClosestParent:(UIViewController *)controller;
|
2015-03-06 17:54:10 +00:00
|
|
|
|
2017-04-03 22:11:02 +00:00
|
|
|
/**
|
|
|
|
* Focus manipulation.
|
|
|
|
*/
|
|
|
|
- (void)reactFocus;
|
|
|
|
- (void)reactFocusIfNeeded;
|
|
|
|
- (void)reactBlur;
|
|
|
|
|
2017-05-29 22:56:42 +00:00
|
|
|
/**
|
|
|
|
* Useful properties for computing layout.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, readonly) UIEdgeInsets reactBorderInsets;
|
|
|
|
@property (nonatomic, readonly) UIEdgeInsets reactPaddingInsets;
|
|
|
|
@property (nonatomic, readonly) UIEdgeInsets reactCompoundInsets;
|
|
|
|
@property (nonatomic, readonly) CGRect reactContentFrame;
|
|
|
|
|
2017-06-02 21:17:56 +00:00
|
|
|
/**
|
|
|
|
* The (sub)view which represents this view in terms of accessibility.
|
|
|
|
* ViewManager will apply all accessibility properties directly to this view.
|
|
|
|
* May be overriten in view subclass which needs to be accessiblitywise
|
|
|
|
* transparent in favour of some subview.
|
|
|
|
* Defaults to `self`.
|
|
|
|
*/
|
|
|
|
@property (nonatomic, readonly) UIView *reactAccessibilityElement;
|
|
|
|
|
2015-03-25 02:34:12 +00:00
|
|
|
@end
|