Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

StatusBar: Remove PropTypes #21293

Closed
wants to merge 2 commits into from
Closed

StatusBar: Remove PropTypes #21293

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
667f414
StatusBar: Remove PropTypes
empyrical Sep 24, 2018
a5c221d
Move platform-specific types into their own declarations
empyrical Sep 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 42 additions & 56 deletions Libraries/Components/StatusBar/StatusBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@
'use strict';

const React = require('React');
const PropTypes = require('prop-types');
const ColorPropType = require('ColorPropType');
const Platform = require('Platform');

const processColor = require('processColor');
Expand Down Expand Up @@ -55,9 +53,47 @@ export type StatusBarAnimation = $Enum<{
slide: string,
}>;

type DefaultProps = {
animated: boolean,
};
type StatusBarProps = $ReadOnly<{|
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'd prefer if you just named these types Props. I believe that is consistent with all the other files

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed it

/**
* If the status bar is hidden.
*/
hidden?: ?boolean,
/**
* If the transition between status bar property changes should be animated.
* Supported for backgroundColor, barStyle and hidden.
*/
animated?: ?boolean,
/**
* The background color of the status bar.
* @platform android
*/
backgroundColor?: ?string,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When there are a bunch of Props that are supported on different platforms, I like doing this pattern:

type AndroidProps = //
type IOSProps = //

type Props = $ReadOnly<{|
  ...IOSProps,
  ...AndroidProps,
  // shared props
|}>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And also re-organized these

/**
* 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.
*
* @platform android
*/
translucent?: ?boolean,
/**
* Sets the color of the status bar text.
*/
barStyle?: ?('default' | 'light-content' | 'dark-content'),
/**
* If the network activity indicator should be visible.
*
* @platform ios
*/
networkActivityIndicatorVisible?: ?boolean,
/**
* The transition effect when showing and hiding the status bar using the `hidden`
* prop. Defaults to 'fade'.
*
* @platform ios
*/
showHideTransition?: ?('fade' | 'slide'),
|}>;

/**
* Merges the prop stack with the default values.
Expand Down Expand Up @@ -148,15 +184,7 @@ function createStackEntry(props: any): any {
*
* `currentHeight` (Android only) The height of the status bar.
*/
class StatusBar extends React.Component<{
hidden?: boolean,
animated?: boolean,
backgroundColor?: string,
translucent?: boolean,
barStyle?: 'default' | 'light-content' | 'dark-content',
networkActivityIndicatorVisible?: boolean,
showHideTransition?: 'fade' | 'slide',
}> {
class StatusBar extends React.Component<StatusBarProps> {
static _propsStack = [];

static _defaultProps = createStackEntry({
Expand Down Expand Up @@ -261,48 +289,6 @@ class StatusBar extends React.Component<{
StatusBarManager.setTranslucent(translucent);
}

static propTypes = {
/**
* If the status bar is hidden.
*/
hidden: PropTypes.bool,
/**
* If the transition between status bar property changes should be animated.
* Supported for backgroundColor, barStyle and hidden.
*/
animated: PropTypes.bool,
/**
* The background color of the status bar.
* @platform android
*/
backgroundColor: ColorPropType,
/**
* 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.
*
* @platform android
*/
translucent: PropTypes.bool,
/**
* Sets the color of the status bar text.
*/
barStyle: PropTypes.oneOf(['default', 'light-content', 'dark-content']),
/**
* If the network activity indicator should be visible.
*
* @platform ios
*/
networkActivityIndicatorVisible: PropTypes.bool,
/**
* The transition effect when showing and hiding the status bar using the `hidden`
* prop. Defaults to 'fade'.
*
* @platform ios
*/
showHideTransition: PropTypes.oneOf(['fade', 'slide']),
};

static defaultProps = {
animated: false,
showHideTransition: 'fade',
Expand Down