Merge pull request #200 from testshallpass/ontap-payload-source

onTap prop and payload image source

Author: testshallpass

DropdownAlert.js

@@ -69,6 +69,7 @@ export default class DropdownAlert extends Component {
     titleTextProps: PropTypes.object,
     messageTextProps: PropTypes.object,
     useAnimationLock: PropTypes.bool,
+    onTap: PropTypes.func,
   };
   static defaultProps = {
     onClose: () => {},
@@ -157,6 +158,7 @@ export default class DropdownAlert extends Component {
     titleTextProps: undefined,
     messageTextProps: undefined,
     useAnimationLock: true,
+    onTap: () => {},
   };
   constructor(props) {
     super(props);
@@ -296,12 +298,15 @@ export default class DropdownAlert extends Component {
   };
   close = (action, onDone = () => {}) => {
     this.animate(0, 250, () => {
-      const { onClose, updateStatusBar, onCancel } = this.props;
+      const { onClose, updateStatusBar, onCancel, onTap } = this.props;
       this.updateStatusBar(updateStatusBar, false);
       this.alertData.action = action;
-      if (action == 'cancel') {
+      if (action == ACTION.cancel) {
         onCancel(this.alertData);
       } else {
+        if (action == ACTION.tap) {
+          onTap(this.alertData);
+        }
         onClose(this.alertData);
       }
       this.setState({ isOpen: false, topValue: 0, height: 0 });
@@ -489,9 +494,14 @@ export default class DropdownAlert extends Component {
       showCancel,
     } = this.props;
     const { animationValue, topValue, height } = this.state;
-    const type = this.alertData.type;
+    const { type, payload } = this.alertData;
     let style = this.getStyleForType(type);
-    const source = this.getSourceForType(type);
+    let imageSrc = this.getSourceForType(type);
+    // imageSrc is overridden when payload has source property
+    // other than it existing and not an object there is no validation to ensure it is image source expected by Image
+    if (payload && payload.hasOwnProperty('source') && payload.source && typeof payload.source !== 'object') {
+      imageSrc = payload.source;
+    }
     if (IS_ANDROID && translucent) {
       style = [style, { paddingTop: StatusBar.currentHeight }];
     }
@@ -534,7 +544,7 @@ export default class DropdownAlert extends Component {
         >
           <View style={style}>
             <ContentView style={StyleSheet.flatten(contentContainerStyle)}>
-              {this._renderImage(source)}
+              {this._renderImage(imageSrc)}
               <View style={StyleSheet.flatten(defaultTextContainer)}>
                 {this._renderTitle()}
                 {this._renderMessage()}

Example/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { StyleSheet, SafeAreaView } from 'react-native';
 import DropdownAlert from 'react-native-dropdownalert';
-import { MAIN_CUSTOM_COLOR } from './constants';
+import { MAIN_CUSTOM_COLOR, MAIN_BACKGROUND_COLOR } from './constants';
 import List from './List';
 
 export default class App extends Component {
@@ -11,36 +11,46 @@ export default class App extends Component {
   onSelect({ item, index }) {
     switch (item.type) {
       case 'close':
-        this.forceClose();
+        this._close();
         break;
       default:
         const random = Math.floor(Math.random() * 4000 + 1);
         const title = `${item.type} in ${random} milliseconds`;
-        this.dropdown.alertWithType(item.type, title, item.message, {payload: 'HelloWorld'}, random);
+        this.dropDownAlertRef.alertWithType(
+          item.type,
+          title,
+          item.message,
+          { message: 'HelloWorld', source: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
+          random
+        );
     }
   }
-  forceClose() {
+  _close = () => {
     this.dropdown.closeAction();
-  }
-  onClose(data) {
+  };
+  _onClose = data => {
     console.log(data);
-  }
-  onCancel(data) {
+  };
+  _onCancel = data => {
     console.log(data);
-  }
+  };
+  _onTap = data => {
+    console.log(data);
+  };
   render() {
     return (
       <SafeAreaView style={styles.container}>
         <List onSelect={({ item, index }) => this.onSelect({ item, index })} />
         <DropdownAlert
-          ref={ref => this.dropdown = ref}
+          ref={ref => this.dropDownAlertRef = ref}
           containerStyle={{
             backgroundColor: MAIN_CUSTOM_COLOR,
           }}
           showCancel={true}
-          onClose={data => this.onClose(data)}
-          onCancel={data => this.onCancel(data)}
+          onCancel={this._onCancel}
+          onTap={this._onTap}
           messageNumOfLines={0}
+          onClose={this._onClose}
         />
       </SafeAreaView>
     );
@@ -50,6 +60,6 @@ export default class App extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#E9EEEF',
+    backgroundColor: MAIN_BACKGROUND_COLOR,
   },
 });

Example/constants.js

@@ -4,6 +4,7 @@ const MAIN_ERROR_COLOR = '#cc3232';
 const MAIN_SUCCESS_COLOR = '#32A54A';
 const MAIN_CUSTOM_COLOR = '#6441A4';
 const MAIN_DISMISS_COLOR = '#202020';
+const MAIN_BACKGROUND_COLOR = '#E9EEEF';
 const items = [
   {
     backgroundColor: MAIN_INFO_COLOR,
@@ -40,4 +41,5 @@ module.exports = {
   items,
   MAIN_CUSTOM_COLOR,
   HEIGHT,
+  MAIN_BACKGROUND_COLOR
 };

Example/package-lock.json

@@ -11,7 +11,7 @@
     "prop-types": "^15.5.10",
     "react": "^16.3.1",
     "react-native": "^0.55.4",
-    "react-native-dropdownalert": "^3.9.1"
+    "react-native-dropdownalert": "^4.0.1"
   },
   "devDependencies": {
     "eslint": "^4.11.0",

Example/package.json

@@ -1,4 +1,4 @@
-## react-native-dropdownalert
+# react-native-dropdownalert
 
 [![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)
 [![npm version](http://img.shields.io/npm/v/react-native-dropdownalert.svg)](https://www.npmjs.com/package/react-native-dropdownalert)
@@ -18,7 +18,7 @@
 5. [Props](docs/PROPS.md)
 6. [Caveats](#caveats)
 
-A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with `closeInterval`, pan responder up gesture or programmatically.
+A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with `closeInterval`, pan responder up gesture or programmatically (```this.dropDownAlertRef.closeAction()```).
 
 ### Support
 
@@ -29,9 +29,7 @@ A simple alert to notify users about new chat messages, something went wrong or
 
 ### Installation
 
-```
-npm i react-native-dropdownalert --save
-```
+```npm i react-native-dropdownalert --save```
 
 ### Demo
 
@@ -40,27 +38,28 @@ npm i react-native-dropdownalert --save
 ### Usage
 
 ```javascript
-// ...
 import DropdownAlert from 'react-native-dropdownalert';
 export default class App extends Component {
   componentDidMount() {
-    this.fetchData();
+    this._fetchData();
   }
-  fetchData = async () => {
+  _fetchData = async () => {
     try {
-      const data = await fetch('https://mywebsite.com/endpoint/');
-      if (data) {
-        this.dropdown.alertWithType('success', 'Success', 'Received data.');
-      }
+      await fetch('https://mywebsite.com/endpoint/');
+      // alertWithType parameters: type, title, message, payload, interval.
+      // There are 4 pre-defined types: info, warn, success, error.
+      // payload object with source property overrides image source prop. (optional)
+      // interval overrides closeInterval prop. (optional)
+      this.dropDownAlertRef.alertWithType('success', 'Success', 'Fetch data is complete.');
     } catch (error) {
-      this.dropdown.alertWithType('error', 'Error', error.message);
+      this.dropDownAlertRef.alertWithType('error', 'Error', error.message);
     }
   };
   render() {
+    // Make sure DropdownAlert is the last component in the document tree.
     return (
       <View>
-         // !!! Make sure it is the last component in your document tree.
-        <DropdownAlert ref={ref => this.dropdown = ref} />
+        <DropdownAlert ref={ref => this.dropDownAlertRef = ref} />
       </View>
     );
   }

README.md

@@ -17,5 +17,6 @@ describe('CancelButton', () => {
     const wrapper = shallow(<CancelButton onPress={onCancel} />);
     expect(wrapper.prop('onPress')).toEqual(onCancel);
     expect(wrapper.props().onPress).toBeDefined();
+    CancelButton.defaultProps.onPress();
   });
 });

__tests__/CancelButton-test.js

@@ -150,7 +150,7 @@ describe('DropdownAlert component', () => {
     test('expect to return error string value', () => {
       const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
       const expected = TypeError('Converting circular structure to JSON').toString();
-      let circularObject = {}; 
+      let circularObject = {};
       circularObject.a = circularObject;
       const value = wrapper.instance().getStringValue(circularObject);
       expect(value).toEqual(expected);
@@ -331,10 +331,33 @@ describe('DropdownAlert component', () => {
       expect(wrapper.instance().state.topValue).toBe(0);
       expect(wrapper.instance().closeTimeoutID).toBeDefined();
     });
+    test('expect error type to be open state and have alert data with payload and source defined', () => {
+      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+      wrapper.instance().setState({ isOpen: true });
+      wrapper.instance().closeTimeoutID = setTimeout(() => {});
+      wrapper.update();
+      const type = TYPE.error;
+      const title = 'Excepteur dolore aute culpa occaecat reprehenderit veniam sint tempor exercitation cillum aliquip id reprehenderit.';
+      const message = 'Et id irure proident ipsum veniam ad magna cillum fugiat.';
+      const payload = {
+        source: imageSrc,
+      };
+      wrapper.instance().alertWithType(type, title, message, payload);
+      expect(wrapper.instance().alertData).toBeDefined();
+      expect(wrapper.instance().alertData.type).toBe(type);
+      expect(wrapper.instance().alertData.title).toBe(title);
+      expect(wrapper.instance().alertData.message).toBe(message);
+      expect(wrapper.instance().alertData.payload.source).toBeDefined();
+      expect(wrapper.instance().alertData.payload.source).toBe(imageSrc);
+      expect(wrapper.instance().alertData.payload).toBe(payload);
+      expect(wrapper.instance().state.isOpen).toBeTruthy();
+      expect(wrapper.instance().state.topValue).toBe(0);
+      expect(wrapper.instance().closeTimeoutID).toBeDefined();
+    });
   });
   describe('open', () => {
     test('expect open to be okay with no data', () => {
-      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc}  />);
+      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
       wrapper.instance().open();
       expect(wrapper.instance().state.isOpen).toBeTruthy();
     });
@@ -369,36 +392,65 @@ describe('DropdownAlert component', () => {
       expect(wrapper.instance().state.isOpen).toBeFalsy();
     });
   });
-  describe('close', () => {});
-  describe('updateStatusBar', () => {
-    // FIXME: mock platform
-    // jest.mock('Platform', () => ({
-    //   OS: 'android',
-    // }));
-    test('expect should update status bar to active state', () => {
-      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
-      wrapper.instance().updateStatusBar(true, true);
+  describe('close', () => {
+    test('expect close with onTap', () => {
+      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} onTap={() => {}} />);
+      wrapper.instance().close(ACTION.tap, () => {
+        expect(wrapper.instance().alertData).toBeDefined();
+      });
     });
-    test('expect should not update status bar', () => {
-      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
-      wrapper.instance().updateStatusBar(false, true);
+  });
+  describe('updateStatusBar', () => {
+    describe('ios', () => {
+      beforeEach(() => {
+        jest.mock('Platform', () => ({
+          OS: 'ios',
+        }));
+      });
+      test('expect should update status bar to active state', () => {
+        const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+        wrapper.instance().updateStatusBar(true, true);
+      });
+      test('expect should not update status bar', () => {
+        const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+        wrapper.instance().updateStatusBar(false, true);
+      });
+      test('expect without parameters to be okay', () => {
+        const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+        wrapper.instance().updateStatusBar();
+      });
     });
-    test('expect without parameters to be okay', () => {
-      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
-      wrapper.instance().updateStatusBar();
+    describe('android', () => {
+      beforeEach(() => {
+        jest.mock('Platform', () => ({
+          OS: 'android',
+        }));
+      });
+      test('expect should update status bar to active state', () => {
+        const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+        wrapper.instance().updateStatusBar(true, true);
+      });
+      test('expect should not update status bar', () => {
+        const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+        wrapper.instance().updateStatusBar(false, true);
+      });
+      test('expect without parameters to be okay', () => {
+        const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+        wrapper.instance().updateStatusBar();
+      });
     });
   });
   describe('clearCloseTimeoutID', () => {});
   describe('animate', () => {
     test('expect animation lock to be true', () => {
       const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} useAnimationLock={true} />);
-      wrapper.instance().animate(1, 450, () => {})
+      wrapper.instance().animate(1, 450, () => {});
       const lock = wrapper.instance().animationLock;
       expect(lock).toBeTruthy();
     });
     test('expect animation lock to be false', () => {
       const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} useAnimationLock={false} />);
-      wrapper.instance().animate(0)
+      wrapper.instance().animate(0);
       const lock = wrapper.instance().animationLock;
       expect(lock).toBeFalsy();
     });
@@ -573,5 +625,10 @@ describe('DropdownAlert component', () => {
       const button = wrapper.instance()._renderCancel(true);
       expect(button).toBeDefined();
     });
+    test('expect show to be false and button to be null', () => {
+      const wrapper = shallow(<DropdownAlert imageSrc={imageSrc} />);
+      const button = wrapper.instance()._renderCancel(false);
+      expect(button).toBeNull();
+    });
   });
 });