diff --git a/.npmignore b/.npmignore index 69e0e18..6a6fe58 100644 --- a/.npmignore +++ b/.npmignore @@ -41,4 +41,3 @@ npm-debug.log pages react-web-cli Examples -Libraries diff --git a/Libraries/Image/Image.web.js b/Libraries/Image/Image.web.js index d2db387..9c10f5f 100644 --- a/Libraries/Image/Image.web.js +++ b/Libraries/Image/Image.web.js @@ -20,6 +20,35 @@ class Image extends Component { isInAParentText: React.PropTypes.bool } + static getSize = function( + url: string, + success: (width: number, height: number) => void, + failure: (error: any) => void, + ) { + let wrap = document.createElement('div'), + img = new window.Image(), + loadedHandler = function loadedHandler() { + img.removeEventListener('load', loadedHandler); + success && success(img.offsetWidth, img.offsetHeight); + }, + errorHandler = function errorHandler() { + img.removeEventListener('error', errorHandler); + failure && failure(); + }; + + wrap.style.cssText = 'height:0px;width:0px;overflow:hidden;visibility:hidden;'; + + wrap.appendChild(img); + document.body.appendChild(wrap); + img.src = url; + if (!img.complete) { + img.addEventListener('error', errorHandler); + img.addEventListener('load', loadedHandler); + } else { + loadedHandler(); + } + } + render() { let props = {...this.props}; diff --git a/Libraries/LayoutAnimation/LayoutAnimation.web.js b/Libraries/LayoutAnimation/LayoutAnimation.web.js new file mode 100644 index 0000000..d03efa0 --- /dev/null +++ b/Libraries/LayoutAnimation/LayoutAnimation.web.js @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2015-present, Alibaba Group Holding Limited. + * All rights reserved. + * + * Copyright (c) 2015, Facebook, Inc. All rights reserved. + * + * @providesModule ReactLayoutAnimation + */ +"use strict"; + +var LayoutAnimation = { + Types: {}, + Properties: {}, + configureNext: function configureNext() {} +}; + +module.exports = LayoutAnimation; \ No newline at end of file diff --git a/Libraries/RefreshControl/RefreshControl.web.js b/Libraries/RefreshControl/RefreshControl.web.js index 83201e9..b109a93 100644 --- a/Libraries/RefreshControl/RefreshControl.web.js +++ b/Libraries/RefreshControl/RefreshControl.web.js @@ -1,9 +1,9 @@ /** * Copyright (c) 2015-present, Alibaba Group Holding Limited. * All rights reserved. - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - 8 + * + * Copyright (c) 2015, Facebook, Inc. All rights reserved. + * * @providesModule ReactRefreshControl */ 'use strict'; @@ -18,7 +18,7 @@ let RefreshLayoutConsts = {SIZE: {}}; class RefreshControl extends Component { - static SIZE = RefreshLayoutConsts.SIZE, + static SIZE = RefreshLayoutConsts.SIZE componentDidMount() { this._lastNativeRefreshing = this.props.refreshing; @@ -45,7 +45,7 @@ class RefreshControl extends Component { onRefresh={this._onRefresh} /> ); - }, + } _onRefresh() { this._lastNativeRefreshing = true; @@ -55,8 +55,8 @@ class RefreshControl extends Component { // The native component will start refreshing so force an update to // make sure it stays in sync with the js component. this.forceUpdate(); - }, -}); + } +} mixin.onClass(RefreshControl, NativeMethodsMixin); autobind(RefreshControl); diff --git a/Libraries/Touchable/TouchableHighlight.web.js b/Libraries/Touchable/TouchableHighlight.web.js index 1fecc50..0d53711 100644 --- a/Libraries/Touchable/TouchableHighlight.web.js +++ b/Libraries/Touchable/TouchableHighlight.web.js @@ -126,12 +126,16 @@ class TouchableHighlight extends Component { this._showUnderlay(); this._hideTimeout = this.setTimeout(this._hideUnderlay, this.props.delayPressOut || 100); - + var touchBank = e.touchHistory.touchBank[e.touchHistory.indexOfSingleActiveTouch]; - var offset = Math.sqrt(Math.pow(touchBank.startPageX - touchBank.currentPageX, 2) - + Math.pow(touchBank.startPageY - touchBank.currentPageY, 2)); - var velocity = (offset / (touchBank.currentTimeStamp - touchBank.startTimeStamp)) * 1000; - if (velocity < 100) this.props.onPress && this.props.onPress(e); + if (touchBank) { + var offset = Math.sqrt(Math.pow(touchBank.startPageX - touchBank.currentPageX, 2) + + Math.pow(touchBank.startPageY - touchBank.currentPageY, 2)); + var velocity = (offset / (touchBank.currentTimeStamp - touchBank.startTimeStamp)) * 1000; + if (velocity < 100) this.props.onPress && this.props.onPress(e); + } else { + this.props.onPress && this.props.onPress(e); + } } touchableHandleLongPress(e: Event) { diff --git a/Libraries/Touchable/TouchableOpacity.web.js b/Libraries/Touchable/TouchableOpacity.web.js index b917128..668fd2b 100644 --- a/Libraries/Touchable/TouchableOpacity.web.js +++ b/Libraries/Touchable/TouchableOpacity.web.js @@ -107,12 +107,16 @@ class TouchableOpacity extends React.Component { this._opacityInactive, this.props.delayPressOut || 100 ); - + var touchBank = e.touchHistory.touchBank[e.touchHistory.indexOfSingleActiveTouch]; - var offset = Math.sqrt(Math.pow(touchBank.startPageX - touchBank.currentPageX, 2) - + Math.pow(touchBank.startPageY - touchBank.currentPageY, 2)); - var velocity = (offset / (touchBank.currentTimeStamp - touchBank.startTimeStamp)) * 1000; - if (velocity < 100) this.props.onPress && this.props.onPress(e); + if (touchBank) { + var offset = Math.sqrt(Math.pow(touchBank.startPageX - touchBank.currentPageX, 2) + + Math.pow(touchBank.startPageY - touchBank.currentPageY, 2)); + var velocity = (offset / (touchBank.currentTimeStamp - touchBank.startTimeStamp)) * 1000; + if (velocity < 100) this.props.onPress && this.props.onPress(e); + } else { + this.props.onPress && this.props.onPress(e); + } } touchableHandleLongPress(e: Event) { diff --git a/Libraries/Touchable/TouchableWithoutFeedback.web.js b/Libraries/Touchable/TouchableWithoutFeedback.web.js index ecfe99e..8c372fb 100644 --- a/Libraries/Touchable/TouchableWithoutFeedback.web.js +++ b/Libraries/Touchable/TouchableWithoutFeedback.web.js @@ -76,10 +76,14 @@ class TouchableWithoutFeedback extends Component { */ touchableHandlePress(e: Event) { var touchBank = e.touchHistory.touchBank[e.touchHistory.indexOfSingleActiveTouch]; - var offset = Math.sqrt(Math.pow(touchBank.startPageX - touchBank.currentPageX, 2) - + Math.pow(touchBank.startPageY - touchBank.currentPageY, 2)); - var velocity = (offset / (touchBank.currentTimeStamp - touchBank.startTimeStamp)) * 1000; - if (velocity < 100) this.props.onPress && this.props.onPress(e); + if (touchBank) { + var offset = Math.sqrt(Math.pow(touchBank.startPageX - touchBank.currentPageX, 2) + + Math.pow(touchBank.startPageY - touchBank.currentPageY, 2)); + var velocity = (offset / (touchBank.currentTimeStamp - touchBank.startTimeStamp)) * 1000; + if (velocity < 100) this.props.onPress && this.props.onPress(e); + } else { + this.props.onPress && this.props.onPress(e); + } } touchableHandleActivePressIn(e: Event) { diff --git a/Libraries/react-web.js b/Libraries/react-web.js index a1aa0a8..aaad912 100644 --- a/Libraries/react-web.js +++ b/Libraries/react-web.js @@ -17,6 +17,7 @@ export * from 'react'; // Components export ActivityIndicatorIOS from 'ReactActivityIndicator'; +export ActivityIndicator from 'ReactActivityIndicator'; // export DatePicker from 'ReactDatePicker'; export DrawerLayoutAndroid from 'ReactDrawerLayout'; export Image from 'ReactImage'; @@ -42,7 +43,7 @@ export TouchableHighlight from 'ReactTouchableHighlight'; export TouchableOpacity from 'ReactTouchableOpacity'; export TouchableWithoutFeedback from 'ReactTouchableWithoutFeedback'; export TouchableBounce from 'ReactTouchableBounce'; -// export RefreshControl from 'ReactRefreshControl'; +export RefreshControl from 'ReactRefreshControl'; export View from 'ReactView'; export ViewPagerAndroid from 'ReactViewPager'; export ViewPager from 'ReactViewPager'; @@ -57,6 +58,7 @@ export AsyncStorage from 'ReactAsyncStorage'; export Dimensions from 'ReactDimensions'; export Easing from 'animated/lib/Easing'; export InteractionManager from 'ReactInteractionManager'; +export LayoutAnimation from 'ReactLayoutAnimation'; export PanResponder from 'ReactPanResponder'; export PixelRatio from 'ReactPixelRatio'; export StyleSheet from 'ReactStyleSheet'; diff --git a/README-zh.md b/README-zh.md index c706d9c..965f0b9 100644 --- a/README-zh.md +++ b/README-zh.md @@ -16,7 +16,7 @@ ## 安装 ``` -npm install react-web --save +npm install --save git+https://github.com/taobaofed/react-web.git ``` ## 使用 diff --git a/README.md b/README.md index 0d6a635..19cd5bb 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ If you already have a React Native project and want to add web support, you need 1. Install `npm install react-web-cli -g` 2. Execute `react-web init `. That install `react-web` and `devDependencies` to your project and make a `web` directory with `webpack.config.js` file under your project 3. Register your app into a web platform. To do so, add the code from **Fix platform differences. 2. Should run application on web platform** to your index.ios.js file -4. Execute `npm start` +4. Execute `npm install --save git+https://github.com/taobaofed/react-web.git` that replace react-web npm version to develope react-web itself easier 5. Execute `react-web start` that starts the web dev server 6. Execute `react-web bundle` that builds the output @@ -36,7 +36,7 @@ If you already have a React Native project and want to add web support, you need ### Install ```sh -npm install react-web --save +npm install --save git+https://github.com/taobaofed/react-web.git ``` ### Add Webpack configuration @@ -163,6 +163,7 @@ As mentioned above, the HasteResolverPlugin plugin will help webpack to compile #### Components * ActivityIndicatorIOS - ReactActivityIndicator +* ActivityIndicator - ReactActivityIndicator * DatePickerIOS - ReactDatePicker *TODO* * DrawerLayoutAndroid - ReactDrawerLayout * Image - ReactImage @@ -177,6 +178,7 @@ As mentioned above, the HasteResolverPlugin plugin will help webpack to compile * Switch - ReactSwitch * SwitchAndroid - ReactSwitch * SwitchIOS - ReactSwitch +* RefreshControl - ReactRefreshControl * TabBarIOS - ReactTabBar * Text - ReactText * TextInput - ReactTextInput @@ -198,6 +200,7 @@ As mentioned above, the HasteResolverPlugin plugin will help webpack to compile * Dimensions - ReactDimensions * Easing - ReactEasing * InteractionManager - ReactInteractionManager +* LayoutAnimation - ReactLayoutAnimation * PanResponder - ReactPanResponder * PixelRatio - ReactPixelRatio * StyleSheet - ReactStyleSheet diff --git a/local-cli/generator-web/templates/webpack.config.js b/local-cli/generator-web/templates/webpack.config.js index 8eb6899..ffda643 100644 --- a/local-cli/generator-web/templates/webpack.config.js +++ b/local-cli/generator-web/templates/webpack.config.js @@ -23,7 +23,7 @@ var config = { var webpackConfig = { ip: IP, port: PORT, - devtool: 'source-map', + devtool: 'cheap-module-eval-source-map', resolve: { alias: { 'react-native': 'ReactWeb', @@ -73,7 +73,7 @@ var webpackConfig = { presets: ['es2015', 'react', 'stage-1'] }, include: [config.paths.src], - exclude: [/node_modules/] + exclude: /(node_modules\/(?!react))/ }] } }; diff --git a/package.json b/package.json index 65aabd5..eaa1915 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "type": "git", "url": "git@github.com:taobaofed/react-web.git" }, - "main": "./lib/react-web.js", + "main": "./Libraries/react-web.js", "keywords": [ "react-native", "react-web",