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

feat: Add logical border block color properties #35999

Closed
wants to merge 6 commits into from
Closed

feat: Add logical border block color properties #35999

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aaab1b8
feat: Add borderBlockColor implementation on Android
gabrieldonadel Jan 30, 2023
198bd6e
feat: Add borderBlockColor implementation on iOS Paper
gabrieldonadel Jan 30, 2023
90df186
feat: Add borderBlockColor implementation on iOS Fabric
gabrieldonadel Jan 30, 2023
aa37156
Rename ViewExample section
gabrieldonadel Jan 30, 2023
e989950
Fix StyleSheet types
gabrieldonadel Jan 30, 2023
806816b
Fix Spacing comments
gabrieldonadel Jan 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Libraries/Components/View/ReactNativeStyleAttributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
*/
backfaceVisibility: true,
backgroundColor: colorAttributes,
borderBlockColor: colorAttributes,
borderBlockEndColor: colorAttributes,
borderBlockStartColor: colorAttributes,
borderBottomColor: colorAttributes,
borderBottomEndRadius: true,
borderBottomLeftRadius: true,
Expand Down
9 changes: 9 additions & 0 deletions Libraries/Components/View/ViewNativeComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,15 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
borderEndColor: {
process: require('../../StyleSheet/processColor').default,
},
borderBlockColor: {
process: require('../../StyleSheet/processColor').default,
},
borderBlockEndColor: {
process: require('../../StyleSheet/processColor').default,
},
borderBlockStartColor: {
process: require('../../StyleSheet/processColor').default,
},

focusable: true,
overflow: true,
Expand Down
3 changes: 3 additions & 0 deletions Libraries/StyleSheet/StyleSheetTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,9 @@ export interface TransformsStyle {
export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
backfaceVisibility?: 'visible' | 'hidden' | undefined;
backgroundColor?: ColorValue | undefined;
borderBlockColor?: ColorValue | undefined;
borderBlockEndColor?: ColorValue | undefined;
borderBlockStartColor?: ColorValue | undefined;
borderBottomColor?: ColorValue | undefined;
borderBottomEndRadius?: number | undefined;
borderBottomLeftRadius?: number | undefined;
Expand Down
3 changes: 3 additions & 0 deletions Libraries/StyleSheet/StyleSheetTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -698,6 +698,9 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
borderRightColor?: ____ColorValue_Internal,
borderStartColor?: ____ColorValue_Internal,
borderTopColor?: ____ColorValue_Internal,
borderBlockColor?: ____ColorValue_Internal,
borderBlockEndColor?: ____ColorValue_Internal,
borderBlockStartColor?: ____ColorValue_Internal,
borderRadius?: number | AnimatedNode,
borderBottomEndRadius?: number | AnimatedNode,
borderBottomLeftRadius?: number | AnimatedNode,
Expand Down
7 changes: 7 additions & 0 deletions React/Views/RCTView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
@property (nonatomic, strong) UIColor *borderStartColor;
@property (nonatomic, strong) UIColor *borderEndColor;
@property (nonatomic, strong) UIColor *borderColor;
@property (nonatomic, strong) UIColor *borderBlockColor;
@property (nonatomic, strong) UIColor *borderBlockEndColor;
@property (nonatomic, strong) UIColor *borderBlockStartColor;

/**
* Border widths.
Expand All @@ -97,6 +100,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
@property (nonatomic, assign) CGFloat borderStartWidth;
@property (nonatomic, assign) CGFloat borderEndWidth;
@property (nonatomic, assign) CGFloat borderWidth;
// TODO: Implement logical border width logic
@property (nonatomic, assign) CGFloat borderBlockWidth;
@property (nonatomic, assign) CGFloat borderBlockEndWidth;
@property (nonatomic, assign) CGFloat borderBlockStartWidth;
Comment on lines +104 to +106
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll put up a follow-up PR implementing this but this is necessary here due to RCT_VIEW_BORDER_PROPERTY which creates set functions for both border##SIDE##Color and border##SIDE##Width


/**
* Border curve.
Expand Down
13 changes: 12 additions & 1 deletion React/Views/RCTView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,6 +745,17 @@ - (RCTBorderColors)borderColorsWithTraitCollection:(UITraitCollection *)traitCol
UIColor *borderTopColor = _borderTopColor;
UIColor *borderBottomColor = _borderBottomColor;

if(_borderBlockColor){
borderTopColor = _borderBlockColor;
borderBottomColor = _borderBlockColor;
}
if(_borderBlockEndColor){
borderBottomColor = _borderBlockEndColor;
}
if(_borderBlockStartColor){
borderTopColor = _borderBlockStartColor;
}

#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000
if (@available(iOS 13.0, *)) {
borderColor = [borderColor resolvedColorWithTraitCollection:self.traitCollection];
Expand Down Expand Up @@ -924,7 +935,7 @@ -(void)setBorder##side##Color : (UIColor *)color \
}

setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom) setBorderColor(Left)
setBorderColor(Start) setBorderColor(End)
setBorderColor(Start) setBorderColor(End) setBorderColor(Block) setBorderColor(BlockEnd) setBorderColor(BlockStart)

#pragma mark - Border Width

Expand Down
3 changes: 3 additions & 0 deletions React/Views/RCTViewManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,9 @@ - (RCTShadowView *)shadowView
RCT_VIEW_BORDER_PROPERTY(Left)
RCT_VIEW_BORDER_PROPERTY(Start)
RCT_VIEW_BORDER_PROPERTY(End)
RCT_VIEW_BORDER_PROPERTY(Block)
RCT_VIEW_BORDER_PROPERTY(BlockEnd)
RCT_VIEW_BORDER_PROPERTY(BlockStart)

#define RCT_VIEW_BORDER_RADIUS_PROPERTY(SIDE) \
RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Radius, CGFloat, RCTView) \
Expand Down
22 changes: 19 additions & 3 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,22 @@ public class Spacing {
* Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
*/
public static final int ALL = 8;
/**
* Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
*/
public static final int BLOCK = 9;
/**
* Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
*/
public static final int BLOCK_END = 10;
/**
* Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
*/
public static final int BLOCK_START = 11;

private static final int[] sFlagsMap = {
1, /*LEFT*/ 2, /*TOP*/ 4, /*RIGHT*/ 8, /*BOTTOM*/ 16, /*START*/ 32, /*END*/ 64, /*HORIZONTAL*/
128, /*VERTICAL*/ 256, /*ALL*/
128, /*VERTICAL*/ 256, /*ALL*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/
};

private final float[] mSpacing;
Expand Down Expand Up @@ -96,7 +108,8 @@ public boolean set(int spacingType, float value) {
mHasAliasesSet =
(mValueFlags & sFlagsMap[ALL]) != 0
|| (mValueFlags & sFlagsMap[VERTICAL]) != 0
|| (mValueFlags & sFlagsMap[HORIZONTAL]) != 0;
|| (mValueFlags & sFlagsMap[HORIZONTAL]) != 0
|| (mValueFlags & sFlagsMap[BLOCK]) != 0;

return true;
}
Expand All @@ -111,7 +124,7 @@ public boolean set(int spacingType, float value) {
*/
public float get(int spacingType) {
float defaultValue =
(spacingType == START || spacingType == END ? YogaConstants.UNDEFINED : mDefaultValue);
(spacingType == START || spacingType == END || spacingType == BLOCK || spacingType == BLOCK_END || spacingType == BLOCK_START ? YogaConstants.UNDEFINED : mDefaultValue);

if (mValueFlags == 0) {
return defaultValue;
Expand Down Expand Up @@ -174,6 +187,9 @@ private static float[] newFullSpacingArray() {
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
YogaConstants.UNDEFINED,
};
}
}
12 changes: 12 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,9 @@ 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_BLOCK_COLOR = "borderBlockColor";
public static final String BORDER_BLOCK_END_COLOR = "borderBlockEndColor";
public static final String BORDER_BLOCK_START_COLOR = "borderBlockStartColor";
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";
Expand Down Expand Up @@ -299,6 +302,15 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) {
case BORDER_BOTTOM_COLOR:
return map.getType(BORDER_BOTTOM_COLOR) == ReadableType.Number
&& map.getInt(BORDER_BOTTOM_COLOR) == Color.TRANSPARENT;
case BORDER_BLOCK_COLOR:
return map.getType(BORDER_BLOCK_COLOR) == ReadableType.Number
&& map.getInt(BORDER_BLOCK_COLOR) == Color.TRANSPARENT;
case BORDER_BLOCK_END_COLOR:
return map.getType(BORDER_BLOCK_END_COLOR) == ReadableType.Number
&& map.getInt(BORDER_BLOCK_END_COLOR) == Color.TRANSPARENT;
case BORDER_BLOCK_START_COLOR:
return map.getType(BORDER_BLOCK_START_COLOR) == ReadableType.Number
&& map.getInt(BORDER_BLOCK_START_COLOR) == Color.TRANSPARENT;
case BORDER_WIDTH:
return map.isNull(BORDER_WIDTH) || map.getDouble(BORDER_WIDTH) == 0d;
case BORDER_LEFT_WIDTH:
Expand Down
6 changes: 6 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,9 @@ object ReactMapBufferPropSetter {
private const val EDGE_START = 4
private const val EDGE_END = 5
private const val EDGE_ALL = 6
private const val EDGE_BLOCK = 7
private const val EDGE_BLOCK_END = 8
private const val EDGE_BLOCK_START = 9

private const val CORNER_TOP_LEFT = 0
private const val CORNER_TOP_RIGHT = 1
Expand Down Expand Up @@ -349,6 +352,9 @@ object ReactMapBufferPropSetter {
EDGE_BOTTOM -> 4
EDGE_START -> 5
EDGE_END -> 6
EDGE_BLOCK -> 7
EDGE_BLOCK_END -> 8
EDGE_BLOCK_START -> 9
else -> throw IllegalArgumentException("Unknown key for border color: $key")
}
val colorValue = entry.intValue
Expand Down
39 changes: 38 additions & 1 deletion ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,21 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
int colorRight = getBorderColor(Spacing.RIGHT);
int colorBottom = getBorderColor(Spacing.BOTTOM);

int colorBlock = getBorderColor(Spacing.BLOCK);
int colorBlockStart = getBorderColor(Spacing.BLOCK_START);
int colorBlockEnd = getBorderColor(Spacing.BLOCK_END);

if(isBorderColorDefined(Spacing.BLOCK)){
colorBottom = colorBlock;
colorTop = colorBlock;
}
if(isBorderColorDefined(Spacing.BLOCK_END)){
colorBottom = colorBlockEnd;
}
if(isBorderColorDefined(Spacing.BLOCK_START)){
colorTop = colorBlockStart;
}

if (borderWidth.top > 0
|| borderWidth.bottom > 0
|| borderWidth.left > 0
Expand Down Expand Up @@ -552,13 +567,20 @@ private void updatePath() {
int colorRight = getBorderColor(Spacing.RIGHT);
int colorBottom = getBorderColor(Spacing.BOTTOM);
int borderColor = getBorderColor(Spacing.ALL);
int colorBlock = getBorderColor(Spacing.BLOCK);
int colorBlockStart = getBorderColor(Spacing.BLOCK_START);
int colorBlockEnd = getBorderColor(Spacing.BLOCK_END);


// Clip border ONLY if its color is non transparent
if (Color.alpha(colorLeft) != 0
&& Color.alpha(colorTop) != 0
&& Color.alpha(colorRight) != 0
&& Color.alpha(colorBottom) != 0
&& Color.alpha(borderColor) != 0) {
&& Color.alpha(borderColor) != 0
&& Color.alpha(colorBlock) != 0
&& Color.alpha(colorBlockStart) != 0
&& Color.alpha(colorBlockEnd) != 0) {

mInnerClipTempRectForBorderRadius.top += borderWidth.top;
mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
Expand Down Expand Up @@ -1128,6 +1150,21 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
int colorRight = getBorderColor(Spacing.RIGHT);
int colorBottom = getBorderColor(Spacing.BOTTOM);

int colorBlock = getBorderColor(Spacing.BLOCK);
int colorBlockStart = getBorderColor(Spacing.BLOCK_START);
int colorBlockEnd = getBorderColor(Spacing.BLOCK_END);

if(isBorderColorDefined(Spacing.BLOCK)){
colorBottom = colorBlock;
colorTop = colorBlock;
}
if(isBorderColorDefined(Spacing.BLOCK_END)){
colorBottom = colorBlockEnd;
}
if(isBorderColorDefined(Spacing.BLOCK_START)){
colorTop = colorBlockStart;
}

final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
int colorStart = getBorderColor(Spacing.START);
int colorEnd = getBorderColor(Spacing.END);
Expand Down
8 changes: 7 additions & 1 deletion ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ public class ReactViewManager extends ReactClippingViewManager<ReactViewGroup> {
Spacing.BOTTOM,
Spacing.START,
Spacing.END,
Spacing.BLOCK,
Spacing.BLOCK_END,
Spacing.BLOCK_START
};
private static final int CMD_HOTSPOT_UPDATE = 1;
private static final int CMD_SET_PRESSED = 2;
Expand Down Expand Up @@ -238,7 +241,10 @@ public void setBorderWidth(ReactViewGroup view, int index, float width) {
ViewProps.BORDER_TOP_COLOR,
ViewProps.BORDER_BOTTOM_COLOR,
ViewProps.BORDER_START_COLOR,
ViewProps.BORDER_END_COLOR
ViewProps.BORDER_END_COLOR,
ViewProps.BORDER_BLOCK_COLOR,
ViewProps.BORDER_BLOCK_END_COLOR,
ViewProps.BORDER_BLOCK_START_COLOR
},
customType = "Color")
public void setBorderColor(ReactViewGroup view, int index, Integer color) {
Expand Down
21 changes: 17 additions & 4 deletions ReactCommon/react/renderer/components/view/primitives.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,9 @@ struct CascadedRectangleEdges {
OptionalT horizontal{};
OptionalT vertical{};
OptionalT all{};
OptionalT block{};
OptionalT blockStart{};
OptionalT blockEnd{};

Counterpart resolve(bool isRTL, T defaults) const {
const auto leadingEdge = isRTL ? end : start;
Expand All @@ -111,10 +114,14 @@ struct CascadedRectangleEdges {
return {
/* .left = */
left.value_or(leadingEdge.value_or(horizontalOrAllOrDefault)),
/* .top = */ top.value_or(verticalOrAllOrDefault),
/* .top = */
blockStart.value_or(
block.value_or(top.value_or(verticalOrAllOrDefault))),
/* .right = */
right.value_or(trailingEdge.value_or(horizontalOrAllOrDefault)),
/* .bottom = */ bottom.value_or(verticalOrAllOrDefault),
/* .bottom = */
blockEnd.value_or(
block.value_or(bottom.value_or(verticalOrAllOrDefault))),
};
}

Expand All @@ -128,7 +135,10 @@ struct CascadedRectangleEdges {
this->end,
this->horizontal,
this->vertical,
this->all) ==
this->all,
this->block,
this->blockStart,
this->blockEnd) ==
std::tie(
rhs.left,
rhs.top,
Expand All @@ -138,7 +148,10 @@ struct CascadedRectangleEdges {
rhs.end,
rhs.horizontal,
rhs.vertical,
rhs.all);
rhs.all,
rhs.block,
rhs.blockStart,
rhs.blockEnd);
}

bool operator!=(const CascadedRectangleEdges<T> &rhs) const {
Expand Down
24 changes: 24 additions & 0 deletions ReactCommon/react/renderer/components/view/propsConversions.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,30 @@ static inline CascadedRectangleEdges<T> convertRawProp(
defaultValue.vertical,
prefix,
suffix);
result.block = convertRawProp(
context,
rawProps,
"Block",
sourceValue.block,
defaultValue.block,
prefix,
suffix);
result.blockEnd = convertRawProp(
context,
rawProps,
"BlockEnd",
sourceValue.blockEnd,
defaultValue.blockEnd,
prefix,
suffix);
result.blockStart = convertRawProp(
context,
rawProps,
"BlockStart",
sourceValue.blockStart,
defaultValue.blockStart,
prefix,
suffix);

result.all = convertRawProp(
context, rawProps, "", sourceValue.all, defaultValue.all, prefix, suffix);
Expand Down
Loading