Files
react-native/Libraries/Components/View/ReactNativeStyleAttributes.js
T
Gabriel Donadel Dall'Agnol 9669c10afc feat: Add Fabric implementation of inset logical properties (#35692)
Summary:
This PR implements `inset` logical properties as requested on https://github.com/facebook/react-native/issues/34425. This implementation includes the addition of the following style properties

- `inset`, equivalent to `top`, `bottom`, `right` and `left`.
- `insetBlock`, equivalent to `top` and `bottom`.
- `insetBlockEnd`, equivalent to `bottom`.
- `insetBlockStart`, equivalent to `top`.
- `insetInline`, equivalent to `right` and `left`.
- `insetInlineEnd`, equivalent to `right` or `left`.
- `insetInlineStart`, equivalent to `right` or `left`.

## Changelog

[GENERAL] [ADDED] - Add Fabric implementation of inset logical properties

Pull Request resolved: https://github.com/facebook/react-native/pull/35692

Test Plan:
1. Open the RNTester app and navigate to the `View` page
2. Test the new style properties through the `Insets` section

<table>
<tr>
    <td>Android</td>
    <td>iOS</td>
</tr>
  <tr>
    <td><img src="https://user-images.githubusercontent.com/11707729/208821212-fbbac6ed-09a4-43f4-ba98-dfd2cbabf044.png"  alt="1" width="360px"   />
    </td>
<td>
<img src="https://user-images.githubusercontent.com/11707729/208816997-ef044140-8824-4b1b-a77b-085f18ea9e0e.png" alt="2" width="360px"  />
</td>
   </tr>
</table>

Reviewed By: NickGerleman

Differential Revision: D42193661

Pulled By: ryancat

fbshipit-source-id: 3db8bcd2c4db0ef4886b9ec49a46424d57362620
2022-12-21 20:07:35 -08:00

176 lines
3.9 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,
borderBottomColor: colorAttributes,
borderBottomEndRadius: true,
borderBottomLeftRadius: true,
borderBottomRightRadius: true,
borderBottomStartRadius: true,
borderColor: colorAttributes,
borderCurve: true,
borderEndColor: colorAttributes,
borderLeftColor: colorAttributes,
borderRadius: true,
borderRightColor: colorAttributes,
borderStartColor: colorAttributes,
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;