From 170bab659d8cbe632286ca796e32ec09af21875a Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 11 Apr 2017 22:20:31 -0700 Subject: [PATCH] [change] use 'prop-types' and 'create-react-class' Preparation for React 15.5 --- .../apis/PanResponder/PanResponderExample.js | 3 +- .../ActivityIndicatorExample.js | 3 +- examples/components/Image/ImageExample.js | 9 +-- .../ProgressBar/ProgressBarExample.js | 3 +- examples/components/Switch/SwitchExample.js | 11 ++-- examples/components/Text/TextExample.js | 5 +- .../components/Touchable/TouchableExample.js | 13 ++-- examples/components/View/ViewExample.js | 5 +- .../components/View/ViewTransformsExample.js | 3 +- examples/demos/TicTacToe/TicTacToe.js | 7 ++- package.json | 2 + src/apis/AppRegistry/ReactNativeApp.js | 9 +-- src/apis/StyleSheet/StyleSheetValidation.js | 16 ++--- src/components/ActivityIndicator/index.js | 11 ++-- src/components/Button/index.js | 13 ++-- src/components/Image/ImageStylePropTypes.js | 3 +- src/components/Image/index.js | 29 ++++----- src/components/ListView/ListViewPropTypes.js | 32 +++++----- src/components/ProgressBar/index.js | 7 ++- src/components/ScrollView/ScrollViewBase.js | 27 +++++---- src/components/ScrollView/index.js | 24 ++++---- src/components/StaticContainer/index.js | 9 +-- src/components/StaticRenderer/index.js | 7 ++- src/components/Switch/index.js | 11 ++-- src/components/Text/TextStylePropTypes.js | 3 +- src/components/Text/index.js | 15 ++--- .../TextInput/TextInputStylePropTypes.js | 4 +- src/components/TextInput/index.js | 59 ++++++++++--------- .../Touchable/TouchableHighlight.js | 17 ++++-- src/components/Touchable/TouchableOpacity.js | 8 ++- .../Touchable/TouchableWithoutFeedback.js | 28 +++++---- src/components/View/ViewPropTypes.js | 50 ++++++++-------- src/components/View/ViewStylePropTypes.js | 5 +- src/components/View/index.js | 7 ++- src/propTypes/AnimationPropTypes.js | 4 +- src/propTypes/BaseComponentPropTypes.js | 3 +- src/propTypes/BorderPropTypes.js | 6 +- src/propTypes/ColorPropType.js | 2 - src/propTypes/EdgeInsetsPropType.js | 10 ++-- src/propTypes/LayoutPropTypes.js | 4 +- src/propTypes/PointPropType.js | 6 +- src/propTypes/ShadowPropTypes.js | 4 +- src/propTypes/TransformPropTypes.js | 4 +- yarn.lock | 34 +++++++++-- 44 files changed, 290 insertions(+), 245 deletions(-) diff --git a/examples/apis/PanResponder/PanResponderExample.js b/examples/apis/PanResponder/PanResponderExample.js index 69d292f2..5d4f19a2 100644 --- a/examples/apis/PanResponder/PanResponderExample.js +++ b/examples/apis/PanResponder/PanResponderExample.js @@ -1,5 +1,6 @@ 'use strict'; +import createReactClass from 'create-react-class'; import { storiesOf, action } from '@kadira/storybook'; var React = require('react'); @@ -12,7 +13,7 @@ var { var CIRCLE_SIZE = 80; -var PanResponderExample = React.createClass({ +var PanResponderExample = createReactClass({ _panResponder: {}, _previousLeft: 0, _previousTop: 0, diff --git a/examples/components/ActivityIndicator/ActivityIndicatorExample.js b/examples/components/ActivityIndicator/ActivityIndicatorExample.js index 165c3564..27ef9ec4 100644 --- a/examples/components/ActivityIndicator/ActivityIndicatorExample.js +++ b/examples/components/ActivityIndicator/ActivityIndicatorExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; import { ActivityIndicator, StyleSheet, View } from 'react-native' @@ -26,7 +27,7 @@ import TimerMixin from 'react-timer-mixin'; * @flow */ -const ToggleAnimatingActivityIndicator = React.createClass({ +const ToggleAnimatingActivityIndicator = createReactClass({ mixins: [TimerMixin], getInitialState() { diff --git a/examples/components/Image/ImageExample.js b/examples/components/Image/ImageExample.js index 843b7689..886355c0 100644 --- a/examples/components/Image/ImageExample.js +++ b/examples/components/Image/ImageExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import React from 'react'; import { storiesOf, action, addDecorator } from '@kadira/storybook'; import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'react-native' @@ -31,7 +32,7 @@ var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACS const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now(); var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL); -var NetworkImageCallbackExample = React.createClass({ +var NetworkImageCallbackExample = createReactClass({ getInitialState: function() { return { events: [], @@ -88,7 +89,7 @@ var NetworkImageCallbackExample = React.createClass({ } }); -var NetworkImageExample = React.createClass({ +var NetworkImageExample = createReactClass({ getInitialState: function() { return { error: false, @@ -116,7 +117,7 @@ var NetworkImageExample = React.createClass({ } }); -var ImageSizeExample = React.createClass({ +var ImageSizeExample = createReactClass({ getInitialState: function() { return { width: 0, @@ -150,7 +151,7 @@ var ImageSizeExample = React.createClass({ }); /* -var MultipleSourcesExample = React.createClass({ +var MultipleSourcesExample = createReactClass({ getInitialState: function() { return { width: 30, diff --git a/examples/components/ProgressBar/ProgressBarExample.js b/examples/components/ProgressBar/ProgressBarExample.js index 8046b978..62cd037d 100644 --- a/examples/components/ProgressBar/ProgressBarExample.js +++ b/examples/components/ProgressBar/ProgressBarExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import { ProgressBar, StyleSheet, View } from 'react-native' import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; @@ -26,7 +27,7 @@ import TimerMixin from 'react-timer-mixin'; * @flow */ -var ProgressBarExample = React.createClass({ +var ProgressBarExample = createReactClass({ mixins: [TimerMixin], getInitialState() { diff --git a/examples/components/Switch/SwitchExample.js b/examples/components/Switch/SwitchExample.js index 03e6ca94..af224dbe 100644 --- a/examples/components/Switch/SwitchExample.js +++ b/examples/components/Switch/SwitchExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import { Platform, Switch, Text, View } from 'react-native' import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; @@ -25,7 +26,7 @@ import { storiesOf, action } from '@kadira/storybook'; * @flow */ -var BasicSwitchExample = React.createClass({ +var BasicSwitchExample = createReactClass({ getInitialState() { return { trueSwitchIsOn: true, @@ -49,7 +50,7 @@ var BasicSwitchExample = React.createClass({ } }); -var DisabledSwitchExample = React.createClass({ +var DisabledSwitchExample = createReactClass({ render() { return ( @@ -65,7 +66,7 @@ var DisabledSwitchExample = React.createClass({ }, }); -var ColorSwitchExample = React.createClass({ +var ColorSwitchExample = createReactClass({ getInitialState() { return { colorTrueSwitchIsOn: true, @@ -95,7 +96,7 @@ var ColorSwitchExample = React.createClass({ }, }); -var EventSwitchExample = React.createClass({ +var EventSwitchExample = createReactClass({ getInitialState() { return { eventSwitchIsOn: false, @@ -132,7 +133,7 @@ var EventSwitchExample = React.createClass({ } }); -var SizeSwitchExample = React.createClass({ +var SizeSwitchExample = createReactClass({ getInitialState() { return { trueSwitchIsOn: true, diff --git a/examples/components/Text/TextExample.js b/examples/components/Text/TextExample.js index b43826b9..33304873 100644 --- a/examples/components/Text/TextExample.js +++ b/examples/components/Text/TextExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; import { Image, StyleSheet, Text, View } from 'react-native' @@ -25,7 +26,7 @@ import { Image, StyleSheet, Text, View } from 'react-native' * @flow */ -var Entity = React.createClass({ +var Entity = createReactClass({ render: function() { return ( @@ -35,7 +36,7 @@ var Entity = React.createClass({ } }); -var AttributeToggler = React.createClass({ +var AttributeToggler = createReactClass({ getInitialState: function() { return {fontWeight: 'bold', fontSize: 15}; }, diff --git a/examples/components/Touchable/TouchableExample.js b/examples/components/Touchable/TouchableExample.js index 01a757e0..474e0e41 100644 --- a/examples/components/Touchable/TouchableExample.js +++ b/examples/components/Touchable/TouchableExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; import { @@ -112,7 +113,7 @@ const examples = [ }, }]; -var TextOnPressBox = React.createClass({ +var TextOnPressBox = createReactClass({ getInitialState: function() { return { timesPressed: 0, @@ -148,7 +149,7 @@ var TextOnPressBox = React.createClass({ } }); -var TouchableFeedbackEvents = React.createClass({ +var TouchableFeedbackEvents = createReactClass({ getInitialState: function() { return { eventLog: [], @@ -187,7 +188,7 @@ var TouchableFeedbackEvents = React.createClass({ }, }); -var TouchableDelayEvents = React.createClass({ +var TouchableDelayEvents = createReactClass({ getInitialState: function() { return { eventLog: [], @@ -226,7 +227,7 @@ var TouchableDelayEvents = React.createClass({ }, }); -var ForceTouchExample = React.createClass({ +var ForceTouchExample = createReactClass({ getInitialState: function() { return { force: 0, @@ -260,7 +261,7 @@ var ForceTouchExample = React.createClass({ }, }); -var TouchableHitSlop = React.createClass({ +var TouchableHitSlop = createReactClass({ getInitialState: function() { return { timesPressed: 0, @@ -302,7 +303,7 @@ var TouchableHitSlop = React.createClass({ } }); -var TouchableDisabled = React.createClass({ +var TouchableDisabled = createReactClass({ render: function() { return ( diff --git a/examples/components/View/ViewExample.js b/examples/components/View/ViewExample.js index 87a8eb04..e8de5432 100644 --- a/examples/components/View/ViewExample.js +++ b/examples/components/View/ViewExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native' @@ -50,7 +51,7 @@ var styles = StyleSheet.create({ }, }); -var ViewBorderStyleExample = React.createClass({ +var ViewBorderStyleExample = createReactClass({ getInitialState() { return { showBorder: true @@ -91,7 +92,7 @@ var ViewBorderStyleExample = React.createClass({ } }); -var ZIndexExample = React.createClass({ +var ZIndexExample = createReactClass({ getInitialState() { return { flipped: false diff --git a/examples/components/View/ViewTransformsExample.js b/examples/components/View/ViewTransformsExample.js index 23a7aa49..ad3fd39d 100644 --- a/examples/components/View/ViewTransformsExample.js +++ b/examples/components/View/ViewTransformsExample.js @@ -1,3 +1,4 @@ +import createReactClass from 'create-react-class'; import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; import { Animated, StyleSheet, Text, View } from 'react-native' @@ -24,7 +25,7 @@ import { Animated, StyleSheet, Text, View } from 'react-native' * @flow */ -var Flip = React.createClass({ +var Flip = createReactClass({ getInitialState() { return { theta: new Animated.Value(45), diff --git a/examples/demos/TicTacToe/TicTacToe.js b/examples/demos/TicTacToe/TicTacToe.js index 386284f0..6be55902 100644 --- a/examples/demos/TicTacToe/TicTacToe.js +++ b/examples/demos/TicTacToe/TicTacToe.js @@ -16,6 +16,7 @@ */ 'use strict'; +import createReactClass from 'create-react-class'; var React = require('react'); var ReactNative = require('react-native'); var { @@ -94,7 +95,7 @@ class Board { } } -var Cell = React.createClass({ +var Cell = createReactClass({ cellStyle() { switch (this.props.player) { case 1: @@ -144,7 +145,7 @@ var Cell = React.createClass({ } }); -var GameEndOverlay = React.createClass({ +var GameEndOverlay = createReactClass({ render() { var board = this.props.board; @@ -177,7 +178,7 @@ var GameEndOverlay = React.createClass({ } }); -var TicTacToeApp = React.createClass({ +var TicTacToeApp = createReactClass({ getInitialState() { return { board: new Board(), player: 1 }; }, diff --git a/package.json b/package.json index ee65e954..69a06217 100644 --- a/package.json +++ b/package.json @@ -26,12 +26,14 @@ "animated": "^0.2.0", "array-find-index": "^1.0.2", "babel-runtime": "^6.23.0", + "create-react-class": "^15.5.1", "debounce": "^1.0.0", "deep-assign": "^2.0.0", "fbjs": "^0.8.8", "hyphenate-style-name": "^1.0.2", "inline-style-prefixer": "^3.0.0", "normalize-css-color": "^1.0.2", + "prop-types": "^15.5.6", "react-dom": "~15.4.1", "react-textarea-autosize": "^4.0.4", "react-timer-mixin": "^0.13.3" diff --git a/src/apis/AppRegistry/ReactNativeApp.js b/src/apis/AppRegistry/ReactNativeApp.js index 6c74e6a3..447244cf 100644 --- a/src/apis/AppRegistry/ReactNativeApp.js +++ b/src/apis/AppRegistry/ReactNativeApp.js @@ -1,12 +1,13 @@ import StyleSheet from '../StyleSheet'; import View from '../../components/View'; -import React, { Component, PropTypes } from 'react'; +import { any, object } from 'prop-types'; +import React, { Component } from 'react'; class ReactNativeApp extends Component { static propTypes = { - initialProps: PropTypes.object, - rootComponent: PropTypes.any.isRequired, - rootTag: PropTypes.any + initialProps: object, + rootComponent: any.isRequired, + rootTag: any }; render() { diff --git a/src/apis/StyleSheet/StyleSheetValidation.js b/src/apis/StyleSheet/StyleSheetValidation.js index 3e330bd1..e4c02380 100644 --- a/src/apis/StyleSheet/StyleSheetValidation.js +++ b/src/apis/StyleSheet/StyleSheetValidation.js @@ -7,7 +7,6 @@ * @flow */ -import { PropTypes } from 'react'; import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'; import ReactPropTypeLocationNames from '../../vendor/ReactPropTypeLocationNames'; import ReactPropTypesSecret from '../../vendor/ReactPropTypesSecret'; @@ -15,6 +14,7 @@ import TextInputStylePropTypes from '../../components/TextInput/TextInputStylePr import TextStylePropTypes from '../../components/Text/TextStylePropTypes'; import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'; import warning from 'fbjs/lib/warning'; +import { oneOf, string } from 'prop-types'; class StyleSheetValidation { static validateStyleProp(prop, style, caller) { @@ -74,13 +74,13 @@ StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes); StyleSheetValidation.addValidStylePropTypes(TextInputStylePropTypes); StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes); StyleSheetValidation.addValidStylePropTypes({ - appearance: PropTypes.string, - clear: PropTypes.string, - cursor: PropTypes.string, - float: PropTypes.oneOf(['left', 'none', 'right']), - font: PropTypes.string /* @private */, - listStyle: PropTypes.string, - pointerEvents: PropTypes.string + appearance: string, + clear: string, + cursor: string, + float: oneOf(['left', 'none', 'right']), + font: string /* @private */, + listStyle: string, + pointerEvents: string }); module.exports = StyleSheetValidation; diff --git a/src/components/ActivityIndicator/index.js b/src/components/ActivityIndicator/index.js index c7f2e88c..fc236eb9 100644 --- a/src/components/ActivityIndicator/index.js +++ b/src/components/ActivityIndicator/index.js @@ -2,17 +2,18 @@ import applyNativeMethods from '../../modules/applyNativeMethods'; import StyleSheet from '../../apis/StyleSheet'; import View from '../View'; import ViewPropTypes from '../View/ViewPropTypes'; -import React, { Component, PropTypes } from 'react'; +import { bool, number, oneOf, oneOfType, string } from 'prop-types'; +import React, { Component } from 'react'; class ActivityIndicator extends Component { static displayName = 'ActivityIndicator'; static propTypes = { ...ViewPropTypes, - animating: PropTypes.bool, - color: PropTypes.string, - hidesWhenStopped: PropTypes.bool, - size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'large']), PropTypes.number]) + animating: bool, + color: string, + hidesWhenStopped: bool, + size: oneOfType([oneOf(['small', 'large']), number]) }; static defaultProps = { diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 460d5fd3..c3f91fc2 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -1,17 +1,18 @@ import ColorPropType from '../../propTypes/ColorPropType'; -import React, { Component, PropTypes } from 'react'; import StyleSheet from '../../apis/StyleSheet'; import TouchableOpacity from '../Touchable/TouchableOpacity'; import Text from '../Text'; +import { bool, func, string } from 'prop-types'; +import React, { Component } from 'react'; class Button extends Component { static propTypes = { - accessibilityLabel: PropTypes.string, + accessibilityLabel: string, color: ColorPropType, - disabled: PropTypes.bool, - onPress: PropTypes.func.isRequired, - testID: PropTypes.string, - title: PropTypes.string.isRequired + disabled: bool, + onPress: func.isRequired, + testID: string, + title: string.isRequired }; render() { diff --git a/src/components/Image/ImageStylePropTypes.js b/src/components/Image/ImageStylePropTypes.js index f4b07c08..c2238328 100644 --- a/src/components/Image/ImageStylePropTypes.js +++ b/src/components/Image/ImageStylePropTypes.js @@ -2,11 +2,10 @@ import BorderPropTypes from '../../propTypes/BorderPropTypes'; import ColorPropType from '../../propTypes/ColorPropType'; import ImageResizeMode from './ImageResizeMode'; import LayoutPropTypes from '../../propTypes/LayoutPropTypes'; -import { PropTypes } from 'react'; import ShadowPropTypes from '../../propTypes/ShadowPropTypes'; import TransformPropTypes from '../../propTypes/TransformPropTypes'; +import { number, oneOf, string } from 'prop-types'; -const { number, oneOf, string } = PropTypes; const hiddenOrVisible = oneOf(['hidden', 'visible']); module.exports = { diff --git a/src/components/Image/index.js b/src/components/Image/index.js index 45577bcd..9f787b84 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.js @@ -9,7 +9,8 @@ import StyleSheet from '../../apis/StyleSheet'; import StyleSheetPropType from '../../propTypes/StyleSheetPropType'; import View from '../View'; import ViewPropTypes from '../View/ViewPropTypes'; -import React, { Component, PropTypes } from 'react'; +import { any, func, number, oneOf, oneOfType, shape, string } from 'prop-types'; +import React, { Component } from 'react'; const emptyObject = {}; @@ -19,13 +20,13 @@ const STATUS_LOADING = 'LOADING'; const STATUS_PENDING = 'PENDING'; const STATUS_IDLE = 'IDLE'; -const ImageSourcePropType = PropTypes.oneOfType([ - PropTypes.shape({ - height: PropTypes.number, - uri: PropTypes.string.isRequired, - width: PropTypes.number +const ImageSourcePropType = oneOfType([ + shape({ + height: number, + uri: string.isRequired, + width: number }), - PropTypes.string + string ]); const resolveAssetDimensions = source => { @@ -44,14 +45,14 @@ class Image extends Component { static propTypes = { ...ViewPropTypes, - children: PropTypes.any, + children: any, defaultSource: ImageSourcePropType, - onError: PropTypes.func, - onLayout: PropTypes.func, - onLoad: PropTypes.func, - onLoadEnd: PropTypes.func, - onLoadStart: PropTypes.func, - resizeMode: PropTypes.oneOf(Object.keys(ImageResizeMode)), + onError: func, + onLayout: func, + onLoad: func, + onLoadEnd: func, + onLoadStart: func, + resizeMode: oneOf(Object.keys(ImageResizeMode)), source: ImageSourcePropType, style: StyleSheetPropType(ImageStylePropTypes) }; diff --git a/src/components/ListView/ListViewPropTypes.js b/src/components/ListView/ListViewPropTypes.js index ebc8231d..fc01905d 100644 --- a/src/components/ListView/ListViewPropTypes.js +++ b/src/components/ListView/ListViewPropTypes.js @@ -1,22 +1,22 @@ import ListViewDataSource from './ListViewDataSource'; -import { PropTypes } from 'react'; import ScrollView from '../ScrollView'; +import { arrayOf, bool, func, instanceOf, number } from 'prop-types'; export default { ...ScrollView.propTypes, - dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired, - renderSeparator: PropTypes.func, - renderRow: PropTypes.func.isRequired, - initialListSize: PropTypes.number, - onEndReached: PropTypes.func, - onEndReachedThreshold: PropTypes.number, - pageSize: PropTypes.number, - renderFooter: PropTypes.func, - renderHeader: PropTypes.func, - renderSectionHeader: PropTypes.func, - renderScrollComponent: PropTypes.func.isRequired, - scrollRenderAheadDistance: PropTypes.number, - onChangeVisibleRows: PropTypes.func, - removeClippedSubviews: PropTypes.bool, - stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number) + dataSource: instanceOf(ListViewDataSource).isRequired, + renderSeparator: func, + renderRow: func.isRequired, + initialListSize: number, + onEndReached: func, + onEndReachedThreshold: number, + pageSize: number, + renderFooter: func, + renderHeader: func, + renderSectionHeader: func, + renderScrollComponent: func.isRequired, + scrollRenderAheadDistance: number, + onChangeVisibleRows: func, + removeClippedSubviews: bool, + stickyHeaderIndices: arrayOf(number) }; diff --git a/src/components/ProgressBar/index.js b/src/components/ProgressBar/index.js index 94a0c672..15a19cf9 100644 --- a/src/components/ProgressBar/index.js +++ b/src/components/ProgressBar/index.js @@ -3,7 +3,8 @@ import ColorPropType from '../../propTypes/ColorPropType'; import StyleSheet from '../../apis/StyleSheet'; import View from '../View'; import ViewPropTypes from '../View/ViewPropTypes'; -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import { bool, number } from 'prop-types'; class ProgressBar extends Component { static displayName = 'ProgressBar'; @@ -11,8 +12,8 @@ class ProgressBar extends Component { static propTypes = { ...ViewPropTypes, color: ColorPropType, - indeterminate: PropTypes.bool, - progress: PropTypes.number, + indeterminate: bool, + progress: number, trackColor: ColorPropType }; diff --git a/src/components/ScrollView/ScrollViewBase.js b/src/components/ScrollView/ScrollViewBase.js index 31f5cf6f..33b12831 100644 --- a/src/components/ScrollView/ScrollViewBase.js +++ b/src/components/ScrollView/ScrollViewBase.js @@ -9,7 +9,8 @@ import debounce from 'debounce'; import View from '../View'; import ViewPropTypes from '../View/ViewPropTypes'; -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import { bool, func, number } from 'prop-types'; const normalizeScrollEvent = e => ({ nativeEvent: { @@ -47,18 +48,18 @@ const normalizeScrollEvent = e => ({ export default class ScrollViewBase extends Component { static propTypes = { ...ViewPropTypes, - onMomentumScrollBegin: PropTypes.func, - onMomentumScrollEnd: PropTypes.func, - onScroll: PropTypes.func, - onScrollBeginDrag: PropTypes.func, - onScrollEndDrag: PropTypes.func, - onTouchMove: PropTypes.func, - onWheel: PropTypes.func, - removeClippedSubviews: PropTypes.bool, - scrollEnabled: PropTypes.bool, - scrollEventThrottle: PropTypes.number, - showsHorizontalScrollIndicator: PropTypes.bool, - showsVerticalScrollIndicator: PropTypes.bool + onMomentumScrollBegin: func, + onMomentumScrollEnd: func, + onScroll: func, + onScrollBeginDrag: func, + onScrollEndDrag: func, + onTouchMove: func, + onWheel: func, + removeClippedSubviews: bool, + scrollEnabled: bool, + scrollEventThrottle: number, + showsHorizontalScrollIndicator: bool, + showsVerticalScrollIndicator: bool }; static defaultProps = { diff --git a/src/components/ScrollView/index.js b/src/components/ScrollView/index.js index aa0de5df..c37c6f26 100644 --- a/src/components/ScrollView/index.js +++ b/src/components/ScrollView/index.js @@ -6,6 +6,7 @@ * @flow */ +import createReactClass from 'create-react-class'; import dismissKeyboard from '../../modules/dismissKeyboard'; import findNodeHandle from '../../modules/findNodeHandle'; import invariant from 'fbjs/lib/invariant'; @@ -16,23 +17,24 @@ import StyleSheetPropType from '../../propTypes/StyleSheetPropType'; import View from '../View'; import ViewPropTypes from '../View/ViewPropTypes'; import ViewStylePropTypes from '../View/ViewStylePropTypes'; -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import { bool, element, func, number, oneOf } from 'prop-types'; const emptyObject = {}; -/* eslint-disable react/prefer-es6-class */ -const ScrollView = React.createClass({ +/* eslint-disable react/prefer-es6-class, react/prop-types */ +const ScrollView = createReactClass({ propTypes: { ...ViewPropTypes, contentContainerStyle: StyleSheetPropType(ViewStylePropTypes), - horizontal: PropTypes.bool, - keyboardDismissMode: PropTypes.oneOf(['none', 'interactive', 'on-drag']), - onContentSizeChange: PropTypes.func, - onScroll: PropTypes.func, - pagingEnabled: PropTypes.bool, - refreshControl: PropTypes.element, - scrollEnabled: PropTypes.bool, - scrollEventThrottle: PropTypes.number, + horizontal: bool, + keyboardDismissMode: oneOf(['none', 'interactive', 'on-drag']), + onContentSizeChange: func, + onScroll: func, + pagingEnabled: bool, + refreshControl: element, + scrollEnabled: bool, + scrollEventThrottle: number, style: StyleSheetPropType(ViewStylePropTypes) }, diff --git a/src/components/StaticContainer/index.js b/src/components/StaticContainer/index.js index 5752495b..9a42c2b8 100644 --- a/src/components/StaticContainer/index.js +++ b/src/components/StaticContainer/index.js @@ -6,7 +6,8 @@ * @flow */ -import React, { Component, PropTypes } from 'react'; +import { any, bool } from 'prop-types'; +import { Children, Component } from 'react'; /** * Renders static content efficiently by allowing React to short-circuit the @@ -25,8 +26,8 @@ import React, { Component, PropTypes } from 'react'; */ class StaticContainer extends Component { static propTypes = { - children: PropTypes.any.isRequired, - shouldUpdate: PropTypes.bool.isRequired + children: any.isRequired, + shouldUpdate: bool.isRequired }; shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean { @@ -35,7 +36,7 @@ class StaticContainer extends Component { render() { const child = this.props.children; - return child === null || child === false ? null : React.Children.only(child); + return child === null || child === false ? null : Children.only(child); } } diff --git a/src/components/StaticRenderer/index.js b/src/components/StaticRenderer/index.js index 47cdd3a2..0f847ca9 100644 --- a/src/components/StaticRenderer/index.js +++ b/src/components/StaticRenderer/index.js @@ -6,7 +6,8 @@ * @flow */ -import { Component, PropTypes } from 'react'; +import { Component } from 'react'; +import { bool, func } from 'prop-types'; /** * Renders static content efficiently by allowing React to short-circuit the @@ -24,8 +25,8 @@ import { Component, PropTypes } from 'react'; class StaticRenderer extends Component { static propTypes = { - render: PropTypes.func.isRequired, - shouldUpdate: PropTypes.bool.isRequired + render: func.isRequired, + shouldUpdate: bool.isRequired }; shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean { diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js index 859a36e0..29a6ed44 100644 --- a/src/components/Switch/index.js +++ b/src/components/Switch/index.js @@ -6,24 +6,25 @@ import StyleSheet from '../../apis/StyleSheet'; import UIManager from '../../apis/UIManager'; import View from '../View'; import ViewPropTypes from '../View/ViewPropTypes'; -import React, { Component, PropTypes } from 'react'; +import React, { PureComponent } from 'react'; +import { bool, func } from 'prop-types'; const emptyObject = {}; const thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)'; const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0.1)`; -class Switch extends Component { +class Switch extends PureComponent { static displayName = 'Switch'; static propTypes = { ...ViewPropTypes, activeThumbColor: ColorPropType, activeTrackColor: ColorPropType, - disabled: PropTypes.bool, - onValueChange: PropTypes.func, + disabled: bool, + onValueChange: func, thumbColor: ColorPropType, trackColor: ColorPropType, - value: PropTypes.bool + value: bool }; static defaultProps = { diff --git a/src/components/Text/TextStylePropTypes.js b/src/components/Text/TextStylePropTypes.js index 1ab6a290..5eacc872 100644 --- a/src/components/Text/TextStylePropTypes.js +++ b/src/components/Text/TextStylePropTypes.js @@ -1,8 +1,7 @@ import ColorPropType from '../../propTypes/ColorPropType'; -import { PropTypes } from 'react'; import ViewStylePropTypes from '../View/ViewStylePropTypes'; +import { number, oneOf, oneOfType, shape, string } from 'prop-types'; -const { number, oneOf, oneOfType, shape, string } = PropTypes; const numberOrString = oneOfType([number, string]); const ShadowOffsetPropType = shape({ width: number, height: number }); diff --git a/src/components/Text/index.js b/src/components/Text/index.js index 77fd0523..6612aa6d 100644 --- a/src/components/Text/index.js +++ b/src/components/Text/index.js @@ -1,23 +1,24 @@ import applyLayout from '../../modules/applyLayout'; import applyNativeMethods from '../../modules/applyNativeMethods'; import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes'; +import { Component } from 'react'; import createDOMElement from '../../modules/createDOMElement'; import StyleSheet from '../../apis/StyleSheet'; import StyleSheetPropType from '../../propTypes/StyleSheetPropType'; import TextStylePropTypes from './TextStylePropTypes'; -import { Component, PropTypes } from 'react'; +import { any, bool, func, number, oneOf } from 'prop-types'; class Text extends Component { static displayName = 'Text'; static propTypes = { ...BaseComponentPropTypes, - accessibilityRole: PropTypes.oneOf(['button', 'heading', 'link', 'listitem']), - children: PropTypes.any, - numberOfLines: PropTypes.number, - onLayout: PropTypes.func, - onPress: PropTypes.func, - selectable: PropTypes.bool, + accessibilityRole: oneOf(['button', 'heading', 'link', 'listitem']), + children: any, + numberOfLines: number, + onLayout: func, + onPress: func, + selectable: bool, style: StyleSheetPropType(TextStylePropTypes) }; diff --git a/src/components/TextInput/TextInputStylePropTypes.js b/src/components/TextInput/TextInputStylePropTypes.js index bafb5c9a..7ff62169 100644 --- a/src/components/TextInput/TextInputStylePropTypes.js +++ b/src/components/TextInput/TextInputStylePropTypes.js @@ -1,7 +1,5 @@ import TextStylePropTypes from '../Text/TextStylePropTypes'; -import { PropTypes } from 'react'; - -const { oneOf } = PropTypes; +import { oneOf } from 'prop-types'; const TextInputOnlyStylePropTypes = { /* @platform web */ diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index d4495fad..fbf00096 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -1,5 +1,6 @@ import applyLayout from '../../modules/applyLayout'; import applyNativeMethods from '../../modules/applyNativeMethods'; +import { Component } from 'react'; import NativeMethodsMixin from '../../modules/NativeMethodsMixin'; import createDOMElement from '../../modules/createDOMElement'; import findNodeHandle from '../../modules/findNodeHandle'; @@ -9,7 +10,7 @@ import TextInputStylePropTypes from './TextInputStylePropTypes'; import TextareaAutosize from 'react-textarea-autosize'; import TextInputState from './TextInputState'; import ViewPropTypes from '../View/ViewPropTypes'; -import { Component, PropTypes } from 'react'; +import { bool, func, number, oneOf, shape, string } from 'prop-types'; const emptyObject = {}; @@ -54,15 +55,15 @@ class TextInput extends Component { static propTypes = { ...ViewPropTypes, - autoCapitalize: PropTypes.oneOf(['characters', 'none', 'sentences', 'words']), - autoComplete: PropTypes.string, - autoCorrect: PropTypes.bool, - autoFocus: PropTypes.bool, - blurOnSubmit: PropTypes.bool, - clearTextOnFocus: PropTypes.bool, - defaultValue: PropTypes.string, - editable: PropTypes.bool, - keyboardType: PropTypes.oneOf([ + autoCapitalize: oneOf(['characters', 'none', 'sentences', 'words']), + autoComplete: string, + autoCorrect: bool, + autoFocus: bool, + blurOnSubmit: bool, + clearTextOnFocus: bool, + defaultValue: string, + editable: bool, + keyboardType: oneOf([ 'default', 'email-address', 'number-pad', @@ -72,27 +73,27 @@ class TextInput extends Component { 'url', 'web-search' ]), - maxLength: PropTypes.number, - maxNumberOfLines: PropTypes.number, - multiline: PropTypes.bool, - numberOfLines: PropTypes.number, - onBlur: PropTypes.func, - onChange: PropTypes.func, - onChangeText: PropTypes.func, - onFocus: PropTypes.func, - onKeyPress: PropTypes.func, - onSelectionChange: PropTypes.func, - onSubmitEditing: PropTypes.func, - placeholder: PropTypes.string, - placeholderTextColor: PropTypes.string, - secureTextEntry: PropTypes.bool, - selectTextOnFocus: PropTypes.bool, - selection: PropTypes.shape({ - start: PropTypes.number.isRequired, - end: PropTypes.number + maxLength: number, + maxNumberOfLines: number, + multiline: bool, + numberOfLines: number, + onBlur: func, + onChange: func, + onChangeText: func, + onFocus: func, + onKeyPress: func, + onSelectionChange: func, + onSubmitEditing: func, + placeholder: string, + placeholderTextColor: string, + secureTextEntry: bool, + selectTextOnFocus: bool, + selection: shape({ + start: number.isRequired, + end: number }), style: StyleSheetPropType(TextInputStylePropTypes), - value: PropTypes.string + value: string }; static defaultProps = { diff --git a/src/components/Touchable/TouchableHighlight.js b/src/components/Touchable/TouchableHighlight.js index a98ac8eb..eedc8d53 100644 --- a/src/components/Touchable/TouchableHighlight.js +++ b/src/components/Touchable/TouchableHighlight.js @@ -24,6 +24,8 @@ var Touchable = require('./Touchable'); var TouchableWithoutFeedback = require('./TouchableWithoutFeedback'); var View = require('../View'); var ViewStylePropTypes = require('../View/ViewStylePropTypes'); +import createReactClass from 'create-react-class'; +import { func, number } from 'prop-types'; var ensureComponentIsNative = require('./ensureComponentIsNative'); var ensurePositiveDelayProps = require('./ensurePositiveDelayProps'); @@ -64,14 +66,14 @@ var PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 }; * > If you wish to have several child components, wrap them in a View. */ -var TouchableHighlight = React.createClass({ +var TouchableHighlight = createReactClass({ propTypes: { ...TouchableWithoutFeedback.propTypes, /** * Determines what the opacity of the wrapped view should be when touch is * active. */ - activeOpacity: React.PropTypes.number, + activeOpacity: number, /** * The color of the underlay that will show through when the touch is * active. @@ -81,11 +83,11 @@ var TouchableHighlight = React.createClass({ /** * Called immediately after the underlay is shown */ - onShowUnderlay: React.PropTypes.func, + onShowUnderlay: func, /** * Called immediately after the underlay is hidden */ - onHideUnderlay: React.PropTypes.func + onHideUnderlay: func }, mixins: [NativeMethodsMixin, TimerMixin, Touchable.Mixin], @@ -120,6 +122,7 @@ var TouchableHighlight = React.createClass({ componentDidMount: function() { ensurePositiveDelayProps(this.props); ensureComponentIsNative(this.refs[CHILD_REF]); + this._isMounted = true; }, componentDidUpdate: function() { @@ -137,6 +140,10 @@ var TouchableHighlight = React.createClass({ } }, + componentWillUnmount: function() { + this._isMounted = false; + }, + // viewConfig: { // uiViewClassName: 'RCTView', // validAttributes: ReactNativeViewAttributes.RCTView @@ -192,7 +199,7 @@ var TouchableHighlight = React.createClass({ }, _showUnderlay: function() { - if (!this.isMounted() || !this._hasPressHandler()) { + if (!this._isMounted || !this._hasPressHandler()) { return; } diff --git a/src/components/Touchable/TouchableOpacity.js b/src/components/Touchable/TouchableOpacity.js index 48ef07e8..f8fdaed5 100644 --- a/src/components/Touchable/TouchableOpacity.js +++ b/src/components/Touchable/TouchableOpacity.js @@ -21,6 +21,8 @@ var TimerMixin = require('react-timer-mixin'); var Touchable = require('./Touchable'); var TouchableWithoutFeedback = require('./TouchableWithoutFeedback'); var View = require('../View'); +import createReactClass from 'create-react-class'; +import { number } from 'prop-types'; var ensurePositiveDelayProps = require('./ensurePositiveDelayProps'); var flattenStyle = StyleSheet.flatten; @@ -50,7 +52,7 @@ var PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 }; * }, * ``` */ -var TouchableOpacity = React.createClass({ +var TouchableOpacity = createReactClass({ mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin], propTypes: { @@ -59,8 +61,8 @@ var TouchableOpacity = React.createClass({ * Determines what the opacity of the wrapped view should be when touch is * active. */ - activeOpacity: React.PropTypes.number, - focusedOpacity: React.PropTypes.number + activeOpacity: number, + focusedOpacity: number }, getDefaultProps: function() { diff --git a/src/components/Touchable/TouchableWithoutFeedback.js b/src/components/Touchable/TouchableWithoutFeedback.js index 34d842a8..36e932c2 100644 --- a/src/components/Touchable/TouchableWithoutFeedback.js +++ b/src/components/Touchable/TouchableWithoutFeedback.js @@ -19,6 +19,8 @@ var Touchable = require('./Touchable'); var ensurePositiveDelayProps = require('./ensurePositiveDelayProps'); var warning = require('fbjs/lib/warning'); var StyleSheet = require('../../apis/StyleSheet'); +import createReactClass from 'create-react-class'; +import { bool, func, number, string } from 'prop-types'; type Event = Object; @@ -33,45 +35,45 @@ const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 }; * > * > If you wish to have several child components, wrap them in a View. */ -const TouchableWithoutFeedback = React.createClass({ +const TouchableWithoutFeedback = createReactClass({ mixins: [TimerMixin, Touchable.Mixin], propTypes: { - accessible: React.PropTypes.bool, - accessibilityLabel: React.PropTypes.string, - accessibilityRole: React.PropTypes.string, + accessible: bool, + accessibilityLabel: string, + accessibilityRole: string, /** * If true, disable all interactions for this component. */ - disabled: React.PropTypes.bool, + disabled: bool, /** * Called when the touch is released, but not if cancelled (e.g. by a scroll * that steals the responder lock). */ - onPress: React.PropTypes.func, - onPressIn: React.PropTypes.func, - onPressOut: React.PropTypes.func, + onPress: func, + onPressIn: func, + onPressOut: func, /** * Invoked on mount and layout changes with * * `{nativeEvent: {layout: {x, y, width, height}}}` */ - onLayout: React.PropTypes.func, + onLayout: func, - onLongPress: React.PropTypes.func, + onLongPress: func, /** * Delay in ms, from the start of the touch, before onPressIn is called. */ - delayPressIn: React.PropTypes.number, + delayPressIn: number, /** * Delay in ms, from the release of the touch, before onPressOut is called. */ - delayPressOut: React.PropTypes.number, + delayPressOut: number, /** * Delay in ms, from onPressIn, before onLongPress is called. */ - delayLongPress: React.PropTypes.number, + delayLongPress: number, /** * When the scroll view is disabled, this defines how far your touch may * move off of the button, before deactivating the button. Once deactivated, diff --git a/src/components/View/ViewPropTypes.js b/src/components/View/ViewPropTypes.js index 1ea686d3..6bdd7011 100644 --- a/src/components/View/ViewPropTypes.js +++ b/src/components/View/ViewPropTypes.js @@ -2,35 +2,35 @@ import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes'; import EdgeInsetsPropType from '../../propTypes/EdgeInsetsPropType'; import StyleSheetPropType from '../../propTypes/StyleSheetPropType'; import ViewStylePropTypes from './ViewStylePropTypes'; -import { PropTypes } from 'react'; +import { any, bool, func, oneOf } from 'prop-types'; const ViewPropTypes = { ...BaseComponentPropTypes, - children: PropTypes.any, - collapsable: PropTypes.bool, + children: any, + collapsable: bool, hitSlop: EdgeInsetsPropType, - onClick: PropTypes.func, - onClickCapture: PropTypes.func, - onLayout: PropTypes.func, - onMoveShouldSetResponder: PropTypes.func, - onMoveShouldSetResponderCapture: PropTypes.func, - onResponderGrant: PropTypes.func, - onResponderMove: PropTypes.func, - onResponderReject: PropTypes.func, - onResponderRelease: PropTypes.func, - onResponderTerminate: PropTypes.func, - onResponderTerminationRequest: PropTypes.func, - onStartShouldSetResponder: PropTypes.func, - onStartShouldSetResponderCapture: PropTypes.func, - onTouchCancel: PropTypes.func, - onTouchCancelCapture: PropTypes.func, - onTouchEnd: PropTypes.func, - onTouchEndCapture: PropTypes.func, - onTouchMove: PropTypes.func, - onTouchMoveCapture: PropTypes.func, - onTouchStart: PropTypes.func, - onTouchStartCapture: PropTypes.func, - pointerEvents: PropTypes.oneOf(['auto', 'box-none', 'box-only', 'none']), + onClick: func, + onClickCapture: func, + onLayout: func, + onMoveShouldSetResponder: func, + onMoveShouldSetResponderCapture: func, + onResponderGrant: func, + onResponderMove: func, + onResponderReject: func, + onResponderRelease: func, + onResponderTerminate: func, + onResponderTerminationRequest: func, + onStartShouldSetResponder: func, + onStartShouldSetResponderCapture: func, + onTouchCancel: func, + onTouchCancelCapture: func, + onTouchEnd: func, + onTouchEndCapture: func, + onTouchMove: func, + onTouchMoveCapture: func, + onTouchStart: func, + onTouchStartCapture: func, + pointerEvents: oneOf(['auto', 'box-none', 'box-only', 'none']), style: StyleSheetPropType(ViewStylePropTypes) }; diff --git a/src/components/View/ViewStylePropTypes.js b/src/components/View/ViewStylePropTypes.js index a06d9f3d..87b6d8be 100644 --- a/src/components/View/ViewStylePropTypes.js +++ b/src/components/View/ViewStylePropTypes.js @@ -2,11 +2,10 @@ import AnimationPropTypes from '../../propTypes/AnimationPropTypes'; import BorderPropTypes from '../../propTypes/BorderPropTypes'; import ColorPropType from '../../propTypes/ColorPropType'; import LayoutPropTypes from '../../propTypes/LayoutPropTypes'; -import { PropTypes } from 'react'; import ShadowPropTypes from '../../propTypes/ShadowPropTypes'; import TransformPropTypes from '../../propTypes/TransformPropTypes'; +import { number, oneOf, oneOfType, string } from 'prop-types'; -const { number, oneOf, string } = PropTypes; const autoOrHiddenOrVisible = oneOf(['auto', 'hidden', 'visible']); const hiddenOrVisible = oneOf(['hidden', 'visible']); @@ -40,7 +39,7 @@ module.exports = { outline: string, overflowX: autoOrHiddenOrVisible, overflowY: autoOrHiddenOrVisible, - perspective: PropTypes.oneOfType([number, string]), + perspective: oneOfType([number, string]), perspectiveOrigin: string, transitionDelay: string, transitionDuration: string, diff --git a/src/components/View/index.js b/src/components/View/index.js index d8f6e3ba..29c6ef16 100644 --- a/src/components/View/index.js +++ b/src/components/View/index.js @@ -1,10 +1,11 @@ import applyLayout from '../../modules/applyLayout'; import applyNativeMethods from '../../modules/applyNativeMethods'; +import { bool } from 'prop-types'; import createDOMElement from '../../modules/createDOMElement'; import getAccessibilityRole from '../../modules/getAccessibilityRole'; import StyleSheet from '../../apis/StyleSheet'; import ViewPropTypes from './ViewPropTypes'; -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; const emptyObject = {}; @@ -29,11 +30,11 @@ class View extends Component { }; static childContextTypes = { - isInAButtonView: PropTypes.bool + isInAButtonView: bool }; static contextTypes = { - isInAButtonView: PropTypes.bool + isInAButtonView: bool }; getChildContext() { diff --git a/src/propTypes/AnimationPropTypes.js b/src/propTypes/AnimationPropTypes.js index 3818d069..601acf73 100644 --- a/src/propTypes/AnimationPropTypes.js +++ b/src/propTypes/AnimationPropTypes.js @@ -1,6 +1,4 @@ -import { PropTypes } from 'react'; - -const { number, oneOf, oneOfType, string } = PropTypes; +import { number, oneOf, oneOfType, string } from 'prop-types'; const AnimationPropTypes = { animationDelay: string, diff --git a/src/propTypes/BaseComponentPropTypes.js b/src/propTypes/BaseComponentPropTypes.js index 8adec9a5..304247c6 100644 --- a/src/propTypes/BaseComponentPropTypes.js +++ b/src/propTypes/BaseComponentPropTypes.js @@ -1,5 +1,4 @@ -import { PropTypes } from 'react'; -const { array, bool, number, object, oneOf, oneOfType, string } = PropTypes; +import { array, bool, number, object, oneOf, oneOfType, string } from 'prop-types'; const BaseComponentPropTypes = { accessibilityLabel: string, diff --git a/src/propTypes/BorderPropTypes.js b/src/propTypes/BorderPropTypes.js index cc18be5f..38b4a795 100644 --- a/src/propTypes/BorderPropTypes.js +++ b/src/propTypes/BorderPropTypes.js @@ -1,8 +1,8 @@ import ColorPropType from './ColorPropType'; -import { PropTypes } from 'react'; +import { number, oneOf, oneOfType, string } from 'prop-types'; -const numberOrString = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); -const BorderStylePropType = PropTypes.oneOf(['solid', 'dotted', 'dashed']); +const numberOrString = oneOfType([number, string]); +const BorderStylePropType = oneOf(['solid', 'dotted', 'dashed']); const BorderPropTypes = { borderColor: ColorPropType, diff --git a/src/propTypes/ColorPropType.js b/src/propTypes/ColorPropType.js index 335e6d93..28ce847d 100644 --- a/src/propTypes/ColorPropType.js +++ b/src/propTypes/ColorPropType.js @@ -10,8 +10,6 @@ * @providesModule ColorPropType */ -import { PropTypes } from 'react'; - var colorPropType = function(isRequired, props, propName, componentName, location, propFullName) { var normalizeColor = require('normalize-css-color'); var ReactPropTypeLocationNames = require('../vendor/ReactPropTypeLocationNames'); diff --git a/src/propTypes/EdgeInsetsPropType.js b/src/propTypes/EdgeInsetsPropType.js index e84905ed..a9f72523 100644 --- a/src/propTypes/EdgeInsetsPropType.js +++ b/src/propTypes/EdgeInsetsPropType.js @@ -12,13 +12,13 @@ */ 'use strict'; -var PropTypes = require('react').PropTypes; +import { number } from 'prop-types'; var EdgeInsetsPropType = require('./createStrictShapeTypeChecker')({ - top: PropTypes.number, - left: PropTypes.number, - bottom: PropTypes.number, - right: PropTypes.number + top: number, + left: number, + bottom: number, + right: number }); module.exports = EdgeInsetsPropType; diff --git a/src/propTypes/LayoutPropTypes.js b/src/propTypes/LayoutPropTypes.js index 6c965d4e..d7b43046 100644 --- a/src/propTypes/LayoutPropTypes.js +++ b/src/propTypes/LayoutPropTypes.js @@ -1,6 +1,4 @@ -import { PropTypes } from 'react'; - -const { number, oneOf, oneOfType, string } = PropTypes; +import { number, oneOf, oneOfType, string } from 'prop-types'; const numberOrString = oneOfType([number, string]); const LayoutPropTypes = { diff --git a/src/propTypes/PointPropType.js b/src/propTypes/PointPropType.js index 56f939a5..8b46ae03 100644 --- a/src/propTypes/PointPropType.js +++ b/src/propTypes/PointPropType.js @@ -12,11 +12,11 @@ */ 'use strict'; -var PropTypes = require('react').PropTypes; +import { number } from 'prop-types'; var PointPropType = require('./createStrictShapeTypeChecker')({ - x: PropTypes.number, - y: PropTypes.number + x: number, + y: number }); module.exports = PointPropType; diff --git a/src/propTypes/ShadowPropTypes.js b/src/propTypes/ShadowPropTypes.js index 4b2c9237..b183e55a 100644 --- a/src/propTypes/ShadowPropTypes.js +++ b/src/propTypes/ShadowPropTypes.js @@ -1,7 +1,5 @@ import ColorPropType from './ColorPropType'; -import { PropTypes } from 'react'; - -const { number, oneOfType, shape, string } = PropTypes; +import { number, oneOfType, shape, string } from 'prop-types'; const numberOrString = oneOfType([number, string]); const ShadowPropTypes = { diff --git a/src/propTypes/TransformPropTypes.js b/src/propTypes/TransformPropTypes.js index 8ec93c57..16a0f774 100644 --- a/src/propTypes/TransformPropTypes.js +++ b/src/propTypes/TransformPropTypes.js @@ -5,9 +5,7 @@ * @flow */ -import { PropTypes } from 'react'; - -const { arrayOf, number, oneOfType, shape, string } = PropTypes; +import { arrayOf, number, oneOfType, shape, string } from 'prop-types'; const numberOrString = oneOfType([number, string]); const TransformPropTypes = { diff --git a/yarn.lock b/yarn.lock index 20a1f5b4..50f40e1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1627,6 +1627,12 @@ create-error-class@^3.0.1: dependencies: capture-stack-trace "^1.0.0" +create-react-class@^15.5.1: + version "15.5.1" + resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.1.tgz#25a138a42d1c9df6d5c70fea29ec6ccf5ae165b8" + dependencies: + fbjs "^0.8.9" + cryptiles@2.x.x: version "2.0.5" resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8" @@ -2324,7 +2330,19 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.8: +fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9: + version "0.8.12" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + +fbjs@^0.8.8: version "0.8.8" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6" dependencies: @@ -4645,6 +4663,12 @@ promise@^7.1.1: dependencies: asap "~2.0.3" +prop-types@^15.5.6: + version "15.5.6" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.6.tgz#797a915b1714b645ebb7c5d6cc690346205bd2aa" + dependencies: + fbjs "^0.8.9" + proxy-addr@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37" @@ -4732,8 +4756,8 @@ react-docgen@^2.12.1: recast "^0.11.5" react-dom@~15.4.1: - version "15.4.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a" + version "15.4.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f" dependencies: fbjs "^0.8.1" loose-envify "^1.1.0" @@ -4822,8 +4846,8 @@ react-transform-hmr@^1.0.4: react-proxy "^1.1.7" react@~15.4.1: - version "15.4.1" - resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6" + version "15.4.2" + resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef" dependencies: fbjs "^0.8.4" loose-envify "^1.1.0"