Skip to content

Commit 426b300

Browse files
NickGerlemanfacebook-github-bot
NickGerleman
authored and
facebook-github-bot
committed
Remove ReactEditText Legacy Background Path (facebook#46162)
Summary: Pull Request resolved: facebook#46162 ## This Diff This removes the legacy path from ReactEditText and its view manager. ## This Stack This removes the non-Style-applicator background management paths of the different native components. There have been multiple conflicting changes, and bugs added bc harder to reason about, which motivates making this change as soon as possible. This also lets us formalize guarantees that BaseViewManager may safely manipulate background styling of all built in native components. There is one still known issue, where BackgroundStyleApplicator does not propagate I18nManager derived layout direction to borders (compared to Android derived root direction). This is mostly an issue for apps that with LTR and RTL context, or force a layout direction, which I would guess is relatively rare, so my plan is to forward fix this later this by enabling set_android_layout_direction which will solve that problem mopre generically. Changelog: [Internal] Reviewed By: cortinico Differential Revision: D61658080 fbshipit-source-id: 6ac7c5ed230e44fe307640a730e076b903e0674a
1 parent b4d2829 commit 426b300

File tree

2 files changed

+38
-105
lines changed

2 files changed

+38
-105
lines changed

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java‎

Lines changed: 24 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
import com.facebook.react.bridge.ReactSoftExceptionLogger;
5050
import com.facebook.react.common.ReactConstants;
5151
import com.facebook.react.common.build.ReactBuildConfig;
52-
import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
5352
import com.facebook.react.uimanager.BackgroundStyleApplicator;
5453
import com.facebook.react.uimanager.LengthPercentage;
5554
import com.facebook.react.uimanager.LengthPercentageType;
@@ -76,7 +75,6 @@
7675
import com.facebook.react.views.text.internal.span.ReactStrikethroughSpan;
7776
import com.facebook.react.views.text.internal.span.ReactUnderlineSpan;
7877
import com.facebook.react.views.text.internal.span.TextInlineImageSpan;
79-
import com.facebook.react.views.view.ReactViewBackgroundManager;
8078
import java.util.ArrayList;
8179
import java.util.Objects;
8280

@@ -133,8 +131,6 @@ public class ReactEditText extends AppCompatEditText {
133131
private @Nullable String mPlaceholder = null;
134132
private Overflow mOverflow = Overflow.VISIBLE;
135133

136-
private final ReactViewBackgroundManager mReactBackgroundManager;
137-
138134
private StateWrapper mStateWrapper = null;
139135
protected boolean mDisableTextDiffing = false;
140136

@@ -147,7 +143,6 @@ public ReactEditText(Context context) {
147143
super(context);
148144
setFocusableInTouchMode(false);
149145

150-
mReactBackgroundManager = new ReactViewBackgroundManager(this);
151146
mInputMethodManager =
152147
(InputMethodManager)
153148
Assertions.assertNotNull(context.getSystemService(Context.INPUT_METHOD_SERVICE));
@@ -765,7 +760,9 @@ private void stripStyleEquivalentSpans(SpannableStringBuilder sb) {
765760
stripSpansOfKind(
766761
sb,
767762
ReactBackgroundColorSpan.class,
768-
(span) -> span.getBackgroundColor() == mReactBackgroundManager.getBackgroundColor());
763+
(span) ->
764+
Objects.equals(
765+
span.getBackgroundColor(), BackgroundStyleApplicator.getBackgroundColor(this)));
769766

770767
stripSpansOfKind(
771768
sb,
@@ -827,8 +824,8 @@ private void addSpansFromStyleAttributes(SpannableStringBuilder workingText) {
827824
workingText.setSpan(
828825
new ReactForegroundColorSpan(getCurrentTextColor()), 0, workingText.length(), spanFlags);
829826

830-
int backgroundColor = mReactBackgroundManager.getBackgroundColor();
831-
if (backgroundColor != Color.TRANSPARENT) {
827+
@Nullable Integer backgroundColor = BackgroundStyleApplicator.getBackgroundColor(this);
828+
if (backgroundColor != null && backgroundColor != Color.TRANSPARENT) {
832829
workingText.setSpan(
833830
new ReactBackgroundColorSpan(backgroundColor), 0, workingText.length(), spanFlags);
834831
}
@@ -1087,66 +1084,42 @@ public void onFinishTemporaryDetach() {
10871084

10881085
@Override
10891086
public void setBackgroundColor(int color) {
1090-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1091-
BackgroundStyleApplicator.setBackgroundColor(this, color);
1092-
} else {
1093-
mReactBackgroundManager.setBackgroundColor(color);
1094-
}
1087+
BackgroundStyleApplicator.setBackgroundColor(this, color);
10951088
}
10961089

10971090
public void setBorderWidth(int position, float width) {
1098-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1099-
BackgroundStyleApplicator.setBorderWidth(
1100-
this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
1101-
} else {
1102-
mReactBackgroundManager.setBorderWidth(position, width);
1103-
}
1091+
BackgroundStyleApplicator.setBorderWidth(
1092+
this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
11041093
}
11051094

11061095
public void setBorderColor(int position, @Nullable Integer color) {
1107-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1108-
BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
1109-
} else {
1110-
mReactBackgroundManager.setBorderColor(position, color);
1111-
}
1096+
BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
11121097
}
11131098

11141099
public int getBorderColor(int position) {
1115-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1116-
@Nullable
1117-
Integer borderColor =
1118-
BackgroundStyleApplicator.getBorderColor(this, LogicalEdge.values()[position]);
1119-
return borderColor == null ? Color.TRANSPARENT : borderColor;
1120-
} else {
1121-
return mReactBackgroundManager.getBorderColor(position);
1122-
}
1100+
@Nullable
1101+
Integer borderColor =
1102+
BackgroundStyleApplicator.getBorderColor(this, LogicalEdge.values()[position]);
1103+
return borderColor == null ? Color.TRANSPARENT : borderColor;
11231104
}
11241105

11251106
public void setBorderRadius(float borderRadius) {
11261107
setBorderRadius(borderRadius, BorderRadiusProp.BORDER_RADIUS.ordinal());
11271108
}
11281109

11291110
public void setBorderRadius(float borderRadius, int position) {
1130-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1131-
@Nullable
1132-
LengthPercentage radius =
1133-
Float.isNaN(borderRadius)
1134-
? null
1135-
: new LengthPercentage(
1136-
PixelUtil.toDIPFromPixel(borderRadius), LengthPercentageType.POINT);
1137-
BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
1138-
} else {
1139-
mReactBackgroundManager.setBorderRadius(borderRadius, position);
1140-
}
1111+
@Nullable
1112+
LengthPercentage radius =
1113+
Float.isNaN(borderRadius)
1114+
? null
1115+
: new LengthPercentage(
1116+
PixelUtil.toDIPFromPixel(borderRadius), LengthPercentageType.POINT);
1117+
BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
11411118
}
11421119

11431120
public void setBorderStyle(@Nullable String style) {
1144-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1145-
BackgroundStyleApplicator.setBorderStyle(
1146-
this, style == null ? null : BorderStyle.fromString(style));
1147-
} else {
1148-
mReactBackgroundManager.setBorderStyle(style);
1149-
}
1121+
BackgroundStyleApplicator.setBorderStyle(
1122+
this, style == null ? null : BorderStyle.fromString(style));
11501123
}
11511124

11521125
public void setLetterSpacingPt(float letterSpacingPt) {
@@ -1300,18 +1273,13 @@ public void setOverflow(@Nullable String overflow) {
13001273
mOverflow = parsedOverflow == null ? Overflow.VISIBLE : parsedOverflow;
13011274
}
13021275

1303-
mReactBackgroundManager.setOverflow(overflow);
13041276
invalidate();
13051277
}
13061278

13071279
@Override
13081280
public void onDraw(Canvas canvas) {
1309-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1310-
if (mOverflow != Overflow.VISIBLE) {
1311-
BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
1312-
}
1313-
} else {
1314-
mReactBackgroundManager.maybeClipToPaddingBox(canvas);
1281+
if (mOverflow != Overflow.VISIBLE) {
1282+
BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
13151283
}
13161284

13171285
super.onDraw(canvas);

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java‎

Lines changed: 14 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
import com.facebook.react.common.MapBuilder;
4646
import com.facebook.react.common.ReactConstants;
4747
import com.facebook.react.common.mapbuffer.MapBuffer;
48-
import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
4948
import com.facebook.react.module.annotations.ReactModule;
5049
import com.facebook.react.uimanager.BackgroundStyleApplicator;
5150
import com.facebook.react.uimanager.BaseViewManager;
@@ -957,36 +956,20 @@ public void setReturnKeyLabel(ReactEditText view, String returnKeyLabel) {
957956
},
958957
defaultFloat = Float.NaN)
959958
public void setBorderRadius(ReactEditText view, int index, float borderRadius) {
960-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
961-
@Nullable
962-
LengthPercentage radius =
963-
Float.isNaN(borderRadius)
964-
? null
965-
: new LengthPercentage(borderRadius, LengthPercentageType.POINT);
966-
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], radius);
967-
} else {
968-
if (!Float.isNaN(borderRadius)) {
969-
borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
970-
}
971-
972-
if (index == 0) {
973-
view.setBorderRadius(borderRadius);
974-
} else {
975-
view.setBorderRadius(borderRadius, index - 1);
976-
}
977-
}
959+
@Nullable
960+
LengthPercentage radius =
961+
Float.isNaN(borderRadius)
962+
? null
963+
: new LengthPercentage(borderRadius, LengthPercentageType.POINT);
964+
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], radius);
978965
}
979966

980967
@ReactProp(name = "borderStyle")
981968
public void setBorderStyle(ReactEditText view, @Nullable String borderStyle) {
982-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
983-
@Nullable
984-
BorderStyle parsedBorderStyle =
985-
borderStyle == null ? null : BorderStyle.fromString(borderStyle);
986-
BackgroundStyleApplicator.setBorderStyle(view, parsedBorderStyle);
987-
} else {
988-
view.setBorderStyle(borderStyle);
989-
}
969+
@Nullable
970+
BorderStyle parsedBorderStyle =
971+
borderStyle == null ? null : BorderStyle.fromString(borderStyle);
972+
BackgroundStyleApplicator.setBorderStyle(view, parsedBorderStyle);
990973
}
991974

992975
@ReactProp(name = "showSoftInputOnFocus", defaultBoolean = true)
@@ -1023,14 +1006,7 @@ public void setTextDecorationLine(ReactEditText view, @Nullable String textDecor
10231006
},
10241007
defaultFloat = Float.NaN)
10251008
public void setBorderWidth(ReactEditText view, int index, float width) {
1026-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1027-
BackgroundStyleApplicator.setBorderWidth(view, LogicalEdge.values()[index], width);
1028-
} else {
1029-
if (!Float.isNaN(width)) {
1030-
width = PixelUtil.toPixelFromDIP(width);
1031-
}
1032-
view.setBorderWidth(SPACING_TYPES[index], width);
1033-
}
1009+
BackgroundStyleApplicator.setBorderWidth(view, LogicalEdge.values()[index], width);
10341010
}
10351011

10361012
@ReactPropGroup(
@@ -1043,12 +1019,7 @@ public void setBorderWidth(ReactEditText view, int index, float width) {
10431019
},
10441020
customType = "Color")
10451021
public void setBorderColor(ReactEditText view, int index, @Nullable Integer color) {
1046-
1047-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1048-
BackgroundStyleApplicator.setBorderColor(view, LogicalEdge.ALL, color);
1049-
} else {
1050-
view.setBorderColor(SPACING_TYPES[index], color);
1051-
}
1022+
BackgroundStyleApplicator.setBorderColor(view, LogicalEdge.ALL, color);
10521023
}
10531024

10541025
@ReactProp(name = "overflow")
@@ -1058,18 +1029,12 @@ public void setOverflow(ReactEditText view, @Nullable String overflow) {
10581029

10591030
@ReactProp(name = ViewProps.BOX_SHADOW, customType = "BoxShadow")
10601031
public void setBoxShadow(ReactEditText view, @Nullable ReadableArray shadows) {
1061-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1062-
BackgroundStyleApplicator.setBoxShadow(view, shadows);
1063-
}
1032+
BackgroundStyleApplicator.setBoxShadow(view, shadows);
10641033
}
10651034

10661035
@Override
10671036
public void setBackgroundColor(ReactEditText view, @ColorInt int backgroundColor) {
1068-
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
1069-
BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor);
1070-
} else {
1071-
super.setBackgroundColor(view, backgroundColor);
1072-
}
1037+
BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor);
10731038
}
10741039

10751040
@Override

0 commit comments

Comments
 (0)