-
Notifications
You must be signed in to change notification settings - Fork 24k
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 (#44408)
Summary: Pull Request resolved: #44408 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. Reviewed By: NickGerleman Differential Revision: D56943825 fbshipit-source-id: 3e5a9933ca90e499aff9c7d2561f5f6bb55157da
- Loading branch information
1 parent
a45c589
commit 181ed33
Showing
7 changed files
with
269 additions
and
134 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) | ||
| } |
Oops, something went wrong.