From ed76d4d8dbbf012c3f051e04354f76bd6ca98d1b Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Fri, 11 Jun 2021 23:51:00 -0700 Subject: [PATCH] RN: Statically Define `ReactNativeStyleAttributes` Summary: Rewrites `ReactNativeStyleAttributes` so that it is statically defined. This means it will no longer require a handful of modules that defines `prop-types` only to use their keys. Functionally, this should be equivalent to what was there before. Changelog: [Internal] Reviewed By: TheSavior Differential Revision: D29019308 fbshipit-source-id: 47f85a8c7703a133c68c20c7f3e14e1026ce4ff2 --- .../View/ReactNativeStyleAttributes.js | 160 +++++++++++++++--- 1 file changed, 132 insertions(+), 28 deletions(-) diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 11f22f43861cf0..9f87352219ef2b 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -8,41 +8,145 @@ * @flow */ -import DeprecatedImageStylePropTypes from '../../DeprecatedPropTypes/DeprecatedImageStylePropTypes'; -import DeprecatedTextStylePropTypes from '../../DeprecatedPropTypes/DeprecatedTextStylePropTypes'; -import DeprecatedViewStylePropTypes from '../../DeprecatedPropTypes/DeprecatedViewStylePropTypes'; import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes'; import processColor from '../../StyleSheet/processColor'; import processTransform from '../../StyleSheet/processTransform'; import sizesDiffer from '../../Utilities/differ/sizesDiffer'; -const ReactNativeStyleAttributes: {[string]: AnyAttributeType} = {}; +const colorAttributes = {process: processColor}; -for (const attributeName of Object.keys({ - ...DeprecatedViewStylePropTypes, - ...DeprecatedTextStylePropTypes, - ...DeprecatedImageStylePropTypes, -})) { - ReactNativeStyleAttributes[attributeName] = true; -} +const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { + /** + * Layout + */ + alignContent: true, + alignItems: true, + alignSelf: true, + aspectRatio: true, + borderBottomWidth: true, + borderEndWidth: true, + borderLeftWidth: true, + borderRightWidth: true, + borderStartWidth: true, + borderTopWidth: true, + borderWidth: true, + bottom: true, + direction: true, + display: true, + end: true, + flex: true, + flexBasis: true, + flexDirection: true, + flexGrow: true, + flexShrink: true, + flexWrap: true, + height: true, + justifyContent: true, + left: true, + margin: true, + marginBottom: true, + marginEnd: true, + marginHorizontal: true, + marginLeft: true, + marginRight: true, + marginStart: true, + marginTop: true, + marginVertical: true, + maxHeight: true, + maxWidth: true, + minHeight: true, + minWidth: true, + overflow: true, + padding: true, + paddingBottom: true, + paddingEnd: true, + paddingHorizontal: true, + paddingLeft: true, + paddingRight: true, + paddingStart: true, + paddingTop: true, + paddingVertical: true, + position: true, + right: true, + start: true, + top: true, + width: true, + zIndex: true, -ReactNativeStyleAttributes.transform = {process: processTransform}; -ReactNativeStyleAttributes.shadowOffset = {diff: sizesDiffer}; + /** + * Shadow + */ + elevation: true, + shadowColor: colorAttributes, + shadowOffset: {diff: sizesDiffer}, + shadowOpacity: true, + shadowRadius: true, -const colorAttributes = {process: processColor}; -ReactNativeStyleAttributes.backgroundColor = colorAttributes; -ReactNativeStyleAttributes.borderBottomColor = colorAttributes; -ReactNativeStyleAttributes.borderColor = colorAttributes; -ReactNativeStyleAttributes.borderLeftColor = colorAttributes; -ReactNativeStyleAttributes.borderRightColor = colorAttributes; -ReactNativeStyleAttributes.borderTopColor = colorAttributes; -ReactNativeStyleAttributes.borderStartColor = colorAttributes; -ReactNativeStyleAttributes.borderEndColor = colorAttributes; -ReactNativeStyleAttributes.color = colorAttributes; -ReactNativeStyleAttributes.shadowColor = colorAttributes; -ReactNativeStyleAttributes.textDecorationColor = colorAttributes; -ReactNativeStyleAttributes.tintColor = colorAttributes; -ReactNativeStyleAttributes.textShadowColor = colorAttributes; -ReactNativeStyleAttributes.overlayColor = colorAttributes; + /** + * Transform + */ + decomposedMatrix: true, // @deprecated + rotation: true, // @deprecated + scaleX: true, // @deprecated + scaleY: true, // @deprecated + transform: {process: processTransform}, + transformMatrix: true, // @deprecated + translateX: true, // @deprecated + translateY: true, // @deprecated + + /** + * View + */ + backfaceVisibility: true, + backgroundColor: colorAttributes, + borderBottomColor: colorAttributes, + borderBottomEndRadius: true, + borderBottomLeftRadius: true, + borderBottomRightRadius: true, + borderBottomStartRadius: true, + borderColor: colorAttributes, + borderEndColor: colorAttributes, + borderLeftColor: colorAttributes, + borderRadius: true, + borderRightColor: colorAttributes, + borderStartColor: colorAttributes, + borderStyle: true, + borderTopColor: colorAttributes, + borderTopEndRadius: true, + borderTopLeftRadius: true, + borderTopRightRadius: true, + borderTopStartRadius: true, + opacity: true, + + /** + * Text + */ + color: colorAttributes, + fontFamily: true, + fontSize: true, + fontStyle: true, + fontVariant: true, + 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, + writingDirection: true, + + /** + * Image + */ + overlayColor: colorAttributes, + resizeMode: true, + tintColor: colorAttributes, +}; module.exports = ReactNativeStyleAttributes;