Android: Implement border(Top|Bottom)(Start|End)Radius for RN

Reviewed By: achen1

Differential Revision: D5924734

fbshipit-source-id: 24759326064c11d2cd8948c7a710376ca9f41c63
This commit is contained in:
Ramanpreet Nara 2017-10-18 19:30:00 -07:00 committed by Facebook Github Bot
parent 0f467a25ed
commit 1a7abcf526
3 changed files with 75 additions and 9 deletions

View File

@ -118,6 +118,10 @@ public class ViewProps {
public static final String BORDER_RIGHT_COLOR = "borderRightColor";
public static final String BORDER_TOP_COLOR = "borderTopColor";
public static final String BORDER_BOTTOM_COLOR = "borderBottomColor";
public static final String BORDER_TOP_START_RADIUS = "borderTopStartRadius";
public static final String BORDER_TOP_END_RADIUS = "borderTopEndRadius";
public static final String BORDER_BOTTOM_START_RADIUS = "borderBottomStartRadius";
public static final String BORDER_BOTTOM_END_RADIUS = "borderBottomEndRadius";
public static final String BORDER_START_COLOR = "borderStartColor";
public static final String BORDER_END_COLOR = "borderEndColor";

View File

@ -245,7 +245,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
public void setRadius(float radius, int position) {
if (mBorderCornerRadii == null) {
mBorderCornerRadii = new float[4];
mBorderCornerRadii = new float[8];
Arrays.fill(mBorderCornerRadii, YogaConstants.UNDEFINED);
}
@ -429,15 +429,71 @@ public class ReactViewBackgroundDrawable extends Drawable {
mInnerClipTempRectForBorderRadius.right -= borderRightWidth;
final float borderRadius = getFullBorderRadius();
final float topLeftRadius =
float topLeftRadius =
getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.TOP_LEFT);
final float topRightRadius =
float topRightRadius =
getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.TOP_RIGHT);
final float bottomLeftRadius =
float bottomLeftRadius =
getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.BOTTOM_LEFT);
final float bottomRightRadius =
float bottomRightRadius =
getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.BOTTOM_RIGHT);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && mBorderCornerRadii != null) {
final boolean isRTL = getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
float topStartRadius = mBorderCornerRadii[4];
float topEndRadius = mBorderCornerRadii[5];
float bottomStartRadius = mBorderCornerRadii[6];
float bottomEndRadius = mBorderCornerRadii[7];
if (I18nUtil.getInstance().doesRTLFlipLeftAndRightStyles(mContext)) {
if (YogaConstants.isUndefined(topStartRadius)) {
topStartRadius = topLeftRadius;
}
if (YogaConstants.isUndefined(topEndRadius)) {
topEndRadius = topRightRadius;
}
if (YogaConstants.isUndefined(bottomStartRadius)) {
bottomStartRadius = bottomLeftRadius;
}
if (YogaConstants.isUndefined(bottomEndRadius)) {
bottomEndRadius = bottomRightRadius;
}
final float directionAwareTopLeftRadius = isRTL ? topEndRadius : topStartRadius;
final float directionAwareTopRightRadius = isRTL ? topStartRadius : topEndRadius;
final float directionAwareBottomLeftRadius = isRTL ? bottomEndRadius : bottomStartRadius;
final float directionAwareBottomRightRadius = isRTL ? bottomStartRadius : bottomEndRadius;
topLeftRadius = directionAwareTopLeftRadius;
topRightRadius = directionAwareTopRightRadius;
bottomLeftRadius = directionAwareBottomLeftRadius;
bottomRightRadius = directionAwareBottomRightRadius;
} else {
final float directionAwareTopLeftRadius = isRTL ? topEndRadius : topStartRadius;
final float directionAwareTopRightRadius = isRTL ? topStartRadius : topEndRadius;
final float directionAwareBottomLeftRadius = isRTL ? bottomEndRadius : bottomStartRadius;
final float directionAwareBottomRightRadius = isRTL ? bottomStartRadius : bottomEndRadius;
if (!YogaConstants.isUndefined(directionAwareTopLeftRadius)) {
topLeftRadius = directionAwareTopLeftRadius;
}
if (!YogaConstants.isUndefined(directionAwareTopRightRadius)) {
topRightRadius = directionAwareTopRightRadius;
}
if (!YogaConstants.isUndefined(directionAwareBottomLeftRadius)) {
bottomLeftRadius = directionAwareBottomLeftRadius;
}
if (!YogaConstants.isUndefined(directionAwareBottomRightRadius)) {
bottomRightRadius = directionAwareBottomRightRadius;
}
}
}
final float innerTopLeftRadiusX = Math.max(topLeftRadius - borderLeftWidth, 0);
final float innerTopLeftRadiusY = Math.max(topLeftRadius - borderTopWidth, 0);
@ -476,7 +532,6 @@ public class ReactViewBackgroundDrawable extends Drawable {
},
Path.Direction.CW);
float extraRadiusForOutline = 0;
if (mBorderWidth != null) {

View File

@ -58,13 +58,20 @@ public class ReactViewManager extends ViewGroupManager<ReactViewGroup> {
view.setFocusable(accessible);
}
@ReactPropGroup(names = {
@ReactPropGroup(
names = {
ViewProps.BORDER_RADIUS,
ViewProps.BORDER_TOP_LEFT_RADIUS,
ViewProps.BORDER_TOP_RIGHT_RADIUS,
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
ViewProps.BORDER_BOTTOM_LEFT_RADIUS
}, defaultFloat = YogaConstants.UNDEFINED)
ViewProps.BORDER_BOTTOM_LEFT_RADIUS,
ViewProps.BORDER_TOP_START_RADIUS,
ViewProps.BORDER_TOP_END_RADIUS,
ViewProps.BORDER_BOTTOM_START_RADIUS,
ViewProps.BORDER_BOTTOM_END_RADIUS,
},
defaultFloat = YogaConstants.UNDEFINED
)
public void setBorderRadius(ReactViewGroup view, int index, float borderRadius) {
if (!YogaConstants.isUndefined(borderRadius)) {
borderRadius = PixelUtil.toPixelFromDIP(borderRadius);