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
be09d12
commit 8dd498d
Showing
6 changed files
with
271 additions
and
112 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
61 changes: 61 additions & 0 deletions
61
.../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,61 @@ | ||
/* | ||
* 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 companion object { | ||
@JvmStatic | ||
public fun setFromDynamic(dynamic: Dynamic): LengthPercentage? { | ||
var result: LengthPercentage? = LengthPercentage() | ||
when (dynamic.getType()) { | ||
ReadableType.Number -> { | ||
result?.unit = LengthPercentageType.POINT | ||
result?.value = PixelUtil.toPixelFromDIP(dynamic.asDouble()) | ||
} | ||
ReadableType.String -> { | ||
val s: String = dynamic.asString() | ||
if (s.endsWith("%")) { | ||
result?.unit = LengthPercentageType.PERCENT | ||
try { | ||
result?.value = s.substring(0, s.length - 1).toFloat() | ||
} catch (e: NumberFormatException) { | ||
result = null | ||
FLog.w(ReactConstants.TAG, "Invalid percentage format: $s") | ||
} | ||
} else { | ||
FLog.w(ReactConstants.TAG, "Invalid string value: $s") | ||
result = null | ||
} | ||
} | ||
else -> { | ||
result = null | ||
FLog.w(ReactConstants.TAG, "Unsupported type for radius property: ${dynamic.getType()}") | ||
} | ||
} | ||
return result | ||
} | ||
} | ||
|
||
public constructor() : this(YogaConstants.UNDEFINED, LengthPercentageType.UNDEFINED) | ||
} |
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.