finished first version

.gitignore

@@ -0,0 +1,12 @@
+*.[aod]
+*.DS_Store
+.DS_Store
+*Thumbs.db
+*.iml
+.gradle
+.idea
+node_modules
+npm-debug.log
+/android/build
+/ios/**/*xcuserdata*
+/ios/**/*xcshareddata*

.npmignore

@@ -0,0 +1,12 @@
+*.[aod]
+*.DS_Store
+.DS_Store
+*Thumbs.db
+*.iml
+.gradle
+.idea
+node_modules
+npm-debug.log
+/android/build
+/ios/**/*xcuserdata*
+/ios/**/*xcshareddata*

LoadingSpinnerOverlay.js

@@ -0,0 +1,226 @@
+/*
+ * A smart loading spinner overlay for React Native apps, written in JS
+ * https://github.com/react-native-component/react-native-smart-loading-spinner-overlay/
+ * Released under the MIT license
+ * Copyright (c) 2016 react-native-component <moonsunfall@aliyun.com>
+ */
+
+import React, {
+    Component,
+    PropTypes,
+} from 'react'
+import {
+    View,
+    Modal,
+    StyleSheet,
+    Animated,
+    Easing,
+    Dimensions,
+    ActivityIndicator,
+    ActivityIndicatorIOS,
+    ProgressBarAndroid,
+} from 'react-native'
+
+import TimerEnhance from 'react-native-smart-timer-enhance'
+
+const {width: deviceWidth, height: deviceHeight,} = Dimensions.get('window')
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        zIndex: 998,
+    },
+    container: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        position: 'absolute',
+        borderRadius: 8,
+        padding: 18,
+        left: -9999,
+        top: -9999,
+        zIndex: 999,
+    },
+})
+const noop = () => {}
+
+class LoadingSpinnerOverlay extends Component {
+
+    static defaultProps = {
+        duration: 255,
+        delay: 0,
+        marginTop: 0,
+        modal: true,
+    }
+
+    static propTypes = {
+        overlayStyle: View.propTypes.style,
+        style: View.propTypes.style,
+        duration: PropTypes.number,
+        delay: PropTypes.number,
+        marginTop: PropTypes.number,
+        modal: PropTypes.bool,
+    }
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            visible: false,
+            opacity: new Animated.Value(0),
+            children: props.children,
+            modal: props.modal,
+            marginTop: props.marginTop,
+        }
+        this._loadingSpinnerWidth = null
+        this._loadingSpinnerHeight = null
+        this._loadingSpinnerShowAnimation = null
+        this._loadingSpinnerHideAnimation = null
+        this._loadingSpinnerAnimationToggle = null
+    }
+
+    render() {
+        let loadingSpinner = this._renderLoadingSpinner()
+        return this._renderOverLay(loadingSpinner)
+    }
+    
+    _renderOverLay(loadingSpinner) {
+        return (
+            this.state.modal ?
+                (this.state.marginTop === 0 ?
+                    <Modal animationType={'none'} transparent={true} visible={this.state.visible} onRequestClose={noop}>
+                        {loadingSpinner}
+                    </Modal> :
+                    (this.state.visible ?
+                        <View
+                            style={[ styles.overlay, {marginTop: this.props.marginTop, width: deviceWidth, height: deviceHeight - this.props.marginTop,}, this.props.overlayStyle, ]}>
+                            {loadingSpinner}
+                        </View> : null))
+                : loadingSpinner
+        )
+    }
+    
+    _renderLoadingSpinner() {
+        let children
+        if(this.state.children == null) {
+            children = this._renderActivityIndicator()
+        }
+        else {
+            children = React.Children.map(this.state.children, (child) => {
+                if (!React.isValidElement(child)) {
+                    return null
+                }
+                return child
+            })
+        }
+        return (
+            this.state.visible ?
+                <Animated.View
+                    ref={ component => this._container = component }
+                    onLayout={this._onLoadingSpinnerLayout}
+                    style={[styles.container, this.props.style, {opacity:this.state.opacity, }]}>
+                    {children}
+                </Animated.View> : null
+        )
+    }
+
+    show({modal = this.state.modal, marginTop = this.state.marginTop, children = this.state.children, duration = this.props.duration, easing = Easing.linear, delay = this.props.delay, animationEnd,}
+        = {modal: this.state.modal, marginTop: this.state.marginTop, children: this.state.children, duration: this.props.duration, easing: Easing.linear, delay: this.props.delay,}) {
+
+        this._loadingSpinnerShowAnimation && this._loadingSpinnerShowAnimation.stop()
+        this._loadingSpinnerHideAnimation && this._loadingSpinnerHideAnimation.stop()
+        this._loadingSpinnerAnimationToggle && this.clearTimeout(this._loadingSpinnerAnimationToggle)
+
+        if(this.state.visible) {
+            this._setLoadingSpinnerOverlayPosition({modal, marginTop})
+        }
+
+        this.setState({
+            children,
+            modal,
+            marginTop,
+            visible: true,
+        })
+
+        this._loadingSpinnerShowAnimation = Animated.timing(
+            this.state.opacity,
+            {
+                toValue: 1,
+                duration,
+                easing,
+                delay,
+            }
+        )
+        this._loadingSpinnerShowAnimation.start(() => {
+            this._loadingSpinnerShowAnimation = null
+            animationEnd && animationEnd()
+        })
+    }
+
+    hide({duration = this.props.duration, easing = Easing.linear, delay = this.props.delay, animationEnd,}
+        = {duration: this.props.duration, easing: Easing.linear, delay: this.props.delay,}) {
+
+        this._loadingSpinnerShowAnimation && this._loadingSpinnerShowAnimation.stop()
+        this._loadingSpinnerHideAnimation && this._loadingSpinnerHideAnimation.stop()
+        this.clearTimeout(this._loadingSpinnerAnimationToggle)
+
+        this._loadingSpinnerHideAnimation = Animated.timing(
+            this.state.opacity,
+            {
+                toValue: 0,
+                duration,
+                easing,
+                delay,
+            }
+        )
+        this._loadingSpinnerHideAnimation.start( () => {
+            this._loadingSpinnerHideAnimation = null
+            this.setState({
+                visible: false,
+            })
+            animationEnd && animationEnd()
+        })
+    }
+
+    _onLoadingSpinnerLayout = (e) => {
+        this._loadingSpinnerWidth = e.nativeEvent.layout.width
+        this._loadingSpinnerHeight = e.nativeEvent.layout.height
+        this._setLoadingSpinnerOverlayPosition()
+    }
+
+    _setLoadingSpinnerOverlayPosition({modal, marginTop} = {modal: this.state.modal, marginTop: this.state.marginTop}) {
+        if(!this._loadingSpinnerWidth || !this._loadingSpinnerHeight) {
+            return
+        }
+        let left = (deviceWidth - this._loadingSpinnerWidth) / 2
+        let top =  (deviceHeight - this._loadingSpinnerHeight) / 2 - (modal && marginTop === 0 ? 0 : marginTop)
+        this._container.setNativeProps({
+            style: {
+                left,
+                top,
+            }
+        })
+    }
+
+    _renderActivityIndicator() {
+        return ActivityIndicator ? (
+            <ActivityIndicator
+                style={{position: 'relative', left: 1, top: 1,}}
+                animating={true}
+                color={'#fff'}
+                size={'large'}/>
+        ) : Platform.OS == 'android' ?
+            (
+                <ProgressBarAndroid
+                    color={'#fff'}
+                    styleAttr={'large'}/>
+
+            ) :  (
+            <ActivityIndicatorIOS
+                animating={true}
+                color={'#fff'}
+                size={'large'}/>
+        )
+    }
+
+}
+
+export default TimerEnhance(LoadingSpinnerOverlay)

README.md

@@ -1,6 +1,227 @@
 # react-native-smart-loading-spinner-overlay
 
+[![npm](https://img.shields.io/npm/v/react-native-smart-loading-spinner-overlay.svg)](https://www.npmjs.com/package/react-native-smart-loading-spinner-overlay)
+[![npm](https://img.shields.io/npm/dm/react-native-smart-loading-spinner-overlay.svg)](https://www.npmjs.com/package/react-native-smart-loading-spinner-overlay)
+[![npm](https://img.shields.io/npm/dt/react-native-smart-loading-spinner-overlay.svg)](https://www.npmjs.com/package/react-native-smart-loading-spinner-overlay)
+[![npm](https://img.shields.io/npm/l/react-native-smart-loading-spinner-overlay.svg)](https://github.com/react-native-component/react-native-smart-loading-spinner-overlay/blob/master/LICENSE)
+
 A smart loading spinner overlay for React Native apps, written in JS for cross-platform support.
 It works on iOS and Android.
 
 This component is compatible with React Native 0.25 and newer.
+
+## Preview
+
+![react-native-smart-loading-spinner-overlay-preview-ios][1]
+![react-native-smart-loading-spinner-overlay-preview-android][2]
+
+## Installation
+
+```
+npm install react-native-smart-loading-spinner-overlay --save
+```
+
+## Full Demo
+
+see [ReactNativeComponentDemos][0]
+
+## Usage
+
+Install the loading-spinner-overlay from npm with `npm install react-native-smart-loading-spinner-overlay --save`.
+Then, require it from your app's JavaScript files with `import loading-spinner-overlay from 'react-native-smart-loading-spinner-overlay'`.
+
+```js
+
+import React, {
+    Component,
+} from 'react'
+import {
+    View,
+} from 'react-native'
+
+import Button from 'react-native-smart-button'
+import TimerEnhance from 'react-native-smart-timer-enhance'
+import Toast from 'react-native-smart-loading-spinner-overlay'
+
+class LoadingSpinnerOverLayDemo extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <View style={{ paddingTop: 64, flex: 1, backgroundColor: '#fff',}}>
+                <Button
+                    onPress={this._showModalLoadingSpinnerOverLay}
+                    touchableType={Button.constants.touchableTypes.fadeContent}
+                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
+                    textStyle={{fontSize: 17, color: 'white'}}
+                >
+                    show modal loading spinner (模态)
+                </Button>
+                <Button
+                    onPress={this._showPartModalLoadingSpinnerOverLay}
+                    touchableType={Button.constants.touchableTypes.highlight}
+                    underlayColor={'#C90000'}
+                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
+                    textStyle={{fontSize: 17, color: 'white'}}
+                >
+                    [part modal]can click header (导航栏允许点击)
+                </Button>
+                <Button
+                    onPress={this._showNoModalLoadingSpinnerOverLay}
+                    touchableType={Button.constants.touchableTypes.blur}
+                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
+                    textStyle={{fontSize: 17,  color: 'white'}}
+                >
+                    show no modal loading spinner (非模态)
+                </Button>
+
+                <Button
+                    onPress={this._showImmediateLoadingSpinnerOverLayAndImmediateHide}
+                    touchableType={Button.constants.touchableTypes.fade}
+                    style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
+                    textStyle={{fontSize: 17,  color: 'white'}}
+                >
+                    show and hide immediately (无渐变)
+                </Button>
+
+                <Button
+                    onPress={this._showModal_2_LoadingSpinnerOverLay}
+                    touchableType={Button.constants.touchableTypes.fadeContent}
+                    style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
+                    textStyle={{fontSize: 17, color: 'white'}}
+                >
+                    custom content (自定义内容)
+                </Button>
+
+                <LoadingSpinnerOverlay
+                    ref={ component => this._modalLoadingSpinnerOverLay = component }/>
+                <LoadingSpinnerOverlay
+                    ref={ component => this._partModalLoadingSpinnerOverLay = component }
+                    modal={true}
+                    marginTop={64}/>
+                <LoadingSpinnerOverlay
+                    ref={ component => this._LoadingSpinnerOverLay = component }
+                    modal={false}/>
+                <LoadingSpinnerOverlay
+                    ref={ component => this._modalImmediateLoadingSpinnerOverLay = component }/>
+                <LoadingSpinnerOverlay
+                    ref={ component => this._modal_2_LoadingSpinnerOverLay = component }>
+                    {this._renderActivityIndicator()}
+                </LoadingSpinnerOverlay>
+            </View>
+        )
+    }
+
+
+
+
+    _showModalLoadingSpinnerOverLay = () => {
+        this._modalLoadingSpinnerOverLay.show()
+        //simulate http request
+        this.setTimeout( () => {
+            this._modalLoadingSpinnerOverLay.hide()
+        }, 3000)
+    }
+
+    _showPartModalLoadingSpinnerOverLay = () => {
+        this._partModalLoadingSpinnerOverLay.show()
+        //simulate http request
+        this.setTimeout( () => {
+            this._partModalLoadingSpinnerOverLay.hide()
+        }, 3000)
+    }
+
+    _showNoModalLoadingSpinnerOverLay = () => {
+        this._LoadingSpinnerOverLay.show()
+        //simulate http request
+        this.setTimeout( () => {
+            this._LoadingSpinnerOverLay.hide()
+        }, 3000)
+    }
+
+    _showImmediateLoadingSpinnerOverLayAndImmediateHide = () => {
+        this._modalImmediateLoadingSpinnerOverLay.show({
+            duration: 0,
+            children: this._renderActivityIndicator(),
+        })
+        //simulate http request
+        this.setTimeout( () => {
+            this._modalImmediateLoadingSpinnerOverLay.hide({
+                duration: 0,
+            })
+        }, 3000)
+    }
+
+    _showModal_2_LoadingSpinnerOverLay = () => {
+        this._modal_2_LoadingSpinnerOverLay.show()
+        //simulate http request
+        this.setTimeout( () => {
+            this._modal_2_LoadingSpinnerOverLay.hide()
+        }, 3000)
+    }
+
+    _renderActivityIndicator() {
+        return ActivityIndicator ? (
+            <ActivityIndicator
+                animating={true}
+                color={'#ff0000'}
+                size={'small'}/>
+        ) : Platform.OS == 'android' ?
+            (
+                <ProgressBarAndroid
+                    color={'#ff0000'}
+                    styleAttr={'small'}/>
+
+            ) :  (
+            <ActivityIndicatorIOS
+                animating={true}
+                color={'#ff0000'}
+                size={'small'}/>
+        )
+    }
+
+}
+
+
+export default TimerEnhance(LoadingSpinnerOverLayDemo)
+```
+
+## Props
+
+Prop             | Type   | Optional | Default          | Description
+---------------- | ------ | -------- | ---------------- | -----------
+style            | style  | Yes      |                  | see [react-native documents][3]
+overlayStyle     | style  | Yes      |                  | see [react-native documents][3]
+duration         | number | Yes      | 255              | determine the duration of loading-spinner-overlay animation
+delay            | number | Yes      | 0                | determine the delay of loading-spinner-overlay animation
+marginTop        | number | Yes      | 0                | determine the marginTop of the root container view, it is used when the modal prop is false
+modal            | bool   | Yes      | true             | determine if the modal will be used
+
+## Method
+
+* show({modal, marginTop, children, duration, easing, delay, animationEnd,})
+
+    * modal: determine if the modal will be used
+    * marginTop: determine the marginTop of the root container view, it is used when the modal prop is false
+    * children: determine the children of loading-spinner-overlay
+    * duration: determine the duration of animation
+    * easing: determine the easing of animation
+    * delay: determine the delay of animation
+    * animationEnd: determine the callback when animation is end
+
+* hide({duration, easing, delay, animationEnd,})
+
+    * duration: determine the duration of animation
+    * easing: determine the easing of animation
+    * delay: determine the delay of animation
+    * animationEnd: determine the callback when animation is end
+
+[0]: https://github.com/cyqresig/ReactNativeComponentDemos
+[1]: http://cyqresig.github.io/img/react-native-smart-loading-spinner-overlay-preview-ios-v1.0.0.gif
+[2]: http://cyqresig.github.io/img/react-native-smart-loading-spinner-overlay-preview-android-v1.0.0.gif
+[3]: https://facebook.github.io/react-native/docs/style.html
+[4]: http://facebook.github.io/react-native/docs/text.html#style

note.md

@@ -0,0 +1,8 @@
+
+* 需要保证组件为单例, 在显示期间再次调用显示时, 不会产生冲突
+* 需要支持完全模态(屏幕可视区域无法点击),
+  部分模态(部分区域比如导航栏可以点击),
+  非模态(除了加载指示器区域外都可以点击)
+* 需要保证上述三种类型, 加载指示器区域显示时相对屏幕可视区域水平及垂直居中
+* 需要支持加载指示器区域及内容可自定义样式和内容
+

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-native-smart-loading-spinner-overlay",
+  "version": "1.0.0",
+  "description": "A smart loading spinner overlay for React Native apps, written in JS for cross-platform support. It works on iOS and Android.",
+  "main": "LoadingSpinnerOverlay.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-native-component/react-native-smart-loading-spinner-overlay.git"
+  },
+  "keywords": [
+    "react-native",
+    "smart",
+    "loading",
+    "spinner",
+    "overlay"
+  ],
+  "author": "HISAME SHIZUMARU",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/react-native-component/react-native-smart-loading-spinner-overlay/issues"
+  },
+  "homepage": "https://github.com/react-native-component/react-native-smart-loading-spinner-overlay#readme",
+  "dependencies": {
+    "react-native-smart-timer-enhance": "^1.0.2"
+  }
+}