From c765793f40bf76ee45dbf12758c24ac19aa42450 Mon Sep 17 00:00:00 2001 From: testshallpass Date: Mon, 3 Jan 2022 21:28:51 -0500 Subject: [PATCH 1/3] fix padding when title or message text is not provided; convert animationValue to class variable --- DropdownAlert.js | 30 +++++---- Example/App.js | 67 +++++++++++++++---- Example/constants.js | 40 ----------- .../__snapshots__/DropdownAlert-test.js.snap | 29 +------- 4 files changed, 73 insertions(+), 93 deletions(-) delete mode 100644 Example/constants.js diff --git a/DropdownAlert.js b/DropdownAlert.js index ce5be81b..8b9025ab 100644 --- 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 ; }; - _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 ( - {this.alertData.title} + {title} ); }; - _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 ( - {this.alertData.message} + {message} ); }; @@ -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 { {this._renderImage(imageSrc, imageStyle)} - {this._renderTitle()} - {this._renderMessage()} + {this._renderTitle(title)} + {this._renderMessage(message)} {this._renderCancel(showCancel)} diff --git a/Example/App.js b/Example/App.js index b9be2ccc..7526454e 100644 --- a/Example/App.js +++ b/Example/App.js @@ -1,16 +1,54 @@ 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 +65,8 @@ const App = () => { throw 'Error fetch data'; // example thrown error } catch (error) { dropDownAlertRef.alertWithType('error', 'Error', error); + } finally { + _updateQueueSize(); } }; @@ -40,8 +80,7 @@ const App = () => { const _showAlertQueue = () => { const types = ['info', 'warn', 'error', 'success', 'custom']; - const message = - 'Officia eu do labore incididunt consequat sunt sint ullamco cillum.'; + const message = 'Officia eu do labore incididunt consequat sunt sint ullamco cillum.'; let count = 1; types.map(type => { dropDownAlertRef.alertWithType( @@ -65,13 +104,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 +153,7 @@ const App = () => { {`Alert queue size: ${queueSize}`} - + { @@ -137,11 +176,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 deleted file mode 100644 index ccab8d37..00000000 --- a/Example/constants.js +++ /dev/null @@ -1,40 +0,0 @@ -export const PURPLE_COLOR = '#6441A4'; -export const WHITE_COLOR = 'whitesmoke'; -export const ITEMS = [ - { - color: '#2B73B6', - type: 'info', - message: - "System is going down at 12 AM tonight for routine maintenance. We'll notify you when the system is back online.", - }, - { - color: '#cd853f', - type: 'warn', - message: - 'Your cloud drive is about to reach capacity. Please consider upgrading to premium plan.', - }, - { - color: '#cc3232', - type: 'error', - message: - "Sorry, we're having some technical difficulties. Our team will get this fixed for you ASAP.", - }, - { - color: '#32A54A', - type: 'success', - message: - "Thank you for your order. We will email and charge you when it's on it's way.", - }, - { - color: PURPLE_COLOR, - 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'}, -]; -export const ReactNativeLogo = - 'https://reactnative.dev/docs/assets/favicon.png'; -export const InfoIcon = require('./assets/info.png'); diff --git a/__tests__/__snapshots__/DropdownAlert-test.js.snap b/__tests__/__snapshots__/DropdownAlert-test.js.snap index f1c83a3b..05371ded 100644 --- 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, } } - > - - - + /> From 9fe630806bea74edaf12cacd4d0e35c25f501868 Mon Sep 17 00:00:00 2001 From: testshallpass Date: Mon, 3 Jan 2022 21:32:33 -0500 Subject: [PATCH 2/3] update defaultTextContainer default prop --- docs/PROPS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/PROPS.md b/docs/PROPS.md index a8e510a6..fc9114fc 100644 --- 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' }` | From 20d0ff83f6c7db3c8ea20d08b4afab2275c92beb Mon Sep 17 00:00:00 2001 From: testshallpass Date: Mon, 3 Jan 2022 21:41:16 -0500 Subject: [PATCH 3/3] fix linter issues --- DropdownAlert.js | 8 ++++---- Example/App.js | 15 +++++++++------ docs/PROPS.md | 2 +- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/DropdownAlert.js b/DropdownAlert.js index 8b9025ab..518f6f97 100644 --- a/DropdownAlert.js +++ b/DropdownAlert.js @@ -512,11 +512,11 @@ export default class DropdownAlert extends Component { const src = isRemote ? {uri: source} : source; return ; }; - _renderTitle = title => { + _renderTitle = (title) => { if (this.props.renderTitle) { return this.props.renderTitle(this.props, this.alertData); } - if (!title || title.length == 0) { + if (!title || title.length === 0) { return null; } const {titleTextProps, titleStyle, titleNumOfLines} = this.props; @@ -529,11 +529,11 @@ export default class DropdownAlert extends Component { ); }; - _renderMessage = message => { + _renderMessage = (message) => { if (this.props.renderMessage) { return this.props.renderMessage(this.props, this.alertData); } - if (!message || message.length == 0) { + if (!message || message.length === 0) { return null; } const {messageTextProps, messageStyle, messageNumOfLines} = this.props; diff --git a/Example/App.js b/Example/App.js index 7526454e..df174e43 100644 --- a/Example/App.js +++ b/Example/App.js @@ -17,17 +17,20 @@ const App = () => { { color: Color.info, type: 'info', - message: 'System maintenance starts at midnight. System will be down for approximately 3 hours.', + 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.', + 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.', + message: + 'Sorry, we are having some technical difficulties. Please try again.', }, { color: Color.success, @@ -37,8 +40,7 @@ const App = () => { { 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. + 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.`, @@ -80,7 +82,8 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru const _showAlertQueue = () => { const types = ['info', 'warn', 'error', 'success', 'custom']; - const message = 'Officia eu do labore incididunt consequat sunt sint ullamco cillum.'; + const message = + 'Officia eu do labore incididunt consequat sunt sint ullamco cillum.'; let count = 1; types.map(type => { dropDownAlertRef.alertWithType( diff --git a/docs/PROPS.md b/docs/PROPS.md index fc9114fc..a049c8bf 100644 --- 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, padding: 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' }` |