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

Add percentages for border-radius props #44408

Closed
wants to merge 1 commit into from
Closed

Add percentages for border-radius props #44408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
116 changes: 68 additions & 48 deletions packages/react-native/ReactAndroid/api/ReactAndroid.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4178,6 +4178,25 @@ public class com/facebook/react/uimanager/LayoutShadowNode$$PropsSetter : com/fa
public synthetic fun setProperty (Lcom/facebook/react/uimanager/ReactShadowNode;Ljava/lang/String;Ljava/lang/Object;)V
}

public final class com/facebook/react/uimanager/LengthPercentage {
public fun <init> ()V
public fun <init> (FLcom/facebook/react/uimanager/LengthPercentageType;)V
public synthetic fun <init> (FLcom/facebook/react/uimanager/LengthPercentageType;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun getUnit ()Lcom/facebook/react/uimanager/LengthPercentageType;
public final fun getValue ()F
public final fun setFromDynamic (Lcom/facebook/react/bridge/Dynamic;)V
public final fun setUnit (Lcom/facebook/react/uimanager/LengthPercentageType;)V
public final fun setValue (F)V
}

public final class com/facebook/react/uimanager/LengthPercentageType : java/lang/Enum {
public static final field PERCENT Lcom/facebook/react/uimanager/LengthPercentageType;
public static final field POINT Lcom/facebook/react/uimanager/LengthPercentageType;
public static final field UNDEFINED Lcom/facebook/react/uimanager/LengthPercentageType;
public static fun valueOf (Ljava/lang/String;)Lcom/facebook/react/uimanager/LengthPercentageType;
public static fun values ()[Lcom/facebook/react/uimanager/LengthPercentageType;
}

public class com/facebook/react/uimanager/MatrixMathHelper {
public fun <init> ()V
public static fun applyPerspective ([DD)V
Expand Down Expand Up @@ -5484,7 +5503,7 @@ public class com/facebook/react/uimanager/drawable/CSSBackgroundDrawable : andro
public fun paddingBoxPath ()Landroid/graphics/Path;
public fun setAlpha (I)V
public fun setBorderColor (IFF)V
public fun setBorderRadius (Lcom/facebook/react/uimanager/style/BorderRadiusProp;Ljava/lang/Float;)V
public fun setBorderRadius (Lcom/facebook/react/uimanager/style/BorderRadiusProp;Lcom/facebook/react/uimanager/LengthPercentage;)V
public fun setBorderRadius (Lcom/facebook/react/uimanager/style/BorderRadiusStyle;)V
public fun setBorderStyle (Ljava/lang/String;)V
public fun setBorderWidth (IF)V
Expand Down Expand Up @@ -5804,56 +5823,56 @@ public final class com/facebook/react/uimanager/style/BorderRadiusProp : java/la

public final class com/facebook/react/uimanager/style/BorderRadiusStyle {
public fun <init> ()V
public fun <init> (Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;)V
public synthetic fun <init> (Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public fun <init> (Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;)V
public synthetic fun <init> (Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public fun <init> (Ljava/util/List;)V
public final fun component1 ()Ljava/lang/Float;
public final fun component10 ()Ljava/lang/Float;
public final fun component11 ()Ljava/lang/Float;
public final fun component12 ()Ljava/lang/Float;
public final fun component13 ()Ljava/lang/Float;
public final fun component2 ()Ljava/lang/Float;
public final fun component3 ()Ljava/lang/Float;
public final fun component4 ()Ljava/lang/Float;
public final fun component5 ()Ljava/lang/Float;
public final fun component6 ()Ljava/lang/Float;
public final fun component7 ()Ljava/lang/Float;
public final fun component8 ()Ljava/lang/Float;
public final fun component9 ()Ljava/lang/Float;
public final fun copy (Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;)Lcom/facebook/react/uimanager/style/BorderRadiusStyle;
public static synthetic fun copy$default (Lcom/facebook/react/uimanager/style/BorderRadiusStyle;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Float;ILjava/lang/Object;)Lcom/facebook/react/uimanager/style/BorderRadiusStyle;
public final fun component1 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component10 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component11 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component12 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component13 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component2 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component3 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component4 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component5 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component6 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component7 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component8 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun component9 ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun copy (Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;)Lcom/facebook/react/uimanager/style/BorderRadiusStyle;
public static synthetic fun copy$default (Lcom/facebook/react/uimanager/style/BorderRadiusStyle;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;Lcom/facebook/react/uimanager/LengthPercentage;ILjava/lang/Object;)Lcom/facebook/react/uimanager/style/BorderRadiusStyle;
public fun equals (Ljava/lang/Object;)Z
public final fun get (Lcom/facebook/react/uimanager/style/BorderRadiusProp;)Ljava/lang/Float;
public final fun getBottomEnd ()Ljava/lang/Float;
public final fun getBottomLeft ()Ljava/lang/Float;
public final fun getBottomRight ()Ljava/lang/Float;
public final fun getBottomStart ()Ljava/lang/Float;
public final fun getEndEnd ()Ljava/lang/Float;
public final fun getEndStart ()Ljava/lang/Float;
public final fun getStartEnd ()Ljava/lang/Float;
public final fun getStartStart ()Ljava/lang/Float;
public final fun getTopEnd ()Ljava/lang/Float;
public final fun getTopLeft ()Ljava/lang/Float;
public final fun getTopRight ()Ljava/lang/Float;
public final fun getTopStart ()Ljava/lang/Float;
public final fun getUniform ()Ljava/lang/Float;
public final fun get (Lcom/facebook/react/uimanager/style/BorderRadiusProp;)Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getBottomEnd ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getBottomLeft ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getBottomRight ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getBottomStart ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getEndEnd ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getEndStart ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getStartEnd ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getStartStart ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getTopEnd ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getTopLeft ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getTopRight ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getTopStart ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun getUniform ()Lcom/facebook/react/uimanager/LengthPercentage;
public final fun hasRoundedBorders ()Z
public fun hashCode ()I
public final fun resolve (ILandroid/content/Context;)Lcom/facebook/react/uimanager/style/ComputedBorderRadius;
public final fun set (Lcom/facebook/react/uimanager/style/BorderRadiusProp;Ljava/lang/Float;)V
public final fun setBottomEnd (Ljava/lang/Float;)V
public final fun setBottomLeft (Ljava/lang/Float;)V
public final fun setBottomRight (Ljava/lang/Float;)V
public final fun setBottomStart (Ljava/lang/Float;)V
public final fun setEndEnd (Ljava/lang/Float;)V
public final fun setEndStart (Ljava/lang/Float;)V
public final fun setStartEnd (Ljava/lang/Float;)V
public final fun setStartStart (Ljava/lang/Float;)V
public final fun setTopEnd (Ljava/lang/Float;)V
public final fun setTopLeft (Ljava/lang/Float;)V
public final fun setTopRight (Ljava/lang/Float;)V
public final fun setTopStart (Ljava/lang/Float;)V
public final fun setUniform (Ljava/lang/Float;)V
public final fun resolve (ILandroid/content/Context;FF)Lcom/facebook/react/uimanager/style/ComputedBorderRadius;
public final fun set (Lcom/facebook/react/uimanager/style/BorderRadiusProp;Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setBottomEnd (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setBottomLeft (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setBottomRight (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setBottomStart (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setEndEnd (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setEndStart (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setStartEnd (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setStartStart (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setTopEnd (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setTopLeft (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setTopRight (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setTopStart (Lcom/facebook/react/uimanager/LengthPercentage;)V
public final fun setUniform (Lcom/facebook/react/uimanager/LengthPercentage;)V
public fun toString ()Ljava/lang/String;
}

Expand Down Expand Up @@ -7884,7 +7903,7 @@ public class com/facebook/react/views/view/ReactViewGroup : android/view/ViewGro
public fun setBorderColor (IFF)V
public fun setBorderRadius (F)V
public fun setBorderRadius (FI)V
public fun setBorderRadius (Lcom/facebook/react/uimanager/style/BorderRadiusProp;Ljava/lang/Float;)V
public fun setBorderRadius (Lcom/facebook/react/uimanager/style/BorderRadiusProp;Lcom/facebook/react/uimanager/LengthPercentage;)V
public fun setBorderStyle (Ljava/lang/String;)V
public fun setBorderWidth (IF)V
public fun setHitSlopRect (Landroid/graphics/Rect;)V
Expand Down Expand Up @@ -7920,6 +7939,7 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react
public fun setBackfaceVisibility (Lcom/facebook/react/views/view/ReactViewGroup;Ljava/lang/String;)V
public fun setBorderColor (Lcom/facebook/react/views/view/ReactViewGroup;ILjava/lang/Integer;)V
public fun setBorderRadius (Lcom/facebook/react/views/view/ReactViewGroup;IF)V
public fun setBorderRadius (Lcom/facebook/react/views/view/ReactViewGroup;ILcom/facebook/react/bridge/Dynamic;)V
public fun setBorderStyle (Lcom/facebook/react/views/view/ReactViewGroup;Ljava/lang/String;)V
public fun setBorderWidth (Lcom/facebook/react/views/view/ReactViewGroup;IF)V
public fun setCollapsable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
Expand Down
59 changes: 59 additions & 0 deletions .../react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LengthPercentage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

package com.facebook.react.uimanager

import com.facebook.common.logging.FLog
import com.facebook.react.bridge.Dynamic
import com.facebook.react.bridge.ReadableType
import com.facebook.react.common.ReactConstants
import com.facebook.yoga.YogaConstants
import java.lang.NumberFormatException

public enum class LengthPercentageType {
UNDEFINED,
POINT,
PERCENT,
}

public class LengthPercentage(
public var value: Float = YogaConstants.UNDEFINED,
public var unit: LengthPercentageType = LengthPercentageType.UNDEFINED,
) {
public constructor() : this(YogaConstants.UNDEFINED, LengthPercentageType.UNDEFINED)

public fun setFromDynamic(dynamic: Dynamic) {
when (dynamic.getType()) {
ReadableType.Number -> {
unit = LengthPercentageType.POINT
value = PixelUtil.toPixelFromDIP(dynamic.asDouble())
}
ReadableType.String -> {
val s: String = dynamic.asString()
if (s.endsWith("%")) {
unit = LengthPercentageType.PERCENT
try {
value = s.substring(0, s.length - 1).toFloat()
} catch (e: NumberFormatException) {
unit = LengthPercentageType.UNDEFINED
value = YogaConstants.UNDEFINED
FLog.w(ReactConstants.TAG, "Invalid percentage format: $s")
}
} else {
FLog.w(ReactConstants.TAG, "Invalid string value: $s")
unit = LengthPercentageType.UNDEFINED
value = YogaConstants.UNDEFINED
}
}
else -> {
unit = LengthPercentageType.UNDEFINED
value = YogaConstants.UNDEFINED
FLog.w(ReactConstants.TAG, "Unsupported type for radius property: ${dynamic.getType()}")
}
}
}
}
31 changes: 22 additions & 9 deletions ...actAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,13 @@
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.modules.i18nmanager.I18nUtil;
import com.facebook.react.uimanager.FloatUtil;
import com.facebook.react.uimanager.LengthPercentage;
import com.facebook.react.uimanager.LengthPercentageType;
import com.facebook.react.uimanager.Spacing;
import com.facebook.react.uimanager.style.BorderRadiusProp;
import com.facebook.react.uimanager.style.BorderRadiusStyle;
import com.facebook.react.uimanager.style.ComputedBorderRadius;
import com.facebook.yoga.YogaConstants;
import java.util.Locale;

/**
Expand Down Expand Up @@ -235,23 +238,28 @@ public void setBorderStyle(@Nullable String style) {
}

/**
* @deprecated Use {@link #setBorderRadius(BorderRadiusProp, Float)} instead.
* @deprecated Use {@link #setBorderRadius(BorderRadiusProp, LengthPercentage)} instead.
*/
public void setRadius(float radius) {
@Nullable Float boxedRadius = Float.isNaN(radius) ? null : Float.valueOf(radius);
setBorderRadius(BorderRadiusProp.BORDER_RADIUS, boxedRadius);
Float boxedRadius = Float.isNaN(radius) ? YogaConstants.UNDEFINED : Float.valueOf(radius);
setBorderRadius(
BorderRadiusProp.BORDER_RADIUS,
new LengthPercentage(boxedRadius, LengthPercentageType.POINT));
}

/**
* @deprecated Use {@link #setBorderRadius(BorderRadiusProp, Float)} instead.
* @deprecated Use {@link #setBorderRadius(BorderRadiusProp, LengthPercentage)} instead.
*/
public void setRadius(float radius, int position) {
@Nullable Float boxedRadius = Float.isNaN(radius) ? null : Float.valueOf(radius);
setBorderRadius(BorderRadiusProp.values()[position], boxedRadius);
Float boxedRadius = Float.isNaN(radius) ? YogaConstants.UNDEFINED : Float.valueOf(radius);
setBorderRadius(
BorderRadiusProp.values()[position],
new LengthPercentage(boxedRadius, LengthPercentageType.POINT));
}

public void setBorderRadius(BorderRadiusProp property, @Nullable Float radius) {
if (!FloatUtil.floatsEqual(mBorderRadius.getUniform(), radius)) {
public void setBorderRadius(BorderRadiusProp property, LengthPercentage radius) {
if (mBorderRadius.getUniform() == null
|| !FloatUtil.floatsEqual(mBorderRadius.getUniform().getValue(), radius.getValue())) {
mBorderRadius.set(property, radius);
mNeedUpdatePathForBorderRadius = true;
invalidateSelf();
Expand Down Expand Up @@ -568,7 +576,12 @@ private void updatePath() {
mTempRectForCenterDrawPath.left += borderWidth.left * 0.5f;
mTempRectForCenterDrawPath.right -= borderWidth.right * 0.5f;

ComputedBorderRadius radius = mBorderRadius.resolve(mLayoutDirection, mContext);
ComputedBorderRadius radius =
mBorderRadius.resolve(
mLayoutDirection,
mContext,
mOuterClipTempRectForBorderRadius.width(),
mOuterClipTempRectForBorderRadius.height());
float topLeftRadius = radius.getTopLeft();
float topRightRadius = radius.getTopRight();
float bottomLeftRadius = radius.getBottomLeft();
Expand Down