Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: flex gap bindings #34974

Closed
wants to merge 8 commits into from
Closed

feat: flex gap bindings #34974

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6576fcb
wip: js
intergalacticspacehighway Oct 13, 2022
2cca97a
wip: ios bindings
intergalacticspacehighway Oct 13, 2022
2f3a5f9
wip: android
intergalacticspacehighway Oct 13, 2022
f554bb8
fix: android set default gap to undefined
intergalacticspacehighway Oct 13, 2022
7fd970e
nit: formatting
intergalacticspacehighway Oct 13, 2022
0be4af4
fix(android): use pixels to set gaps
intergalacticspacehighway Oct 14, 2022
ca58af5
fix: lint errors
intergalacticspacehighway Oct 19, 2022
67afa62
chore: formatting
intergalacticspacehighway Oct 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
wip: ios bindings
  • Loading branch information
@intergalacticspacehighway
intergalacticspacehighway committed Oct 13, 2022
commit 2cca97a82c1935a132b722b91adabdc0ed28a6e9
3 changes: 3 additions & 0 deletions React/Views/RCTShadowView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,9 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry

@property (nonatomic, assign) float flex;
@property (nonatomic, assign) float flexGrow;
@property (nonatomic, assign) float rowGap;
@property (nonatomic, assign) float columnGap;
@property (nonatomic, assign) float gap;
@property (nonatomic, assign) float flexShrink;
@property (nonatomic, assign) YGValue flexBasis;

Expand Down
14 changes: 14 additions & 0 deletions React/Views/RCTShadowView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,6 +642,20 @@ - (YGValue)flexBasis
return YGNodeStyleGetFlexBasis(_yogaNode);
}

#define RCT_GAP_PROPERTY(setProp, getProp, cssProp, type, gap) \
-(void)set##setProp : (type)value \
{ \
YGNodeStyleSet##cssProp(_yogaNode, gap, value); \
} \
-(type)getProp \
{ \
return YGNodeStyleGet##cssProp(_yogaNode, gap); \
}

RCT_GAP_PROPERTY(RowGap, rowGap, Gap, float, YGGutterRow);
RCT_GAP_PROPERTY(ColumnGap, columnGap, Gap, float, YGGutterColumn);
RCT_GAP_PROPERTY(Gap, gap, Gap, float, YGGutterAll);

#define RCT_STYLE_PROPERTY(setProp, getProp, cssProp, type) \
-(void)set##setProp : (type)value \
{ \
Expand Down
3 changes: 3 additions & 0 deletions React/Views/RCTViewManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,9 @@ - (RCTShadowView *)shadowView
RCT_EXPORT_SHADOW_PROPERTY(alignContent, YGAlign)
RCT_EXPORT_SHADOW_PROPERTY(position, YGPositionType)
RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float)
RCT_EXPORT_SHADOW_PROPERTY(rowGap, float)
RCT_EXPORT_SHADOW_PROPERTY(columnGap, float)
RCT_EXPORT_SHADOW_PROPERTY(gap, float)

RCT_EXPORT_SHADOW_PROPERTY(overflow, YGOverflow)
RCT_EXPORT_SHADOW_PROPERTY(display, YGDisplay)
Expand Down
13 changes: 13 additions & 0 deletions ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ static inline T const getFieldValue(
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGDimensionWidth, widthStr); \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGDimensionHeight, heightStr);

#define REBUILD_FIELD_YG_GUTTER(field, rowGapStr, columnGapStr, gapStr) \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterRow, rowGapStr); \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterColumn, columnGapStr); \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterAll, gapStr); \


#define REBUILD_FIELD_YG_EDGES(field, prefix, suffix) \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \
field, YGEdgeLeft, prefix "Left" suffix); \
Expand Down Expand Up @@ -114,6 +120,7 @@ void YogaStylableProps::setProp(
REBUILD_FIELD_SWITCH_CASE_YSP(flexShrink);
REBUILD_FIELD_SWITCH_CASE_YSP(flexBasis);
REBUILD_FIELD_SWITCH_CASE2(positionType, "position");
REBUILD_FIELD_YG_GUTTER(gap, "rowGap", "columnGap", "gap");
REBUILD_FIELD_SWITCH_CASE_YSP(aspectRatio);
REBUILD_FIELD_YG_DIMENSION(dimensions, "width", "height");
REBUILD_FIELD_YG_DIMENSION(minDimensions, "minWidth", "minHeight");
Expand Down Expand Up @@ -163,6 +170,12 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
"flex", yogaStyle.flex(), defaultYogaStyle.flex()),
debugStringConvertibleItem(
"flexGrow", yogaStyle.flexGrow(), defaultYogaStyle.flexGrow()),
debugStringConvertibleItem(
"rowGap", yogaStyle.gap()[YGGutterRow], defaultYogaStyle.gap()[YGGutterRow]),
debugStringConvertibleItem(
"columnGap", yogaStyle.gap()[YGGutterColumn], defaultYogaStyle.gap()[YGGutterColumn]),
debugStringConvertibleItem(
"gap", yogaStyle.gap()[YGGutterAll], defaultYogaStyle.gap()[YGGutterAll]),
debugStringConvertibleItem(
"flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()),
debugStringConvertibleItem(
Expand Down
7 changes: 7 additions & 0 deletions ReactCommon/react/renderer/components/view/propsConversions.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,13 @@ static inline YGStyle convertRawProp(
"",
sourceValue.padding(),
yogaStyle.padding());

yogaStyle.gap()[YGGutterRow] = convertRawProp(context, rawProps, "rowGap", sourceValue.gap()[YGGutterRow], yogaStyle.gap()[YGGutterRow]);

yogaStyle.gap()[YGGutterColumn] = convertRawProp(context, rawProps, "columnGap", sourceValue.gap()[YGGutterColumn], yogaStyle.gap()[YGGutterColumn]);

yogaStyle.gap()[YGGutterAll] = convertRawProp(context, rawProps, "gap", sourceValue.gap()[YGGutterAll], yogaStyle.gap()[YGGutterAll]);

yogaStyle.border() = convertRawProp(
context,
rawProps,
Expand Down
1 change: 1 addition & 0 deletions ReactCommon/react/test_utils/shadowTreeGeneration.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@ static inline ShadowNode::Unshared messWithYogaStyles(
"marginRight", "marginBottom", "paddingLeft", "paddingTop",
"paddingRight", "paddingBottom", "width", "height",
"maxWidth", "maxHeight", "minWidth", "minHeight",
"rowGap", "columnGap", "gap",
};

for (auto const &property : properties) {
Expand Down