From 1acae078fa509894a5961d818a4beefdca63947c Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 15 Nov 2022 18:44:34 -0800 Subject: [PATCH] Remove logical styles shim See #35342 --- Libraries/Components/TextInput/TextInput.js | 17 ++-- .../TextInput/__tests__/TextInput-test.js | 5 +- .../__snapshots__/TextInput-test.js.snap | 2 - Libraries/Components/View/View.js | 2 - .../Components/View/__tests__/View-test.js | 10 +-- Libraries/Image/Image.android.js | 4 - Libraries/Image/Image.ios.js | 3 - .../__tests__/processStyles-test.js | 78 ------------------- Libraries/StyleSheet/processStyles.js | 61 --------------- Libraries/Text/Text.js | 17 +++- Libraries/Text/__tests__/Text-test.js | 6 +- 11 files changed, 24 insertions(+), 181 deletions(-) delete mode 100644 Libraries/StyleSheet/__tests__/processStyles-test.js delete mode 100644 Libraries/StyleSheet/processStyles.js diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 850522696b1603..b0fa1a8b7f2e59 100644 --- 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> & 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 index 09b9775d132e47..6b775152bb6e6b 100644 --- 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 index 4f5e8f32b2e48e..ac93dc2e644c7c 100644 --- 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 index f3580320f34115..86540410c83b64 100644 --- 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 index f0e24d1189401c..78e547a673319e 100644 --- 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(); - expect(instance.toJSON()).toMatchInlineSnapshot(` - - `); + expect(instance.toJSON()).toMatchInlineSnapshot(``); }); it('has displayName', () => { @@ -47,7 +43,6 @@ describe('View compat with web', () => { `); @@ -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 index 42cfe06495b393..ca219faa80694b 100644 --- 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,7 +158,6 @@ 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'); } @@ -167,8 +165,6 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => { 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 index 8c10dc315350f5..6f1d72fcb5a8c3 100644 --- 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 component cannot contain children. If you want to render content on top of the image, consider using the component or absolute positioning.', diff --git a/Libraries/StyleSheet/__tests__/processStyles-test.js b/Libraries/StyleSheet/__tests__/processStyles-test.js deleted file mode 100644 index 9b93e350e360dc..00000000000000 --- a/Libraries/StyleSheet/__tests__/processStyles-test.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * 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 - * @emails oncall+react_native - */ - -'use strict'; - -const processStyles = require('../processStyles'); - -describe('processStyles', () => { - it('it should map layout style properties', () => { - const style = { - backgroundColor: 'white', - marginInlineStart: 10, - marginInlineEnd: 20, - marginBlockStart: 30, - marginBlockEnd: 40, - marginBlock: 50, - marginInline: 60, - paddingInlineStart: 70, - paddingInlineEnd: 80, - paddingBlockStart: 90, - paddingBlockEnd: 100, - paddingBlock: 110, - paddingInline: 120, - verticalAlign: 'middle', - }; - const processedStyle = processStyles(style); - expect(processedStyle).toMatchInlineSnapshot(` - Object { - "backgroundColor": "white", - "marginBottom": 40, - "marginEnd": 20, - "marginHorizontal": 60, - "marginStart": 10, - "marginTop": 30, - "marginVertical": 50, - "paddingBottom": 100, - "paddingEnd": 80, - "paddingHorizontal": 120, - "paddingStart": 70, - "paddingTop": 90, - "paddingVertical": 110, - "textAlignVertical": "center", - } - `); - }); - - it('should override style properties', () => { - const style = {marginStart: 20, marginInlineStart: 40}; - const processedStyle = processStyles(style); - expect(processedStyle.marginStart).toBe(40); - }); - - it('should overwrite properties with `undefined`', () => { - const style = {marginInlineStart: 40, marginStart: undefined}; - const processedStyle = processStyles(style); - expect(processedStyle.marginStart).toBe(40); - }); - - it('should not fail on falsy values', () => { - 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 = processStyles(style); - expect(processedStyle).toStrictEqual(style); - }); -}); diff --git a/Libraries/StyleSheet/processStyles.js b/Libraries/StyleSheet/processStyles.js deleted file mode 100644 index 2e8edfe4bd441a..00000000000000 --- a/Libraries/StyleSheet/processStyles.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * 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 - * @flow strict-local - */ - -'use strict'; - -import type {____FlattenStyleProp_Internal} from './StyleSheetTypes'; - -const propMap: {[key: string]: string} = { - marginInlineStart: 'marginStart', - marginInlineEnd: 'marginEnd', - marginBlockStart: 'marginTop', - marginBlockEnd: 'marginBottom', - marginBlock: 'marginVertical', - marginInline: 'marginHorizontal', - paddingInlineStart: 'paddingStart', - paddingInlineEnd: 'paddingEnd', - paddingBlockStart: 'paddingTop', - paddingBlockEnd: 'paddingBottom', - paddingBlock: 'paddingVertical', - paddingInline: 'paddingHorizontal', - verticalAlign: 'textAlignVertical', -}; - -const verticalAlignValueMap: {[key: string]: string} = { - auto: 'auto', - top: 'top', - bottom: 'bottom', - middle: 'center', -}; - -function processStyles( - flattenedStyle: ____FlattenStyleProp_Internal, -): ____FlattenStyleProp_Internal { - const _flattenedStyle: ____FlattenStyleProp_Internal = {...flattenedStyle}; - - if (_flattenedStyle != null) { - Object.keys(_flattenedStyle).forEach((key: string) => { - const alt = propMap[key]; - const originalValue: string = _flattenedStyle[key]; - let _value = originalValue; - if (key === 'verticalAlign') { - _value = verticalAlignValueMap[originalValue]; - } - if (alt != null) { - delete _flattenedStyle[key]; - _flattenedStyle[alt] = _value; - } - }); - } - - return _flattenedStyle; -} - -module.exports = processStyles; diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 2c92762b32d8d1..e32ba45b4be7c7 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -15,7 +15,7 @@ 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 StyleSheet from '../StyleSheet/StyleSheet'; import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping'; import Platform from '../Utilities/Platform'; import TextAncestor from './TextAncestor'; @@ -209,7 +209,6 @@ const Text: React.AbstractComponent< }); style = flattenStyle(style); - style = processStyles(style); if (typeof style?.fontWeight === 'number') { style.fontWeight = style?.fontWeight.toString(); @@ -218,6 +217,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 +306,11 @@ const userSelectToSelectableMap = { all: true, }; +const verticalAlignToTextAlignVerticalMap = { + auto: 'auto', + top: 'top', + bottom: 'bottom', + middle: 'center', +}; + module.exports = Text; diff --git a/Libraries/Text/__tests__/Text-test.js b/Libraries/Text/__tests__/Text-test.js index 2aa7f1e8b92d60..ad565833a1f820 100644 --- a/Libraries/Text/__tests__/Text-test.js +++ b/Libraries/Text/__tests__/Text-test.js @@ -28,7 +28,6 @@ describe('Text', () => { ellipsizeMode="tail" isHighlighted={false} selectionColor={null} - style={Object {}} /> `); }); @@ -56,7 +55,6 @@ describe('Text compat with web', () => { isHighlighted={false} nativeID="id" selectionColor={null} - style={Object {}} tabIndex={0} testID="testID" /> @@ -172,7 +170,6 @@ describe('Text compat with web', () => { ellipsizeMode="tail" isHighlighted={false} selectionColor={null} - style={Object {}} /> `); }); @@ -202,9 +199,8 @@ describe('Text compat with web', () => { "backgroundColor": "white", "display": "flex", "flex": 1, - "marginStart": 10, + "marginInlineStart": 10, "textAlignVertical": "center", - "userSelect": "none", } } />