Permalink
Browse files

RN: Refine `StyleSheet.compose` Flow Type

Summary:
Refines `StyleSheet.compose` so that subtypes of `DangerouslyImpreciseStyleProp` can flow through the function call without losing their type.

This makes it so that if you supply two `ViewStyleProp` types, you will get a `ViewStyleProp` type out of it.

Reviewed By: TheSavior

Differential Revision: D8851699

fbshipit-source-id: e38e572e363a71fddf63d6b6bf5a96b3cdae5915
  • Loading branch information...
yungsters authored and facebook-github-bot committed Jul 18, 2018
1 parent 732c3a4 commit 50a481d23ae72a434849d2c85007e411b0c2bb1f
Showing with 87 additions and 5 deletions.
  1. +5 −5 Libraries/StyleSheet/StyleSheet.js
  2. +82 −0 Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js
@@ -272,12 +272,12 @@ module.exports = {
* array, saving allocations and maintaining reference equality for
* PureComponent checks.
*/
compose(
style1: ?DangerouslyImpreciseStyleProp,
style2: ?DangerouslyImpreciseStyleProp,
): ?DangerouslyImpreciseStyleProp {
compose<T: DangerouslyImpreciseStyleProp>(
style1: ?T,
style2: ?T,
): ?T | $ReadOnlyArray<T> {
if (style1 != null && style2 != null) {
return [style1, style2];
return ([style1, style2]: $ReadOnlyArray<T>);
} else {
return style1 != null ? style1 : style2;
}
@@ -0,0 +1,82 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/
'use strict';
const StyleSheet = require('StyleSheet');
import type {ImageStyleProp, TextStyleProp} from 'StyleSheet';
const imageStyle = {tintColor: 'rgb(0, 0, 0)'};
const textStyle = {color: 'rgb(0, 0, 0)'};
module.exports = {
testGoodCompose() {
(StyleSheet.compose(
imageStyle,
imageStyle,
): ImageStyleProp);
(StyleSheet.compose(
textStyle,
textStyle,
): TextStyleProp);
(StyleSheet.compose(
null,
null,
): TextStyleProp);
(StyleSheet.compose(
textStyle,
null,
): TextStyleProp);
(StyleSheet.compose(
textStyle,
Math.random() < 0.5 ? textStyle : null,
): TextStyleProp);
(StyleSheet.compose(
[textStyle],
null,
): TextStyleProp);
(StyleSheet.compose(
[textStyle],
null,
): TextStyleProp);
(StyleSheet.compose(
[textStyle],
[textStyle],
): TextStyleProp);
},
testBadCompose() {
// $FlowExpectedError - Incompatible type.
(StyleSheet.compose(
textStyle,
textStyle,
): ImageStyleProp);
(StyleSheet.compose(
// $FlowExpectedError - Incompatible type.
[textStyle],
null,
): ImageStyleProp);
// $FlowExpectedError - Incompatible type.
(StyleSheet.compose(
Math.random() < 0.5 ? textStyle : null,
null,
): ImageStyleProp);
},
};

0 comments on commit 50a481d

Please sign in to comment.