rntoast - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "rntoast",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A light tip that can be used on both android and iOS.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/Toast.js

 import React, { Component } from 'react';
 import RootSiblings from 'react-native-root-siblings';
-import ToastContainer, { positions, durations } from './ToastContainer';
+import ToastContainer, { durations } from './ToastContainer';
 
@@ -8,9 +8,8 @@ class Toast extends Component {
   static propTypes = ToastContainer.propTypes;
-  static positions = positions;
   static durations = durations;
 
-  static show = (message, options = {position: positions.BOTTOM, duration: durations.SHORT}) => new RootSiblings(<ToastContainer
-    {...options}
+  static show = (props) => new RootSiblings(<ToastContainer
+    {...props}
     visible={true}
-  >{message}</ToastContainer>
+  >{props.content}</ToastContainer>
   );
@@ -26,6 +25,6 @@
 
-  _toast = null;
+  toast = null;
 
   componentWillMount = () => {
-    this._toast = new RootSiblings(<ToastContainer
+    this.toast = new RootSiblings(<ToastContainer
       {...this.props}
@@ -37,3 +36,3 @@ duration={0}
   componentWillReceiveProps = (nextProps) => {
-    this._toast.update(<ToastContainer
+    this.toast.update(<ToastContainer
       {...nextProps}
@@ -45,3 +44,3 @@ duration={0}
   componentWillUnmount = () => {
-    this._toast.destroy();
+    this.toast.destroy();
   };
@@ -48,0 +47,0 @@

src/ToastContainer.js

@@ -18,22 +18,5 @@ import React, {
 
-const TOAST_MAX_WIDTH = 0.8
-const TOAST_ANIMATION_DURATION = 200
+const animatedDuration = 200
 const {width, height} = Dimensions.get('window')
-let KEYBOARD_HEIGHT = 0
 
-Keyboard.addListener('keyboardDidChangeFrame', function ({ endCoordinates }) {
-  KEYBOARD_HEIGHT = height - endCoordinates.screenY
-})
-
-const positions = {
-  TOP: 20,
-  BOTTOM: -20,
-  CENTER: 0
-}
-
-const durations = {
-  LONG: 3500,
-  SHORT: 2000
-}
-
 let styles = {
@@ -48,16 +31,17 @@ defaultStyle: {
     padding: 10,
-    backgroundColor: 'transparent',
-    width,
-    height,
+    backgroundColor: 'grey',
+    width: width - 40,
     justifyContent: 'center',
     alignItems: 'center',
-    marginHorizontal: width * ((1 - TOAST_MAX_WIDTH) / 2)
+    marginHorizontal: 40,
+    borderRadius: 5,
   },
-  ViewStyle: {
-    justifyContent: 'center',
-    alignItems: 'center'
+  textStyle: {
+    fontSize: 16,
+    color: '#fff',
+    textAlign: 'center',
   },
   touchableOpacity: {
     backgroundColor: '#61B843',
-    marginTop: -(height / 6),
+    marginTop: 20,
     height: 40,
@@ -71,3 +55,2 @@ width: 80,
 class ToastContainer extends Component {
-  static displayName = 'ToastContainer';
 
@@ -81,7 +64,5 @@ static propTypes = {
     animation: PropTypes.bool,
-    backgroundColor: PropTypes.string,
     opacity: PropTypes.number,
-    textColor: PropTypes.string,
     textStyle: Text.propTypes.style,
-    delay: PropTypes.number,
+    delayShow: PropTypes.number,
     hideOnPress: PropTypes.bool,
@@ -92,3 +73,4 @@ onHide: PropTypes.func,
     onShown: PropTypes.func,
-    type: PropTypes.string
+    confirm: PropTypes.bool,
+    confirmText: PropTypes.string
   };
@@ -98,8 +80,9 @@
     visible: false,
-    duration: durations.SHORT,
+    duration: 3000,
     animation: true,
-    position: positions.BOTTOM,
     opacity: 1,
-    delay: 0,
-    hideOnPress: true
+    delayShow: 0,
+    hideOnPress: true,
+    confirm: false,
+    confirmText: 'ok'
   };
@@ -117,3 +100,3 @@
     if (this.state.visible) {
-      this._showTimeout = setTimeout(() => this._show(), this.props.delay)
+      this.showTimeout = setTimeout(() => this.show(), this.props.delayShow)
     }
@@ -125,7 +108,7 @@ };
       if (nextProps.visible) {
-        clearTimeout(this._showTimeout)
-        clearTimeout(this._hideTimeout)
-        this._showTimeout = setTimeout(() => this._show(), this.props.delay)
+        clearTimeout(this.showTimeout)
+        clearTimeout(this.hideTimeout)
+        this.showTimeout = setTimeout(() => this.show(), this.props.delayShow)
       } else {
-        this._hide()
+        this.hide()
       }
@@ -140,16 +123,16 @@
   componentWillUnmount = () => {
-    this._hide()
+    this.hide()
   };
 
-  _animating = false;
-  _root = null;
-  _hideTimeout = null;
-  _showTimeout = null;
+  animating = false;
+  root = null;
+  hideTimeout = null;
+  showTimeout = null;
 
-  _show = () => {
-    clearTimeout(this._showTimeout)
-    if (!this._animating) {
-      clearTimeout(this._hideTimeout)
-      this._animating = true
-      this._root.setNativeProps({
+  show = () => {
+    clearTimeout(this.showTimeout)
+    if (!this.animating) {
+      clearTimeout(this.hideTimeout)
+      this.animating = true
+      this.root.setNativeProps({
         pointerEvents: 'auto'
@@ -160,10 +143,10 @@ })
         toValue: this.props.opacity,
-        duration: this.props.animation ? TOAST_ANIMATION_DURATION : 0,
+        duration: this.props.animation ? animatedDuration : 0,
         easing: Easing.out(Easing.ease)
       }).start(({finished}) => {
         if (finished) {
-          this._animating = !finished
+          this.animating = !finished
           this.props.onShown && this.props.onShown(this.props.siblingManager)
-          if (this.props.duration > 0) {
-            this._hideTimeout = setTimeout(() => this._hide(), this.props.duration)
+          if (this.props.duration > 0 && !this.props.confirm ) {
+            this.hideTimeout = setTimeout(() => this.hide(), this.props.duration)
           }
@@ -175,7 +158,7 @@ }
 
-  _hide = () => {
-    clearTimeout(this._showTimeout)
-    clearTimeout(this._hideTimeout)
-    if (!this._animating) {
-      this._root.setNativeProps({
+  hide = () => {
+    clearTimeout(this.showTimeout)
+    clearTimeout(this.hideTimeout)
+    if (!this.animating) {
+      this.root.setNativeProps({
         pointerEvents: 'none'
@@ -186,7 +169,7 @@ })
         toValue: 0,
-        duration: this.props.animation ? TOAST_ANIMATION_DURATION : 0,
+        duration: this.props.animation ? animatedDuration : 0,
         easing: Easing.in(Easing.ease)
       }).start(({finished}) => {
         if (finished) {
-          this._animating = false
+          this.animating = false
           this.props.onHidden && this.props.onHidden(this.props.siblingManager)
@@ -207,3 +190,3 @@ }
       <TouchableWithoutFeedback
-        onPress={this.props.hideOnPress ? this._hide : null}
+        onPress={this.props.hideOnPress ? this.hide : null}
         >
@@ -214,17 +197,17 @@ <Animated.View
               props.containerStyle,
-              props.backgroundColor && {backgroundColor: props.backgroundColor},
-            {
-              opacity: this.state.opacity
-            }
-            )}
+              {opacity: this.state.opacity},
+
+          )}
           pointerEvents='none'
-          ref={(ele) => this._root = ele}
+          ref={(ele) => this.root = ele}
           >
-          <View
-            style={styles.ViewStyle}>
-            {this.props.children}
-            <TouchableOpacity onPress={this._hide} style={styles.touchableOpacity}>
-              <Text>ok</Text>
-            </TouchableOpacity>
-          </View>
+          {
+            typeof(props.content) === 'string'
+            ? <Text style={Object.assign({}, styles.textStyle, props.textStyle)}>{props.children}</Text>
+            : props.children
+          }
+            {props.confirm === true
+              ? <TouchableOpacity onPress={this.hide} style={styles.touchableOpacity}>
+              <Text>{this.props.confirmText}</Text>
+            </TouchableOpacity> : null}
         </Animated.View>
@@ -235,12 +218,12 @@ </TouchableWithoutFeedback>
   render () {
-    let {props} = this
-    let offset = props.position
-    let position = offset ? {
-      [offset < 0 ? 'bottom' : 'top']: offset < 0 ? (KEYBOARD_HEIGHT - offset) : offset
+    const { props } = this;
+
+    // 正数距离顶部距离，负数距离底部距离， 0居中
+    let position = props.position ? {
+      [props.position < 0 ? 'bottom' : 'top']: Math.abs(props.position)
     } : {
-      top: 0,
-      bottom: KEYBOARD_HEIGHT
+      top: 20
     }
 
-    return (this.state.visible || this._animating) ? this.renderModal(props, position) : null
+    return (this.state.visible || this.animating) ? this.renderModal(props, position) : null
   }
@@ -250,5 +233,1 @@ }
 export default ToastContainer
-export {
-  positions,
-  durations
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

6963

decreased by-6.61%

Lines of code

242

decreased by-7.98%

No dependency changes