Merge pull request #273 from testshallpass/bugfix-padding-title-messa…

…ge-text fix padding when title or message text is not provided
testshallpass · Jan 4, 2022 · 172ddb2 · 172ddb2
2 parents e1c1984 + 20d0ff8
commit 172ddb2
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 92 deletions.
diff --git a/DropdownAlert.js b/DropdownAlert.js
@@ -167,7 +167,7 @@ export default class DropdownAlert extends Component {
     },
     defaultTextContainer: {
       flex: 1,
-      paddingHorizontal: 8,
+      padding: 8,
     },
     translucent: false,
     activeStatusBarStyle: 'light-content',
@@ -194,7 +194,6 @@ export default class DropdownAlert extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      animationValue: new Animated.Value(0),
       isOpen: false,
       topValue: 0,
       height: 0,
@@ -209,6 +208,7 @@ export default class DropdownAlert extends Component {
     };
     this.panResponder = this.getPanResponder();
     this.queue = new Queue();
+    this.animationValue = new Animated.Value(0);
   }
   componentWillUnmount() {
     if (this.state.isOpen) {
@@ -386,7 +386,7 @@ export default class DropdownAlert extends Component {
   };
   animate = (toValue, duration = 450, onComplete = () => {}) => {
     const {useNativeDriver, isInteraction} = this.props;
-    Animated.spring(this.state.animationValue, {
+    Animated.spring(this.animationValue, {
       toValue: toValue,
       duration: duration,
       friction: 9,
@@ -512,31 +512,37 @@ export default class DropdownAlert extends Component {
     const src = isRemote ? {uri: source} : source;
     return <Image style={style} source={src} />;
   };
-  _renderTitle = () => {
+  _renderTitle = (title) => {
     if (this.props.renderTitle) {
       return this.props.renderTitle(this.props, this.alertData);
     }
+    if (!title || title.length === 0) {
+      return null;
+    }
     const {titleTextProps, titleStyle, titleNumOfLines} = this.props;
     return (
       <Text
         {...titleTextProps}
         style={titleStyle}
         numberOfLines={titleNumOfLines}>
-        {this.alertData.title}
+        {title}
       </Text>
     );
   };
-  _renderMessage = () => {
+  _renderMessage = (message) => {
     if (this.props.renderMessage) {
       return this.props.renderMessage(this.props, this.alertData);
     }
+    if (!message || message.length === 0) {
+      return null;
+    }
     const {messageTextProps, messageStyle, messageNumOfLines} = this.props;
     return (
       <Text
         {...messageTextProps}
         style={messageStyle}
         numberOfLines={messageNumOfLines}>
-        {this.alertData.message}
+        {message}
       </Text>
     );
   };
@@ -583,8 +589,8 @@ export default class DropdownAlert extends Component {
       showCancel,
       imageStyle,
     } = this.props;
-    const {animationValue, topValue, height} = this.state;
-    const {type, payload} = this.alertData;
+    const {topValue, height} = this.state;
+    const {type, payload, title, message} = this.alertData;
     let style = this.getStyleForType(type);
     let imageSrc = this.getSourceForType(type);
     // imageSrc is overridden when payload has source property
@@ -605,7 +611,7 @@ export default class DropdownAlert extends Component {
     let wrapperAnimStyle = {
       transform: [
         {
-          translateY: animationValue.interpolate({
+          translateY: this.animationValue.interpolate({
             inputRange: [0, 1],
             outputRange,
           }),
@@ -645,8 +651,8 @@ export default class DropdownAlert extends Component {
             <ContentView style={StyleSheet.flatten(contentContainerStyle)}>
               {this._renderImage(imageSrc, imageStyle)}
               <View style={StyleSheet.flatten(defaultTextContainer)}>
-                {this._renderTitle()}
-                {this._renderMessage()}
+                {this._renderTitle(title)}
+                {this._renderMessage(message)}
               </View>
               {this._renderCancel(showCancel)}
             </ContentView>

diff --git a/Example/App.js b/Example/App.js
@@ -1,16 +1,56 @@
 import React, {useRef, useState, useEffect} from 'react';
 import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
-import {
-  PURPLE_COLOR,
-  WHITE_COLOR,
-  ITEMS,
-  ReactNativeLogo,
-  InfoIcon,
-} from './constants';
 import List from './List';
 import DropdownAlert from 'react-native-dropdownalert';
+const Color = {
+  info: '#2B73B6',
+  warn: '#cd853f',
+  success: '#32A54A',
+  error: '#cc3232',
+  purple: '#6441A4',
+  white: 'whitesmoke',
+};
+const InfoIcon = require('./assets/info.png');
 
 const App = () => {
+  const items = [
+    {
+      color: Color.info,
+      type: 'info',
+      message:
+        'System maintenance starts at midnight. System will be down for approximately 3 hours.',
+    },
+    {
+      color: Color.warn,
+      type: 'warn',
+      message:
+        'Warning: Low disk space. Please add more at your earliest convenience.',
+    },
+    {
+      color: Color.error,
+      type: 'error',
+      message:
+        'Sorry, we are having some technical difficulties. Please try again.',
+    },
+    {
+      color: Color.success,
+      type: 'success',
+      message: 'Order complete. Please check your email for further details.',
+    },
+    {
+      color: Color.purple,
+      type: 'custom',
+      message: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
+    },
+    {type: 'close', title: 'close'},
+    {type: 'show', title: 'enqueue all alerts'},
+    {type: 'clear', title: 'clear queue'},
+  ];
+  const reactNativeLogo = 'https://reactnative.dev/docs/assets/favicon.png';
+
   const [queueSize, setQueueSize] = useState(0);
   let dropDownAlertRef = useRef();
 
@@ -27,6 +67,8 @@ const App = () => {
       throw 'Error fetch data'; // example thrown error
     } catch (error) {
       dropDownAlertRef.alertWithType('error', 'Error', error);
+    } finally {
+      _updateQueueSize();
     }
   };
 
@@ -65,13 +107,13 @@ const App = () => {
         _showAlertQueue();
         break;
       default:
-        const inMilliSeconds = Math.floor(Math.random() * 4000 + 1);
+        const inMilliSeconds = Math.floor(Math.random() * 6000 + 1);
         const inSeconds = (inMilliSeconds / 1000).toFixed(2);
         const title = `${item.type} closes in ${inSeconds}s`;
         let payload;
         if (item.type === 'custom') {
           // example using remote image source in payload
-          payload = {source: ReactNativeLogo};
+          payload = {source: reactNativeLogo};
         } else if (item.type === 'info') {
           // example using local image source in payload
           payload = {source: InfoIcon};
@@ -114,7 +156,7 @@ const App = () => {
     <View style={styles.container}>
       <SafeAreaView>
         <Text style={styles.size}>{`Alert queue size: ${queueSize}`}</Text>
-        <List items={ITEMS} onSelect={_onSelect} />
+        <List items={items} onSelect={_onSelect} />
       </SafeAreaView>
       <DropdownAlert
         ref={ref => {
@@ -137,11 +179,11 @@ const App = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: WHITE_COLOR,
+    backgroundColor: Color.white,
     justifyContent: 'center',
   },
   content: {
-    backgroundColor: PURPLE_COLOR,
+    backgroundColor: Color.purple,
   },
   size: {
     textAlign: 'center',

diff --git a/Example/constants.js b/Example/constants.js
diff --git a/__tests__/__snapshots__/DropdownAlert-test.js.snap b/__tests__/__snapshots__/DropdownAlert-test.js.snap
@@ -65,35 +65,10 @@ exports[`DropdownAlert component Snapshots expect to render 1`] = `
           style={
             Object {
               "flex": 1,
-              "paddingHorizontal": 8,
+              "padding": 8,
             }
           }
-        >
-          <Text
-            numberOfLines={1}
-            style={
-              Object {
-                "backgroundColor": "transparent",
-                "color": "white",
-                "fontSize": 16,
-                "fontWeight": "bold",
-                "textAlign": "left",
-              }
-            }
-          />
-          <Text
-            numberOfLines={3}
-            style={
-              Object {
-                "backgroundColor": "transparent",
-                "color": "white",
-                "fontSize": 14,
-                "fontWeight": "normal",
-                "textAlign": "left",
-              }
-            }
-          />
-        </View>
+        />
       </ForwardRef(SafeAreaView)>
     </View>
   </TouchableOpacity>

diff --git a/docs/PROPS.md b/docs/PROPS.md
@@ -63,7 +63,7 @@
 | Name                    |  Type  | Description                                                                                                                                                                     | Default                                                |
 | ----------------------- | :----: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
 | `defaultContainer`      | Object | Style for inner view container (**override paddingTop with this**)                                                                                                              | `{ flexDirection: 'row', padding: 8 }`                 |
-| `defaultTextContainer`  | Object | Style for inner text container (holds title and message)                                                                                                                        | `{ flex: 1, paddingHorizontal: 8 }`                    |
+| `defaultTextContainer`  | Object | Style for inner text container (holds title and message)                                                                                                                        | `{ flex: 1, padding: 8 }`                              |
 | `wrapperStyle`          | Object | styles for the view that wraps the container. For [React Native Web](https://github.com/necolas/react-native-web) support you might want to set this to `{ position: 'fixed' }` | `null`                                                 |
 | `containerStyle`        | Object | styles for container for custom type only                                                                                                                                       | `{ flexDirection: 'row', backgroundColor: '#202020' }` |
 | `contentContainerStyle` | Object | styles for ContentView                                                                                                                                                          | `{ flex: 1, flexDirection: 'row' }`                    |