mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
597a1ff60b
Summary: This PR implements logical border block color properties as requested on https://github.com/facebook/react-native/issues/34425. This implementation includes the addition of the following style properties - `borderBlockColor`, equivalent to `borderTopColor` and `borderBottomColor`. - `borderBlockEndColor`, equivalent to `borderBottomColor`. - `borderBlockStartColor`, equivalent to `borderTopColor`. ## Changelog [GENERAL] [ADDED] - Add logical border block color properties Pull Request resolved: https://github.com/facebook/react-native/pull/35999 Test Plan: 1. Open the RNTester app and navigate to the `View` page 2. Test the new style properties through the `Logical Border Color` section <table> <tr> <td>Android</td> <td>iOS</td> </tr> <tr> <td><video src="https://user-images.githubusercontent.com/11707729/215384882-5b96518e-ad70-4157-a7f3-130f488cc41c.mov" alt="1" width="360px" /> </td> <td> <video src="https://user-images.githubusercontent.com/11707729/215392728-cfc6a097-26c1-4ffe-ab0e-f0a5a71a902d.mov"2" width="360px" /> </td> </tr> </table> Reviewed By: cipolleschi Differential Revision: D42849911 Pulled By: jacdebug fbshipit-source-id: 822cff5264689c42031d496105537032b5cd31ef
183 lines
4.2 KiB
JavaScript
183 lines
4.2 KiB
JavaScript
/**
|
|
* 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.
|
|
*
|
|
* @format strict-local
|
|
* @flow
|
|
*/
|
|
|
|
import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
|
|
|
|
import processAspectRatio from '../../StyleSheet/processAspectRatio';
|
|
import processColor from '../../StyleSheet/processColor';
|
|
import processFontVariant from '../../StyleSheet/processFontVariant';
|
|
import processTransform from '../../StyleSheet/processTransform';
|
|
import sizesDiffer from '../../Utilities/differ/sizesDiffer';
|
|
|
|
const colorAttributes = {process: processColor};
|
|
|
|
const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
|
|
/**
|
|
* Layout
|
|
*/
|
|
alignContent: true,
|
|
alignItems: true,
|
|
alignSelf: true,
|
|
aspectRatio: {process: processAspectRatio},
|
|
borderBottomWidth: true,
|
|
borderEndWidth: true,
|
|
borderLeftWidth: true,
|
|
borderRightWidth: true,
|
|
borderStartWidth: true,
|
|
borderTopWidth: true,
|
|
columnGap: true,
|
|
borderWidth: true,
|
|
bottom: true,
|
|
direction: true,
|
|
display: true,
|
|
end: true,
|
|
flex: true,
|
|
flexBasis: true,
|
|
flexDirection: true,
|
|
flexGrow: true,
|
|
flexShrink: true,
|
|
flexWrap: true,
|
|
gap: true,
|
|
height: true,
|
|
inset: true,
|
|
insetBlock: true,
|
|
insetBlockEnd: true,
|
|
insetBlockStart: true,
|
|
insetInline: true,
|
|
insetInlineEnd: true,
|
|
insetInlineStart: true,
|
|
justifyContent: true,
|
|
left: true,
|
|
margin: true,
|
|
marginBlock: true,
|
|
marginBlockEnd: true,
|
|
marginBlockStart: true,
|
|
marginBottom: true,
|
|
marginEnd: true,
|
|
marginHorizontal: true,
|
|
marginInline: true,
|
|
marginInlineEnd: true,
|
|
marginInlineStart: true,
|
|
marginLeft: true,
|
|
marginRight: true,
|
|
marginStart: true,
|
|
marginTop: true,
|
|
marginVertical: true,
|
|
maxHeight: true,
|
|
maxWidth: true,
|
|
minHeight: true,
|
|
minWidth: true,
|
|
overflow: true,
|
|
padding: true,
|
|
paddingBlock: true,
|
|
paddingBlockEnd: true,
|
|
paddingBlockStart: true,
|
|
paddingBottom: true,
|
|
paddingEnd: true,
|
|
paddingHorizontal: true,
|
|
paddingInline: true,
|
|
paddingInlineEnd: true,
|
|
paddingInlineStart: true,
|
|
paddingLeft: true,
|
|
paddingRight: true,
|
|
paddingStart: true,
|
|
paddingTop: true,
|
|
paddingVertical: true,
|
|
position: true,
|
|
right: true,
|
|
rowGap: true,
|
|
start: true,
|
|
top: true,
|
|
width: true,
|
|
zIndex: true,
|
|
|
|
/**
|
|
* Shadow
|
|
*/
|
|
elevation: true,
|
|
shadowColor: colorAttributes,
|
|
shadowOffset: {diff: sizesDiffer},
|
|
shadowOpacity: true,
|
|
shadowRadius: true,
|
|
|
|
/**
|
|
* Transform
|
|
*/
|
|
transform: {process: processTransform},
|
|
|
|
/**
|
|
* View
|
|
*/
|
|
backfaceVisibility: true,
|
|
backgroundColor: colorAttributes,
|
|
borderBlockColor: colorAttributes,
|
|
borderBlockEndColor: colorAttributes,
|
|
borderBlockStartColor: colorAttributes,
|
|
borderBottomColor: colorAttributes,
|
|
borderBottomEndRadius: true,
|
|
borderBottomLeftRadius: true,
|
|
borderBottomRightRadius: true,
|
|
borderBottomStartRadius: true,
|
|
borderColor: colorAttributes,
|
|
borderCurve: true,
|
|
borderEndColor: colorAttributes,
|
|
borderEndEndRadius: true,
|
|
borderEndStartRadius: true,
|
|
borderLeftColor: colorAttributes,
|
|
borderRadius: true,
|
|
borderRightColor: colorAttributes,
|
|
borderStartColor: colorAttributes,
|
|
borderStartEndRadius: true,
|
|
borderStartStartRadius: true,
|
|
borderStyle: true,
|
|
borderTopColor: colorAttributes,
|
|
borderTopEndRadius: true,
|
|
borderTopLeftRadius: true,
|
|
borderTopRightRadius: true,
|
|
borderTopStartRadius: true,
|
|
opacity: true,
|
|
pointerEvents: true,
|
|
|
|
/**
|
|
* Text
|
|
*/
|
|
color: colorAttributes,
|
|
fontFamily: true,
|
|
fontSize: true,
|
|
fontStyle: true,
|
|
fontVariant: {process: processFontVariant},
|
|
fontWeight: true,
|
|
includeFontPadding: true,
|
|
letterSpacing: true,
|
|
lineHeight: true,
|
|
textAlign: true,
|
|
textAlignVertical: true,
|
|
textDecorationColor: colorAttributes,
|
|
textDecorationLine: true,
|
|
textDecorationStyle: true,
|
|
textShadowColor: colorAttributes,
|
|
textShadowOffset: true,
|
|
textShadowRadius: true,
|
|
textTransform: true,
|
|
userSelect: true,
|
|
verticalAlign: true,
|
|
writingDirection: true,
|
|
|
|
/**
|
|
* Image
|
|
*/
|
|
overlayColor: colorAttributes,
|
|
resizeMode: true,
|
|
tintColor: colorAttributes,
|
|
objectFit: true,
|
|
};
|
|
|
|
module.exports = ReactNativeStyleAttributes;
|