Skip to content

Commit

Permalink
Flow strict StatusBar (facebook#22282)
Browse files Browse the repository at this point in the history
Summary:
Related to facebook#22100

`Libraries/Components/StatusBar/StatusBar.js`
Enhance StatusBar with mergePropsStack and _defaultProps.

- [x] npm run prettier
- [x] npm run flow
- [x] npm run flow-check-ios
- [x] npm run flow-check-android
- [x] npm run lint
- [x] npm run test
- [x] ./scripts/run-android-local-unit-tests.sh

[GENERAL][ENHANCEMENT][StatusBar.js] - apply flow strict-local
Pull Request resolved: facebook#22282

Reviewed By: TheSavior

Differential Revision: D13103971

Pulled By: RSNara

fbshipit-source-id: 27f69c6df3a8a7792fcd595c0ff362943ccab8ca
  • Loading branch information
watanabeyu authored and facebook-github-bot committed Nov 21, 2018
1 parent 9e48430 commit 4c5083a
Showing 1 changed file with 70 additions and 38 deletions.
108 changes: 70 additions & 38 deletions Libraries/Components/StatusBar/StatusBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
* @flow strict-local
*/

'use strict';
Expand Down Expand Up @@ -103,53 +103,88 @@ type Props = $ReadOnly<{|
barStyle?: ?('default' | 'light-content' | 'dark-content'),
|}>;

type StackEntryProps = {|
/**
* The background color of the status bar.
*
* @platform android
*/
backgroundColor: {|
value: ?string,
animated: ?boolean,
|},
/**
* Sets the color of the status bar text.
*/
barStyle: {|
value: ?string,
animated: ?boolean,
|},
/**
* If the status bar is translucent.
* When translucent is set to true, the app will draw under the status bar.
* This is useful when using a semi transparent status bar color.
*/
translucent: ?boolean,
/**
*
*/
hidden: {|
value: ?boolean,
animated: boolean,
transition: ?('slide' | 'fade'),
|},
/**
* If the network activity indicator should be visible.
*
* @platform ios
*/
networkActivityIndicatorVisible: ?boolean,
|};

/**
* Merges the prop stack with the default values.
*/
function mergePropsStack(
propsStack: Array<Object>,
defaultValues: Object,
): Object {
propsStack: $ReadOnlyArray<StackEntryProps>,
defaultValues: StackEntryProps,
): StackEntryProps {
const init: StackEntryProps = {
...defaultValues,
};

return propsStack.reduce((prev, cur) => {
for (const prop in cur) {
if (cur[prop] != null) {
prev[prop] = cur[prop];
}
}
return prev;
}, Object.assign({}, defaultValues));
}, init);
}

/**
* Returns an object to insert in the props stack from the props
* and the transition/animation info.
*/
function createStackEntry(props: any): any {
function createStackEntry(props: Props): StackEntryProps {
return {
backgroundColor:
props.backgroundColor != null
? {
value: props.backgroundColor,
animated: props.animated,
}
: null,
barStyle:
props.barStyle != null
? {
value: props.barStyle,
animated: props.animated,
}
: null,
translucent: props.translucent,
hidden:
props.hidden != null
? {
value: props.hidden,
animated: props.animated,
transition: props.showHideTransition,
}
: null,
networkActivityIndicatorVisible: props.networkActivityIndicatorVisible,
backgroundColor: {
value: props.backgroundColor,
animated: props.animated,
},
barStyle: {
value: props.barStyle,
animated: props.animated,
},
translucent: props.translucent || false,
hidden: {
value: props.hidden,
animated: props.animated || false,
transition: props.showHideTransition,
},
networkActivityIndicatorVisible:
props.networkActivityIndicatorVisible || false,
};
}

Expand Down Expand Up @@ -193,9 +228,9 @@ function createStackEntry(props: any): any {
* `currentHeight` (Android only) The height of the status bar.
*/
class StatusBar extends React.Component<Props> {
static _propsStack = [];
static _propsStack: Array<StackEntryProps> = [];

static _defaultProps = createStackEntry({
static _defaultProps: StackEntryProps = createStackEntry({
animated: false,
showHideTransition: 'fade',
backgroundColor: 'black',
Expand Down Expand Up @@ -230,10 +265,9 @@ class StatusBar extends React.Component<Props> {
* changing the status bar hidden property.
*/
static setHidden(hidden: boolean, animation?: StatusBarAnimation) {
animation = animation || 'none';
StatusBar._defaultProps.hidden.value = hidden;
if (Platform.OS === 'ios') {
StatusBarManager.setHidden(hidden, animation);
StatusBarManager.setHidden(hidden, animation || 'none');
} else if (Platform.OS === 'android') {
StatusBarManager.setHidden(hidden);
}
Expand All @@ -245,10 +279,9 @@ class StatusBar extends React.Component<Props> {
* @param animated Animate the style change.
*/
static setBarStyle(style: StatusBarStyle, animated?: boolean) {
animated = animated || false;
StatusBar._defaultProps.barStyle.value = style;
if (Platform.OS === 'ios') {
StatusBarManager.setStyle(style, animated);
StatusBarManager.setStyle(style, animated || false);
} else if (Platform.OS === 'android') {
StatusBarManager.setStyle(style);
}
Expand Down Expand Up @@ -279,9 +312,8 @@ class StatusBar extends React.Component<Props> {
console.warn('`setBackgroundColor` is only available on Android');
return;
}
animated = animated || false;
StatusBar._defaultProps.backgroundColor.value = color;
StatusBarManager.setColor(processColor(color), animated);
StatusBarManager.setColor(processColor(color), animated || false);
}

/**
Expand Down

0 comments on commit 4c5083a

Please sign in to comment.