Skip to content

Commit a6e1e33

Browse files
Emil SjolanderFacebook Github Bot 1
Emil Sjolander
authored and
Facebook Github Bot 1
committed
Reverted commit D3855801
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this. Reviewed By: astreet Differential Revision: D3855801 fbshipit-source-id: 3c365f9e6ef612fd9d9caaaa8c650e9702176e77
1 parent 2cf2fdb commit a6e1e33

11 files changed

Lines changed: 39 additions & 55 deletions

File tree

‎Libraries/Components/ScrollView/ScrollView.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -547,12 +547,10 @@ const styles = StyleSheet.create({
547547
baseVertical: {
548548
flex: 1,
549549
flexDirection: 'column',
550-
overflow: 'scroll',
551550
},
552551
baseHorizontal: {
553552
flex: 1,
554553
flexDirection: 'row',
555-
overflow: 'scroll',
556554
},
557555
contentContainerHorizontal: {
558556
flexDirection: 'row',

‎Libraries/Components/View/ViewStylePropTypes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ var ViewStylePropTypes = {
4343
borderBottomWidth: ReactPropTypes.number,
4444
borderLeftWidth: ReactPropTypes.number,
4545
opacity: ReactPropTypes.number,
46+
overflow: ReactPropTypes.oneOf(['visible', 'hidden']),
4647
/**
4748
* (Android-only) Sets the elevation of a view, using Android's underlying
4849
* [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).

‎Libraries/StyleSheet/LayoutPropTypes.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -328,19 +328,6 @@ var LayoutPropTypes = {
328328
'stretch'
329329
]),
330330

331-
/** `overflow` controls how a children are measured and displayed.
332-
* `overflow: hidden` causes views to be clipped while `overflow: scroll`
333-
* causes views to be measured independently of their parents main axis.`
334-
* It works like `overflow` in CSS (default: visible).
335-
* See https://developer.mozilla.org/en/docs/Web/CSS/overflow
336-
* for more details.
337-
*/
338-
overflow: ReactPropTypes.oneOf([
339-
'visible',
340-
'hidden',
341-
'scroll',
342-
]),
343-
344331
/** In React Native `flex` does not work the same way that it does in CSS.
345332
* `flex` is a number rather than a string, and it works
346333
* according to the `css-layout` library

‎React/Base/RCTConvert.m‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -612,8 +612,7 @@ + (NSPropertyList)NSPropertyList:(id)json
612612

613613
RCT_ENUM_CONVERTER(CSSOverflow, (@{
614614
@"hidden": @(CSSOverflowHidden),
615-
@"visible": @(CSSOverflowVisible),
616-
@"scroll": @(CSSOverflowScroll),
615+
@"visible": @(CSSOverflowVisible)
617616
}), CSSOverflowVisible, intValue)
618617

619618
RCT_ENUM_CONVERTER(CSSFlexDirection, (@{

‎React/CSSLayout/CSSLayout.c‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -451,8 +451,6 @@ print_css_node_rec(const CSSNodeRef node, const CSSPrintOptions options, const u
451451
printf("overflow: 'hidden', ");
452452
} else if (node->style.overflow == CSSOverflowVisible) {
453453
printf("overflow: 'visible', ");
454-
} else if (node->style.overflow == CSSOverflowScroll) {
455-
printf("overflow: 'scroll', ");
456454
}
457455

458456
if (four_equal(node->style.margin)) {
@@ -557,23 +555,26 @@ static bool isColumnDirection(const CSSFlexDirection flexDirection) {
557555
}
558556

559557
static float getLeadingMargin(const CSSNodeRef node, const CSSFlexDirection axis) {
560-
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.margin[CSSEdgeStart])) {
558+
if (isRowDirection(axis) &&
559+
!CSSValueIsUndefined(node->style.margin[CSSEdgeStart])) {
561560
return node->style.margin[CSSEdgeStart];
562561
}
563562

564563
return computedEdgeValue(node->style.margin, leading[axis], 0);
565564
}
566565

567566
static float getTrailingMargin(const CSSNodeRef node, const CSSFlexDirection axis) {
568-
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.margin[CSSEdgeEnd])) {
567+
if (isRowDirection(axis) &&
568+
!CSSValueIsUndefined(node->style.margin[CSSEdgeEnd])) {
569569
return node->style.margin[CSSEdgeEnd];
570570
}
571571

572572
return computedEdgeValue(node->style.margin, trailing[axis], 0);
573573
}
574574

575575
static float getLeadingPadding(const CSSNodeRef node, const CSSFlexDirection axis) {
576-
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.padding[CSSEdgeStart]) &&
576+
if (isRowDirection(axis) &&
577+
!CSSValueIsUndefined(node->style.padding[CSSEdgeStart]) &&
577578
node->style.padding[CSSEdgeStart] >= 0) {
578579
return node->style.padding[CSSEdgeStart];
579580
}
@@ -586,7 +587,8 @@ static float getLeadingPadding(const CSSNodeRef node, const CSSFlexDirection axi
586587
}
587588

588589
static float getTrailingPadding(const CSSNodeRef node, const CSSFlexDirection axis) {
589-
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.padding[CSSEdgeEnd]) &&
590+
if (isRowDirection(axis) &&
591+
!CSSValueIsUndefined(node->style.padding[CSSEdgeEnd]) &&
590592
node->style.padding[CSSEdgeEnd] >= 0) {
591593
return node->style.padding[CSSEdgeEnd];
592594
}
@@ -599,7 +601,8 @@ static float getTrailingPadding(const CSSNodeRef node, const CSSFlexDirection ax
599601
}
600602

601603
static float getLeadingBorder(const CSSNodeRef node, const CSSFlexDirection axis) {
602-
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.border[CSSEdgeStart]) &&
604+
if (isRowDirection(axis) &&
605+
!CSSValueIsUndefined(node->style.border[CSSEdgeStart]) &&
603606
node->style.border[CSSEdgeStart] >= 0) {
604607
return node->style.border[CSSEdgeStart];
605608
}
@@ -612,7 +615,8 @@ static float getLeadingBorder(const CSSNodeRef node, const CSSFlexDirection axis
612615
}
613616

614617
static float getTrailingBorder(const CSSNodeRef node, const CSSFlexDirection axis) {
615-
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.border[CSSEdgeEnd]) &&
618+
if (isRowDirection(axis) &&
619+
!CSSValueIsUndefined(node->style.border[CSSEdgeEnd]) &&
616620
node->style.border[CSSEdgeEnd] >= 0) {
617621
return node->style.border[CSSEdgeEnd];
618622
}
@@ -1136,17 +1140,21 @@ static void layoutNodeImpl(const CSSNodeRef node,
11361140
childHeightMeasureMode = CSSMeasureModeExactly;
11371141
}
11381142

1139-
// The W3C spec doesn't say anything about the 'overflow' property,
1140-
// but all major browsers appear to implement the following logic.
1141-
if ((!isMainAxisRow && node->style.overflow == CSSOverflowScroll) || node->style.overflow != CSSOverflowScroll) {
1142-
if (CSSValueIsUndefined(childWidth) && !CSSValueIsUndefined(availableInnerWidth)) {
1143-
childWidth = availableInnerWidth;
1144-
childWidthMeasureMode = CSSMeasureModeAtMost;
1145-
}
1143+
// According to the spec, if the main size is not definite and the
1144+
// child's inline axis is parallel to the main axis (i.e. it's
1145+
// horizontal), the child should be sized using "UNDEFINED" in
1146+
// the main size. Otherwise use "AT_MOST" in the cross axis.
1147+
if (!isMainAxisRow && CSSValueIsUndefined(childWidth) &&
1148+
!CSSValueIsUndefined(availableInnerWidth)) {
1149+
childWidth = availableInnerWidth;
1150+
childWidthMeasureMode = CSSMeasureModeAtMost;
11461151
}
11471152

1148-
if ((isMainAxisRow && node->style.overflow == CSSOverflowScroll) || node->style.overflow != CSSOverflowScroll) {
1149-
if (CSSValueIsUndefined(childHeight) && !CSSValueIsUndefined(availableInnerHeight)) {
1153+
// The W3C spec doesn't say anything about the 'overflow' property,
1154+
// but all major browsers appear to implement the following logic.
1155+
if (node->style.overflow == CSSOverflowHidden) {
1156+
if (isMainAxisRow && CSSValueIsUndefined(childHeight) &&
1157+
!CSSValueIsUndefined(availableInnerHeight)) {
11501158
childHeight = availableInnerHeight;
11511159
childHeightMeasureMode = CSSMeasureModeAtMost;
11521160
}

‎React/CSSLayout/CSSLayout.h‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ typedef enum CSSJustify {
5555
typedef enum CSSOverflow {
5656
CSSOverflowVisible,
5757
CSSOverflowHidden,
58-
CSSOverflowScroll,
5958
} CSSOverflow;
6059

6160
// Note: auto is only a valid value for alignSelf. It is NOT a valid value for

‎React/Views/RCTViewManager.m‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDictio
122122
RCT_CUSTOM_VIEW_PROPERTY(overflow, CSSOverflow, RCTView)
123123
{
124124
if (json) {
125-
view.clipsToBounds = [RCTConvert CSSOverflow:json] != CSSOverflowVisible;
125+
view.clipsToBounds = [RCTConvert CSSOverflow:json] == CSSOverflowHidden;
126126
} else {
127127
view.clipsToBounds = defaultView.clipsToBounds;
128128
}

‎ReactAndroid/src/main/java/com/facebook/csslayout/CSSOverflow.java‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,4 @@
1212
public enum CSSOverflow {
1313
VISIBLE,
1414
HIDDEN,
15-
SCROLL,
1615
}

‎ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -715,17 +715,19 @@ private static void layoutNodeImpl(
715715
childHeightMeasureMode = CSSMeasureMode.EXACTLY;
716716
}
717717

718-
// The W3C spec doesn't say anything about the 'overflow' property,
719-
// but all major browsers appear to implement the following logic.
720-
if ((!isMainAxisRow && node.style.overflow == CSSOverflow.SCROLL) || node.style.overflow != CSSOverflow.SCROLL) {
721-
if (Float.isNaN(childWidth) && !Float.isNaN(availableInnerWidth)) {
722-
childWidth = availableInnerWidth;
723-
childWidthMeasureMode = CSSMeasureMode.AT_MOST;
724-
}
718+
// According to the spec, if the main size is not definite and the
719+
// child's inline axis is parallel to the main axis (i.e. it's
720+
// horizontal), the child should be sized using "UNDEFINED" in
721+
// the main size. Otherwise use "AT_MOST" in the cross axis.
722+
if (!isMainAxisRow && Float.isNaN(childWidth) && !Float.isNaN(availableInnerWidth)) {
723+
childWidth = availableInnerWidth;
724+
childWidthMeasureMode = CSSMeasureMode.AT_MOST;
725725
}
726726

727-
if ((isMainAxisRow && node.style.overflow == CSSOverflow.SCROLL) || node.style.overflow != CSSOverflow.SCROLL) {
728-
if (Float.isNaN(childHeight) && !Float.isNaN(availableInnerHeight)) {
727+
// The W3C spec doesn't say anything about the 'overflow' property,
728+
// but all major browsers appear to implement the following logic.
729+
if (node.style.overflow == CSSOverflow.HIDDEN) {
730+
if (isMainAxisRow && Float.isNaN(childHeight) && !Float.isNaN(availableInnerHeight)) {
729731
childHeight = availableInnerHeight;
730732
childHeightMeasureMode = CSSMeasureMode.AT_MOST;
731733
}

‎ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
import com.facebook.csslayout.CSSConstants;
1111
import com.facebook.csslayout.CSSFlexDirection;
1212
import com.facebook.csslayout.CSSJustify;
13-
import com.facebook.csslayout.CSSOverflow;
1413
import com.facebook.csslayout.CSSPositionType;
1514
import com.facebook.csslayout.CSSWrap;
1615
import com.facebook.react.uimanager.annotations.ReactProp;
@@ -103,12 +102,6 @@ public void setJustifyContent(@Nullable String justifyContent) {
103102
justifyContent.toUpperCase(Locale.US).replace("-", "_")));
104103
}
105104

106-
@ReactProp(name = ViewProps.OVERFLOW)
107-
public void setOverflow(@Nullable String overflow) {
108-
setOverflow(overflow == null ? CSSOverflow.VISIBLE : CSSOverflow.valueOf(
109-
overflow.toUpperCase(Locale.US).replace("-", "_")));
110-
}
111-
112105
@ReactPropGroup(names = {
113106
ViewProps.MARGIN,
114107
ViewProps.MARGIN_VERTICAL,

0 commit comments

Comments
 (0)