forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add percentages for border-radius props (facebook#44408)
Summary: Why? Previously we didn't support using percentages like: ``` style={{ width=100, height=100, borderRadius='100%', }} ``` These percentages refer to the corresponding dimension of the border box. What? - Added LengthPercentage class and LengthPercentageType enum. To track when we are dealing with percentage vs points - Now radius properties start as Dynamic which then get transformed into LengthPercentage. - Modified certain function parameters so we can consider height and width when resolving BorderRadius values With this we conditionally calculate the corresponding point (dp) value for a given percentage (considering size). Ex: ``` result = {raw_percentage_value} / 100 * (max(height, width)) ``` We know the maximum border radius for our current implementation is half the dp of the shorter side of our view, hence why we consider half our maximum view side as equivalent to 100%. Note: We still don't support vertical/horizontal border radii ## Changelog: [Android][Added] - Added support for using percentages when defining border radius related properties. Differential Revision: D56943825
- Loading branch information
1 parent
4290ef5
commit 8cb2dbe
Showing
7 changed files
with
261 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
.../react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LengthPercentage.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
/* | ||
* 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 java.lang.NumberFormatException | ||
|
||
public enum class LengthPercentageType { | ||
POINT, | ||
PERCENT, | ||
} | ||
|
||
public class LengthPercentage( | ||
private val value: Float, | ||
private val unit: LengthPercentageType, | ||
) { | ||
public companion object { | ||
@JvmStatic | ||
public fun setFromDynamic(dynamic: Dynamic): LengthPercentage? { | ||
return when (dynamic.getType()) { | ||
ReadableType.Number -> { | ||
val value = dynamic.asDouble() | ||
if (value > 0f) { | ||
LengthPercentage(PixelUtil.toPixelFromDIP(value), LengthPercentageType.POINT) | ||
} else { | ||
null | ||
} | ||
} | ||
ReadableType.String -> { | ||
val s = dynamic.asString() | ||
if (s.endsWith("%")) { | ||
try { | ||
val value = s.substring(0, s.length - 1).toFloat() | ||
if (value > 0f) { | ||
LengthPercentage(value, LengthPercentageType.PERCENT) | ||
} else { | ||
null | ||
} | ||
} catch (e: NumberFormatException) { | ||
FLog.w(ReactConstants.TAG, "Invalid percentage format: $s") | ||
null | ||
} | ||
} else { | ||
FLog.w(ReactConstants.TAG, "Invalid string value: $s") | ||
null | ||
} | ||
} | ||
else -> { | ||
FLog.w(ReactConstants.TAG, "Unsupported type for radius property: ${dynamic.getType()}") | ||
null | ||
} | ||
} | ||
} | ||
} | ||
|
||
public fun resolve(width: Float, height: Float): Float { | ||
if (unit == LengthPercentageType.PERCENT) { | ||
return (value / 100) * Math.max(width, height) | ||
} | ||
|
||
return value | ||
} | ||
|
||
public constructor() : this(0f, LengthPercentageType.POINT) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.