Remove logical styles shim

See #35342
facebook · Nov 16, 2022 · dfeb49c · dfeb49c
1 parent 21f6db7
commit dfeb49c
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 182 deletions.
diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js
@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
 import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
@@ -21,7 +22,6 @@ import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import StatusBar from '../StatusBar/StatusBar';
 import View from '../View/View';
-import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
 import AndroidDrawerLayoutNativeComponent, {
   Commands,
 } from './AndroidDrawerLayoutNativeComponent';

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -19,7 +19,6 @@ import type {TextInputType} from './TextInput.flow';
 
 import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
-import processStyles from '../../StyleSheet/processStyles';
 import StyleSheet, {
   type ColorValue,
   type TextStyleProp,
@@ -1420,19 +1419,15 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
+  let style = flattenStyle(props.style);
+
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
       props.multiline === true
         ? RCTMultilineTextInputView
         : RCTSinglelineTextInputView;
 
-    let style =
-      props.multiline === true
-        ? [styles.multilineInput, props.style]
-        : props.style;
-
-    style = flattenStyle(style);
-    style = processStyles(style);
+    style = props.multiline === true ? [styles.multilineInput, style] : style;
 
     const useOnChangeSync =
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
@@ -1465,9 +1460,6 @@ function InternalTextInput(props: Props): React.Node {
       />
     );
   } else if (Platform.OS === 'android') {
-    let style = flattenStyle(props.style);
-    style = processStyles(style);
-
     const autoCapitalize = props.autoCapitalize || 'sentences';
     const _accessibilityLabelledBy =
       props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
@@ -1635,11 +1627,12 @@ const ExportedForwardRef: React.AbstractComponent<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
 ) {
-  const style = flattenStyle(restProps.style);
+  let style = flattenStyle(restProps.style);
 
   if (style?.verticalAlign != null) {
     style.textAlignVertical =
       verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    delete style.verticalAlign;
   }
 
   return (

diff --git a/Libraries/Components/TextInput/__tests__/TextInput-test.js b/Libraries/Components/TextInput/__tests__/TextInput-test.js
@@ -207,7 +207,6 @@ describe('TextInput', () => {
         onStartShouldSetResponder={[Function]}
         rejectResponderTermination={true}
         selection={null}
-        style={Object {}}
         submitBehavior="blurAndSubmit"
         text=""
         underlineColorAndroid="transparent"
@@ -254,7 +253,6 @@ describe('TextInput compat with web', () => {
         onStartShouldSetResponder={[Function]}
         rejectResponderTermination={true}
         selection={null}
-        style={Object {}}
         submitBehavior="blurAndSubmit"
         tabIndex={0}
         testID="testID"
@@ -394,7 +392,6 @@ describe('TextInput compat with web', () => {
         rejectResponderTermination={true}
         role="main"
         selection={null}
-        style={Object {}}
         submitBehavior="blurAndSubmit"
         text=""
         underlineColorAndroid="transparent"
@@ -442,7 +439,7 @@ describe('TextInput compat with web', () => {
             "backgroundColor": "white",
             "display": "flex",
             "flex": 1,
-            "marginStart": 10,
+            "marginInlineStart": 10,
             "textAlignVertical": "center",
             "userSelect": "none",
           }

diff --git a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
@@ -23,7 +23,6 @@ exports[`TextInput tests should render as expected: should deep render when mock
   onStartShouldSetResponder={[Function]}
   rejectResponderTermination={true}
   selection={null}
-  style={Object {}}
   submitBehavior="blurAndSubmit"
   text=""
   underlineColorAndroid="transparent"
@@ -53,7 +52,6 @@ exports[`TextInput tests should render as expected: should deep render when not
   onStartShouldSetResponder={[Function]}
   rejectResponderTermination={true}
   selection={null}
-  style={Object {}}
   submitBehavior="blurAndSubmit"
   text=""
   underlineColorAndroid="transparent"

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

diff --git a/Libraries/Components/View/__tests__/View-test.js b/Libraries/Components/View/__tests__/View-test.js
@@ -21,11 +21,7 @@ describe('View', () => {
   it('default render', () => {
     const instance = render.create(<View />);
 
-    expect(instance.toJSON()).toMatchInlineSnapshot(`
-      <RCTView
-        style={Object {}}
-      />
-    `);
+    expect(instance.toJSON()).toMatchInlineSnapshot(`<RCTView />`);
   });
 
   it('has displayName', () => {
@@ -47,7 +43,6 @@ describe('View compat with web', () => {
       <RCTView
         focusable={true}
         nativeID="id"
-        style={Object {}}
         testID="testID"
       />
     `);
@@ -165,7 +160,6 @@ describe('View compat with web', () => {
         aria-setsize={5}
         aria-sort="ascending"
         importantForAccessibility="no-hide-descendants"
-        style={Object {}}
       />
     `);
   });
@@ -189,7 +183,7 @@ describe('View compat with web', () => {
             "backgroundColor": "white",
             "display": "flex",
             "flex": 1,
-            "marginStart": 10,
+            "marginInlineStart": 10,
             "pointerEvents": "none",
           }
         }

diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js
@@ -13,7 +13,6 @@ import type {ImageAndroid} from './Image.flow';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
-import processStyles from '../StyleSheet/processStyles';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestor from '../Text/TextAncestor';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
@@ -159,16 +158,13 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     const {width = props.width, height = props.height, uri} = source;
     style = flattenStyle([{width, height}, styles.base, props.style]);
     sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
   }
 
   const {height, width, ...restProps} = props;
 
-  style = processStyles(style);
-
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
   const nativeProps = {
     ...restProps,

diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
@@ -14,7 +14,6 @@ import type {ImageIOS} from './Image.flow';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
-import processStyles from '../StyleSheet/processStyles';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
 import ImageInjection from './ImageInjection';
@@ -138,8 +137,6 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   // $FlowFixMe[prop-missing]
   const tintColor = props.tintColor || style.tintColor;
 
-  style = processStyles(style);
-
   if (props.children != null) {
     throw new Error(
       'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',

diff --git a/Libraries/StyleSheet/__tests__/processStyles-test.js b/Libraries/StyleSheet/__tests__/processStyles-test.js
diff --git a/Libraries/StyleSheet/processStyles.js b/Libraries/StyleSheet/processStyles.js
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
@@ -15,7 +15,6 @@ import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
-import processStyles from '../StyleSheet/processStyles';
 import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
@@ -209,7 +208,6 @@ const Text: React.AbstractComponent<
   });
 
   style = flattenStyle(style);
-  style = processStyles(style);
 
   if (typeof style?.fontWeight === 'number') {
     style.fontWeight = style?.fontWeight.toString();
@@ -218,6 +216,13 @@ const Text: React.AbstractComponent<
   let _selectable = restProps.selectable;
   if (style?.userSelect != null) {
     _selectable = userSelectToSelectableMap[style.userSelect];
+    delete style.userSelect;
+  }
+
+  if (style?.verticalAlign != null) {
+    style.textAlignVertical =
+      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    delete style.verticalAlign;
   }
 
   const _hasOnPressOrOnLongPress =
@@ -300,4 +305,11 @@ const userSelectToSelectableMap = {
   all: true,
 };
 
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
 module.exports = Text;