From fc0d84fba4c3227b27a34d9e80adfd345621535f Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 26 Aug 2022 12:17:21 -0700 Subject: [PATCH] [change] StyleSheet.compose() deprecation Encourage use of existing array syntax for multiple styles. Eventually we'll want to remove the compose() API to simplify the overall styling API. --- packages/benchmarks/src/app/Icons.js | 2 +- .../src/pages/docs/apis/style-sheet.md | 6 +----- packages/react-native-web-examples/pages/index.js | 2 +- .../react-native-web/src/exports/SafeAreaView/index.js | 4 +--- .../react-native-web/src/exports/ScrollView/index.js | 4 ++-- .../src/exports/StyleSheet/__tests__/index-test.js | 6 ------ .../react-native-web/src/exports/StyleSheet/index.js | 9 ++++----- .../src/exports/TouchableHighlight/index.js | 5 +---- .../src/vendor/react-native/FlatList/index.js | 4 ++-- .../src/vendor/react-native/VirtualizedList/index.js | 10 +++++----- 10 files changed, 18 insertions(+), 34 deletions(-) diff --git a/packages/benchmarks/src/app/Icons.js b/packages/benchmarks/src/app/Icons.js index ae66c6b1..6212df34 100644 --- a/packages/benchmarks/src/app/Icons.js +++ b/packages/benchmarks/src/app/Icons.js @@ -20,7 +20,7 @@ const createIcon = (children) => { const Icon = (props) => createElement('svg', { children, - style: StyleSheet.compose(styles.root, props.style), + style: [styles.root, props.style], width: 24, height: 24, viewBox: '0 0 24 24' diff --git a/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md b/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md index f2ef383f..c00a6a7d 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md @@ -44,11 +44,7 @@ Equal to 1px. This is not implemented using screen density as browsers may round ### Static methods -{% call macro.prop('compose', '(style1, style2) => Style') %} -Combines two styles such that the last style overrides properties of the first style. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality. -{% endcall %} - -{% call macro.prop('create', '({ [key]: ruleset }) => ({ [key]: number })') %} +{% call macro.prop('create', '({ [key]: ruleset }) => ({ [key]: ruleset })') %} Define style objects. Each key of the object passed to `create` must define a style object. These values should not be introspected at runtime. {% endcall %} diff --git a/packages/react-native-web-examples/pages/index.js b/packages/react-native-web-examples/pages/index.js index 8f6bfc05..011dda4f 100644 --- a/packages/react-native-web-examples/pages/index.js +++ b/packages/react-native-web-examples/pages/index.js @@ -11,7 +11,7 @@ function Link(props) { ); diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js index bcd84052..5324c22f 100644 --- a/packages/react-native-web/src/exports/SafeAreaView/index.js +++ b/packages/react-native-web/src/exports/SafeAreaView/index.js @@ -32,9 +32,7 @@ const SafeAreaView: React.AbstractComponent< React.ElementRef > = React.forwardRef((props, ref) => { const { style, ...rest } = props; - return ( - - ); + return ; }); SafeAreaView.displayName = 'SafeAreaView'; diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js index f2ecd1bb..49c9fd31 100644 --- a/packages/react-native-web/src/exports/ScrollView/index.js +++ b/packages/react-native-web/src/exports/ScrollView/index.js @@ -171,10 +171,10 @@ const ScrollView = ((createReactClass({ if (child != null && (isSticky || pagingEnabled)) { return ( {child} diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js index 3beb6ebc..2f1823d3 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js @@ -52,12 +52,6 @@ describe('StyleSheet', () => { `); }); - test('compose', () => { - expect(StyleSheet.compose(1, 2)).toEqual([1, 2]); - expect(StyleSheet.compose(1, null)).toBe(1); - expect(StyleSheet.compose(null, 2)).toBe(2); - }); - describe('create', () => { test('returns original style objects', () => { const style = StyleSheet.create({ root: { position: 'absolute' } }); diff --git a/packages/react-native-web/src/exports/StyleSheet/index.js b/packages/react-native-web/src/exports/StyleSheet/index.js index 24129367..281bf1a3 100644 --- a/packages/react-native-web/src/exports/StyleSheet/index.js +++ b/packages/react-native-web/src/exports/StyleSheet/index.js @@ -104,12 +104,11 @@ function compose(style1: any, style2: any): any { ); } /* eslint-enable prefer-rest-params */ + console.warn( + 'StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].' + ); } - if (style1 && style2) { - return [style1, style2]; - } else { - return style1 || style2; - } + return [style1, style2]; } /** diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js index eae524e3..79723501 100644 --- a/packages/react-native-web/src/exports/TouchableHighlight/index.js +++ b/packages/react-native-web/src/exports/TouchableHighlight/index.js @@ -179,10 +179,7 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node { ]} > {React.cloneElement(child, { - style: StyleSheet.compose( - child.props.style, - extraStyles && extraStyles.child - ) + style: [child.props.style, extraStyles && extraStyles.child] })} ); diff --git a/packages/react-native-web/src/vendor/react-native/FlatList/index.js b/packages/react-native-web/src/vendor/react-native/FlatList/index.js index 6e8f94ae..12950eb4 100644 --- a/packages/react-native-web/src/vendor/react-native/FlatList/index.js +++ b/packages/react-native-web/src/vendor/react-native/FlatList/index.js @@ -614,7 +614,7 @@ class FlatList extends React.PureComponent, void> { 'Expected array of items with numColumns > 1', ); return ( - + {item.map((it, kk) => { const element = renderer({ item: it, @@ -663,4 +663,4 @@ const styles = StyleSheet.create({ row: {flexDirection: 'row'}, }); -export default FlatList; \ No newline at end of file +export default FlatList; diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 9b7be3fd..fe7ddf4f 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -957,10 +957,10 @@ class VirtualizedList extends React.PureComponent { key="$header"> + ]}> { // $FlowFixMe[incompatible-type] - Typing ReactNativeComponent revealed errors element @@ -1084,7 +1084,7 @@ class VirtualizedList extends React.PureComponent { element.props.onLayout(event); } }, - style: StyleSheet.compose(inversionStyle, element.props.style), + style: [inversionStyle, element.props.style], }), ); } @@ -1102,10 +1102,10 @@ class VirtualizedList extends React.PureComponent { key="$footer"> + ]}> { // $FlowFixMe[incompatible-type] - Typing ReactNativeComponent revealed errors element