diff --git a/.eslintrc b/.eslintrc index 477eb3ee..130afeee 100644 --- a/.eslintrc +++ b/.eslintrc @@ -34,7 +34,9 @@ "window": false, // Flow global types, "$Enum": false, + "$PropertyType": false, "$ReadOnly": false, + "$ReadOnlyArray": false, "CSSStyleSheet": false, "HTMLInputElement": false, "ReactClass": false, @@ -66,7 +68,6 @@ "no-dupe-class-members": 2, "no-dupe-keys": 2, "no-duplicate-case": 2, - "no-duplicate-imports": 2, "no-empty-character-class": 2, "no-empty-pattern": 2, "no-eval": 2, diff --git a/README.md b/README.md index 60967f00..74c6b2d9 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,8 @@ Who is using React Native in production web apps? Browser support: Chrome, Firefox, Edge, Safari 7+, IE 10+. +Components and APIs deprecated in React Native are not supported by React Native for Web. + ## Quick start The easiest way to get started is to edit this @@ -141,11 +143,9 @@ React Native v0.60 | AppState | ✓ | | | BackHandler | (✓) | Mock. No equivalent web APIs. | | Clipboard | ✓ | | -| ColorPropType | ✓ | | | DeviceInfo | (✓) | Limited information. | | Dimensions | ✓ | | | Easing | ✓ | | -| EdgeInsetsPropType | ✓ | | | Geolocation | ✓ | | | I18nManager | ✓ | Includes additional support for runtime switch to RTL. | | InteractionManager | (✓) | | @@ -158,14 +158,11 @@ React Native v0.60 | PanResponder | ✓ | | | PixelRatio | ✓ | | | Platform | ✓ | | -| PointPropType | ✓ | | | Settings | ✘ | No equivalent web APIs. | | Share | ✓ | Only available over HTTPS. Read about the [Web Share API](https://wicg.github.io/web-share/). | | StyleSheet | ✓ | | -| TextPropTypes | ✓ | | | UIManager | ✓ | | | Vibration | ✓ | | -| ViewPropTypes | ✓ | | ## Contributing diff --git a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap b/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap index ab7f35ec..59f939e6 100644 --- a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap +++ b/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap @@ -3,12 +3,11 @@ exports[`Rewrite react-native to react-native-web export from "react-native": export from "react-native" 1`] = ` " export { View } from 'react-native'; -export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native'; +export { StyleSheet, Text, unstable_createElement } from 'react-native'; ↓ ↓ ↓ ↓ ↓ ↓ export { default as View } from 'react-native-web/dist/exports/View'; -export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType'; export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet'; export { default as Text } from 'react-native-web/dist/exports/Text'; export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement'; @@ -18,12 +17,11 @@ export { default as unstable_createElement } from 'react-native-web/dist/exports exports[`Rewrite react-native to react-native-web export from "react-native-web": export from "react-native-web" 1`] = ` " export { View } from 'react-native-web'; -export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native-web'; +export { StyleSheet, Text, unstable_createElement } from 'react-native-web'; ↓ ↓ ↓ ↓ ↓ ↓ export { default as View } from 'react-native-web/dist/exports/View'; -export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType'; export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet'; export { default as Text } from 'react-native-web/dist/exports/Text'; export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement'; @@ -34,7 +32,7 @@ exports[`Rewrite react-native to react-native-web import from "native-native": i " import ReactNative from 'react-native'; import { View } from 'react-native'; -import { Invalid, View as MyView, ViewPropTypes } from 'react-native'; +import { Invalid, View as MyView } from 'react-native'; import * as ReactNativeModules from 'react-native'; ↓ ↓ ↓ ↓ ↓ ↓ @@ -43,7 +41,6 @@ import ReactNative from 'react-native-web/dist/index'; import View from 'react-native-web/dist/exports/View'; import { Invalid } from 'react-native-web/dist/index'; import MyView from 'react-native-web/dist/exports/View'; -import ViewPropTypes from 'react-native-web/dist/exports/ViewPropTypes'; import * as ReactNativeModules from 'react-native-web/dist/index'; " `; @@ -52,7 +49,7 @@ exports[`Rewrite react-native to react-native-web import from "native-native": i " import ReactNative from 'react-native'; import { View } from 'react-native'; -import { Invalid, View as MyView, ViewPropTypes } from 'react-native'; +import { Invalid, View as MyView } from 'react-native'; import * as ReactNativeModules from 'react-native'; ↓ ↓ ↓ ↓ ↓ ↓ @@ -61,7 +58,6 @@ import ReactNative from 'react-native-web/dist/cjs/index'; import View from 'react-native-web/dist/cjs/exports/View'; import { Invalid } from 'react-native-web/dist/cjs/index'; import MyView from 'react-native-web/dist/cjs/exports/View'; -import ViewPropTypes from 'react-native-web/dist/cjs/exports/ViewPropTypes'; import * as ReactNativeModules from 'react-native-web/dist/cjs/index'; " `; @@ -69,13 +65,12 @@ import * as ReactNativeModules from 'react-native-web/dist/cjs/index'; exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = ` " import { unstable_createElement } from 'react-native-web'; -import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web'; +import { StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web'; import * as ReactNativeModules from 'react-native-web'; ↓ ↓ ↓ ↓ ↓ ↓ import unstable_createElement from 'react-native-web/dist/exports/createElement'; -import ColorPropType from 'react-native-web/dist/exports/ColorPropType'; import StyleSheet from 'react-native-web/dist/exports/StyleSheet'; import View from 'react-native-web/dist/exports/View'; import TouchableOpacity from 'react-native-web/dist/exports/TouchableOpacity'; @@ -124,7 +119,7 @@ exports[`Rewrite react-native to react-native-web require "react-native-web": re " const ReactNative = require('react-native-web'); const { unstable_createElement } = require('react-native-web'); -const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web'); +const { StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web'); ↓ ↓ ↓ ↓ ↓ ↓ @@ -132,8 +127,6 @@ const ReactNative = require('react-native-web/dist/index'); const unstable_createElement = require('react-native-web/dist/exports/createElement').default; -const ColorPropType = require('react-native-web/dist/exports/ColorPropType').default; - const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default; const View = require('react-native-web/dist/exports/View').default; diff --git a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js b/packages/babel-plugin-react-native-web/src/__tests__/index-test.js index 9c44e759..bc2e3af6 100644 --- a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js +++ b/packages/babel-plugin-react-native-web/src/__tests__/index-test.js @@ -7,7 +7,7 @@ const tests = [ title: 'import from "native-native"', code: `import ReactNative from 'react-native'; import { View } from 'react-native'; -import { Invalid, View as MyView, ViewPropTypes } from 'react-native'; +import { Invalid, View as MyView } from 'react-native'; import * as ReactNativeModules from 'react-native';`, snapshot: true }, @@ -15,7 +15,7 @@ import * as ReactNativeModules from 'react-native';`, title: 'import from "native-native"', code: `import ReactNative from 'react-native'; import { View } from 'react-native'; -import { Invalid, View as MyView, ViewPropTypes } from 'react-native'; +import { Invalid, View as MyView } from 'react-native'; import * as ReactNativeModules from 'react-native';`, snapshot: true, pluginOptions: { commonjs: true } @@ -23,20 +23,20 @@ import * as ReactNativeModules from 'react-native';`, { title: 'import from "react-native-web"', code: `import { unstable_createElement } from 'react-native-web'; -import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web'; +import { StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web'; import * as ReactNativeModules from 'react-native-web';`, snapshot: true }, { title: 'export from "react-native"', code: `export { View } from 'react-native'; -export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native';`, +export { StyleSheet, Text, unstable_createElement } from 'react-native';`, snapshot: true }, { title: 'export from "react-native-web"', code: `export { View } from 'react-native-web'; -export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native-web';`, +export { StyleSheet, Text, unstable_createElement } from 'react-native-web';`, snapshot: true }, { @@ -58,7 +58,7 @@ const { StyleSheet, TouchableOpacity } = require('react-native');`, title: 'require "react-native-web"', code: `const ReactNative = require('react-native-web'); const { unstable_createElement } = require('react-native-web'); -const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`, +const { StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`, snapshot: true } ]; diff --git a/packages/babel-plugin-react-native-web/src/moduleMap.js b/packages/babel-plugin-react-native-web/src/moduleMap.js index dd832e60..0ef43d9c 100644 --- a/packages/babel-plugin-react-native-web/src/moduleMap.js +++ b/packages/babel-plugin-react-native-web/src/moduleMap.js @@ -10,13 +10,11 @@ module.exports = { Button: true, CheckBox: true, Clipboard: true, - ColorPropType: true, DeviceEventEmitter: true, DeviceInfo: true, Dimensions: true, DrawerLayoutAndroid: true, Easing: true, - EdgeInsetsPropType: true, FlatList: true, I18nManager: true, Image: true, @@ -35,7 +33,6 @@ module.exports = { Picker: true, PixelRatio: true, Platform: true, - PointPropType: true, ProgressBar: true, RefreshControl: true, SafeAreaView: true, @@ -51,7 +48,6 @@ module.exports = { TabBarIOS: true, Text: true, TextInput: true, - TextPropTypes: true, TimePickerAndroid: true, ToastAndroid: true, Touchable: true, @@ -62,7 +58,6 @@ module.exports = { UIManager: true, Vibration: true, View: true, - ViewPropTypes: true, VirtualizedList: true, YellowBox: true, createElement: true, diff --git a/packages/benchmarks/src/app/App.js b/packages/benchmarks/src/app/App.js index 4460553e..90308caa 100644 --- a/packages/benchmarks/src/app/App.js +++ b/packages/benchmarks/src/app/App.js @@ -1,5 +1,3 @@ -/* eslint-disable react/prop-types */ - import Benchmark from './Benchmark'; import { Picker, StyleSheet, ScrollView, TouchableOpacity, View } from 'react-native'; import React, { Component } from 'react'; diff --git a/packages/benchmarks/src/app/Benchmark/index.js b/packages/benchmarks/src/app/Benchmark/index.js index a0771c9f..ced2d228 100644 --- a/packages/benchmarks/src/app/Benchmark/index.js +++ b/packages/benchmarks/src/app/Benchmark/index.js @@ -6,7 +6,6 @@ */ /* global $Values */ -/* eslint-disable react/prop-types */ import * as Timing from './timing'; import React, { Component } from 'react'; diff --git a/packages/benchmarks/src/app/Button.js b/packages/benchmarks/src/app/Button.js index b65bc11e..8c09a294 100644 --- a/packages/benchmarks/src/app/Button.js +++ b/packages/benchmarks/src/app/Button.js @@ -1,21 +1,9 @@ -import { ColorPropType, StyleSheet, TouchableHighlight, Text } from 'react-native'; +import { StyleSheet, TouchableHighlight, Text } from 'react-native'; import React, { Component } from 'react'; -import { bool, func, string } from 'prop-types'; export default class Button extends Component<*> { static displayName = '@app/Button'; - static propTypes = { - accessibilityLabel: string, - color: ColorPropType, - disabled: bool, - onPress: func.isRequired, - style: TouchableHighlight.propTypes.style, - testID: string, - textStyle: Text.propTypes.style, - title: string.isRequired - }; - render() { const { accessibilityLabel, diff --git a/packages/benchmarks/src/app/Layout.js b/packages/benchmarks/src/app/Layout.js index 4f1ebd29..ada91780 100644 --- a/packages/benchmarks/src/app/Layout.js +++ b/packages/benchmarks/src/app/Layout.js @@ -1,15 +1,8 @@ import { colors } from './theme'; -import { element } from 'prop-types'; import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; export default class Layout extends Component { - static propTypes = { - actionPanel: element, - listPanel: element, - viewPanel: element - }; - state = { widescreen: false }; diff --git a/packages/benchmarks/src/app/ReportCard.js b/packages/benchmarks/src/app/ReportCard.js index ffab153c..bd261eca 100644 --- a/packages/benchmarks/src/app/ReportCard.js +++ b/packages/benchmarks/src/app/ReportCard.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import Text from './Text'; import { StyleSheet, View } from 'react-native'; import React, { Fragment } from 'react'; diff --git a/packages/benchmarks/src/app/Text.js b/packages/benchmarks/src/app/Text.js index 451e729b..196b2ca5 100644 --- a/packages/benchmarks/src/app/Text.js +++ b/packages/benchmarks/src/app/Text.js @@ -1,8 +1,6 @@ -/* eslint-disable react/prop-types */ - -import { bool } from 'prop-types'; import React from 'react'; import { StyleSheet, Text } from 'react-native'; +import { bool } from 'prop-types'; import { colors } from './theme'; class AppText extends React.Component { diff --git a/packages/benchmarks/src/cases/SierpinskiTriangle.js b/packages/benchmarks/src/cases/SierpinskiTriangle.js index b8e5c152..2a5af234 100644 --- a/packages/benchmarks/src/cases/SierpinskiTriangle.js +++ b/packages/benchmarks/src/cases/SierpinskiTriangle.js @@ -1,5 +1,4 @@ import { BenchmarkType } from '../app/Benchmark'; -import { number, object } from 'prop-types'; import React from 'react'; import { interpolatePurples, interpolateBuPu, interpolateRdPu } from 'd3-scale-chromatic'; @@ -10,15 +9,6 @@ class SierpinskiTriangle extends React.Component { static benchmarkType = BenchmarkType.UPDATE; - static propTypes = { - components: object, - depth: number, - renderCount: number, - s: number, - x: number, - y: number - }; - static defaultProps = { depth: 0, renderCount: 0 diff --git a/packages/benchmarks/src/cases/TextTree.js b/packages/benchmarks/src/cases/TextTree.js index 72936f2e..5324a3bd 100644 --- a/packages/benchmarks/src/cases/TextTree.js +++ b/packages/benchmarks/src/cases/TextTree.js @@ -1,5 +1,4 @@ import { BenchmarkType } from '../app/Benchmark'; -import { number, object } from 'prop-types'; import React, { Component } from 'react'; class TextTree extends Component { @@ -7,14 +6,6 @@ class TextTree extends Component { static benchmarkType = BenchmarkType.MOUNT; - static propTypes = { - breadth: number.isRequired, - components: object, - depth: number.isRequired, - id: number.isRequired, - wrap: number.isRequired - }; - render() { const { breadth, components, depth, id, wrap } = this.props; const { TextBox } = components; diff --git a/packages/benchmarks/src/cases/Tree.js b/packages/benchmarks/src/cases/Tree.js index 9ba05640..8e37baac 100644 --- a/packages/benchmarks/src/cases/Tree.js +++ b/packages/benchmarks/src/cases/Tree.js @@ -1,5 +1,4 @@ import { BenchmarkType } from '../app/Benchmark'; -import { number, object } from 'prop-types'; import React, { Component } from 'react'; class Tree extends Component { @@ -7,14 +6,6 @@ class Tree extends Component { static benchmarkType = BenchmarkType.MOUNT; - static propTypes = { - breadth: number.isRequired, - components: object, - depth: number.isRequired, - id: number.isRequired, - wrap: number.isRequired - }; - render() { const { breadth, components, depth, id, wrap } = this.props; const { Box } = components; diff --git a/packages/benchmarks/src/implementations/aphrodite/Box.js b/packages/benchmarks/src/implementations/aphrodite/Box.js index b72a9936..994b956d 100644 --- a/packages/benchmarks/src/implementations/aphrodite/Box.js +++ b/packages/benchmarks/src/implementations/aphrodite/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import View from './View'; import { StyleSheet } from 'aphrodite'; diff --git a/packages/benchmarks/src/implementations/aphrodite/View.js b/packages/benchmarks/src/implementations/aphrodite/View.js index 905f5fe1..bb2791c2 100644 --- a/packages/benchmarks/src/implementations/aphrodite/View.js +++ b/packages/benchmarks/src/implementations/aphrodite/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { css, StyleSheet } from 'aphrodite'; diff --git a/packages/benchmarks/src/implementations/css-modules/Box.js b/packages/benchmarks/src/implementations/css-modules/Box.js index 5671bfaf..86b7129c 100644 --- a/packages/benchmarks/src/implementations/css-modules/Box.js +++ b/packages/benchmarks/src/implementations/css-modules/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import classnames from 'classnames'; import React from 'react'; import View from './View'; diff --git a/packages/benchmarks/src/implementations/css-modules/View.js b/packages/benchmarks/src/implementations/css-modules/View.js index 1626ae6b..e06e1b53 100644 --- a/packages/benchmarks/src/implementations/css-modules/View.js +++ b/packages/benchmarks/src/implementations/css-modules/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import classnames from 'classnames'; import React from 'react'; import styles from './view-styles.css'; diff --git a/packages/benchmarks/src/implementations/emotion/Box.js b/packages/benchmarks/src/implementations/emotion/Box.js index 707cda0c..f3af5dd0 100644 --- a/packages/benchmarks/src/implementations/emotion/Box.js +++ b/packages/benchmarks/src/implementations/emotion/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import View from './View'; diff --git a/packages/benchmarks/src/implementations/emotion/Dot.js b/packages/benchmarks/src/implementations/emotion/Dot.js index 57028496..b2f5d18f 100644 --- a/packages/benchmarks/src/implementations/emotion/Dot.js +++ b/packages/benchmarks/src/implementations/emotion/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { css } from 'emotion'; diff --git a/packages/benchmarks/src/implementations/emotion/View.js b/packages/benchmarks/src/implementations/emotion/View.js index 79897463..e9ff76d2 100644 --- a/packages/benchmarks/src/implementations/emotion/View.js +++ b/packages/benchmarks/src/implementations/emotion/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import { css } from 'emotion'; import React from 'react'; diff --git a/packages/benchmarks/src/implementations/inline-styles/Box.js b/packages/benchmarks/src/implementations/inline-styles/Box.js index 4f2be554..24acee78 100644 --- a/packages/benchmarks/src/implementations/inline-styles/Box.js +++ b/packages/benchmarks/src/implementations/inline-styles/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import View from './View'; diff --git a/packages/benchmarks/src/implementations/inline-styles/Dot.js b/packages/benchmarks/src/implementations/inline-styles/Dot.js index 16681554..13eec8d8 100644 --- a/packages/benchmarks/src/implementations/inline-styles/Dot.js +++ b/packages/benchmarks/src/implementations/inline-styles/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; const Dot = ({ size, x, y, children, color }) => ( diff --git a/packages/benchmarks/src/implementations/inline-styles/View.js b/packages/benchmarks/src/implementations/inline-styles/View.js index 587652dc..8b676e65 100644 --- a/packages/benchmarks/src/implementations/inline-styles/View.js +++ b/packages/benchmarks/src/implementations/inline-styles/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; const compose = (s1, s2) => { diff --git a/packages/benchmarks/src/implementations/react-fela/Dot.js b/packages/benchmarks/src/implementations/react-fela/Dot.js index c46cdbfc..de5b1ed6 100644 --- a/packages/benchmarks/src/implementations/react-fela/Dot.js +++ b/packages/benchmarks/src/implementations/react-fela/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import { createComponent } from 'react-fela'; const Dot = createComponent( diff --git a/packages/benchmarks/src/implementations/react-fela/Provider.js b/packages/benchmarks/src/implementations/react-fela/Provider.js index e563bd6b..21b05d2a 100644 --- a/packages/benchmarks/src/implementations/react-fela/Provider.js +++ b/packages/benchmarks/src/implementations/react-fela/Provider.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { createRenderer } from 'fela'; import { Provider as FelaProvider } from 'react-fela'; diff --git a/packages/benchmarks/src/implementations/react-fela/View.js b/packages/benchmarks/src/implementations/react-fela/View.js index c98e0de6..e2e0f281 100644 --- a/packages/benchmarks/src/implementations/react-fela/View.js +++ b/packages/benchmarks/src/implementations/react-fela/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import { createComponent } from 'react-fela'; const View = createComponent( diff --git a/packages/benchmarks/src/implementations/react-jss/Box.js b/packages/benchmarks/src/implementations/react-jss/Box.js index dfbab239..e48d417f 100644 --- a/packages/benchmarks/src/implementations/react-jss/Box.js +++ b/packages/benchmarks/src/implementations/react-jss/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import classnames from 'classnames'; import injectSheet from 'react-jss'; import React from 'react'; diff --git a/packages/benchmarks/src/implementations/react-jss/Dot.js b/packages/benchmarks/src/implementations/react-jss/Dot.js index 3d1068fa..568bf60b 100644 --- a/packages/benchmarks/src/implementations/react-jss/Dot.js +++ b/packages/benchmarks/src/implementations/react-jss/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import injectSheet from 'react-jss'; import React from 'react'; diff --git a/packages/benchmarks/src/implementations/react-jss/View.js b/packages/benchmarks/src/implementations/react-jss/View.js index 06800d20..5a17abc5 100644 --- a/packages/benchmarks/src/implementations/react-jss/View.js +++ b/packages/benchmarks/src/implementations/react-jss/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import classnames from 'classnames'; import injectSheet from 'react-jss'; import React from 'react'; diff --git a/packages/benchmarks/src/implementations/react-native-web/Box.js b/packages/benchmarks/src/implementations/react-native-web/Box.js index a72bd925..dc0a2118 100644 --- a/packages/benchmarks/src/implementations/react-native-web/Box.js +++ b/packages/benchmarks/src/implementations/react-native-web/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { StyleSheet, View } from 'react-native'; diff --git a/packages/benchmarks/src/implementations/react-native-web/Dot.js b/packages/benchmarks/src/implementations/react-native-web/Dot.js index bea2ac14..a5274f9f 100644 --- a/packages/benchmarks/src/implementations/react-native-web/Dot.js +++ b/packages/benchmarks/src/implementations/react-native-web/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import { unstable_createElement as createElement, StyleSheet } from 'react-native'; const Dot = ({ size, x, y, children, color }) => diff --git a/packages/benchmarks/src/implementations/react-native-web/TextBox.js b/packages/benchmarks/src/implementations/react-native-web/TextBox.js index f447e6d6..05d8e6f7 100644 --- a/packages/benchmarks/src/implementations/react-native-web/TextBox.js +++ b/packages/benchmarks/src/implementations/react-native-web/TextBox.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { StyleSheet, Text } from 'react-native'; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/AppText.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/AppText.js deleted file mode 100644 index eb208872..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/AppText.js +++ /dev/null @@ -1,108 +0,0 @@ -import PropTypes from 'prop-types'; -import theme from './theme'; -import React, { PureComponent } from 'react'; -import { StyleSheet, Text } from 'react-native'; - -class AppText extends PureComponent { - static displayName = 'AppText'; - - static propTypes = { - align: PropTypes.oneOf(['center', 'left', 'right']), - color: PropTypes.oneOf(['blue', 'deepGray', 'normal', 'red', 'white']), - fontStyle: PropTypes.oneOf(['normal', 'italic']), - size: PropTypes.oneOf(['small', 'normal', 'large']), - uppercase: PropTypes.bool, - weight: PropTypes.oneOf(['normal', 'bold']) - }; - - render() { - const { align, color, fontStyle, size, uppercase, weight, ...other } = this.props; - - const style = [ - styles.root, - align && alignStyles[align], - color && colorStyles[color], - fontStyle && fontStyles[fontStyle], - size && sizeStyles[size], - weight && weightStyles[weight], - uppercase === true && styles.uppercase - ]; - - return ; - } -} - -const styles = StyleSheet.create({ - root: { - fontFamily: theme.fontFamily, - fontSize: theme.fontSize.normal, - fontWeight: 'normal', - lineHeight: theme.createLength(theme.lineHeight), - wordWrap: 'break-word' - }, - uppercase: { - textTransform: 'uppercase' - } -}); - -const alignStyles = StyleSheet.create({ - center: { - textAlign: 'center' - }, - left: { - textAlign: 'left' - }, - right: { - textAlign: 'right' - } -}); - -const colorStyles = StyleSheet.create({ - blue: { - color: theme.colors.blue - }, - deepGray: { - color: theme.colors.deepGray - }, - normal: { - color: theme.colors.textBlack - }, - red: { - color: theme.colors.red - }, - white: { - color: theme.colors.white - } -}); - -const fontStyles = StyleSheet.create({ - normal: { - fontStyle: 'normal' - }, - italic: { - fontStyle: 'italic' - } -}); - -const sizeStyles = StyleSheet.create({ - small: { - fontSize: theme.fontSize.small - }, - normal: { - fontSize: theme.fontSize.normal - }, - large: { - fontSize: theme.fontSize.large - } -}); - -const weightStyles = StyleSheet.create({ - normal: { - fontWeight: '400' - }, - bold: { - fontWeight: 'bold' - } -}); - -export default AppText; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/AspectRatio.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/AspectRatio.js deleted file mode 100644 index 4a170b0f..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/AspectRatio.js +++ /dev/null @@ -1,41 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { PureComponent } from 'react'; -import { StyleSheet, View, ViewPropTypes } from 'react-native'; - -class AspectRatio extends PureComponent { - static displayName = 'AspectRatio'; - - static propTypes = { - children: PropTypes.any, - ratio: PropTypes.number, - style: ViewPropTypes.style - }; - - static defaultProps = { - ratio: 1 - }; - - render() { - const { children, ratio, style } = this.props; - const percentage = 100 / ratio; - - return ( - - - {children} - - ); - } -} - -const styles = StyleSheet.create({ - root: { - overflow: 'hidden' - }, - shim: { - display: 'block', - width: '100%' - } -}); - -export default AspectRatio; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/GridView.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/GridView.js deleted file mode 100644 index 6460c609..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/GridView.js +++ /dev/null @@ -1,53 +0,0 @@ -import PropTypes from 'prop-types'; -import { StyleSheet, View, ViewPropTypes } from 'react-native'; -import React, { Component } from 'react'; -import theme from './theme'; - -class GridView extends Component { - static displayName = 'GridView'; - - static propTypes = { - children: PropTypes.node, - hasGap: PropTypes.bool, - style: ViewPropTypes.style - }; - - render() { - const { children, hasGap, style, ...other } = this.props; - - return ( - - {React.Children.map(children, child => { - return ( - child && - React.cloneElement(child, { - style: [child.props.style, styles.column, hasGap && styles.hasGapColumn] - }) - ); - })} - - ); - } -} - -const styles = StyleSheet.create({ - root: { - flexDirection: 'row' - }, - /** - * 1. Distribute all space (rather than extra space) - * 2. Prevent wide content from forcing wider flex columns - */ - column: { - flexBasis: 0, // 1 - minWidth: 0 // 2 - }, - hasGap: { - marginHorizontal: theme.createLength(theme.spaceX * -0.5, 'rem') - }, - hasGapColumn: { - marginHorizontal: theme.createLength(theme.spaceX * 0.5, 'rem') - } -}); - -export default GridView; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconDirectMessage.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/IconDirectMessage.js deleted file mode 100644 index 4866a0df..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconDirectMessage.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable react/prop-types */ -import { unstable_createElement as createElement } from 'react-native'; -import React from 'react'; -import styles from './styles'; - -const IconDirectMessage = props => - createElement('svg', { - children: ( - - - - - ), - style: [styles.icon, props.style], - viewBox: '0 0 56 72' - }); - -IconDirectMessage.metadata = { height: 72, width: 56 }; - -export default IconDirectMessage; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconHeart.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/IconHeart.js deleted file mode 100644 index 9d1eeea3..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconHeart.js +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable react/prop-types */ -import { unstable_createElement as createElement } from 'react-native'; -import React from 'react'; -import styles from './styles'; - -const IconHeart = props => - createElement('svg', { - children: ( - - - - ), - style: [styles.icon, props.style], - viewBox: '0 0 54 72' - }); - -IconHeart.metadata = { height: 72, width: 54 }; - -export default IconHeart; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconReply.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/IconReply.js deleted file mode 100644 index 0d3c0321..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconReply.js +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable react/prop-types */ -import { unstable_createElement as createElement } from 'react-native'; -import React from 'react'; -import styles from './styles'; - -const IconReply = props => - createElement('svg', { - children: ( - - - - ), - style: [styles.icon, props.style], - viewBox: '0 0 62 72' - }); - -IconReply.metadata = { height: 72, width: 62 }; - -export default IconReply; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconRetweet.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/IconRetweet.js deleted file mode 100644 index e49c2997..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/IconRetweet.js +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable react/prop-types */ -import { unstable_createElement as createElement } from 'react-native'; -import React from 'react'; -import styles from './styles'; - -const IconRetweet = props => - createElement('svg', { - children: ( - - - - ), - style: [styles.icon, props.style], - viewBox: '0 0 74 72' - }); - -IconRetweet.metadata = { height: 72, width: 74 }; - -export default IconRetweet; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetAction.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetAction.js deleted file mode 100644 index 4b7ab521..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetAction.js +++ /dev/null @@ -1,78 +0,0 @@ -import IconReply from './IconReply'; -import IconHeart from './IconHeart'; -import IconRetweet from './IconRetweet'; -import IconDirectMessage from './IconDirectMessage'; -import PropTypes from 'prop-types'; -import React from 'react'; -import theme from './theme'; -import { Text, View, ViewPropTypes, StyleSheet } from 'react-native'; - -const getIcon = (icon, highlighted) => { - switch (icon) { - case 'like': - return ; - case 'reply': - return ; - case 'retweet': - return ; - case 'directMessage': - return ; - default: - return null; - } -}; - -export default class TweetAction extends React.Component { - static displayName = 'TweetAction'; - - static propTypes = { - count: PropTypes.number, - displayMode: PropTypes.oneOf(['like', 'reply', 'retweet', 'directMessage']), - highlighted: PropTypes.bool, - onPress: PropTypes.func, - style: ViewPropTypes.style - }; - - render() { - const { count, displayMode, highlighted, onPress, style } = this.props; - - return ( - - - {getIcon(displayMode, highlighted)} - {count > 0 ? {count} : null} - - - ); - } -} - -const styles = StyleSheet.create({ - root: { - minHeight: theme.createLength(theme.lineHeight, 'rem'), - overflow: 'visible', - userSelect: 'none', - whiteSpace: 'nowrap' - }, - inner: { - alignItems: 'center', - color: theme.colors.deepGray, - display: 'flex', - flexDirection: 'row' - }, - count: { - marginLeft: '0.25em' - }, - retweetedColor: { - color: theme.colors.green - }, - likedColor: { - color: theme.colors.red - } -}); diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetActionsBar.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetActionsBar.js deleted file mode 100644 index b91caca4..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetActionsBar.js +++ /dev/null @@ -1,52 +0,0 @@ -import PropTypes from 'prop-types'; -import TweetAction from './TweetAction'; -import { View, ViewPropTypes, StyleSheet } from 'react-native'; -import React, { PureComponent } from 'react'; - -const actionNames = ['reply', 'retweet', 'like', 'directMessage']; - -export default class TweetActionsBar extends PureComponent { - static propTypes = { - actions: PropTypes.arrayOf( - PropTypes.shape({ - count: PropTypes.number, - label: PropTypes.string, - highlighted: PropTypes.bool, - name: PropTypes.oneOf(actionNames).isRequired, - onPress: PropTypes.func - }) - ), - style: ViewPropTypes.style - }; - - render() { - const { actions, style } = this.props; - - /* eslint-disable react/jsx-handler-names */ - return ( - - {actions.map((action, i) => ( - - ))} - - ); - } -} - -const styles = StyleSheet.create({ - root: { - flexDirection: 'row' - }, - action: { - display: 'block', - marginRight: '10%' - } -}); diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetText.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetText.js deleted file mode 100644 index 4282788b..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetText.js +++ /dev/null @@ -1,29 +0,0 @@ -import AppText from './AppText'; -import React from 'react'; -import TweetTextPart from './TweetTextPart'; -import { array, number, string } from 'prop-types'; - -class TweetText extends React.Component { - static displayName = 'TweetText'; - - static propTypes = { - displayMode: TweetTextPart.propTypes.displayMode, - lang: string, - numberOfLines: number, - textParts: array.isRequired - }; - - render() { - const { displayMode, lang, numberOfLines, textParts, ...other } = this.props; - - return ( - - {textParts.map((part, i) => ( - - ))} - - ); - } -} - -export default TweetText; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetTextPart.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetTextPart.js deleted file mode 100644 index d758cc4b..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/TweetTextPart.js +++ /dev/null @@ -1,113 +0,0 @@ -/* eslint-disable react/prop-types */ -import { Image, StyleSheet, Text } from 'react-native'; -import PropTypes from 'prop-types'; -import React from 'react'; -import theme from './theme'; - -const createTextEntity = ({ part }) => {`${part.prefix}${part.text}`}; - -const createTwemojiEntity = ({ part }) => ( - -); - -// @mention, #hashtag, $cashtag -const createSymbolEntity = ({ displayMode, part }) => { - const links = displayMode === 'links'; - return ( - - {`${part.prefix}${part.text}`} - - ); -}; - -// internal links -const createLinkEntity = ({ displayMode, part }) => { - const { displayUrl, linkRelation, url } = part; - const links = displayMode === 'links'; - - return ( - - {displayUrl} - - ); -}; - -// external links -const createExternalLinkEntity = ({ displayMode, part }) => { - const { displayUrl, linkRelation, url } = part; - const links = displayMode === 'links'; - - return ( - - {displayUrl} - - ); -}; - -class TweetTextPart extends React.Component { - static displayName = 'TweetTextPart'; - - static propTypes = { - displayMode: PropTypes.oneOf(['links', 'no-links']), - part: PropTypes.object - }; - - static defaultProps = { - displayMode: 'links' - }; - - render() { - let renderer; - const { isEmoji, isEntity, isHashtag, isMention, isMedia, isUrl } = this.props.part; - - if (isEmoji || isEntity || isUrl || isMedia) { - if (isUrl) { - renderer = createExternalLinkEntity; - } else if (isHashtag || isMention) { - renderer = createSymbolEntity; - } else if (isEmoji) { - renderer = createTwemojiEntity; - } else { - renderer = createLinkEntity; - } - } else { - renderer = createTextEntity; - } - - return renderer(this.props); - } -} - -const styles = StyleSheet.create({ - link: { - color: theme.colors.blue, - textDecorationLine: 'none', - unicodeBidi: 'embed' - }, - twemoji: { - display: 'inline-block', - height: '1.25em', - width: '1.25em', - paddingRight: '0.05em', - paddingLeft: '0.1em', - textAlignVertical: '-0.2em' - } -}); - -export default TweetTextPart; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/UserAvatar.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/UserAvatar.js deleted file mode 100644 index 017f3f1a..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/UserAvatar.js +++ /dev/null @@ -1,65 +0,0 @@ -import AspectRatio from './AspectRatio'; -import PropTypes from 'prop-types'; -import { Image, StyleSheet, ViewPropTypes } from 'react-native'; -import React, { PureComponent } from 'react'; -import theme from './theme'; - -class UserAvatar extends PureComponent { - static displayName = 'UserAvatar'; - - static propTypes = { - accessibilityLabel: PropTypes.string, - circle: PropTypes.bool, - style: ViewPropTypes.style, - uri: PropTypes.string - }; - - static defaultProps = { - circle: false - }; - - render() { - const { accessibilityLabel, circle, style, uri } = this.props; - - return ( - - {uri ? ( - - ) : null} - - ); - } - - _handleLoad = () => { - this._imageRef && this._imageRef.setNativeProps(nativeProps); - }; - - _setImageRef = component => { - this._imageRef = component; - }; -} - -const nativeProps = { style: { backgroundColor: '#fff' } }; - -const styles = StyleSheet.create({ - root: { - borderRadius: '0.35rem' - }, - circle: { - borderRadius: '9999px' - }, - image: { - backgroundColor: theme.colors.fadedGray, - display: 'block', - height: '100%', - width: '100%' - } -}); - -export default UserAvatar; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/UserNames.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/UserNames.js deleted file mode 100644 index 34600f03..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/UserNames.js +++ /dev/null @@ -1,52 +0,0 @@ -import AppText from './AppText'; -import PropTypes from 'prop-types'; -import { StyleSheet, ViewPropTypes } from 'react-native'; -import React, { PureComponent } from 'react'; - -class UserNames extends PureComponent { - static displayName = 'UserNames'; - - static propTypes = { - fullName: PropTypes.string, - layout: PropTypes.oneOf(['nowrap', 'stack']), - onPress: PropTypes.func, - screenName: PropTypes.string, - style: ViewPropTypes.style - }; - - static defaultProps = { - layout: 'nowrap' - }; - - render() { - const { fullName, layout, onPress, screenName, style, ...other } = this.props; - - return ( - - - {fullName} - - {layout === 'stack' ? ' \u000A' : ' '} - {`@${screenName}`} - - ); - } -} - -const styles = StyleSheet.create({ - root: { - display: 'inline-block' - }, - screenName: { - unicodeBidi: 'embed', - writingDirection: 'ltr' - } -}); - -export default UserNames; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/index.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/index.js deleted file mode 100644 index 49752eb4..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/index.js +++ /dev/null @@ -1,144 +0,0 @@ -import AspectRatio from './AspectRatio'; -import GridView from './GridView'; -import PropTypes from 'prop-types'; -import TweetActionsBar from './TweetActionsBar'; -import TweetText from './TweetText'; -import UserAvatar from './UserAvatar'; -import UserNames from './UserNames'; -import { Image, StyleSheet, Text, View } from 'react-native'; -import React, { Component } from 'react'; -import theme from './theme'; - -export class Tweet extends Component { - static displayName = 'Tweet'; - - static propTypes = { - tweet: PropTypes.object.isRequired - }; - - render() { - const { tweet } = this.props; - const { id, lang, media, textParts, timestamp, user } = tweet; - const { fullName, profileImageUrl, screenName } = user; - - return ( - - - - - - - - - - - - - - - - - - - - {media ? ( - - - - - - ) : null} - - - - - - - ); - } -} - -const styles = StyleSheet.create({ - root: { - paddingVertical: theme.createLength(theme.spaceY * 0.75, 'rem'), - paddingHorizontal: theme.createLength(theme.spaceX, 'rem') - }, - avatarColumn: { - flexGrow: 1, - minWidth: 32 - }, - bodyColumn: { - flexGrow: 7 - }, - row: { - flexDirection: 'row', - justifyContent: 'space-between' - }, - avatarLink: { - display: 'block', - flexShrink: 1, - flexGrow: 0, - width: '100%' - }, - avatar: { - width: '100%' - }, - body: { - marginTop: '-0.15rem' - }, - timestamp: { - color: theme.colors.deepGray, - marginLeft: theme.createLength(theme.spaceX, 'rem'), - order: 1, - textDecorationLine: 'none', - whiteSpace: 'nowrap' - }, - actionBar: { - marginTop: theme.createLength(theme.spaceY * 0.5, 'rem') - }, - richContent: { - borderRadius: '0.35rem', - marginTop: theme.createLength(theme.spaceY * 0.5, 'rem'), - overflow: 'hidden' - }, - media: { - ...StyleSheet.absoluteFillObject, - margin: 'auto', - width: 'auto', - height: 'auto' - } -}); - -export default Tweet; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/styles.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/styles.js deleted file mode 100644 index 217e4a60..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/styles.js +++ /dev/null @@ -1,15 +0,0 @@ -import { StyleSheet } from 'react-native'; - -const styles = StyleSheet.create({ - icon: { - display: 'inline-block', - fill: 'currentcolor', - height: '1.25em', - maxWidth: '100%', - position: 'relative', - userSelect: 'none', - textAlignVertical: 'text-bottom' - } -}); - -export default styles; diff --git a/packages/benchmarks/src/implementations/react-native-web/Tweet/theme.js b/packages/benchmarks/src/implementations/react-native-web/Tweet/theme.js deleted file mode 100644 index 9202bbd7..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/Tweet/theme.js +++ /dev/null @@ -1,40 +0,0 @@ -const colors = { - blue: '#1B95E0', - lightBlue: '#71C9F8', - green: '#17BF63', - orange: '#F45D22', - purple: '#794BC4', - red: '#E0245E', - white: '#FFFFFF', - yellow: '#FFAD1F', - deepGray: '#657786', - fadedGray: '#E6ECF0', - faintGray: '#F5F8FA', - gray: '#AAB8C2', - lightGray: '#CCD6DD', - textBlack: '#14171A' -}; - -const fontSize = { - root: '14px', - // font scale - small: '0.85rem', - normal: '1rem', - large: '1.25rem' -}; - -const theme = { - colors, - fontFamily: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' + - '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts - fontSize, - lineHeight: 1.3125, - spaceX: 0.6, - spaceY: 1.3125, - createLength(num, unit) { - return `${num}${unit}`; - } -}; - -export default theme; diff --git a/packages/benchmarks/src/implementations/reactxp/Box.js b/packages/benchmarks/src/implementations/reactxp/Box.js index 48a1a8d2..3533cc09 100644 --- a/packages/benchmarks/src/implementations/reactxp/Box.js +++ b/packages/benchmarks/src/implementations/reactxp/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { Styles, View } from 'reactxp'; diff --git a/packages/benchmarks/src/implementations/reactxp/Dot.js b/packages/benchmarks/src/implementations/reactxp/Dot.js index 2500718b..a9bdca90 100644 --- a/packages/benchmarks/src/implementations/reactxp/Dot.js +++ b/packages/benchmarks/src/implementations/reactxp/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { Styles, View } from 'reactxp'; diff --git a/packages/benchmarks/src/implementations/reactxp/Provider.js b/packages/benchmarks/src/implementations/reactxp/Provider.js index b875b672..ce6eae0a 100644 --- a/packages/benchmarks/src/implementations/reactxp/Provider.js +++ b/packages/benchmarks/src/implementations/reactxp/Provider.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { object } from 'prop-types'; import { View } from 'reactxp'; diff --git a/packages/benchmarks/src/implementations/styled-components/Dot.js b/packages/benchmarks/src/implementations/styled-components/Dot.js index 81b1e36e..fe6dafb1 100644 --- a/packages/benchmarks/src/implementations/styled-components/Dot.js +++ b/packages/benchmarks/src/implementations/styled-components/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import styled from 'styled-components'; import View from './View'; diff --git a/packages/benchmarks/src/implementations/styled-jsx/Box.js b/packages/benchmarks/src/implementations/styled-jsx/Box.js index 9186b05e..c999195e 100644 --- a/packages/benchmarks/src/implementations/styled-jsx/Box.js +++ b/packages/benchmarks/src/implementations/styled-jsx/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import classnames from 'classnames'; import React from 'react'; import View from './View'; diff --git a/packages/benchmarks/src/implementations/styled-jsx/Dot.js b/packages/benchmarks/src/implementations/styled-jsx/Dot.js index e460a4f3..0c3c4418 100644 --- a/packages/benchmarks/src/implementations/styled-jsx/Dot.js +++ b/packages/benchmarks/src/implementations/styled-jsx/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import View from './View'; diff --git a/packages/benchmarks/src/implementations/styled-jsx/View.js b/packages/benchmarks/src/implementations/styled-jsx/View.js index fcee8b34..325a4d23 100644 --- a/packages/benchmarks/src/implementations/styled-jsx/View.js +++ b/packages/benchmarks/src/implementations/styled-jsx/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; class View extends React.Component { diff --git a/packages/benchmarks/src/implementations/styletron-react/Box.js b/packages/benchmarks/src/implementations/styletron-react/Box.js index 0322c93c..71aab557 100644 --- a/packages/benchmarks/src/implementations/styletron-react/Box.js +++ b/packages/benchmarks/src/implementations/styletron-react/Box.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import { withStyle } from 'styletron-react'; import View from './View'; diff --git a/packages/benchmarks/src/implementations/styletron-react/Dot.js b/packages/benchmarks/src/implementations/styletron-react/Dot.js index ed2c6143..a364b11b 100644 --- a/packages/benchmarks/src/implementations/styletron-react/Dot.js +++ b/packages/benchmarks/src/implementations/styletron-react/Dot.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import { styled } from 'styletron-react'; const Dot = styled('div', ({ size, x, y, children, color }) => ({ diff --git a/packages/benchmarks/src/implementations/styletron-react/Provider.js b/packages/benchmarks/src/implementations/styletron-react/Provider.js index efad56ab..14e27b98 100644 --- a/packages/benchmarks/src/implementations/styletron-react/Provider.js +++ b/packages/benchmarks/src/implementations/styletron-react/Provider.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { Client as Styletron } from 'styletron-engine-atomic'; import { Provider as StyletronProvider } from 'styletron-react'; diff --git a/packages/benchmarks/src/implementations/styletron-react/View.js b/packages/benchmarks/src/implementations/styletron-react/View.js index e015f7e4..57002f96 100644 --- a/packages/benchmarks/src/implementations/styletron-react/View.js +++ b/packages/benchmarks/src/implementations/styletron-react/View.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import { styled } from 'styletron-react'; const View = styled('div', ({ style }) => ({ diff --git a/packages/docs/src/components/ActivityIndicator/examples/HidesWhenStopped.js b/packages/docs/src/components/ActivityIndicator/examples/HidesWhenStopped.js index 528a24ca..ff4546c6 100644 --- a/packages/docs/src/components/ActivityIndicator/examples/HidesWhenStopped.js +++ b/packages/docs/src/components/ActivityIndicator/examples/HidesWhenStopped.js @@ -1,13 +1,7 @@ import { ActivityIndicator, StyleSheet, View } from 'react-native'; -import { bool } from 'prop-types'; -import React, { PureComponent } from 'react'; - -class ToggleAnimatingActivityIndicator extends PureComponent { - static propTypes = { - hidesWhenStopped: bool, - style: ActivityIndicator.propTypes.style - }; +import React from 'react'; +class ToggleAnimatingActivityIndicator extends React.Component { state = { animating: true }; diff --git a/packages/docs/src/components/Image/examples/NetworkImage.js b/packages/docs/src/components/Image/examples/NetworkImage.js index a92250fd..07a8dd7f 100644 --- a/packages/docs/src/components/Image/examples/NetworkImage.js +++ b/packages/docs/src/components/Image/examples/NetworkImage.js @@ -1,5 +1,4 @@ import * as helpers from '../helpers'; -import { oneOf } from 'prop-types'; import sources from '../sources'; import React, { PureComponent } from 'react'; import { ActivityIndicator, Image, Text, View } from 'react-native'; @@ -10,11 +9,6 @@ class NetworkImageExample extends PureComponent { loading: false }; - static propTypes = { - logMethod: oneOf(['onError', 'onLoad', 'onLoadEnd', 'onLoadStart']), - source: Image.propTypes.source - }; - static defaultProps = { logList: [] }; diff --git a/packages/docs/src/components/Image/examples/StaticGetSize.js b/packages/docs/src/components/Image/examples/StaticGetSize.js index 546b5458..0806d0e8 100644 --- a/packages/docs/src/components/Image/examples/StaticGetSize.js +++ b/packages/docs/src/components/Image/examples/StaticGetSize.js @@ -4,10 +4,6 @@ import React, { PureComponent } from 'react'; import { Button, Image, StyleSheet, Text, View } from 'react-native'; class ImageGetSizeExample extends PureComponent { - static propTypes = { - source: Image.propTypes.source - }; - state = { showButton: true, startLoad: false, diff --git a/packages/docs/src/components/Image/examples/StaticPrefetch.js b/packages/docs/src/components/Image/examples/StaticPrefetch.js index fb4a62bd..f45685b0 100644 --- a/packages/docs/src/components/Image/examples/StaticPrefetch.js +++ b/packages/docs/src/components/Image/examples/StaticPrefetch.js @@ -4,10 +4,6 @@ import React, { PureComponent } from 'react'; import { Button, Image, StyleSheet, Text, View } from 'react-native'; class ImagePrefetchExample extends PureComponent { - static propTypes = { - source: Image.propTypes.source - }; - state = { events: [], showButton: true, diff --git a/packages/docs/src/components/ProgressBar/ProgressBar.stories.js b/packages/docs/src/components/ProgressBar/ProgressBar.stories.js index 88d9a07f..12583431 100644 --- a/packages/docs/src/components/ProgressBar/ProgressBar.stories.js +++ b/packages/docs/src/components/ProgressBar/ProgressBar.stories.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; const ofProps = () => {}; ofProps.propTypes = { - '...ViewPropTypes': PropTypes.any, + '...ViewProps': PropTypes.any, color: PropTypes.any, indeterminate: PropTypes.bool, progress: PropTypes.number, diff --git a/packages/docs/src/components/Text/examples/Children.js b/packages/docs/src/components/Text/examples/Children.js index e486c465..28f66a89 100644 --- a/packages/docs/src/components/Text/examples/Children.js +++ b/packages/docs/src/components/Text/examples/Children.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { Image, Text, View } from 'react-native'; diff --git a/packages/docs/src/components/Text/examples/Style.js b/packages/docs/src/components/Text/examples/Style.js index a3818b2e..a129ed31 100644 --- a/packages/docs/src/components/Text/examples/Style.js +++ b/packages/docs/src/components/Text/examples/Style.js @@ -1,7 +1,6 @@ import React from 'react'; import { Text, View } from 'react-native'; -// eslint-disable-next-line react/prop-types const Heading = ({ children }) => ( diff --git a/packages/docs/src/components/TouchableHighlight/examples/DelayEvents.js b/packages/docs/src/components/TouchableHighlight/examples/DelayEvents.js index 871d2de0..d9c3d9c6 100644 --- a/packages/docs/src/components/TouchableHighlight/examples/DelayEvents.js +++ b/packages/docs/src/components/TouchableHighlight/examples/DelayEvents.js @@ -1,4 +1,3 @@ -import { oneOf } from 'prop-types'; import React, { PureComponent } from 'react'; import { StyleSheet, @@ -16,10 +15,6 @@ const Touchables = { }; export default class TouchableDelayEvents extends PureComponent { - static propTypes = { - touchable: oneOf(['highlight', 'opacity', 'withoutFeedback']) - }; - static defaultProps = { touchable: 'highlight' }; diff --git a/packages/docs/src/components/TouchableHighlight/examples/FeedbackEvents.js b/packages/docs/src/components/TouchableHighlight/examples/FeedbackEvents.js index 451d9a62..283240e1 100644 --- a/packages/docs/src/components/TouchableHighlight/examples/FeedbackEvents.js +++ b/packages/docs/src/components/TouchableHighlight/examples/FeedbackEvents.js @@ -1,4 +1,3 @@ -import { oneOf } from 'prop-types'; import React, { PureComponent } from 'react'; import { StyleSheet, @@ -16,10 +15,6 @@ const Touchables = { }; export default class TouchableFeedbackEvents extends PureComponent { - static propTypes = { - touchable: oneOf(['highlight', 'opacity', 'withoutFeedback']) - }; - static defaultProps = { touchable: 'highlight' }; diff --git a/packages/docs/src/components/TouchableOpacity/examples/DelayEvents.js b/packages/docs/src/components/TouchableOpacity/examples/DelayEvents.js index 871d2de0..d9c3d9c6 100644 --- a/packages/docs/src/components/TouchableOpacity/examples/DelayEvents.js +++ b/packages/docs/src/components/TouchableOpacity/examples/DelayEvents.js @@ -1,4 +1,3 @@ -import { oneOf } from 'prop-types'; import React, { PureComponent } from 'react'; import { StyleSheet, @@ -16,10 +15,6 @@ const Touchables = { }; export default class TouchableDelayEvents extends PureComponent { - static propTypes = { - touchable: oneOf(['highlight', 'opacity', 'withoutFeedback']) - }; - static defaultProps = { touchable: 'highlight' }; diff --git a/packages/docs/src/components/TouchableOpacity/examples/FeedbackEvents.js b/packages/docs/src/components/TouchableOpacity/examples/FeedbackEvents.js index 451d9a62..283240e1 100644 --- a/packages/docs/src/components/TouchableOpacity/examples/FeedbackEvents.js +++ b/packages/docs/src/components/TouchableOpacity/examples/FeedbackEvents.js @@ -1,4 +1,3 @@ -import { oneOf } from 'prop-types'; import React, { PureComponent } from 'react'; import { StyleSheet, @@ -16,10 +15,6 @@ const Touchables = { }; export default class TouchableFeedbackEvents extends PureComponent { - static propTypes = { - touchable: oneOf(['highlight', 'opacity', 'withoutFeedback']) - }; - static defaultProps = { touchable: 'highlight' }; diff --git a/packages/docs/src/components/View/examples/PointerEvents.js b/packages/docs/src/components/View/examples/PointerEvents.js index 7d8b20e1..0ccedc04 100644 --- a/packages/docs/src/components/View/examples/PointerEvents.js +++ b/packages/docs/src/components/View/examples/PointerEvents.js @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { StyleSheet, Text, TouchableHighlight, View } from 'react-native-web'; diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js index fb8834c7..c3d37f4c 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/index.js +++ b/packages/react-native-web/src/exports/ActivityIndicator/index.js @@ -8,37 +8,37 @@ * @flow */ +import type { ViewProps } from '../View'; + import applyNativeMethods from '../../modules/applyNativeMethods'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; -import { bool, number, oneOf, oneOfType, string } from 'prop-types'; -import React, { Component } from 'react'; +import React from 'react'; const createSvgCircle = style => ( ); -class ActivityIndicator extends Component<*> { +type ActivityIndicatorProps = { + ...ViewProps, + animating?: boolean, + color?: ?string, + hidesWhenStopped?: boolean, + size?: 'small' | 'large' | number +}; + +class ActivityIndicator extends React.Component { static displayName = 'ActivityIndicator'; - static propTypes = { - ...ViewPropTypes, - animating: bool, - color: string, - hidesWhenStopped: bool, - size: oneOfType([oneOf(['small', 'large']), number]) - }; - - static defaultProps = { - animating: true, - color: '#1976D2', - hidesWhenStopped: true, - size: 'small' - }; - render() { - const { animating, color, hidesWhenStopped, size, style, ...other } = this.props; + const { + animating = true, + color = '#1976D2', + hidesWhenStopped = true, + size = 'small', + style, + ...other + } = this.props; const svg = ( diff --git a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js index affec6a4..3c11222a 100644 --- a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js +++ b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js @@ -8,10 +8,12 @@ * @flow */ +import type { ComponentType } from 'react'; + import StyleSheet from '../StyleSheet'; import View from '../View'; -import { any, node } from 'prop-types'; -import React, { Component, type ComponentType } from 'react'; +import { any } from 'prop-types'; +import React from 'react'; type Context = { rootTag: any @@ -28,19 +30,13 @@ type State = { mainKey: number }; -export default class AppContainer extends Component { +export default class AppContainer extends React.Component { state = { mainKey: 1 }; static childContextTypes = { rootTag: any }; - static propTypes = { - WrapperComponent: any, - children: node, - rootTag: any.isRequired - }; - getChildContext(): Context { return { rootTag: this.props.rootTag diff --git a/packages/react-native-web/src/exports/Button/index.js b/packages/react-native-web/src/exports/Button/index.js index ecb3c782..f733aa9f 100644 --- a/packages/react-native-web/src/exports/Button/index.js +++ b/packages/react-native-web/src/exports/Button/index.js @@ -8,23 +8,21 @@ * @flow */ -import ColorPropType from '../ColorPropType'; import StyleSheet from '../StyleSheet'; import TouchableOpacity from '../TouchableOpacity'; import Text from '../Text'; -import { bool, func, string } from 'prop-types'; -import React, { Component } from 'react'; +import React from 'react'; -class Button extends Component<*> { - static propTypes = { - accessibilityLabel: string, - color: ColorPropType, - disabled: bool, - onPress: func.isRequired, - testID: string, - title: string.isRequired - }; +type ButtonProps = {| + accessibilityLabel?: ?string, + color?: ?string, + disabled?: boolean, + onPress?: ?(e: any) => void, + testID?: ?string, + title: string +|}; +class Button extends React.Component { render() { const { accessibilityLabel, color, disabled, onPress, testID, title } = this.props; diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js index 859dea51..9c0a893a 100644 --- a/packages/react-native-web/src/exports/CheckBox/index.js +++ b/packages/react-native-web/src/exports/CheckBox/index.js @@ -8,43 +8,29 @@ * @flow */ +import type { ViewProps } from '../View'; + import applyNativeMethods from '../../modules/applyNativeMethods'; -import ColorPropType from '../ColorPropType'; import createElement from '../createElement'; import StyleSheet from '../StyleSheet'; import UIManager from '../UIManager'; import View from '../View'; -import ViewPropTypes, { type ViewProps } from '../ViewPropTypes'; -import React, { Component } from 'react'; -import { bool, func } from 'prop-types'; +import React from 'react'; -type Props = ViewProps & { - color?: ColorPropType, +type CheckBoxProps = { + ...ViewProps, + color?: ?string, disabled?: boolean, - onChange?: Function, - onValueChange?: Function, + onChange?: ?(e: any) => void, + onValueChange?: ?(e: any) => void, value?: boolean }; -class CheckBox extends Component { +class CheckBox extends React.Component { _checkboxElement: HTMLInputElement; static displayName = 'CheckBox'; - static propTypes = { - ...ViewPropTypes, - color: ColorPropType, - disabled: bool, - onChange: func, - onValueChange: func, - value: bool - }; - - static defaultProps = { - disabled: false, - value: false - }; - blur() { UIManager.blur(this._checkboxElement); } diff --git a/packages/react-native-web/src/exports/ColorPropType/index.js b/packages/react-native-web/src/exports/ColorPropType/index.js deleted file mode 100644 index ad3dd8ea..00000000 --- a/packages/react-native-web/src/exports/ColorPropType/index.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @noflow - */ - -import normalizeColor from '../../modules/normalizeColor'; - -const colorPropType = function(isRequired, props, propName, componentName, location, propFullName) { - const color = props[propName]; - if (color === undefined || color === null) { - if (isRequired) { - return new Error( - 'Required ' + - location + - ' `' + - (propFullName || propName) + - '` was not specified in `' + - componentName + - '`.' - ); - } - return; - } - - if (typeof color === 'number') { - // Developers should not use a number, but we are using the prop type - // both for user provided colors and for transformed ones. This isn't ideal - // and should be fixed but will do for now... - return; - } - - if (normalizeColor(color) === null) { - return new Error( - 'Invalid ' + - location + - ' `' + - (propFullName || propName) + - '` supplied to `' + - componentName + - '`: ' + - color + - '\n' + - `Valid color formats are - - '#f0f' (#rgb) - - '#f0fc' (#rgba) - - '#ff00ff' (#rrggbb) - - '#ff00ff00' (#rrggbbaa) - - 'rgb(255, 255, 255)' - - 'rgba(255, 255, 255, 1.0)' - - 'hsl(360, 100%, 100%)' - - 'hsla(360, 100%, 100%, 1.0)' - - 'transparent' - - 'red' - - 0xff00ff00 (0xrrggbbaa) -` - ); - } -}; - -let ColorPropType; - -if (process.env.NODE_ENV !== 'production') { - ColorPropType = colorPropType.bind(null, false /* isRequired */); - ColorPropType.isRequired = colorPropType.bind(null, true /* isRequired */); -} else { - ColorPropType = function() {}; -} - -export default ColorPropType; diff --git a/packages/react-native-web/src/exports/EdgeInsetsPropType/index.js b/packages/react-native-web/src/exports/EdgeInsetsPropType/index.js deleted file mode 100644 index 9cd05a73..00000000 --- a/packages/react-native-web/src/exports/EdgeInsetsPropType/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import createStrictShapeTypeChecker from '../../modules/createStrictShapeTypeChecker'; -import { number } from 'prop-types'; - -export type EdgeInsetsProp = { - top: number, - left: number, - bottom: number, - right: number -}; - -const EdgeInsetsPropType = createStrictShapeTypeChecker({ - top: number, - left: number, - bottom: number, - right: number -}); - -export default EdgeInsetsPropType; diff --git a/packages/react-native-web/src/exports/Image/ImageResizeMode.js b/packages/react-native-web/src/exports/Image/ImageResizeMode.js deleted file mode 100644 index 46d592d0..00000000 --- a/packages/react-native-web/src/exports/Image/ImageResizeMode.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @flow - */ - -const ImageResizeMode = { - center: 'center', - contain: 'contain', - cover: 'cover', - none: 'none', - repeat: 'repeat', - stretch: 'stretch' -}; - -export default ImageResizeMode; diff --git a/packages/react-native-web/src/exports/Image/ImageStylePropTypes.js b/packages/react-native-web/src/exports/Image/ImageStylePropTypes.js deleted file mode 100644 index e43e577e..00000000 --- a/packages/react-native-web/src/exports/Image/ImageStylePropTypes.js +++ /dev/null @@ -1,43 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import AnimationPropTypes from '../../modules/AnimationPropTypes'; -import BorderPropTypes from '../../modules/BorderPropTypes'; -import ColorPropType from '../ColorPropType'; -import ImageResizeMode from './ImageResizeMode'; -import InteractionPropTypes from '../../modules/InteractionPropTypes'; -import LayoutPropTypes from '../../modules/LayoutPropTypes'; -import ShadowPropTypes from '../../modules/ShadowPropTypes'; -import TransformPropTypes from '../../modules/TransformPropTypes'; -import { number, oneOf, string } from 'prop-types'; - -const ImageStylePropTypes = { - ...AnimationPropTypes, - ...BorderPropTypes, - ...InteractionPropTypes, - ...LayoutPropTypes, - ...ShadowPropTypes, - ...TransformPropTypes, - backgroundColor: ColorPropType, - opacity: number, - resizeMode: oneOf(Object.keys(ImageResizeMode)), - tintColor: ColorPropType, - /** - * @platform unsupported - */ - overlayColor: string, - /** - * @platform web - */ - boxShadow: string, - filter: string -}; - -export default ImageStylePropTypes; diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index dada392b..e300c8fe 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -8,25 +8,41 @@ * @flow */ +import type { ViewProps } from '../View'; +import type { ResizeMode, Source, Style } from './types'; + import applyNativeMethods from '../../modules/applyNativeMethods'; import createElement from '../createElement'; import css from '../StyleSheet/css'; import { getAssetByID } from '../../modules/AssetRegistry'; import resolveShadowValue from '../StyleSheet/resolveShadowValue'; import ImageLoader from '../../modules/ImageLoader'; -import ImageResizeMode from './ImageResizeMode'; -import ImageSourcePropType from './ImageSourcePropType'; -import ImageStylePropTypes from './ImageStylePropTypes'; import ImageUriCache from './ImageUriCache'; import StyleSheet from '../StyleSheet'; -import StyleSheetPropType from '../../modules/StyleSheetPropType'; import TextAncestorContext from '../Text/TextAncestorContext'; import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; -import { bool, func, number, oneOf, shape } from 'prop-types'; -import React, { Component } from 'react'; +import React from 'react'; -const emptyObject = {}; +export type ImageProps = { + ...ViewProps, + blurRadius?: number, + defaultSource?: Source, + draggable?: boolean, + onError?: (e: any) => void, + onLayout?: (e: any) => void, + onLoad?: (e: any) => void, + onLoadEnd?: (e: any) => void, + onLoadStart?: (e: any) => void, + onProgress?: (e: any) => void, + resizeMode?: ResizeMode, + source: Source, + style?: Style +}; + +type State = { + layout: Object, + shouldDisplaySource: boolean +}; const STATUS_ERRORED = 'ERRORED'; const STATUS_LOADED = 'LOADED'; @@ -90,38 +106,9 @@ const createTintColorSVG = (tintColor, id) => ) : null; -type State = { - layout: Object, - shouldDisplaySource: boolean -}; - -class Image extends Component<*, State> { +class Image extends React.Component { static displayName = 'Image'; - static propTypes = { - ...ViewPropTypes, - blurRadius: number, - defaultSource: ImageSourcePropType, - draggable: bool, - onError: func, - onLayout: func, - onLoad: func, - onLoadEnd: func, - onLoadStart: func, - resizeMode: oneOf(Object.keys(ImageResizeMode)), - source: ImageSourcePropType, - style: StyleSheetPropType(ImageStylePropTypes), - // compatibility with React Native - /* eslint-disable react/sort-prop-types */ - capInsets: shape({ top: number, left: number, bottom: number, right: number }), - resizeMethod: oneOf(['auto', 'resize', 'scale']) - /* eslint-enable react/sort-prop-types */ - }; - - static defaultProps = { - style: emptyObject - }; - static getSize(uri, success, failure) { ImageLoader.getSize(uri, success, failure); } @@ -199,30 +186,22 @@ class Image extends Component<*, State> { const { shouldDisplaySource } = this.state; const { accessibilityLabel, + accessibilityRelationship, + accessibilityRole, + accessibilityState, accessible, blurRadius, defaultSource, draggable, - source, - testID, - /* eslint-disable */ - capInsets, - onError, - onLayout, - onLoad, - onLoadEnd, - onLoadStart, - resizeMethod, + importantForAccessibility, + nativeID, + pointerEvents, resizeMode, - /* eslint-enable */ - ...other + source, + testID } = this.props; if (process.env.NODE_ENV !== 'production') { - if (this.props.src) { - console.warn('The component requires a `source` property rather than `src`.'); - } - if (this.props.children) { throw new Error( 'The component cannot contain children. If you want to render content on top of the image, consider using the component or absolute positioning.' @@ -235,7 +214,7 @@ class Image extends Component<*, State> { const imageSizeStyle = resolveAssetDimensions(selectedSource); const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null; const flatStyle = { ...StyleSheet.flatten(this.props.style) }; - const finalResizeMode = resizeMode || flatStyle.resizeMode || ImageResizeMode.cover; + const finalResizeMode = resizeMode || flatStyle.resizeMode || 'cover'; // CSS filters const filters = []; @@ -279,10 +258,15 @@ class Image extends Component<*, State> { return ( diff --git a/packages/react-native-web/src/exports/Image/ImageSourcePropType.js b/packages/react-native-web/src/exports/Image/types.js similarity index 65% rename from packages/react-native-web/src/exports/Image/ImageSourcePropType.js rename to packages/react-native-web/src/exports/Image/types.js index d99592d1..8d4c507b 100644 --- a/packages/react-native-web/src/exports/Image/ImageSourcePropType.js +++ b/packages/react-native-web/src/exports/Image/types.js @@ -1,45 +1,20 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ +import type { ColorValue } from '../../types'; +import type { + AnimationStyles, + BorderStyles, + InteractionStyles, + LayoutStyles, + ShadowStyles, + TransformStyles +} from '../../types/styles'; -'use strict'; - -import PropTypes from 'prop-types'; - -const ImageURISourcePropType = PropTypes.shape({ - /** - * `uri` is a string representing the resource identifier for the image, which - * could be an http address, a local file path, or the name of a static image - * resource (which should be wrapped in the `require('./path/to/image.png')` - * function). - */ - uri: PropTypes.string, - /** - * `bundle` is the iOS asset bundle which the image is included in. This - * will default to [NSBundle mainBundle] if not set. - * @platform ios - */ - bundle: PropTypes.string, - /** - * `method` is the HTTP Method to use. Defaults to GET if not specified. - */ - method: PropTypes.string, - /** - * `headers` is an object representing the HTTP headers to send along with the - * request for a remote image. - */ - headers: PropTypes.objectOf(PropTypes.string), +type SourceObject = { /** * `body` is the HTTP body to send with the request. This must be a valid * UTF-8 string, and will be sent exactly as specified, with no * additional encoding (e.g. URL-escaping or base64) applied. */ - body: PropTypes.string, + body?: string, /** * `cache` determines how the requests handles potentially cached * responses. @@ -60,27 +35,51 @@ const ImageURISourcePropType = PropTypes.shape({ * * @platform ios */ - cache: PropTypes.oneOf(['default', 'reload', 'force-cache', 'only-if-cached']), + cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached', /** - * `width` and `height` can be specified if known at build time, in which case - * these will be used to set the default `` component dimensions. + * `headers` is an object representing the HTTP headers to send along with the + * request for a remote image. */ - width: PropTypes.number, - height: PropTypes.number, + headers?: { [key: string]: string }, + /** + * `method` is the HTTP Method to use. Defaults to GET if not specified. + */ + method?: string, /** * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if * unspecified, meaning that one image pixel equates to one display point / DIP. */ - scale: PropTypes.number -}); + scale?: number, + /** + * `uri` is a string representing the resource identifier for the image, which + * could be an http address, a local file path, or the name of a static image + * resource (which should be wrapped in the `require('./path/to/image.png')` + * function). + */ + uri: string, + /** + * `width` and `height` can be specified if known at build time, in which case + * these will be used to set the default `` component dimensions. + */ + height?: number, + width?: number +}; -const ImageSourcePropType = PropTypes.oneOfType([ - ImageURISourcePropType, - // Opaque type returned by require('./image.jpg') - PropTypes.number, - PropTypes.string, - // Multiple sources - PropTypes.arrayOf(ImageURISourcePropType) -]); +export type ResizeMode = 'center' | 'contain' | 'cover' | 'none' | 'repeat' | 'stretch'; -export default ImageSourcePropType; +export type Source = number | string | SourceObject | Array; + +export type Style = { + ...AnimationStyles, + ...BorderStyles, + ...InteractionStyles, + ...LayoutStyles, + ...ShadowStyles, + ...TransformStyles, + backgroundColor?: ColorValue, + boxShadow?: string, + filter?: string, + opacity?: number, + resizeMode?: ResizeMode, + tintColor?: ColorValue +}; diff --git a/packages/react-native-web/src/exports/ImageBackground/index.js b/packages/react-native-web/src/exports/ImageBackground/index.js index ba7fc102..22022bbc 100644 --- a/packages/react-native-web/src/exports/ImageBackground/index.js +++ b/packages/react-native-web/src/exports/ImageBackground/index.js @@ -7,29 +7,28 @@ * @flow */ +import type { ImageProps } from '../Image'; +import type { ViewProps } from '../View'; + import ensureComponentIsNative from '../../modules/ensureComponentIsNative'; import Image from '../Image'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; -import React, { Component } from 'react'; +import React from 'react'; + +type ImageBackgroundProps = { + ...ImageProps, + imageRef?: any, + imageStyle?: $PropertyType, + style?: $PropertyType +}; const emptyObject = {}; /** * Very simple drop-in replacement for which supports nesting views. */ -class ImageBackground extends Component<*> { - static propTypes = { - ...Image.propTypes, - imageStyle: Image.propTypes.style, - style: ViewPropTypes.style - }; - - static defaultProps = { - style: emptyObject - }; - +class ImageBackground extends React.Component { setNativeProps(props: Object) { // Work-around flow const viewRef = this._viewRef; @@ -46,7 +45,8 @@ class ImageBackground extends Component<*> { }; render() { - const { children, style, imageStyle, imageRef, ...props } = this.props; + const { children, style = emptyObject, imageStyle, imageRef, ...props } = this.props; + const { height, width } = StyleSheet.flatten(style); return ( @@ -63,8 +63,8 @@ class ImageBackground extends Component<*> { // So, we have to proxy/reapply these styles explicitly for actual component. // This workaround should be removed after implementing proper support of // intrinsic content size of the . - width: style.width, - height: style.height, + width, + height, zIndex: -1 }, imageStyle diff --git a/packages/react-native-web/src/exports/KeyboardAvoidingView/index.js b/packages/react-native-web/src/exports/KeyboardAvoidingView/index.js index dff035bc..6e7887f0 100644 --- a/packages/react-native-web/src/exports/KeyboardAvoidingView/index.js +++ b/packages/react-native-web/src/exports/KeyboardAvoidingView/index.js @@ -8,37 +8,34 @@ * @flow */ +import type { LayoutEvent, LayoutValue } from '../../types'; +import type { ViewProps } from '../View'; + import View from '../View'; -import { number, oneOf } from 'prop-types'; -import React, { Component } from 'react'; -import ViewPropTypes, { type ViewLayout, type ViewLayoutEvent } from '../ViewPropTypes'; +import React from 'react'; -class KeyboardAvoidingView extends Component<*> { - static propTypes = { - ...ViewPropTypes, - behavior: oneOf(['height', 'padding', 'position']), - contentContainerStyle: ViewPropTypes.style, - keyboardVerticalOffset: number.isRequired - }; +type KeyboardAvoidingViewProps = { + ...ViewProps, + behavior?: 'height' | 'padding' | 'position', + contentContainerStyle?: $PropertyType, + keyboardVerticalOffset: number +}; - static defaultProps = { - keyboardVerticalOffset: 0 - }; - - frame: ?ViewLayout = null; +class KeyboardAvoidingView extends React.Component { + frame: ?LayoutValue = null; relativeKeyboardHeight(keyboardFrame: Object): number { const frame = this.frame; if (!frame || !keyboardFrame) { return 0; } - const keyboardY = keyboardFrame.screenY - this.props.keyboardVerticalOffset; + const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset || 0); return Math.max(frame.y + frame.height - keyboardY, 0); } onKeyboardChange(event: Object) {} - onLayout = (event: ViewLayoutEvent) => { + onLayout = (event: LayoutEvent) => { this.frame = event.nativeEvent.layout; }; diff --git a/packages/react-native-web/src/exports/Picker/PickerItem.js b/packages/react-native-web/src/exports/Picker/PickerItem.js index b64cd1bd..ed0541d8 100644 --- a/packages/react-native-web/src/exports/Picker/PickerItem.js +++ b/packages/react-native-web/src/exports/Picker/PickerItem.js @@ -8,26 +8,19 @@ * @noflow */ -import ColorPropType from '../ColorPropType'; -import { Component } from 'react'; +import type { ColorValue } from '../../types'; + +import React from 'react'; import createElement from '../createElement'; -import { number, oneOfType, string } from 'prop-types'; type Props = { - color?: ColorPropType, + color?: ColorValue, label: string, testID?: string, value?: number | string }; -export default class PickerItem extends Component { - static propTypes = { - color: ColorPropType, - label: string.isRequired, - testID: string, - value: oneOfType([number, string]) - }; - +export default class PickerItem extends React.Component { render() { const { color, label, testID, value } = this.props; const style = { color }; diff --git a/packages/react-native-web/src/exports/Picker/PickerItemPropType.js b/packages/react-native-web/src/exports/Picker/PickerItemPropType.js deleted file mode 100644 index e8d6c188..00000000 --- a/packages/react-native-web/src/exports/Picker/PickerItemPropType.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import React from 'react'; -import PickerItem from './PickerItem'; - -const PickerItemPropType = (props: Object, propName: string, componentName: string) => { - const prop = props[propName]; - let error = null; - React.Children.forEach(prop, function(child) { - if (child.type !== PickerItem) { - error = new Error('`Picker` children must be of type `Picker.Item`.'); - } - }); - return error; -}; - -export default PickerItemPropType; diff --git a/packages/react-native-web/src/exports/Picker/PickerStylePropTypes.js b/packages/react-native-web/src/exports/Picker/PickerStylePropTypes.js deleted file mode 100644 index 7188f2d7..00000000 --- a/packages/react-native-web/src/exports/Picker/PickerStylePropTypes.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import ColorPropType from '../ColorPropType'; -import ViewStylePropTypes from '../View/ViewStylePropTypes'; - -const PickerStylePropTypes = { - ...ViewStylePropTypes, - color: ColorPropType -}; - -export default PickerStylePropTypes; diff --git a/packages/react-native-web/src/exports/Picker/index.js b/packages/react-native-web/src/exports/Picker/index.js index 6aa6ed00..fce93192 100644 --- a/packages/react-native-web/src/exports/Picker/index.js +++ b/packages/react-native-web/src/exports/Picker/index.js @@ -8,43 +8,28 @@ * @flow */ +import type { ViewProps } from '../View'; + import applyNativeMethods from '../../modules/applyNativeMethods'; import { Component } from 'react'; import createElement from '../createElement'; import PickerItem from './PickerItem'; -import PickerItemPropType from './PickerItemPropType'; -import PickerStylePropTypes from './PickerStylePropTypes'; -import StyleSheetPropType from '../../modules/StyleSheetPropType'; import StyleSheet, { type StyleObj } from '../StyleSheet'; -import { arrayOf, bool, func, number, oneOfType, string } from 'prop-types'; -import ViewPropTypes, { type ViewProps } from '../ViewPropTypes'; -const pickerStyleType = StyleSheetPropType(PickerStylePropTypes); - -type Props = ViewProps & { +type PickerProps = { + ...ViewProps, children?: PickerItem | Array, enabled?: boolean, - onValueChange?: Function, + onValueChange?: (number | string, number) => void, selectedValue?: number | string, style?: StyleObj, - testID?: string, /* compat */ itemStyle?: StyleObj, mode?: string, prompt?: string }; -class Picker extends Component { - static propTypes = { - ...ViewPropTypes, - children: oneOfType([PickerItemPropType, arrayOf(PickerItemPropType)]), - enabled: bool, - onValueChange: func, - selectedValue: oneOfType([number, string]), - style: pickerStyleType, - testID: string - }; - +class Picker extends Component { static Item = PickerItem; render() { diff --git a/packages/react-native-web/src/exports/PointPropType/index.js b/packages/react-native-web/src/exports/PointPropType/index.js deleted file mode 100644 index a4ab544d..00000000 --- a/packages/react-native-web/src/exports/PointPropType/index.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import createStrictShapeTypeChecker from '../../modules/createStrictShapeTypeChecker'; -import { number } from 'prop-types'; - -const PointPropType = createStrictShapeTypeChecker({ - x: number, - y: number -}); - -export default PointPropType; diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js index a8500087..638c0f25 100644 --- a/packages/react-native-web/src/exports/ProgressBar/index.js +++ b/packages/react-native-web/src/exports/ProgressBar/index.js @@ -7,34 +7,27 @@ * @flow */ +import type { ColorValue } from '../../types'; +import type { ViewProps } from '../View'; + import applyNativeMethods from '../../modules/applyNativeMethods'; -import ColorPropType from '../ColorPropType'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; -import React, { Component } from 'react'; -import { bool, number } from 'prop-types'; +import React from 'react'; -class ProgressBar extends Component<*> { +type ProgressBarProps = { + ...ViewProps, + color?: ColorValue, + indeterminate?: boolean, + progress?: number, + trackColor?: ColorValue +}; + +class ProgressBar extends React.Component { _progressElement: View; static displayName = 'ProgressBar'; - static propTypes = { - ...ViewPropTypes, - color: ColorPropType, - indeterminate: bool, - progress: number, - trackColor: ColorPropType - }; - - static defaultProps = { - color: '#1976D2', - indeterminate: false, - progress: 0, - trackColor: 'transparent' - }; - componentDidMount() { this._updateProgressWidth(); } @@ -44,7 +37,14 @@ class ProgressBar extends Component<*> { } render() { - const { color, indeterminate, progress, trackColor, style, ...other } = this.props; + const { + color = '#1976D2', + indeterminate = false, + progress = 0, + trackColor = 'transparent', + style, + ...other + } = this.props; const percentageProgress = progress * 100; @@ -70,7 +70,7 @@ class ProgressBar extends Component<*> { }; _updateProgressWidth = () => { - const { indeterminate, progress } = this.props; + const { indeterminate = false, progress = 0 } = this.props; const percentageProgress = indeterminate ? 50 : progress * 100; const width = indeterminate ? '25%' : `${percentageProgress}%`; if (this._progressElement) { diff --git a/packages/react-native-web/src/exports/RefreshControl/index.js b/packages/react-native-web/src/exports/RefreshControl/index.js index b2d53f3f..7ba518da 100644 --- a/packages/react-native-web/src/exports/RefreshControl/index.js +++ b/packages/react-native-web/src/exports/RefreshControl/index.js @@ -8,27 +8,27 @@ * @flow */ -import ColorPropType from '../ColorPropType'; +import type { ColorValue } from '../../types'; +import type { ViewProps } from '../View'; + import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; -import { arrayOf, bool, func, number, oneOf, string } from 'prop-types'; -import React, { Component } from 'react'; +import React from 'react'; -class RefreshControl extends Component<*> { - static propTypes = { - ...ViewPropTypes, - colors: arrayOf(ColorPropType), - enabled: bool, - onRefresh: func, - progressBackgroundColor: ColorPropType, - progressViewOffset: number, - refreshing: bool.isRequired, - size: oneOf([0, 1]), - tintColor: ColorPropType, - title: string, - titleColor: ColorPropType - }; +type RefreshControlProps = { + ...ViewProps, + colors?: Array, + enabled?: boolean, + onRefresh?: () => void, + progressBackgroundColor?: ColorValue, + progressViewOffset?: number, + refreshing: boolean, + size?: 0 | 1, + tintColor?: ColorValue, + title?: string, + titleColor?: ColorValue +}; +class RefreshControl extends React.Component { render() { const { /* eslint-disable */ diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js index 85426ad9..d42c1c03 100644 --- a/packages/react-native-web/src/exports/SafeAreaView/index.js +++ b/packages/react-native-web/src/exports/SafeAreaView/index.js @@ -8,11 +8,12 @@ * @flow */ +import type { ViewProps } from '../View'; + import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; import React from 'react'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import { type ViewProps } from '../ViewPropTypes'; const SafeAreaView = React.forwardRef((props: ViewProps, ref) => { const { style, ...rest } = props; diff --git a/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js b/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js index ba5224c0..e844a8e2 100644 --- a/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js +++ b/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js @@ -7,12 +7,27 @@ * @flow */ +import type { ViewProps } from '../View'; + import debounce from 'debounce'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; -import React, { Component } from 'react'; -import { bool, func, number } from 'prop-types'; +import React from 'react'; + +type Props = { + ...ViewProps, + onMomentumScrollBegin?: (e: any) => void, + onMomentumScrollEnd?: (e: any) => void, + onScroll?: (e: any) => void, + onScrollBeginDrag?: (e: any) => void, + onScrollEndDrag?: (e: any) => void, + onTouchMove?: (e: any) => void, + onWheel?: (e: any) => void, + scrollEnabled?: boolean, + scrollEventThrottle?: number, + showsHorizontalScrollIndicator?: boolean, + showsVerticalScrollIndicator?: boolean +}; const normalizeScrollEvent = e => ({ nativeEvent: { @@ -47,30 +62,9 @@ const normalizeScrollEvent = e => ({ /** * Encapsulates the Web-specific scroll throttling and disabling logic */ -export default class ScrollViewBase extends Component<*> { +export default class ScrollViewBase extends React.Component { _viewRef: View; - static propTypes = { - ...ViewPropTypes, - 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 = { - scrollEnabled: true, - scrollEventThrottle: 0 - }; - _debouncedOnScrollEnd = debounce(this._handleScrollEnd, 100); _state = { isScrolling: false, scrollLastTick: 0 }; @@ -82,60 +76,45 @@ export default class ScrollViewBase extends Component<*> { render() { const { - scrollEnabled, - style, - /* eslint-disable */ - alwaysBounceHorizontal, - alwaysBounceVertical, - automaticallyAdjustContentInsets, - bounces, - bouncesZoom, - canCancelContentTouches, - centerContent, - contentInset, - contentInsetAdjustmentBehavior, - contentOffset, - decelerationRate, - directionalLockEnabled, - endFillColor, - indicatorStyle, - keyboardShouldPersistTaps, - maximumZoomScale, - minimumZoomScale, - onMomentumScrollBegin, - onMomentumScrollEnd, - onScrollBeginDrag, - onScrollEndDrag, - overScrollMode, - pinchGestureEnabled, - removeClippedSubviews, - scrollEventThrottle, - scrollIndicatorInsets, - scrollPerfTag, - scrollsToTop, + accessibilityLabel, + accessibilityRelationship, + accessibilityRole, + accessibilityState, + children, + importantForAccessibility, + nativeID, + onLayout, + pointerEvents, + scrollEnabled = true, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, - snapToInterval, - snapToAlignment, - zoomScale, - /* eslint-enable */ - ...other + style, + testID } = this.props; const hideScrollbar = showsHorizontalScrollIndicator === false || showsVerticalScrollIndicator === false; return ( ); } @@ -156,7 +135,7 @@ export default class ScrollViewBase extends Component<*> { _handleScroll = (e: Object) => { e.persist(); e.stopPropagation(); - const { scrollEventThrottle } = this.props; + const { scrollEventThrottle = 0 } = this.props; // A scroll happened, so the scroll bumps the debounce. this._debouncedOnScrollEnd(e); if (this._state.isScrolling) { diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js index 3559ed1b..2983f52d 100644 --- a/packages/react-native-web/src/exports/ScrollView/index.js +++ b/packages/react-native-web/src/exports/ScrollView/index.js @@ -8,6 +8,8 @@ * @noflow */ +import type { ViewProps, ViewStyle } from '../View/types'; + import createReactClass from 'create-react-class'; import dismissKeyboard from '../../modules/dismissKeyboard'; import findNodeHandle from '../findNodeHandle'; @@ -16,29 +18,26 @@ import ScrollResponder from '../../modules/ScrollResponder'; import ScrollViewBase from './ScrollViewBase'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; import React from 'react'; -import { arrayOf, bool, element, func, number, oneOf } from 'prop-types'; + +type ScrollViewProps = { + ...ViewProps, + contentContainerStyle?: ViewStyle, + horizontal?: boolean, + keyboardDismissMode?: 'none' | 'interactive' | 'on-drag', + onContentSizeChange?: (e: any) => void, + onScroll?: (e: any) => void, + pagingEnabled?: boolean, + refreshControl?: any, + scrollEnabled?: boolean, + scrollEventThrottle?: number, + stickyHeaderIndices?: Array +}; const emptyObject = {}; -/* eslint-disable react/prefer-es6-class, react/prop-types */ -const ScrollView = createReactClass({ - propTypes: { - ...ViewPropTypes, - contentContainerStyle: ViewPropTypes.style, - horizontal: bool, - keyboardDismissMode: oneOf(['none', 'interactive', 'on-drag']), - onContentSizeChange: func, - onScroll: func, - pagingEnabled: bool, - refreshControl: element, - scrollEnabled: bool, - scrollEventThrottle: number, - stickyHeaderIndices: arrayOf(number), - style: ViewPropTypes.style - }, - +/* eslint-disable react/prefer-es6-class */ +const ScrollView = ((createReactClass({ mixins: [ScrollResponder.Mixin], getInitialState() { @@ -278,7 +277,7 @@ const ScrollView = createReactClass({ _setScrollViewRef(component) { this._scrollViewRef = component; } -}); +}): any): React.ComponentType); const commonStyle = { flexGrow: 1, diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetTypes.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetTypes.js deleted file mode 100644 index 3274688a..00000000 --- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetTypes.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -type Atom = number | boolean | Object | Array; -export type StyleObj = Atom; diff --git a/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js b/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js index d81e25fe..10d42961 100644 --- a/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js +++ b/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js @@ -10,7 +10,6 @@ import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'; import invariant from 'fbjs/lib/invariant'; -import type { StyleObj } from './StyleSheetTypes'; function getStyle(style) { if (typeof style === 'number') { @@ -19,7 +18,7 @@ function getStyle(style) { return style; } -function flattenStyle(style: ?StyleObj): ?Object { +function flattenStyle(style: ?any): ?Object { if (!style) { return undefined; } diff --git a/packages/react-native-web/src/exports/StyleSheet/validate.js b/packages/react-native-web/src/exports/StyleSheet/validate.js index 8df9c61d..e8043b7e 100644 --- a/packages/react-native-web/src/exports/StyleSheet/validate.js +++ b/packages/react-native-web/src/exports/StyleSheet/validate.js @@ -7,38 +7,8 @@ * @flow strict-local */ -// import { STYLE_SHORT_FORM_EXPANSIONS } from './constants'; -import ImageStylePropTypes from '../Image/ImageStylePropTypes'; -import TextInputStylePropTypes from '../TextInput/TextInputStylePropTypes'; -import TextStylePropTypes from '../Text/TextStylePropTypes'; -import ViewStylePropTypes from '../View/ViewStylePropTypes'; import warning from 'fbjs/lib/warning'; -const validProperties = [ - ...Object.keys(ImageStylePropTypes), - ...Object.keys(TextInputStylePropTypes), - ...Object.keys(TextStylePropTypes), - ...Object.keys(ViewStylePropTypes), - 'appearance', - 'borderCollapse', - 'borderSpacing', - 'clear', - 'cursor', - 'fill', - 'float', - 'listStyle', - 'objectFit', - 'objectPosition', - 'pointerEvents', - 'placeholderTextColor', - 'tableLayout' -] - .sort() - .reduce((acc, curr) => { - acc[curr] = true; - return acc; - }, {}); - const invalidShortforms = { background: true, borderBottom: true, @@ -51,13 +21,6 @@ const invalidShortforms = { textDecoration: true }; -/* -const singleValueShortForms = Object.keys(STYLE_SHORT_FORM_EXPANSIONS).reduce((a, c) => { - a[c] = true; - return a; -}, {}); -*/ - function error(message) { warning(false, message); } @@ -73,35 +36,29 @@ export default function validate(key: string, styles: Object) { continue; } - if (validProperties[prop] == null) { + if (typeof value === 'string' && value.indexOf('!important') > -1) { + error(`Invalid style declaration "${prop}:${value}". Values cannot include "!important"`); + isInvalid = true; + } else { let suggestion = ''; if (prop === 'animation' || prop === 'animationName') { suggestion = 'Did you mean "animationKeyframes"?'; // } else if (prop === 'boxShadow') { // suggestion = 'Did you mean "shadow{Color,Offset,Opacity,Radius}"?'; + isInvalid = true; } else if (prop === 'direction') { suggestion = 'Did you mean "writingDirection"?'; + isInvalid = true; } else if (prop === 'verticalAlign') { suggestion = 'Did you mean "textAlignVertical"?'; + isInvalid = true; } else if (invalidShortforms[prop]) { suggestion = 'Please use long-form properties.'; + isInvalid = true; + } + if (suggestion !== '') { + error(`Invalid style property of "${prop}". ${suggestion}`); } - isInvalid = true; - error(`Invalid style property of "${prop}". ${suggestion}`); - } - - // else if (singleValueShortForms[prop]) { - // TODO: fix check - // if (typeof value === 'string' && value.indexOf(' ') > -1) { - // error( - // `Invalid style declaration "${prop}:${value}". This property must only specify a single value.` - // ); - // isInvalid = true; - // } - // } - else if (typeof value === 'string' && value.indexOf('!important') > -1) { - error(`Invalid style declaration "${prop}:${value}". Values cannot include "!important"`); - isInvalid = true; } if (isInvalid) { diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js index 60721c05..2560d838 100644 --- a/packages/react-native-web/src/exports/Switch/index.js +++ b/packages/react-native-web/src/exports/Switch/index.js @@ -7,56 +7,42 @@ * @flow */ +import type { ColorValue } from '../../types'; +import type { ViewProps } from '../View'; + import applyNativeMethods from '../../modules/applyNativeMethods'; -import ColorPropType from '../ColorPropType'; import createElement from '../createElement'; import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue'; import StyleSheet from '../StyleSheet'; import UIManager from '../UIManager'; import View from '../View'; -import ViewPropTypes from '../ViewPropTypes'; -import React, { Component } from 'react'; -import { bool, func } from 'prop-types'; +import React from 'react'; + +type SwitchProps = { + ...ViewProps, + activeThumbColor?: ColorValue, + activeTrackColor?: ColorValue, + disabled?: boolean, + onValueChange?: (e: any) => void, + thumbColor?: ColorValue, + trackColor?: ColorValue, + value?: boolean, + // RN compat + onTintColor?: ColorValue, + thumbTintColor?: ColorValue, + tintColor?: ColorValue +}; 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 React.Component { _checkboxElement: HTMLInputElement; _thumbElement: View; static displayName = 'Switch'; - static propTypes = { - ...ViewPropTypes, - activeThumbColor: ColorPropType, - activeTrackColor: ColorPropType, - disabled: bool, - onValueChange: func, - thumbColor: ColorPropType, - trackColor: ColorPropType, - value: bool, - - /* eslint-disable react/sort-prop-types */ - // Equivalent of 'activeTrackColor' - onTintColor: ColorPropType, - // Equivalent of 'thumbColor' - thumbTintColor: ColorPropType, - // Equivalent of 'trackColor' - tintColor: ColorPropType - }; - - static defaultProps = { - activeThumbColor: '#009688', - activeTrackColor: '#A3D3CF', - disabled: false, - style: emptyObject, - thumbColor: '#FAFAFA', - trackColor: '#939393', - value: false - }; - blur() { UIManager.blur(this._checkboxElement); } @@ -68,15 +54,14 @@ class Switch extends Component<*> { render() { const { accessibilityLabel, - activeThumbColor, - activeTrackColor, - disabled, + activeThumbColor = '#009688', + activeTrackColor = '#A3D3CF', + disabled = false, onValueChange, // eslint-disable-line - style, - thumbColor, - trackColor, - value, - + style = emptyObject, + thumbColor = '#FAFAFA', + trackColor = '#939393', + value = false, // React Native compatibility onTintColor, thumbTintColor, diff --git a/packages/react-native-web/src/exports/Text/TextPropTypes.js b/packages/react-native-web/src/exports/Text/TextPropTypes.js deleted file mode 100644 index 0dc77867..00000000 --- a/packages/react-native-web/src/exports/Text/TextPropTypes.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import StyleSheetPropType from '../../modules/StyleSheetPropType'; -import TextStylePropTypes from './TextStylePropTypes'; -import { any, bool, func, number, object, oneOf, string } from 'prop-types'; - -const TextPropTypes = { - accessibilityLabel: string, - accessibilityLiveRegion: oneOf(['assertive', 'none', 'polite']), - accessibilityRelationship: object, - accessibilityRole: oneOf([ - 'button', - 'header', - 'heading', - 'label', - 'link', - 'listitem', - 'none', - 'text' - ]), - accessible: bool, - accessibilityState: object, - children: any, - forwardedRef: any, - importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']), - maxFontSizeMultiplier: number, - nativeID: string, - numberOfLines: number, - onBlur: func, - onFocus: func, - onLayout: func, - onPress: func, - selectable: bool, - style: StyleSheetPropType(TextStylePropTypes), - testID: string, - // web extensions - onContextMenu: func, - itemID: string, - itemRef: string, - itemProp: string, - itemScope: string, - itemType: string -}; - -export default TextPropTypes; diff --git a/packages/react-native-web/src/exports/Text/TextStylePropTypes.js b/packages/react-native-web/src/exports/Text/TextStylePropTypes.js deleted file mode 100644 index 02324f57..00000000 --- a/packages/react-native-web/src/exports/Text/TextStylePropTypes.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import ColorPropType from '../ColorPropType'; -import ViewStylePropTypes from '../View/ViewStylePropTypes'; -import { array, number, oneOf, oneOfType, shape, string } from 'prop-types'; - -const numberOrString = oneOfType([number, string]); - -const TextStylePropTypes = { - ...ViewStylePropTypes, - color: ColorPropType, - fontFamily: string, - fontFeatureSettings: string, - fontSize: numberOrString, - fontStyle: string, - fontWeight: string, - fontVariant: array, - letterSpacing: numberOrString, - lineHeight: numberOrString, - textAlign: oneOf([ - 'center', - 'end', - 'inherit', - 'justify', - 'justify-all', - 'left', - 'right', - 'start' - ]), - textAlignVertical: string, - textDecorationColor: ColorPropType, - textDecorationLine: string, - textDecorationStyle: string, - textShadowColor: ColorPropType, - textShadowOffset: shape({ width: number, height: number }), - textShadowRadius: number, - textTransform: oneOf(['capitalize', 'lowercase', 'none', 'uppercase']), - writingDirection: oneOf(['auto', 'ltr', 'rtl']), - /* @platform web */ - textIndent: numberOrString, - textOverflow: string, - textRendering: oneOf(['auto', 'geometricPrecision', 'optimizeLegibility', 'optimizeSpeed']), - unicodeBidi: oneOf([ - 'normal', - 'bidi-override', - 'embed', - 'isolate', - 'isolate-override', - 'plaintext' - ]), - whiteSpace: string, - wordBreak: oneOf(['normal', 'break-all', 'break-word', 'keep-all']), - wordWrap: string, - MozOsxFontSmoothing: string, - WebkitFontSmoothing: string -}; - -export default TextStylePropTypes; diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index c537eed8..5f79e866 100644 --- a/packages/react-native-web/src/exports/Text/index.js +++ b/packages/react-native-web/src/exports/Text/index.js @@ -8,77 +8,50 @@ * @flow */ +import type { TextProps } from './types'; + import applyLayout from '../../modules/applyLayout'; import applyNativeMethods from '../../modules/applyNativeMethods'; import createElement from '../createElement'; import css from '../StyleSheet/css'; -import warning from 'fbjs/lib/warning'; +import filterSupportedProps from '../View/filterSupportedProps'; import React from 'react'; import StyleSheet from '../StyleSheet'; import TextAncestorContext from './TextAncestorContext'; -import TextPropTypes from './TextPropTypes'; -class Text extends React.Component<*> { +class Text extends React.Component { static displayName = 'Text'; - static propTypes = TextPropTypes; - renderText(hasTextAncestor) { - const { - dir, - forwardedRef, - numberOfLines, - onPress, - selectable, - style, - /* eslint-disable */ - adjustsFontSizeToFit, - allowFontScaling, - ellipsizeMode, - lineBreakMode, - maxFontSizeMultiplier, - minimumFontScale, - onLayout, - onLongPress, - pressRetentionOffset, - selectionColor, - suppressHighlighting, - textBreakStrategy, - tvParallaxProperties, - /* eslint-enable */ - ...otherProps - } = this.props; + const { dir, forwardedRef, numberOfLines, onPress, selectable, style } = this.props; - if (process.env.NODE_ENV !== 'production') { - warning(this.props.className == null, 'Using the "className" prop on is deprecated.'); - } + const supportedProps = filterSupportedProps(this.props); if (onPress) { - otherProps.accessible = true; - otherProps.onClick = this._createPressHandler(onPress); - otherProps.onKeyDown = this._createEnterHandler(onPress); + supportedProps.accessible = true; + supportedProps.onClick = this._createPressHandler(onPress); + supportedProps.onKeyDown = this._createEnterHandler(onPress); } - otherProps.classList = [ - this.props.className, + supportedProps.classList = [ classes.text, hasTextAncestor === true && classes.textHasAncestor, numberOfLines === 1 && classes.textOneLine, - numberOfLines > 1 && classes.textMultiLine + numberOfLines != null && numberOfLines > 1 && classes.textMultiLine ]; // allow browsers to automatically infer the language writing direction - otherProps.dir = dir !== undefined ? dir : 'auto'; - otherProps.ref = forwardedRef; - otherProps.style = [ + supportedProps.dir = dir !== undefined ? dir : 'auto'; + supportedProps.ref = forwardedRef; + supportedProps.style = [ style, - numberOfLines > 1 && { WebkitLineClamp: numberOfLines }, + numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines }, selectable === false && styles.notSelectable, onPress && styles.pressable ]; const component = hasTextAncestor ? 'span' : 'div'; - return createElement(component, otherProps); + return createElement(component, supportedProps); } render() { diff --git a/packages/react-native-web/src/exports/Text/types.js b/packages/react-native-web/src/exports/Text/types.js new file mode 100644 index 00000000..0a028484 --- /dev/null +++ b/packages/react-native-web/src/exports/Text/types.js @@ -0,0 +1,117 @@ +/** + * Copyright (c) Nicolas Gallagher. + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import type { ColorValue, GenericStyleProp, LayoutEvent } from '../../types'; +import type { ViewStyle } from '../View/types'; + +type FontWeightValue = + | 'normal' + | 'bold' + | '100' + | '200' + | '300' + | '400' + | '500' + | '600' + | '700' + | '800' + | '900'; + +export type TextStyle = { + ...ViewStyle, + color?: ColorValue, + fontFamily?: string, + fontFeatureSettings?: string, + fontSize?: number | string, + fontStyle?: 'italic' | 'normal', + fontWeight?: FontWeightValue, + fontVariant?: $ReadOnlyArray< + 'small-caps' | 'oldstyle-nums' | 'lining-nums' | 'tabular-nums' | 'proportional-nums' + >, + letterSpacing?: number | string, + lineHeight?: number | string, + textAlign?: 'center' | 'end' | 'inherit' | 'justify' | 'justify-all' | 'left' | 'right' | 'start', + textAlignVertical?: string, + textDecorationColor?: ColorValue, + textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through', + textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed', + textIndent?: number | string, + textOverflow?: string, + textRendering?: 'auto' | 'geometricPrecision' | 'optimizeLegibility' | 'optimizeSpeed', + textShadowColor?: ColorValue, + textShadowOffset?: {| width?: number, height?: number |}, + textShadowRadius?: number, + textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase', + unicodeBidi?: 'normal' | 'bidi-override' | 'embed' | 'isolate' | 'isolate-override' | 'plaintext', + whiteSpace?: string, + wordBreak?: 'normal' | 'break-all' | 'break-word' | 'keep-all', + wordWrap?: string, + writingDirection?: 'auto' | 'ltr' | 'rtl', + /* @platform web */ + MozOsxFontSmoothing?: string, + WebkitFontSmoothing?: string +}; + +export type TextProps = { + accessibilityLabel?: string, + accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', + accessibilityRelationship?: { + activedescendant?: ?string, + controls?: ?string, + describedby?: ?string, + details?: ?string, + haspopup?: ?string, + labelledby?: ?string, + owns?: ?string + }, + accessibilityRole?: + | 'button' + | 'header' + | 'heading' + | 'label' + | 'link' + | 'listitem' + | 'none' + | 'text', + accessibilityState?: { + busy?: ?boolean, + checked?: ?boolean | 'mixed', + disabled?: ?boolean, + expanded?: ?boolean, + grabbed?: ?boolean, + hidden?: ?boolean, + invalid?: ?boolean, + pressed?: ?boolean, + readonly?: ?boolean, + required?: ?boolean, + selected?: ?boolean + }, + accessible?: boolean, + children?: any, + dir?: 'auto' | 'ltr' | 'rtl', + forwardedRef?: any, + importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants', + nativeID?: string, + numberOfLines?: number, + onBlur?: (e: any) => void, + onFocus?: (e: any) => void, + onLayout?: (e: LayoutEvent) => void, + onPress?: (e: any) => void, + selectable?: boolean, + style?: GenericStyleProp, + testID?: string, + // web extensions + onContextMenu?: (e: any) => void, + itemID?: string, + itemRef?: string, + itemProp?: string, + itemScope?: string, + itemType?: string +}; diff --git a/packages/react-native-web/src/exports/TextInput/TextInputStylePropTypes.js b/packages/react-native-web/src/exports/TextInput/TextInputStylePropTypes.js deleted file mode 100644 index 1c050b14..00000000 --- a/packages/react-native-web/src/exports/TextInput/TextInputStylePropTypes.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import ColorPropType from '../ColorPropType'; -import TextStylePropTypes from '../Text/TextStylePropTypes'; -import { oneOf } from 'prop-types'; - -const TextInputStylePropTypes = { - ...TextStylePropTypes, - /* @platform web */ - caretColor: ColorPropType, - resize: oneOf(['none', 'vertical', 'horizontal', 'both']) -}; - -export default TextInputStylePropTypes; diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 2cb7c403..81350290 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -8,19 +8,17 @@ * @flow */ +import type { TextInputProps } from './types'; + import applyLayout from '../../modules/applyLayout'; import applyNativeMethods from '../../modules/applyNativeMethods'; import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; -import { Component } from 'react'; -import ColorPropType from '../ColorPropType'; import createElement from '../createElement'; import css from '../StyleSheet/css'; +import filterSupportedProps from '../View/filterSupportedProps'; import findNodeHandle from '../findNodeHandle'; -import StyleSheetPropType from '../../modules/StyleSheetPropType'; -import TextInputStylePropTypes from './TextInputStylePropTypes'; +import React from 'react'; import TextInputState from '../../modules/TextInputState'; -import ViewPropTypes from '../ViewPropTypes'; -import { any, bool, func, number, oneOf, shape, string } from 'prop-types'; const isAndroid = canUseDOM && /Android/i.test(navigator && navigator.userAgent); const emptyObject = {}; @@ -40,7 +38,7 @@ const normalizeEventHandler = handler => e => { * selection state. */ const isSelectionStale = (node, selection) => { - if (node && selection) { + if (node != null && selection != null) { const { selectionEnd, selectionStart } = node; const { start, end } = selection; return start !== selectionStart || end !== selectionEnd; @@ -54,7 +52,7 @@ const isSelectionStale = (node, selection) => { */ const setSelection = (node, selection) => { try { - if (isSelectionStale(node, selection)) { + if (node != null && selection != null && isSelectionStale(node, selection)) { const { start, end } = selection; // workaround for Blink on Android: see https://github.com/text-mask/text-mask/issues/300 if (isAndroid) { @@ -66,90 +64,13 @@ const setSelection = (node, selection) => { } catch (e) {} }; -class TextInput extends Component<*> { +class TextInput extends React.Component { _node: HTMLInputElement; _nodeHeight: number; _nodeWidth: number; static displayName = 'TextInput'; - static propTypes = { - ...ViewPropTypes, - autoCapitalize: oneOf(['characters', 'none', 'sentences', 'words']), - autoComplete: string, - autoCorrect: bool, - autoFocus: bool, - blurOnSubmit: bool, - clearTextOnFocus: bool, - defaultValue: string, - editable: bool, - inputAccessoryViewID: string, - keyboardType: oneOf([ - 'default', - 'email-address', - 'number-pad', - 'numbers-and-punctuation', - 'numeric', - 'phone-pad', - 'search', - 'url', - 'web-search' - ]), - maxFontSizeMultiplier: number, - maxLength: number, - multiline: bool, - numberOfLines: number, - onBlur: func, - onChange: func, - onChangeText: func, - onFocus: func, - onKeyPress: func, - onSelectionChange: func, - onSubmitEditing: func, - placeholder: string, - placeholderTextColor: ColorPropType, - returnKeyType: oneOf(['enter', 'done', 'go', 'next', 'previous', 'search', 'send']), - secureTextEntry: bool, - selectTextOnFocus: bool, - selection: shape({ - start: number.isRequired, - end: number - }), - spellCheck: bool, - style: StyleSheetPropType(TextInputStylePropTypes), - value: string, - /* react-native compat */ - /* eslint-disable */ - caretHidden: bool, - clearButtonMode: string, - dataDetectorTypes: string, - disableFullscreenUI: bool, - enablesReturnKeyAutomatically: bool, - keyboardAppearance: string, - inlineImageLeft: string, - inlineImagePadding: number, - onContentSizeChange: func, - onEndEditing: func, - onScroll: func, - returnKeyLabel: string, - selectionColor: ColorPropType, - selectionState: any, - textBreakStrategy: string, - underlineColorAndroid: ColorPropType - /* eslint-enable */ - }; - - static defaultProps = { - autoCapitalize: 'sentences', - autoComplete: 'on', - autoCorrect: true, - editable: true, - keyboardType: 'default', - multiline: false, - numberOfLines: 1, - secureTextEntry: false - }; - static State = TextInputState; clear() { @@ -173,56 +94,21 @@ class TextInput extends Component<*> { render() { const { - autoComplete, - autoCorrect, - editable, - keyboardType, - multiline, - numberOfLines, + autoCapitalize = 'sentences', + autoComplete = 'on', + autoCorrect = true, + autoFocus, + defaultValue, + editable = true, + keyboardType = 'default', + maxLength, + multiline = false, + numberOfLines = 1, + placeholder, returnKeyType, - secureTextEntry, - /* eslint-disable */ - blurOnSubmit, - clearTextOnFocus, - onChangeText, - onLayout, - onSelectionChange, - onSubmitEditing, - selection, - selectTextOnFocus, + secureTextEntry = false, spellCheck, - /* react-native compat */ - accessibilityViewIsModal, - allowFontScaling, - caretHidden, - clearButtonMode, - dataDetectorTypes, - disableFullscreenUI, - enablesReturnKeyAutomatically, - hitSlop, - inlineImageLeft, - inlineImagePadding, - inputAccessoryViewID, - keyboardAppearance, - maxFontSizeMultiplier, - needsOffscreenAlphaCompositing, - onAccessibilityTap, - onContentSizeChange, - onEndEditing, - onMagicTap, - onScroll, - removeClippedSubviews, - renderToHardwareTextureAndroid, - returnKeyLabel, - scrollEnabled, - selectionColor, - selectionState, - shouldRasterizeIOS, - textBreakStrategy, - textContentType, - underlineColorAndroid, - /* eslint-enable */ - ...otherProps + value } = this.props; let type; @@ -254,33 +140,40 @@ class TextInput extends Component<*> { } const component = multiline ? 'textarea' : 'input'; + const supportedProps = filterSupportedProps(this.props); - Object.assign(otherProps, { + Object.assign(supportedProps, { + autoCapitalize, // Browser's treat autocomplete "off" as "on" // https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164 autoComplete: autoComplete === 'off' ? 'noop' : autoComplete, autoCorrect: autoCorrect ? 'on' : 'off', + autoFocus, classList: [classes.textinput], + defaultValue, dir: 'auto', enterkeyhint: returnKeyType, + maxLength, onBlur: normalizeEventHandler(this._handleBlur), onChange: normalizeEventHandler(this._handleChange), onFocus: normalizeEventHandler(this._handleFocus), onKeyDown: this._handleKeyDown, onKeyPress: this._handleKeyPress, onSelect: normalizeEventHandler(this._handleSelectionChange), + placeholder, readOnly: !editable, ref: this._setNode, - spellCheck: spellCheck != null ? spellCheck : autoCorrect + spellCheck: spellCheck != null ? spellCheck : autoCorrect, + value }); if (multiline) { - otherProps.rows = numberOfLines; + supportedProps.rows = numberOfLines; } else { - otherProps.type = type; + supportedProps.type = type; } - return createElement(component, otherProps); + return createElement(component, supportedProps); } _handleBlur = e => { diff --git a/packages/react-native-web/src/exports/TextInput/types.js b/packages/react-native-web/src/exports/TextInput/types.js new file mode 100644 index 00000000..df5dbf7e --- /dev/null +++ b/packages/react-native-web/src/exports/TextInput/types.js @@ -0,0 +1,67 @@ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import type { ColorValue, GenericStyleProp } from '../../types'; +import type { TextStyle } from '../Text/types'; +import type { ViewProps } from '../View/types'; + +export type TextInputStyle = { + ...TextStyle, + caretColor?: ColorValue, + resize?: 'none' | 'vertical' | 'horizontal' | 'both' +}; + +export type TextInputProps = { + ...ViewProps, + autoCapitalize?: 'characters' | 'none' | 'sentences' | 'words', + autoComplete?: string, + autoCorrect?: boolean, + autoFocus?: boolean, + blurOnSubmit?: boolean, + clearTextOnFocus?: boolean, + defaultValue?: string, + editable?: boolean, + inputAccessoryViewID?: string, + keyboardType?: + | 'default' + | 'email-address' + | 'number-pad' + | 'numbers-and-punctuation' + | 'numeric' + | 'phone-pad' + | 'search' + | 'url' + | 'web-search', + maxLength?: number, + multiline?: boolean, + numberOfLines?: number, + onBlur?: (e: any) => void, + onChange?: (e: any) => void, + onChangeText?: (e: string) => void, + onContentSizeChange?: (e: any) => void, + onEndEditing?: (e: any) => void, + onFocus?: (e: any) => void, + onKeyPress?: (e: any) => void, + onSelectionChange?: (e: any) => void, + onScroll?: (e: any) => void, + onSubmitEditing?: (e: any) => void, + placeholder?: string, + placeholderTextColor?: ColorValue, + returnKeyType?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send', + secureTextEntry?: boolean, + selectTextOnFocus?: boolean, + selection?: {| + start: number, + end?: number + |}, + selectionColor?: ColorValue, + spellCheck?: boolean, + style?: GenericStyleProp, + value?: string +}; diff --git a/packages/react-native-web/src/exports/TextPropTypes/index.js b/packages/react-native-web/src/exports/TextPropTypes/index.js deleted file mode 100644 index 8ec811db..00000000 --- a/packages/react-native-web/src/exports/TextPropTypes/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import TextPropTypes from '../Text/TextPropTypes'; -export default TextPropTypes; diff --git a/packages/react-native-web/src/exports/Touchable/index.js b/packages/react-native-web/src/exports/Touchable/index.js index 3ca72e1a..1b995442 100644 --- a/packages/react-native-web/src/exports/Touchable/index.js +++ b/packages/react-native-web/src/exports/Touchable/index.js @@ -1,5 +1,3 @@ -/* eslint-disable react/prop-types */ - /** * Copyright (c) Facebook, Inc. and its affiliates. * diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js index 23a1cd89..18c7c0f9 100644 --- a/packages/react-native-web/src/exports/TouchableHighlight/index.js +++ b/packages/react-native-web/src/exports/TouchableHighlight/index.js @@ -9,19 +9,15 @@ */ 'use strict'; +import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback'; + import applyNativeMethods from '../../modules/applyNativeMethods'; -import DeprecatedColorPropType from '../ColorPropType'; import createReactClass from 'create-react-class'; import ensurePositiveDelayProps from '../Touchable/ensurePositiveDelayProps'; import * as React from 'react'; import StyleSheet from '../StyleSheet'; import Touchable from '../Touchable'; -import TouchableWithoutFeedback, { - type Props as TouchableWithoutFeedbackProps -} from '../TouchableWithoutFeedback'; import View from '../View'; -import DeprecatedViewPropTypes from '../ViewPropTypes'; -import PropTypes from 'prop-types'; type Event = Object; type PressEvent = Object; @@ -36,7 +32,6 @@ const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 }; type Props = $ReadOnly<{| ...TouchableWithoutFeedbackProps, - activeOpacity?: ?number, underlayColor?: ?any, style?: ?any, @@ -145,90 +140,6 @@ type Props = $ReadOnly<{| // eslint-disable-next-line react/prefer-es6-class const TouchableHighlight = ((createReactClass({ displayName: 'TouchableHighlight', - propTypes: { - /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an - * error found when Flow v0.89 was deployed. To see the error, delete this - * comment and run Flow. */ - ...TouchableWithoutFeedback.propTypes, - /** - * Determines what the opacity of the wrapped view should be when touch is - * active. - */ - activeOpacity: PropTypes.number, - /** - * The color of the underlay that will show through when the touch is - * active. - */ - hasTVPreferredFocus: PropTypes.bool, - /** - * Style to apply to the container/underlay. Most commonly used to make sure - * rounded corners match the wrapped component. - */ - nextFocusDown: PropTypes.number, - /** - * Called immediately after the underlay is shown - */ - nextFocusForward: PropTypes.number, - /** - * Called immediately after the underlay is hidden - */ - nextFocusLeft: PropTypes.number, - /** - * *(Apple TV only)* TV preferred focus (see documentation for the View component). - * - * @platform ios - */ - nextFocusRight: PropTypes.number, - /** - * TV next focus down (see documentation for the View component). - * - * @platform android - */ - nextFocusUp: PropTypes.number, - /** - * TV next focus forward (see documentation for the View component). - * - * @platform android - */ - onHideUnderlay: PropTypes.func, - /** - * TV next focus left (see documentation for the View component). - * - * @platform android - */ - onShowUnderlay: PropTypes.func, - /** - * TV next focus right (see documentation for the View component). - * - * @platform android - */ - style: DeprecatedViewPropTypes.style, - /** - * TV next focus up (see documentation for the View component). - * - * @platform android - */ - testOnly_pressed: PropTypes.bool, - /** - * *(Apple TV only)* Object with properties to control Apple TV parallax effects. - * - * enabled: If true, parallax effects are enabled. Defaults to true. - * shiftDistanceX: Defaults to 2.0. - * shiftDistanceY: Defaults to 2.0. - * tiltAngle: Defaults to 0.05. - * magnification: Defaults to 1.0. - * pressMagnification: Defaults to 1.0. - * pressDuration: Defaults to 0.3. - * pressDelay: Defaults to 0.0. - * - * @platform ios - */ - tvParallaxProperties: PropTypes.object, - /** - * Handy for snapshot tests. - */ - underlayColor: DeprecatedColorPropType - }, mixins: [Touchable.Mixin.withoutDefaultFocusAndBlur], diff --git a/packages/react-native-web/src/exports/TouchableOpacity/index.js b/packages/react-native-web/src/exports/TouchableOpacity/index.js index 1bd1824f..3222a303 100644 --- a/packages/react-native-web/src/exports/TouchableOpacity/index.js +++ b/packages/react-native-web/src/exports/TouchableOpacity/index.js @@ -10,16 +10,14 @@ 'use strict'; +import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback'; + import applyNativeMethods from '../../modules/applyNativeMethods'; import createReactClass from 'create-react-class'; import ensurePositiveDelayProps from '../Touchable/ensurePositiveDelayProps'; -import PropTypes from 'prop-types'; import * as React from 'react'; import StyleSheet from '../StyleSheet'; import Touchable from '../Touchable'; -import TouchableWithoutFeedback, { - type Props as TouchableWithoutFeedbackProps -} from '../TouchableWithoutFeedback'; import View from '../View'; const flattenStyle = StyleSheet.flatten; @@ -129,56 +127,6 @@ const TouchableOpacity = ((createReactClass({ displayName: 'TouchableOpacity', mixins: [Touchable.Mixin.withoutDefaultFocusAndBlur], - propTypes: { - /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an - * error found when Flow v0.89 was deployed. To see the error, delete this - * comment and run Flow. */ - ...TouchableWithoutFeedback.propTypes, - /** - * Determines what the opacity of the wrapped view should be when touch is - * active. Defaults to 0.2. - */ - activeOpacity: PropTypes.number, - /** - * TV preferred focus (see documentation for the View component). - */ - hasTVPreferredFocus: PropTypes.bool, - /** - * TV next focus down (see documentation for the View component). - * - * @platform android - */ - nextFocusDown: PropTypes.number, - /** - * TV next focus forward (see documentation for the View component). - * - * @platform android - */ - nextFocusForward: PropTypes.number, - /** - * TV next focus left (see documentation for the View component). - * - * @platform android - */ - nextFocusLeft: PropTypes.number, - /** - * TV next focus right (see documentation for the View component). - * - * @platform android - */ - nextFocusRight: PropTypes.number, - /** - * TV next focus up (see documentation for the View component). - * - * @platform android - */ - nextFocusUp: PropTypes.number, - /** - * Apple TV parallax effects - */ - tvParallaxProperties: PropTypes.object - }, - getDefaultProps: function() { return { activeOpacity: 0.2 diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js index da6c834f..2091672b 100644 --- a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js +++ b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js @@ -11,10 +11,8 @@ 'use strict'; import createReactClass from 'create-react-class'; -import DeprecatedEdgeInsetsPropType from '../EdgeInsetsPropType'; import ensurePositiveDelayProps from '../Touchable/ensurePositiveDelayProps'; import * as React from 'react'; -import PropTypes from 'prop-types'; import Touchable from '../Touchable'; import View from '../View'; @@ -79,90 +77,6 @@ const TouchableWithoutFeedback = ((createReactClass({ displayName: 'TouchableWithoutFeedback', mixins: [Touchable.Mixin], - propTypes: { - accessibilityHint: PropTypes.string, - accessibilityIgnoresInvertColors: PropTypes.bool, - accessibilityLabel: PropTypes.node, - accessibilityRole: PropTypes.string, - accessibilityState: PropTypes.object, - accessible: PropTypes.bool, - /** - * When `accessible` is true (which is the default) this may be called when - * the OS-specific concept of "focus" occurs. Some platforms may not have - * the concept of focus. - */ - delayLongPress: PropTypes.number, - /** - * When `accessible` is true (which is the default) this may be called when - * the OS-specific concept of "blur" occurs, meaning the element lost focus. - * Some platforms may not have the concept of blur. - */ - delayPressIn: PropTypes.number, - /** - * If true, disable all interactions for this component. - */ - delayPressOut: PropTypes.number, - /** - * Called when the touch is released, but not if cancelled (e.g. by a scroll - * that steals the responder lock). - */ - disabled: PropTypes.bool, - /** - * Called as soon as the touchable element is pressed and invoked even before onPress. - * This can be useful when making network requests. - */ - hitSlop: DeprecatedEdgeInsetsPropType, - /** - * Called as soon as the touch is released even before onPress. - */ - nativeID: PropTypes.string, - /** - * Invoked on mount and layout changes with - * - * `{nativeEvent: {layout: {x, y, width, height}}}` - */ - onBlur: PropTypes.func, - /** - * If true, doesn't play system sound on touch (Android Only) - **/ - onFocus: PropTypes.func, - - onLayout: PropTypes.func, - - onLongPress: PropTypes.func, - onPress: PropTypes.func, - - /** - * Delay in ms, from the start of the touch, before onPressIn is called. - */ - onPressIn: PropTypes.func, - /** - * Delay in ms, from the release of the touch, before onPressOut is called. - */ - onPressOut: PropTypes.func, - /** - * Delay in ms, from onPressIn, before onLongPress is called. - */ - pressRetentionOffset: DeprecatedEdgeInsetsPropType, - /** - * When the scroll view is disabled, this defines how far your touch may - * move off of the button, before deactivating the button. Once deactivated, - * try moving it back and you'll see that the button is once again - * reactivated! Move it back and forth several times while the scroll view - * is disabled. Ensure you pass in a constant to reduce memory allocations. - */ - testID: PropTypes.string, - /** - * This defines how far your touch can start away from the button. This is - * added to `pressRetentionOffset` when moving off of the button. - * ** NOTE ** - * The touch area never extends past the parent view bounds and the Z-index - * of sibling views always takes precedence if a touch hits two overlapping - * views. - */ - touchSoundDisabled: PropTypes.bool - }, - getInitialState: function() { return this.touchableGetInitialState(); }, @@ -219,7 +133,7 @@ const TouchableWithoutFeedback = ((createReactClass({ render: function(): React.Element { // Note(avik): remove dynamic typecast once Flow has been upgraded // $FlowFixMe(>=0.41.0) - // eslint-disable-next-line react/prop-types + // eslint-disable-next-line const child = React.Children.only(this.props.children); let children = child.props.children; if (Touchable.TOUCH_TARGET_DEBUG && child.type === View) { diff --git a/packages/react-native-web/src/exports/View/ViewPropTypes.js b/packages/react-native-web/src/exports/View/ViewPropTypes.js deleted file mode 100644 index b6494b92..00000000 --- a/packages/react-native-web/src/exports/View/ViewPropTypes.js +++ /dev/null @@ -1,170 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import EdgeInsetsPropType, { type EdgeInsetsProp } from '../EdgeInsetsPropType'; -import StyleSheetPropType from '../../modules/StyleSheetPropType'; -import ViewStylePropTypes from './ViewStylePropTypes'; -import { any, bool, func, object, oneOf, string } from 'prop-types'; -import { type StyleObj } from '../StyleSheet/StyleSheetTypes'; - -const stylePropType = StyleSheetPropType(ViewStylePropTypes); - -export type ViewLayout = { - x: number, - y: number, - width: number, - height: number -}; - -export type ViewLayoutEvent = { - nativeEvent: { - layout: ViewLayout - } -}; - -export type ViewProps = { - accessibilityComponentType?: string, - accessibilityLabel?: string, - accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', - accessibilityRelationship?: { - activedescendant?: ?string, - controls?: ?string, - describedby?: ?string, - details?: ?string, - haspopup?: ?string, - labelledby?: ?string, - owns?: ?string - }, - accessibilityRole?: string, - accessibilityState?: { - busy?: ?boolean, - checked?: ?boolean | 'mixed', - disabled?: ?boolean, - expanded?: ?boolean, - grabbed?: ?boolean, - hidden?: ?boolean, - invalid?: ?boolean, - modal?: ?boolean, - pressed?: ?boolean, - readonly?: ?boolean, - required?: ?boolean, - selected?: ?boolean - }, - accessible?: boolean, - children?: any, - className?: string, - forwardedRef?: any, - hitSlop?: EdgeInsetsProp, - importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants', - nativeID?: string, - onBlur?: Function, - onClick?: Function, - onClickCapture?: Function, - onFocus?: Function, - onLayout?: (event: ViewLayoutEvent) => void, - onResponderGrant?: Function, - onResponderMove?: Function, - onResponderReject?: Function, - onResponderRelease?: Function, - onResponderTerminate?: Function, - onResponderTerminationRequest?: Function, - onStartShouldSetResponder?: Function, - onStartShouldSetResponderCapture?: Function, - onMoveShouldSetResponder?: Function, - onMoveShouldSetResponderCapture?: Function, - onTouchCancel?: Function, - onTouchCancelCapture?: Function, - onTouchEnd?: Function, - onTouchEndCapture?: Function, - onTouchMove?: Function, - onTouchMoveCapture?: Function, - onTouchStart?: Function, - onTouchStartCapture?: Function, - pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto', - style?: StyleObj, - testID?: string, - // web extensions - onContextMenu?: Function, - itemID?: string, - itemRef?: string, - itemProp?: string, - itemScope?: string, - itemType?: string, - // compatibility with React Native - accessibilityViewIsModal?: boolean, - collapsable?: boolean, - needsOffscreenAlphaCompositing?: boolean, - onAccessibilityTap?: Function, - onMagicTap?: Function, - removeClippedSubviews?: boolean, - renderToHardwareTextureAndroid?: boolean, - shouldRasterizeIOS?: boolean, - tvParallaxProperties?: {} -}; - -const ViewPropTypes = { - accessibilityComponentType: string, - accessibilityLabel: string, - accessibilityLiveRegion: oneOf(['assertive', 'none', 'polite']), - accessibilityRelationship: object, - accessibilityRole: string, - accessibilityState: object, - accessible: bool, - children: any, - forwardedRef: any, - hitSlop: EdgeInsetsPropType, - importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']), - nativeID: string, - onBlur: func, - onClick: func, - onClickCapture: func, - onFocus: 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: stylePropType, - testID: string, - // web extensions - onContextMenu: func, - itemID: string, - itemRef: string, - itemProp: string, - itemScope: string, - itemType: string, - // compatibility with React Native - accessibilityViewIsModal: bool, - collapsable: bool, - needsOffscreenAlphaCompositing: bool, - onAccessibilityTap: func, - onMagicTap: func, - removeClippedSubviews: bool, - renderToHardwareTextureAndroid: bool, - shouldRasterizeIOS: bool, - tvParallaxProperties: object -}; - -export default ViewPropTypes; diff --git a/packages/react-native-web/src/exports/View/ViewStylePropTypes.js b/packages/react-native-web/src/exports/View/ViewStylePropTypes.js deleted file mode 100644 index dc23e86f..00000000 --- a/packages/react-native-web/src/exports/View/ViewStylePropTypes.js +++ /dev/null @@ -1,65 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import AnimationPropTypes from '../../modules/AnimationPropTypes'; -import BorderPropTypes from '../../modules/BorderPropTypes'; -import ColorPropType from '../ColorPropType'; -import InteractionPropTypes from '../../modules/InteractionPropTypes'; -import LayoutPropTypes from '../../modules/LayoutPropTypes'; -import ShadowPropTypes from '../../modules/ShadowPropTypes'; -import TransformPropTypes from '../../modules/TransformPropTypes'; -import { number, oneOf, oneOfType, string } from 'prop-types'; - -const stringOrNumber = oneOfType([string, number]); -const overscrollBehaviorType = oneOf(['auto', 'contain', 'none']); - -const ViewStylePropTypes = { - ...AnimationPropTypes, - ...BorderPropTypes, - ...InteractionPropTypes, - ...LayoutPropTypes, - ...ShadowPropTypes, - ...TransformPropTypes, - backgroundColor: ColorPropType, - opacity: number, - /** - * @platform unsupported - */ - elevation: number, - /** - * @platform web - */ - backdropFilter: string, - backgroundAttachment: string, - backgroundBlendMode: string, - backgroundClip: string, - backgroundImage: string, - backgroundOrigin: oneOf(['border-box', 'content-box', 'padding-box']), - backgroundPosition: string, - backgroundRepeat: string, - backgroundSize: string, - boxShadow: string, - clip: string, - filter: string, - outlineColor: ColorPropType, - outlineOffset: stringOrNumber, - outlineStyle: string, - outlineWidth: stringOrNumber, - overscrollBehavior: overscrollBehaviorType, - overscrollBehaviorX: overscrollBehaviorType, - overscrollBehaviorY: overscrollBehaviorType, - scrollbarWidth: oneOf(['auto', 'none']), - scrollSnapAlign: string, - scrollSnapType: string, - WebkitMaskImage: string, - WebkitOverflowScrolling: oneOf(['auto', 'touch']) -}; - -export default ViewStylePropTypes; diff --git a/packages/react-native-web/src/exports/View/filterSupportedProps.js b/packages/react-native-web/src/exports/View/filterSupportedProps.js index dcd2f22f..233e1fca 100644 --- a/packages/react-native-web/src/exports/View/filterSupportedProps.js +++ b/packages/react-native-web/src/exports/View/filterSupportedProps.js @@ -63,7 +63,6 @@ const supportedProps = { onMouseOut: true, onMouseUp: true, // unstable escape-hatches for web - className: true, href: true, itemID: true, itemRef: true, diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js index c4d3cc34..0df60a94 100644 --- a/packages/react-native-web/src/exports/View/index.js +++ b/packages/react-native-web/src/exports/View/index.js @@ -8,17 +8,19 @@ * @flow */ +import type { ViewProps } from './types'; + import applyLayout from '../../modules/applyLayout'; import applyNativeMethods from '../../modules/applyNativeMethods'; import createElement from '../createElement'; import css from '../StyleSheet/css'; import filterSupportedProps from './filterSupportedProps'; import invariant from 'fbjs/lib/invariant'; -import warning from 'fbjs/lib/warning'; import StyleSheet from '../StyleSheet'; import TextAncestorContext from '../Text/TextAncestorContext'; -import ViewPropTypes, { type ViewProps } from './ViewPropTypes'; -import React, { Component } from 'react'; +import React from 'react'; + +export type { ViewProps }; const calculateHitSlopStyle = hitSlop => { const hitStyle = {}; @@ -31,18 +33,14 @@ const calculateHitSlopStyle = hitSlop => { return hitStyle; }; -class View extends Component { +class View extends React.Component { static displayName = 'View'; - static propTypes = ViewPropTypes; - renderView(hasTextAncestor) { const hitSlop = this.props.hitSlop; const supportedProps = filterSupportedProps(this.props); if (process.env.NODE_ENV !== 'production') { - warning(this.props.className == null, 'Using the "className" prop on is deprecated.'); - React.Children.toArray(this.props.children).forEach(item => { invariant( typeof item !== 'string', @@ -51,7 +49,7 @@ class View extends Component { }); } - supportedProps.classList = [this.props.className, classes.view]; + supportedProps.classList = [classes.view]; supportedProps.ref = this.props.forwardedRef; supportedProps.style = StyleSheet.compose( hasTextAncestor && styles.inline, diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js new file mode 100644 index 00000000..18e4c115 --- /dev/null +++ b/packages/react-native-web/src/exports/View/types.js @@ -0,0 +1,125 @@ +/** + * Copyright (c) Nicolas Gallagher. + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import type { ColorValue, EdgeInsetsValue, GenericStyleProp, LayoutEvent } from '../../types'; + +import type { + AnimationStyles, + BorderStyles, + InteractionStyles, + LayoutStyles, + ShadowStyles, + TransformStyles +} from '../../types/styles'; + +type OverscrollBehaviorValue = 'auto' | 'contain' | 'none'; + +export type ViewStyle = { + ...AnimationStyles, + ...BorderStyles, + ...InteractionStyles, + ...LayoutStyles, + ...ShadowStyles, + ...TransformStyles, + backdropFilter?: string, + backgroundAttachment?: string, + backgroundBlendMode?: string, + backgroundClip?: string, + backgroundColor?: ColorValue, + backgroundImage?: string, + backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box', + backgroundPosition?: string, + backgroundRepeat?: string, + backgroundSize?: string, + boxShadow?: string, + clip?: string, + filter?: string, + opacity?: number, + outlineColor?: ColorValue, + outlineOffset?: string | number, + outlineStyle?: string, + outlineWidth?: string | number, + overscrollBehavior?: OverscrollBehaviorValue, + overscrollBehaviorX?: OverscrollBehaviorValue, + overscrollBehaviorY?: OverscrollBehaviorValue, + scrollbarWidth?: 'auto' | 'none', + scrollSnapAlign?: string, + scrollSnapType?: string, + WebkitMaskImage?: string, + WebkitOverflowScrolling?: 'auto' | 'touch' +}; + +export type ViewProps = { + accessibilityLabel?: string, + accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', + accessibilityRelationship?: { + activedescendant?: ?string, + controls?: ?string, + describedby?: ?string, + details?: ?string, + haspopup?: ?string, + labelledby?: ?string, + owns?: ?string + }, + accessibilityRole?: string, + accessibilityState?: { + busy?: ?boolean, + checked?: ?boolean | 'mixed', + disabled?: ?boolean, + expanded?: ?boolean, + grabbed?: ?boolean, + hidden?: ?boolean, + invalid?: ?boolean, + modal?: ?boolean, + pressed?: ?boolean, + readonly?: ?boolean, + required?: ?boolean, + selected?: ?boolean + }, + accessible?: boolean, + children?: any, + forwardedRef?: any, + hitSlop?: EdgeInsetsValue, + importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants', + nativeID?: string, + onBlur?: (e: any) => void, + onClick?: (e: any) => void, + onClickCapture?: (e: any) => void, + onFocus?: (e: any) => void, + onLayout?: (e: LayoutEvent) => void, + onResponderGrant?: (e: any) => void, + onResponderMove?: (e: any) => void, + onResponderReject?: (e: any) => void, + onResponderRelease?: (e: any) => void, + onResponderTerminate?: (e: any) => void, + onResponderTerminationRequest?: (e: any) => void, + onStartShouldSetResponder?: (e: any) => boolean, + onStartShouldSetResponderCapture?: (e: any) => boolean, + onMoveShouldSetResponder?: (e: any) => boolean, + onMoveShouldSetResponderCapture?: (e: any) => boolean, + onTouchCancel?: (e: any) => void, + onTouchCancelCapture?: (e: any) => void, + onTouchEnd?: (e: any) => void, + onTouchEndCapture?: (e: any) => void, + onTouchMove?: (e: any) => void, + onTouchMoveCapture?: (e: any) => void, + onTouchStart?: (e: any) => void, + onTouchStartCapture?: (e: any) => void, + pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto', + style?: GenericStyleProp, + testID?: string, + // web extensions + onContextMenu?: (e: any) => void, + itemID?: string, + itemRef?: string, + itemProp?: string, + itemScope?: string, + itemType?: string +}; diff --git a/packages/react-native-web/src/exports/ViewPropTypes/index.js b/packages/react-native-web/src/exports/ViewPropTypes/index.js deleted file mode 100644 index b33cb585..00000000 --- a/packages/react-native-web/src/exports/ViewPropTypes/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import ViewPropTypes, { - type ViewProps, - type ViewLayout, - type ViewLayoutEvent -} from '../View/ViewPropTypes'; -export type { ViewProps, ViewLayout, ViewLayoutEvent }; -export default ViewPropTypes; diff --git a/packages/react-native-web/src/index.js b/packages/react-native-web/src/index.js index 188f518a..371fe0cd 100644 --- a/packages/react-native-web/src/index.js +++ b/packages/react-native-web/src/index.js @@ -4,8 +4,6 @@ import processColor from './exports/processColor'; import render from './exports/render'; import unmountComponentAtNode from './exports/unmountComponentAtNode'; import NativeModules from './exports/NativeModules'; -import TextPropTypes from './exports/TextPropTypes'; -import ViewPropTypes from './exports/ViewPropTypes'; // APIs import AccessibilityInfo from './exports/AccessibilityInfo'; @@ -60,11 +58,6 @@ import View from './exports/View'; import VirtualizedList from './exports/VirtualizedList'; import YellowBox from './exports/YellowBox'; -// propTypes -import ColorPropType from './exports/ColorPropType'; -import EdgeInsetsPropType from './exports/EdgeInsetsPropType'; -import PointPropType from './exports/PointPropType'; - // compat (components) import DrawerLayoutAndroid from './exports/DrawerLayoutAndroid'; import InputAccessoryView from './exports/InputAccessoryView'; @@ -89,8 +82,6 @@ export { // modules processColor, NativeModules, - TextPropTypes, - ViewPropTypes, // APIs AccessibilityInfo, Alert, @@ -142,10 +133,6 @@ export { View, VirtualizedList, YellowBox, - // propTypes - ColorPropType, - EdgeInsetsPropType, - PointPropType, // compat (components) DrawerLayoutAndroid, InputAccessoryView, diff --git a/packages/react-native-web/src/modules/AnimationPropTypes/index.js b/packages/react-native-web/src/modules/AnimationPropTypes/index.js deleted file mode 100644 index 4bf5be92..00000000 --- a/packages/react-native-web/src/modules/AnimationPropTypes/index.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import { arrayOf, number, object, oneOf, oneOfType, string } from 'prop-types'; - -const animationDirectionEnum = ['alternate', 'alternate-reverse', 'normal', 'reverse']; -const animationFillModeEnum = ['none', 'forwards', 'backwards', 'both']; -const animationPlayStateEnum = ['paused', 'running']; - -const AnimationPropTypes = { - animationDelay: oneOfType([string, arrayOf(string)]), - animationDirection: oneOfType([oneOf(animationDirectionEnum), arrayOf(animationDirectionEnum)]), - animationDuration: oneOfType([string, arrayOf(string)]), - animationFillMode: oneOfType([oneOf(animationFillModeEnum), arrayOf(animationFillModeEnum)]), - animationIterationCount: oneOfType([ - number, - oneOf(['infinite']), - arrayOf(oneOfType([number, oneOf(['infinite'])])) - ]), - animationKeyframes: oneOfType([string, object, arrayOf(oneOfType([string, object]))]), - animationPlayState: oneOfType([oneOf(animationPlayStateEnum), arrayOf(animationPlayStateEnum)]), - animationTimingFunction: oneOfType([string, arrayOf(string)]), - transitionDelay: oneOfType([string, arrayOf(string)]), - transitionDuration: oneOfType([string, arrayOf(string)]), - transitionProperty: oneOfType([string, arrayOf(string)]), - transitionTimingFunction: oneOfType([string, arrayOf(string)]) -}; - -export default AnimationPropTypes; diff --git a/packages/react-native-web/src/modules/BorderPropTypes/index.js b/packages/react-native-web/src/modules/BorderPropTypes/index.js deleted file mode 100644 index bb13f0d1..00000000 --- a/packages/react-native-web/src/modules/BorderPropTypes/index.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import ColorPropType from '../../exports/ColorPropType'; -import { number, oneOf, oneOfType, string } from 'prop-types'; - -const numberOrString = oneOfType([number, string]); -const BorderStylePropType = oneOf(['solid', 'dotted', 'dashed']); - -const BorderPropTypes = { - borderColor: ColorPropType, - borderBottomColor: ColorPropType, - borderEndColor: ColorPropType, - borderLeftColor: ColorPropType, - borderRightColor: ColorPropType, - borderStartColor: ColorPropType, - borderTopColor: ColorPropType, - borderRadius: numberOrString, - borderBottomEndRadius: numberOrString, - borderBottomLeftRadius: numberOrString, - borderBottomRightRadius: numberOrString, - borderBottomStartRadius: numberOrString, - borderTopEndRadius: numberOrString, - borderTopLeftRadius: numberOrString, - borderTopRightRadius: numberOrString, - borderTopStartRadius: numberOrString, - borderStyle: BorderStylePropType, - borderBottomStyle: BorderStylePropType, - borderEndStyle: BorderStylePropType, - borderLeftStyle: BorderStylePropType, - borderRightStyle: BorderStylePropType, - borderStartStyle: BorderStylePropType, - borderTopStyle: BorderStylePropType -}; - -export default BorderPropTypes; diff --git a/packages/react-native-web/src/modules/InteractionPropTypes/index.js b/packages/react-native-web/src/modules/InteractionPropTypes/index.js deleted file mode 100644 index 023f1735..00000000 --- a/packages/react-native-web/src/modules/InteractionPropTypes/index.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import { oneOf, oneOfType, string } from 'prop-types'; - -const cursorEnum = [ - 'auto', - 'default', - 'none', - 'context-menu', - 'help', - 'pointer', - 'progress', - 'wait', - 'cell', - 'crosshair', - 'text', - 'vertical-text', - 'alias', - 'copy', - 'move', - 'no-drop', - 'not-allowed', - 'e-resize', - 'n-resize', - 'ne-resize', - 'nw-resize', - 's-resize', - 'se-resize', - 'sw-resize', - 'w-resize', - 'ew-resize', - 'ns-resize', - 'nesw-resize', - 'nwse-resize', - 'col-resize', - 'row-resize', - 'all-scroll', - 'zoom-in', - 'zoom-out', - 'grab', - 'grabbing ' -]; -const touchActionEnum = [ - 'auto', - 'inherit', - 'manipulation', - 'none', - 'pan-down', - 'pan-left', - 'pan-right', - 'pan-up', - 'pan-x', - 'pan-y', - 'pinch-zoom' -]; -const userSelectEnum = ['auto', 'text', 'none', 'contain', 'all']; - -const InteractionPropTypes = { - // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Formal_syntax - cursor: oneOfType([string, oneOf(cursorEnum)]), - // https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Formal_syntax - touchAction: oneOf(touchActionEnum), - // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Formal_syntax_2 - userSelect: oneOf(userSelectEnum), - willChange: string -}; - -export default InteractionPropTypes; diff --git a/packages/react-native-web/src/modules/LayoutPropTypes/index.js b/packages/react-native-web/src/modules/LayoutPropTypes/index.js deleted file mode 100644 index 1d3c86dc..00000000 --- a/packages/react-native-web/src/modules/LayoutPropTypes/index.js +++ /dev/null @@ -1,109 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import { number, oneOf, oneOfType, string } from 'prop-types'; -const OverflowPropType = oneOf(['auto', 'hidden', 'scroll', 'visible']); -const hiddenOrVisible = oneOf(['hidden', 'visible']); -const numberOrString = oneOfType([number, string]); - -const LayoutPropTypes = { - alignContent: oneOf([ - 'center', - 'flex-end', - 'flex-start', - 'space-around', - 'space-between', - 'stretch' - ]), - alignItems: oneOf(['baseline', 'center', 'flex-end', 'flex-start', 'stretch']), - alignSelf: oneOf(['auto', 'baseline', 'center', 'flex-end', 'flex-start', 'stretch']), - backfaceVisibility: hiddenOrVisible, - borderWidth: numberOrString, - borderBottomWidth: numberOrString, - borderEndWidth: numberOrString, - borderLeftWidth: numberOrString, - borderRightWidth: numberOrString, - borderStartWidth: numberOrString, - borderTopWidth: numberOrString, - bottom: numberOrString, - boxSizing: string, - direction: oneOf(['inherit', 'ltr', 'rtl']), - display: string, - end: numberOrString, - flex: number, - flexBasis: numberOrString, - flexDirection: oneOf(['column', 'column-reverse', 'row', 'row-reverse']), - flexGrow: number, - flexShrink: number, - flexWrap: oneOf(['nowrap', 'wrap', 'wrap-reverse']), - height: numberOrString, - justifyContent: oneOf([ - 'center', - 'flex-end', - 'flex-start', - 'space-around', - 'space-between', - 'space-evenly' - ]), - left: numberOrString, - margin: numberOrString, - marginBottom: numberOrString, - marginHorizontal: numberOrString, - marginEnd: numberOrString, - marginLeft: numberOrString, - marginRight: numberOrString, - marginStart: numberOrString, - marginTop: numberOrString, - marginVertical: numberOrString, - maxHeight: numberOrString, - maxWidth: numberOrString, - minHeight: numberOrString, - minWidth: numberOrString, - order: number, - overflow: OverflowPropType, - overflowX: OverflowPropType, - overflowY: OverflowPropType, - padding: numberOrString, - paddingBottom: numberOrString, - paddingHorizontal: numberOrString, - paddingEnd: numberOrString, - paddingLeft: numberOrString, - paddingRight: numberOrString, - paddingStart: numberOrString, - paddingTop: numberOrString, - paddingVertical: numberOrString, - position: oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']), - right: numberOrString, - start: numberOrString, - top: numberOrString, - visibility: hiddenOrVisible, - width: numberOrString, - zIndex: number, - /** - * @platform unsupported - */ - aspectRatio: number, - /** - * @platform web - */ - gridAutoColumns: string, - gridAutoFlow: string, - gridAutoRows: string, - gridColumnEnd: string, - gridColumnGap: string, - gridColumnStart: string, - gridRowEnd: string, - gridRowGap: string, - gridRowStart: string, - gridTemplateColumns: string, - gridTemplateRows: string, - gridTemplateAreas: string -}; - -export default LayoutPropTypes; diff --git a/packages/react-native-web/src/modules/ShadowPropTypes/index.js b/packages/react-native-web/src/modules/ShadowPropTypes/index.js deleted file mode 100644 index 7e9c5993..00000000 --- a/packages/react-native-web/src/modules/ShadowPropTypes/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import ColorPropType from '../../exports/ColorPropType'; -import { number, oneOfType, shape, string } from 'prop-types'; -const numberOrString = oneOfType([number, string]); - -const ShadowPropTypes = { - shadowColor: ColorPropType, - shadowOffset: shape({ - width: numberOrString, - height: numberOrString - }), - shadowOpacity: number, - shadowRadius: numberOrString -}; - -export default ShadowPropTypes; diff --git a/packages/react-native-web/src/modules/StyleSheetPropType/index.js b/packages/react-native-web/src/modules/StyleSheetPropType/index.js deleted file mode 100644 index 6ed57b24..00000000 --- a/packages/react-native-web/src/modules/StyleSheetPropType/index.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import createStrictShapeTypeChecker from '../createStrictShapeTypeChecker'; -import StyleSheet from '../../exports/StyleSheet'; - -function StyleSheetPropType(shape: { [key: string]: ReactPropsCheckType }): ReactPropsCheckType { - const shapePropType = createStrictShapeTypeChecker(shape); - return function(props, propName, componentName, location?, ...rest) { - let newProps = props; - if (props[propName]) { - // Just make a dummy prop object with only the flattened style - newProps = {}; - const flatStyle = StyleSheet.flatten(props[propName]); - // Remove custom properties from check - const nextStyle = Object.keys(flatStyle).reduce((acc, curr) => { - if (curr.indexOf('--') !== 0) { - acc[curr] = flatStyle[curr]; - } - return acc; - }, {}); - newProps[propName] = nextStyle; - } - return shapePropType(newProps, propName, componentName, location, ...rest); - }; -} - -export default StyleSheetPropType; diff --git a/packages/react-native-web/src/modules/TransformPropTypes/index.js b/packages/react-native-web/src/modules/TransformPropTypes/index.js deleted file mode 100644 index 387752bb..00000000 --- a/packages/react-native-web/src/modules/TransformPropTypes/index.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import { arrayOf, number, oneOf, oneOfType, shape, string } from 'prop-types'; -const numberOrString = oneOfType([number, string]); - -const TransformPropTypes = { - perspective: oneOfType([number, string]), - perspectiveOrigin: string, - transform: arrayOf( - oneOfType([ - shape({ perspective: numberOrString }), - shape({ rotate: string }), - shape({ rotateX: string }), - shape({ rotateY: string }), - shape({ rotateZ: string }), - shape({ scale: number }), - shape({ scaleX: number }), - shape({ scaleY: number }), - shape({ scaleZ: number }), - shape({ scale3d: string }), - shape({ skewX: string }), - shape({ skewY: string }), - shape({ translateX: numberOrString }), - shape({ translateY: numberOrString }), - shape({ translateZ: numberOrString }), - shape({ translate3d: string }) - ]) - ), - transformOrigin: string, - transformStyle: oneOf(['flat', 'preserve-3d']) -}; - -export default TransformPropTypes; diff --git a/packages/react-native-web/src/modules/UnimplementedView/index.js b/packages/react-native-web/src/modules/UnimplementedView/index.js index f1684bc2..bc765586 100644 --- a/packages/react-native-web/src/modules/UnimplementedView/index.js +++ b/packages/react-native-web/src/modules/UnimplementedView/index.js @@ -8,13 +8,12 @@ */ import View from '../../exports/View'; -import React, { Component } from 'react'; +import React from 'react'; /** * Common implementation for a simple stubbed view. */ -/* eslint-disable react/prop-types */ -class UnimplementedView extends Component<*, *> { +class UnimplementedView extends React.Component<*, *> { setNativeProps() { // Do nothing. // This method is required in order to use this view as a Touchable* child. diff --git a/packages/react-native-web/src/modules/createStrictShapeTypeChecker/index.js b/packages/react-native-web/src/modules/createStrictShapeTypeChecker/index.js deleted file mode 100644 index 657b32f4..00000000 --- a/packages/react-native-web/src/modules/createStrictShapeTypeChecker/index.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import invariant from 'fbjs/lib/invariant'; - -function createStrictShapeTypeChecker(shapeTypes: { - [key: string]: ReactPropsCheckType -}): ReactPropsChainableTypeChecker { - function checkType(isRequired, props, propName, componentName, location?, ...rest) { - if (!props[propName]) { - if (isRequired) { - invariant( - false, - `Required object \`${propName}\` was not specified in \`${componentName}\`.` - ); - } - return; - } - const propValue = props[propName]; - const propType = typeof propValue; - const locationName = location || '(unknown)'; - if (propType !== 'object') { - invariant( - false, - `Invalid ${locationName} \`${propName}\` of type \`${propType}\` ` + - `supplied to \`${componentName}\`, expected \`object\`.` - ); - } - // We need to check all keys in case some are required but missing from - // props. - const allKeys = { ...props[propName], ...shapeTypes }; - for (const key in allKeys) { - const checker = shapeTypes[key]; - if (!checker) { - invariant( - false, - `Invalid props.${propName} key \`${key}\` supplied to \`${componentName}\`.` + - '\nBad object: ' + - JSON.stringify(props[propName], null, ' ') + - '\nValid keys: ' + - JSON.stringify(Object.keys(shapeTypes), null, ' ') - ); - } - const error = checker(propValue, key, componentName, location, ...rest); - if (error) { - invariant( - false, - error.message + '\nBad object: ' + JSON.stringify(props[propName], null, ' ') - ); - } - } - } - function chainedCheckType( - props: { [key: string]: any }, - propName: string, - componentName: string, - location?: string, - ...rest - ): ?Error { - return checkType(false, props, propName, componentName, location, ...rest); - } - chainedCheckType.isRequired = checkType.bind(null, true); - return chainedCheckType; -} - -export default createStrictShapeTypeChecker; diff --git a/packages/react-native-web/src/types/index.js b/packages/react-native-web/src/types/index.js new file mode 100644 index 00000000..3337b99e --- /dev/null +++ b/packages/react-native-web/src/types/index.js @@ -0,0 +1,45 @@ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +export type ColorValue = null | string; + +export type DimensionValue = null | number | string; + +export type EdgeInsetsValue = {| + top: number, + left: number, + right: number, + bottom: number +|}; + +export type GenericStyleProp<+T> = + | null + | void + | T + | false + | '' + | $ReadOnlyArray>; + +export type LayoutValue = { + x: number, + y: number, + width: number, + height: number +}; + +export type LayoutEvent = { + nativeEvent: { + layout: LayoutValue + } +}; + +export type PointValue = {| + x: number, + y: number +|}; diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js new file mode 100644 index 00000000..41739b38 --- /dev/null +++ b/packages/react-native-web/src/types/styles.js @@ -0,0 +1,280 @@ +/** + * Copyright (c) Nicolas Gallagher. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import type { ColorValue, DimensionValue } from './index'; + +type NumberOrString = number | string; + +/** + * Animations and transitions + */ + +type AnimationDirection = 'alternate' | 'alternate-reverse' | 'normal' | 'reverse'; +type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both'; +type AnimationIterationCount = number | 'infinite'; +type AnimationKeyframes = string | Object; +type AnimationPlayState = 'paused' | 'running'; + +export type AnimationStyles = {| + animationDelay?: string | Array, + animationDirection?: AnimationDirection | Array, + animationDuration?: string | Array, + animationFillMode?: AnimationFillMode | Array, + animationIterationCount?: AnimationIterationCount | Array, + animationKeyframes?: AnimationKeyframes | Array, + animationPlayState?: AnimationPlayState | Array, + animationTimingFunction?: string | Array, + transitionDelay?: string | Array, + transitionDuration?: string | Array, + transitionProperty?: string | Array, + transitionTimingFunction?: string | Array +|}; + +/** + * Border + */ + +type BorderRadiusValue = number | string; +type BorderStyleValue = 'solid' | 'dotted' | 'dashed'; + +export type BorderStyles = {| + borderColor?: ColorValue, + borderBottomColor?: ColorValue, + borderEndColor?: ColorValue, + borderLeftColor?: ColorValue, + borderRightColor?: ColorValue, + borderStartColor?: ColorValue, + borderTopColor?: ColorValue, + borderRadius?: BorderRadiusValue, + borderBottomEndRadius?: BorderRadiusValue, + borderBottomLeftRadius?: BorderRadiusValue, + borderBottomRightRadius?: BorderRadiusValue, + borderBottomStartRadius?: BorderRadiusValue, + borderTopEndRadius?: BorderRadiusValue, + borderTopLeftRadius?: BorderRadiusValue, + borderTopRightRadius?: BorderRadiusValue, + borderTopStartRadius?: BorderRadiusValue, + borderStyle?: BorderStyleValue, + borderBottomStyle?: BorderStyleValue, + borderEndStyle?: BorderStyleValue, + borderLeftStyle?: BorderStyleValue, + borderRightStyle?: BorderStyleValue, + borderStartStyle?: BorderStyleValue, + borderTopStyle?: BorderStyleValue +|}; + +/** + * Interactions + */ + +type CursorValue = + | 'alias' + | 'all-scroll' + | 'auto' + | 'cell' + | 'context-menu' + | 'copy' + | 'crosshair' + | 'default' + | 'grab' + | 'grabbing' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'text' + | 'vertical-text' + | 'move' + | 'none' + | 'no-drop' + | 'not-allowed' + | 'zoom-in' + | 'zoom-out' + // resize + | 'col-resize' + | 'e-resize' + | 'ew-resize' + | 'n-resize' + | 'ne-resize' + | 'ns-resize' + | 'nw-resize' + | 'row-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'nesw-resize' + | 'nwse-resize'; + +type TouchActionValue = + | 'auto' + | 'inherit' + | 'manipulation' + | 'none' + | 'pan-down' + | 'pan-left' + | 'pan-right' + | 'pan-up' + | 'pan-x' + | 'pan-y' + | 'pinch-zoom'; + +type UserSelect = 'all' | 'auto' | 'contain' | 'none' | 'text'; + +export type InteractionStyles = {| + // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Formal_syntax + cursor?: CursorValue, + // https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Formal_syntax + touchAction?: TouchActionValue, + // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Formal_syntax_2 + userSelect?: UserSelect, + willChange?: string +|}; + +/** + * Layout + */ + +type OverflowValue = 'auto' | 'hidden' | 'scroll' | 'visible'; +type VisiblilityValue = 'hidden' | 'visible'; + +export type LayoutStyles = {| + alignContent?: + | 'center' + | 'flex-end' + | 'flex-start' + | 'space-around' + | 'space-between' + | 'stretch', + alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch', + alignSelf?: 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch', + backfaceVisibility?: VisiblilityValue, + borderWidth?: DimensionValue, + borderBottomWidth?: DimensionValue, + borderEndWidth?: DimensionValue, + borderLeftWidth?: DimensionValue, + borderRightWidth?: DimensionValue, + borderStartWidth?: DimensionValue, + borderTopWidth?: DimensionValue, + bottom?: DimensionValue, + boxSizing?: 'border-box' | 'content-box' | 'padding-box', + direction?: 'inherit' | 'ltr' | 'rtl', + display?: string, + end?: DimensionValue, + flex?: number, + flexBasis?: DimensionValue, + flexDirection?: 'column' | 'column-reverse' | 'row' | 'row-reverse', + flexGrow?: number, + flexShrink?: number, + flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse', + height?: DimensionValue, + justifyContent?: + | 'center' + | 'flex-end' + | 'flex-start' + | 'space-around' + | 'space-between' + | 'space-evenly', + left?: DimensionValue, + margin?: DimensionValue, + marginBottom?: DimensionValue, + marginHorizontal?: DimensionValue, + marginEnd?: DimensionValue, + marginLeft?: DimensionValue, + marginRight?: DimensionValue, + marginStart?: DimensionValue, + marginTop?: DimensionValue, + marginVertical?: DimensionValue, + maxHeight?: DimensionValue, + maxWidth?: DimensionValue, + minHeight?: DimensionValue, + minWidth?: DimensionValue, + order?: number, + overflow?: OverflowValue, + overflowX?: OverflowValue, + overflowY?: OverflowValue, + padding?: DimensionValue, + paddingBottom?: DimensionValue, + paddingHorizontal?: DimensionValue, + paddingEnd?: DimensionValue, + paddingLeft?: DimensionValue, + paddingRight?: DimensionValue, + paddingStart?: DimensionValue, + paddingTop?: DimensionValue, + paddingVertical?: DimensionValue, + position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky', + right?: DimensionValue, + start?: DimensionValue, + top?: DimensionValue, + visibility?: VisiblilityValue, + width?: DimensionValue, + zIndex?: number, + /** + * @platform unsupported + */ + aspectRatio?: number, + /** + * @platform web + */ + gridAutoColumns?: string, + gridAutoFlow?: string, + gridAutoRows?: string, + gridColumnEnd?: string, + gridColumnGap?: string, + gridColumnStart?: string, + gridRowEnd?: string, + gridRowGap?: string, + gridRowStart?: string, + gridTemplateColumns?: string, + gridTemplateRows?: string, + gridTemplateAreas?: string +|}; + +/** + * Shadows + */ + +export type ShadowStyles = {| + shadowColor?: ColorValue, + shadowOffset?: {| + width?: DimensionValue, + height?: DimensionValue + |}, + shadowOpacity?: number, + shadowRadius?: DimensionValue +|}; + +/** + * Transforms + */ + +export type TransformStyles = {| + perspective?: NumberOrString, + perspectiveOrigin?: string, + transform?: Array< + | {| +perspective: NumberOrString |} + | {| +rotate: string |} + | {| +rotateX: string |} + | {| +rotateY: string |} + | {| +rotateZ: string |} + | {| +scale: number |} + | {| +scaleX: number |} + | {| +scaleY: number |} + | {| +scaleZ: number |} + | {| +scale3d: string |} + | {| +skewX: string |} + | {| +skewY: string |} + | {| +translateX: NumberOrString |} + | {| +translateY: NumberOrString |} + | {| +translateZ: NumberOrString |} + | {| +translate3d: string |} + >, + transformOrigin?: string, + transformStyle?: 'flat' | 'preserve-3d' +|}; diff --git a/packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js b/packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js index 4f9d31e7..763b5283 100644 --- a/packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js +++ b/packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js @@ -12,7 +12,6 @@ import { AnimatedEvent } from './AnimatedEvent'; import AnimatedProps from './nodes/AnimatedProps'; import React from 'react'; -import ViewStylePropTypes from '../../../exports/View/ViewStylePropTypes'; import invariant from 'fbjs/lib/invariant'; function createAnimatedComponent(Component: any, defaultProps: any): any { @@ -174,28 +173,6 @@ function createAnimatedComponent(Component: any, defaultProps: any): any { const propTypes = Component.propTypes; - AnimatedComponent.propTypes = { - style: function(props, propName, componentName) { - if (!propTypes) { - return; - } - - for (const key in ViewStylePropTypes) { - if (!propTypes[key] && props[key] !== undefined) { - console.warn( - 'You are setting the style `{ ' + - key + - ': ... }` as a prop. You ' + - 'should nest it in a style object. ' + - 'E.g. `{ style: { ' + - key + - ': ... } }`', - ); - } - } - }, - }; - return AnimatedComponent; } 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 78755fee..f2c7d1ff 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 @@ -9,15 +9,7 @@ */ 'use strict'; -import deepDiffer from '../deepDiffer'; -import * as React from 'react'; -import StyleSheet from '../../../exports/StyleSheet'; -import View from '../../../exports/View'; -import VirtualizedList from '../VirtualizedList'; - -import invariant from 'fbjs/lib/invariant'; - -import type {ViewProps} from '../../../exports/View/ViewPropTypes'; +import type {ViewProps} from '../../../exports/View'; import type { ViewabilityConfig, @@ -26,6 +18,14 @@ import type { } from '../ViewabilityHelper'; import type {Props as VirtualizedListProps} from '../VirtualizedList'; +import deepDiffer from '../deepDiffer'; +import * as React from 'react'; +import StyleSheet from '../../../exports/StyleSheet'; +import View from '../../../exports/View'; +import VirtualizedList from '../VirtualizedList'; + +import invariant from 'fbjs/lib/invariant'; + export type SeparatorsObj = { highlight: () => void, unhighlight: () => void, 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 fd475c0e..8dc8fc97 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 @@ -9,6 +9,13 @@ */ 'use strict'; +import type {ViewProps} from '../../../exports/View'; +import type { + ViewabilityConfig, + ViewToken, + ViewabilityConfigCallbackPair, +} from '../ViewabilityHelper'; + import Batchinator from '../Batchinator'; import FillRateHelper from '../FillRateHelper'; import PropTypes from 'prop-types'; @@ -27,13 +34,6 @@ import invariant from 'fbjs/lib/invariant'; import warning from 'fbjs/lib/warning'; import { computeWindowedRenderLimits } from '../VirtualizeUtils'; -import type {ViewProps} from '../../../exports/View/ViewPropTypes'; -import type { - ViewabilityConfig, - ViewToken, - ViewabilityConfigCallbackPair, -} from '../ViewabilityHelper'; - type Item = any; type ViewStyleProp = $PropertyType;