Skip to content

Commit

Permalink
feat: Add iOS Paper implementation of inset logical properties (faceb…
Browse files Browse the repository at this point in the history 
…ook#36241)

Summary:
This PR adds Paper support to `inset` logical properties on iOS as requested on facebook#34425. This implementation includes the addition of the following style properties

- `inset`, equivalent to `top`, `bottom`, `right` and `left`.
- `insetBlock`, equivalent to `top` and `bottom`.
- `insetBlockEnd`, equivalent to `bottom`.
- `insetBlockStart`, equivalent to `top`.
- `insetInline`, equivalent to `right` and `left`.
- `insetInlineEnd`, equivalent to `right` or `left`.
- `insetInlineStart`, equivalent to `right` or `left`.

Android changes are in a separate PR to facilitate code review facebook#36242

## Changelog

[IOS] [ADDED] - Add Paper implementation of inset logical properties

Pull Request resolved: facebook#36241

Test Plan:
1. Open the RNTester app and navigate to the `View` page
2. Test the new style properties through the `Insets` section

![image](https://user-images.githubusercontent.com/11707729/220512607-a1d89dbe-64db-4140-9fdb-f9d7897fe3bd.png)

Reviewed By: lunaleaps

Differential Revision: D43525110

Pulled By: NickGerleman

fbshipit-source-id: b70b0ef183dcf192b2c3547422bbe161b7bdba50
  • Loading branch information
@gabrieldonadel @OlimpiaZurek
gabrieldonadel authored and OlimpiaZurek committed May 22, 2023
1 parent 2da8485 commit 9ff7c81
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 36 deletions.
7 changes: 7 additions & 0 deletions React/Views/RCTShadowView.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,13 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
@property (nonatomic, assign) YGValue right;
@property (nonatomic, assign) YGValue start;
@property (nonatomic, assign) YGValue end;
@property (nonatomic, assign) YGValue inset;
@property (nonatomic, assign) YGValue insetInline;
@property (nonatomic, assign) YGValue insetInlineEnd;
@property (nonatomic, assign) YGValue insetInlineStart;
@property (nonatomic, assign) YGValue insetBlock;
@property (nonatomic, assign) YGValue insetBlockEnd;
@property (nonatomic, assign) YGValue insetBlockStart;

@property (nonatomic, assign) YGValue width;
@property (nonatomic, assign) YGValue height;
Expand Down
114 changes: 78 additions & 36 deletions React/Views/RCTShadowView.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ typedef NS_ENUM(unsigned int, meta_prop_t) {
META_PROP_HORIZONTAL,
META_PROP_VERTICAL,
META_PROP_ALL,
META_PROP_INLINE,
META_PROP_INLINE_END,
META_PROP_INLINE_START,
META_PROP_BLOCK,
META_PROP_BLOCK_END,
META_PROP_BLOCK_START,
META_PROP_COUNT,
};

Expand All @@ -38,9 +44,11 @@ @implementation RCTShadowView {
BOOL _recomputePadding;
BOOL _recomputeMargin;
BOOL _recomputeBorder;
BOOL _recomputePosition;
YGValue _paddingMetaProps[META_PROP_COUNT];
YGValue _marginMetaProps[META_PROP_COUNT];
YGValue _borderMetaProps[META_PROP_COUNT];
YGValue _positionMetaProps[META_PROP_COUNT];
}

+ (YGConfigRef)yogaConfig
Expand Down Expand Up @@ -162,6 +170,47 @@ static void RCTProcessMetaPropsBorder(const YGValue metaProps[META_PROP_COUNT],
YGNodeStyleSetBorder(node, YGEdgeAll, metaProps[META_PROP_ALL].value);
}

static void RCTProcessMetaPropsPosition(const YGValue metaProps[META_PROP_COUNT], YGNodeRef node)
{
YGNodeStyleSetPosition(node, YGEdgeTop, metaProps[META_PROP_TOP].value);
YGNodeStyleSetPosition(node, YGEdgeBottom, metaProps[META_PROP_BOTTOM].value);
YGNodeStyleSetPosition(node, YGEdgeStart, metaProps[META_PROP_START].value);
YGNodeStyleSetPosition(node, YGEdgeEnd, metaProps[META_PROP_END].value);

if (![[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) {
YGNodeStyleSetPosition(node, YGEdgeLeft, metaProps[META_PROP_LEFT].value);
YGNodeStyleSetPosition(node, YGEdgeRight, metaProps[META_PROP_RIGHT].value);
} else {
YGNodeStyleSetPosition(node, YGEdgeStart, metaProps[META_PROP_LEFT].value);
YGNodeStyleSetPosition(node, YGEdgeEnd, metaProps[META_PROP_RIGHT].value);
}

// Aliases with precedence
if (!YGFloatIsUndefined(metaProps[META_PROP_ALL].value)) {
YGNodeStyleSetPosition(node, YGEdgeAll, metaProps[META_PROP_ALL].value);
}
if (!YGFloatIsUndefined(metaProps[META_PROP_BLOCK].value)) {
YGNodeStyleSetPosition(node, YGEdgeVertical, metaProps[META_PROP_BLOCK].value);
}
if (!YGFloatIsUndefined(metaProps[META_PROP_INLINE].value)) {
YGNodeStyleSetPosition(node, YGEdgeHorizontal, metaProps[META_PROP_INLINE].value);
}
if (!YGFloatIsUndefined(metaProps[META_PROP_INLINE_END].value)) {
YGNodeStyleSetPosition(node, YGEdgeEnd, metaProps[META_PROP_INLINE_END].value);
}
if (!YGFloatIsUndefined(metaProps[META_PROP_INLINE_START].value)) {
YGNodeStyleSetPosition(node, YGEdgeStart, metaProps[META_PROP_INLINE_START].value);
}

// Aliases without precedence
if (YGFloatIsUndefined(metaProps[META_PROP_BOTTOM].value)) {
YGNodeStyleSetPosition(node, YGEdgeBottom, metaProps[META_PROP_BLOCK_END].value);
}
if (YGFloatIsUndefined(metaProps[META_PROP_TOP].value)) {
YGNodeStyleSetPosition(node, YGEdgeTop, metaProps[META_PROP_BLOCK_START].value);
}
}

- (CGRect)measureLayoutRelativeToAncestor:(RCTShadowView *)ancestor
{
CGPoint offset = CGPointZero;
Expand Down Expand Up @@ -193,6 +242,7 @@ - (instancetype)init
_paddingMetaProps[ii] = YGValueUndefined;
_marginMetaProps[ii] = YGValueUndefined;
_borderMetaProps[ii] = YGValueUndefined;
_positionMetaProps[ii] = YGValueUndefined;
}

_intrinsicContentSize = CGSizeMake(UIViewNoIntrinsicMetric, UIViewNoIntrinsicMetric);
Expand Down Expand Up @@ -512,42 +562,30 @@ -(YGValue)getProp \

// Position

#define RCT_POSITION_PROPERTY(setProp, getProp, edge) \
-(void)set##setProp : (YGValue)value \
{ \
RCT_SET_YGVALUE(value, YGNodeStyleSetPosition, _yogaNode, edge); \
} \
-(YGValue)getProp \
{ \
return YGNodeStyleGetPosition(_yogaNode, edge); \
}

RCT_POSITION_PROPERTY(Top, top, YGEdgeTop)
RCT_POSITION_PROPERTY(Bottom, bottom, YGEdgeBottom)
RCT_POSITION_PROPERTY(Start, start, YGEdgeStart)
RCT_POSITION_PROPERTY(End, end, YGEdgeEnd)

- (void)setLeft:(YGValue)value
{
YGEdge edge = [[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL] ? YGEdgeStart : YGEdgeLeft;
RCT_SET_YGVALUE(value, YGNodeStyleSetPosition, _yogaNode, edge);
}
- (YGValue)left
{
YGEdge edge = [[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL] ? YGEdgeStart : YGEdgeLeft;
return YGNodeStyleGetPosition(_yogaNode, edge);
}

- (void)setRight:(YGValue)value
{
YGEdge edge = [[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL] ? YGEdgeEnd : YGEdgeRight;
RCT_SET_YGVALUE(value, YGNodeStyleSetPosition, _yogaNode, edge);
}
- (YGValue)right
{
YGEdge edge = [[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL] ? YGEdgeEnd : YGEdgeRight;
return YGNodeStyleGetPosition(_yogaNode, edge);
}
#define RCT_POSITION_PROPERTY(setProp, getProp, metaProp) \
-(void)set##setProp : (YGValue)value \
{ \
_positionMetaProps[META_PROP_##metaProp] = value; \
_recomputePosition = YES; \
} \
-(YGValue)getProp \
{ \
return _positionMetaProps[META_PROP_##metaProp]; \
}

RCT_POSITION_PROPERTY(Top, top, TOP)
RCT_POSITION_PROPERTY(Bottom, bottom, BOTTOM)
RCT_POSITION_PROPERTY(Left, left, LEFT)
RCT_POSITION_PROPERTY(Right, right, RIGHT)
RCT_POSITION_PROPERTY(Start, start, START)
RCT_POSITION_PROPERTY(End, end, END)
RCT_POSITION_PROPERTY(Inset, inset, ALL)
RCT_POSITION_PROPERTY(InsetInline, insetInline, INLINE)
RCT_POSITION_PROPERTY(InsetInlineEnd, insetInlineEnd, INLINE_END)
RCT_POSITION_PROPERTY(InsetInlineStart, insetInlineStart, INLINE_START)
RCT_POSITION_PROPERTY(InsetBlock, insetBlock, BLOCK)
RCT_POSITION_PROPERTY(InsetBlockEnd, insetBlockEnd, BLOCK_END)
RCT_POSITION_PROPERTY(InsetBlockStart, insetBlockStart, BLOCK_START)

// Size

Expand Down Expand Up @@ -697,9 +735,13 @@ - (void)didSetProps:(__unused NSArray<NSString *> *)changedProps
if (_recomputeBorder) {
RCTProcessMetaPropsBorder(_borderMetaProps, _yogaNode);
}
if (_recomputePosition) {
RCTProcessMetaPropsPosition(_positionMetaProps, _yogaNode);
}
_recomputeMargin = NO;
_recomputePadding = NO;
_recomputeBorder = NO;
_recomputePosition = NO;
}

@end
7 changes: 7 additions & 0 deletions React/Views/RCTViewManager.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,6 +394,13 @@ - (RCTShadowView *)shadowView
RCT_EXPORT_SHADOW_PROPERTY(end, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(bottom, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(left, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(inset, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(insetInline, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(insetInlineEnd, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(insetInlineStart, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(insetBlock, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(insetBlockEnd, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(insetBlockStart, YGValue)

RCT_EXPORT_SHADOW_PROPERTY(width, YGValue)
RCT_EXPORT_SHADOW_PROPERTY(height, YGValue)
Expand Down

0 comments on commit 9ff7c81

Please sign in to comment.