Rename processLayoutProps

Author: necolas

Libraries/Components/View/View.js

@@ -11,7 +11,7 @@
 import type {ViewProps} from './ViewPropTypes';
 
 import flattenStyle from '../../StyleSheet/flattenStyle';
-import processLayoutProps from '../../StyleSheet/processStyles';
+import processStyles from '../../StyleSheet/processStyles';
 import TextAncestor from '../../Text/TextAncestor';
 import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
 import ViewNativeComponent from './ViewNativeComponent';
@@ -100,7 +100,7 @@ const View: React.AbstractComponent<
     }
 
     let style = flattenStyle(otherProps.style);
-    style = processLayoutProps(style);
+    style = processStyles(style);
 
     const newPointerEvents = style?.pointerEvents || pointerEvents;
 

Libraries/Image/Image.android.js

@@ -13,7 +13,7 @@ import type {ImageAndroid} from './Image.flow';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
-import processLayoutProps from '../StyleSheet/processStyles';
+import processStyles from '../StyleSheet/processStyles';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestor from '../Text/TextAncestor';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
@@ -167,7 +167,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
 
   const {height, width, ...restProps} = props;
 
-  style = processLayoutProps(style);
+  style = processStyles(style);
 
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
   const nativeProps = {

Libraries/Image/Image.ios.js

@@ -14,7 +14,7 @@ import type {ImageIOS} from './Image.flow';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
-import processLayoutProps from '../StyleSheet/processStyles';
+import processStyles from '../StyleSheet/processStyles';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
 import ImageInjection from './ImageInjection';
@@ -138,7 +138,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   // $FlowFixMe[prop-missing]
   const tintColor = props.tintColor || style.tintColor;
 
-  style = processLayoutProps(style);
+  style = processStyles(style);
 
   if (props.children != null) {
     throw new Error(

Libraries/StyleSheet/StyleSheetTypes.js

@@ -185,19 +185,19 @@ type ____LayoutStyle_Internal = $ReadOnly<{
   marginBlock?: DimensionValue,
 
   /** `marginBlockEnd` works like `margin-bottom` in CSS.
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block
    *  for more details.
    */
   marginBlockEnd?: DimensionValue,
 
   /** `marginBlockStart` works like `margin-top` in CSS.
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end
    *  for more details.
    */
   marginBlockStart?: DimensionValue,
 
   /** `marginBottom` works like `margin-bottom` in CSS.
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
    *  for more details.
    */
   marginBottom?: DimensionValue,
@@ -268,17 +268,19 @@ type ____LayoutStyle_Internal = $ReadOnly<{
 
   /** Setting `paddingBlock` is like setting both of
    *  `paddingTop` and `paddingBottom`.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block
+   * for more details.
    */
   paddingBlock?: DimensionValue,
 
   /** `paddingBlockEnd` works like `padding-bottom` in CSS.
-   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end
    * for more details.
    */
   paddingBlockEnd?: DimensionValue,
 
   /** `paddingBlockStart` works like `padding-top` in CSS.
-   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start
    * for more details.
    */
   paddingBlockStart?: DimensionValue,

Libraries/StyleSheet/__tests__/processStyles-test.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-const processLayoutProps = require('../processStyles');
+const processStyles = require('../processStyles');
 
-describe('processLayoutProps', () => {
+describe('processStyles', () => {
   it('it should map layout style properties', () => {
     const style = {
       backgroundColor: 'white',
@@ -30,7 +30,7 @@ describe('processLayoutProps', () => {
       paddingInline: 120,
       verticalAlign: 'middle',
     };
-    const processedStyle = processLayoutProps(style);
+    const processedStyle = processStyles(style);
     expect(processedStyle).toMatchInlineSnapshot(`
       Object {
         "backgroundColor": "white",
@@ -53,26 +53,26 @@ describe('processLayoutProps', () => {
 
   it('should override style properties', () => {
     const style = {marginStart: 20, marginInlineStart: 40};
-    const processedStyle = processLayoutProps(style);
+    const processedStyle = processStyles(style);
     expect(processedStyle.marginStart).toBe(40);
   });
 
   it('should overwrite properties with `undefined`', () => {
     const style = {marginInlineStart: 40, marginStart: undefined};
-    const processedStyle = processLayoutProps(style);
+    const processedStyle = processStyles(style);
     expect(processedStyle.marginStart).toBe(40);
   });
 
   it('should not fail on falsy values', () => {
-    expect(() => processLayoutProps({})).not.toThrow();
-    expect(() => processLayoutProps(null)).not.toThrow();
-    expect(() => processLayoutProps(false)).not.toThrow();
-    expect(() => processLayoutProps(undefined)).not.toThrow();
+    expect(() => processStyles({})).not.toThrow();
+    expect(() => processStyles(null)).not.toThrow();
+    expect(() => processStyles(false)).not.toThrow();
+    expect(() => processStyles(undefined)).not.toThrow();
   });
 
   it('should not change style if there is no  layout style property', () => {
     const style = {backgroundColor: '#000', width: 10};
-    const processedStyle = processLayoutProps(style);
+    const processedStyle = processStyles(style);
     expect(processedStyle).toStrictEqual(style);
   });
 });

Libraries/StyleSheet/processStyles.js

@@ -12,7 +12,7 @@
 
 import type {____FlattenStyleProp_Internal} from './StyleSheetTypes';
 
-const propMap = {
+const propMap: {[key: string]: string} = {
   marginInlineStart: 'marginStart',
   marginInlineEnd: 'marginEnd',
   marginBlockStart: 'marginTop',
@@ -28,7 +28,7 @@ const propMap = {
   verticalAlign: 'textAlignVertical',
 };
 
-const verticalAlignValueMap = {
+const verticalAlignValueMap: {[key: string]: string} = {
   auto: 'auto',
   top: 'top',
   bottom: 'bottom',
@@ -38,12 +38,12 @@ const verticalAlignValueMap = {
 function processStyles<T>(
   flattenedStyle: ____FlattenStyleProp_Internal<T>,
 ): ____FlattenStyleProp_Internal<T> {
-  const _flattenedStyle = {...flattenedStyle};
+  const _flattenedStyle: ____FlattenStyleProp_Internal<T> = {...flattenedStyle};
 
   if (_flattenedStyle != null) {
-    Object.keys(_flattenedStyle).forEach(key => {
+    Object.keys(_flattenedStyle).forEach((key: string) => {
       const alt = propMap[key];
-      const originalValue = _flattenedStyle[key];
+      const originalValue: string = _flattenedStyle[key];
       let _value = originalValue;
       if (key === 'verticalAlign') {
         _value = verticalAlignValueMap[originalValue];