From 568e0d7316de9bafc2f0a306d39bc35f1d23ceca Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sat, 15 May 2021 03:21:11 +0500 Subject: [PATCH 01/22] create popup component, show it when profile changes is saved --- assets/images/exclamation.svg | 47 ++++++++ src/components/Icon/Expensicons.js | 2 + src/languages/en.js | 1 + src/libs/PopUpNotification.js | 138 ++++++++++++++++++++++ src/pages/settings/Profile/ProfilePage.js | 7 +- src/styles/colors.js | 1 + 6 files changed, 195 insertions(+), 1 deletion(-) create mode 100644 assets/images/exclamation.svg create mode 100644 src/libs/PopUpNotification.js diff --git a/assets/images/exclamation.svg b/assets/images/exclamation.svg new file mode 100644 index 000000000000..3accbb040921 --- /dev/null +++ b/assets/images/exclamation.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index e46fef910b2a..cfb6c0ba8c93 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -30,6 +30,7 @@ import Camera from '../../../assets/images/camera.svg'; import Gallery from '../../../assets/images/gallery.svg'; import Offline from '../../../assets/images/offline.svg'; import SignOut from '../../../assets/images/sign-out.svg'; +import Exclamation from '../../../assets/images/exclamation.svg'; export { ArrowRight, @@ -64,4 +65,5 @@ export { Users, Wallet, SignOut, + Exclamation, }; diff --git a/src/languages/en.js b/src/languages/en.js index f373d51bdd27..fb07c5eb86f1 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -122,6 +122,7 @@ export default { emailAddress: 'Email Address', setMyTimezoneAutomatically: 'Set my timezone automatically', timezone: 'Timezone', + popupMessageOnSave: 'Your profile is successfully saved', }, addSecondaryLoginPage: { addPhoneNumber: 'Add Phone Number', diff --git a/src/libs/PopUpNotification.js b/src/libs/PopUpNotification.js new file mode 100644 index 000000000000..932f82d7a197 --- /dev/null +++ b/src/libs/PopUpNotification.js @@ -0,0 +1,138 @@ +import React, { + forwardRef, useImperativeHandle, useRef, useState, +} from 'react'; +import { + StyleSheet, Text, View, Animated, Platform, +} from 'react-native'; +import { + Directions, FlingGestureHandler, State, TouchableWithoutFeedback, +} from 'react-native-gesture-handler'; +import colors from '../styles/colors'; +import Icon from '../components/Icon'; +import {Checkmark, Exclamation} from '../components/Icon/Expensicons'; +import ScreenWrapper from '../components/ScreenWrapper'; +import styles from '../styles/styles'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; + +const desktopContainerStyle = { + maxWidth: '380px', + top: '20px', + right: 0, + position: 'fixed', +}; + +const popupStyles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'flex-start', + position: 'absolute', + width: '100%', + zIndex: 2, + ...Platform.select({ + web: desktopContainerStyle, + macos: desktopContainerStyle, + windows: desktopContainerStyle, + }), + }, + smallScreenWidth: { + maxWidth: 'none', + }, + box: { + backgroundColor: colors.dark, + borderRadius: 8, + paddingVertical: 20, + paddingHorizontal: 30, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 4, + elevation: 5, + }, + bodyText: { + color: '#fff', + fontSize: 16, + }, +}); + +const types = { + success: { + icon: Checkmark, + iconColor: colors.green, + }, + error: { + icon: Exclamation, + iconColor: colors.red, + }, + warning: { + icon: Exclamation, + iconColor: colors.orange, + }, +}; + +const defaultOptions = { + bodyText: 'This is a text', + type: 'success', +}; + +const outDistance = -255; + +const PopUpNotification = forwardRef(({isSmallScreenWidth}, ref) => { + const slideDown = useRef(new Animated.Value(outDistance)).current; + const [options, setOptions] = useState(defaultOptions); + + const fling = (val = 0) => { + Animated.spring(slideDown, { + toValue: val, + duration: 80, + useNativeDriver: true, + }).start(); + }; + + useImperativeHandle(ref, () => ({ + show: (bodyText, type, duration = 2000) => { + setOptions({bodyText, type}); + fling(0); + setTimeout(() => { + fling(outDistance); + }, duration); + }, + })); + + return ( + { + if (nativeEvent.state === State.ACTIVE) { + fling(outDistance); + } + }} + > + + fling(outDistance)}> + + + + {options.bodyText} + + + + + + + + ); +}); + +PopUpNotification.propTypes = windowDimensionsPropTypes; + +export default withWindowDimensions(PopUpNotification); diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 294ca6c081cd..559eb60369ee 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {Component, createRef} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import { @@ -30,6 +30,7 @@ import CreateMenu from '../../../components/CreateMenu'; import Picker from '../../../components/Picker'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; +import PopUpNotification from '../../../libs/PopUpNotification'; const propTypes = { /* Onyx Props */ @@ -129,6 +130,8 @@ class ProfilePage extends Component { this.setAutomaticTimezone = this.setAutomaticTimezone.bind(this); this.getLogins = this.getLogins.bind(this); this.createMenuItems = this.createMenuItems.bind(this); + + this.notifRef = createRef(); } componentDidUpdate(prevProps) { @@ -207,6 +210,7 @@ class ProfilePage extends Component { selected: selectedTimezone, }, }); + this.notifRef.current.show(this.props.translate('profilePage.popupMessageOnSave'), 'success', 3000); } /** @@ -256,6 +260,7 @@ class ProfilePage extends Component { return ( + Date: Sat, 15 May 2021 04:06:02 +0500 Subject: [PATCH 02/22] normalized styles for popupnotification component --- src/libs/PopUpNotification.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/libs/PopUpNotification.js b/src/libs/PopUpNotification.js index 932f82d7a197..e5115bad7622 100644 --- a/src/libs/PopUpNotification.js +++ b/src/libs/PopUpNotification.js @@ -13,6 +13,7 @@ import {Checkmark, Exclamation} from '../components/Icon/Expensicons'; import ScreenWrapper from '../components/ScreenWrapper'; import styles from '../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; +import variables from '../styles/variables'; const desktopContainerStyle = { maxWidth: '380px', @@ -33,30 +34,23 @@ const popupStyles = StyleSheet.create({ macos: desktopContainerStyle, windows: desktopContainerStyle, }), + ...styles.ph5, }, smallScreenWidth: { maxWidth: 'none', }, box: { backgroundColor: colors.dark, - borderRadius: 8, - paddingVertical: 20, - paddingHorizontal: 30, + borderRadius: variables.componentBorderRadiusNormal, alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.25, - shadowRadius: 4, - elevation: 5, + ...styles.p5, }, bodyText: { - color: '#fff', - fontSize: 16, + fontSize: variables.fontSizeNormal, + ...styles.colorReversed, }, }); @@ -80,7 +74,9 @@ const defaultOptions = { type: 'success', }; -const outDistance = -255; +const outDistance = 0; + +// const outDistance = -255; const PopUpNotification = forwardRef(({isSmallScreenWidth}, ref) => { const slideDown = useRef(new Animated.Value(outDistance)).current; @@ -114,7 +110,7 @@ const PopUpNotification = forwardRef(({isSmallScreenWidth}, ref) => { }} > From 05dea2bac680ac7ec69280b95377e3f8f48c1954 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sat, 15 May 2021 04:07:50 +0500 Subject: [PATCH 03/22] resolve typo --- src/libs/PopUpNotification.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/libs/PopUpNotification.js b/src/libs/PopUpNotification.js index e5115bad7622..87e233c26f6a 100644 --- a/src/libs/PopUpNotification.js +++ b/src/libs/PopUpNotification.js @@ -74,9 +74,7 @@ const defaultOptions = { type: 'success', }; -const outDistance = 0; - -// const outDistance = -255; +const outDistance = -255; const PopUpNotification = forwardRef(({isSmallScreenWidth}, ref) => { const slideDown = useRef(new Animated.Value(outDistance)).current; From fb2e6e1891a84751cf2921098f3109269114b78f Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sat, 15 May 2021 04:14:56 +0500 Subject: [PATCH 04/22] remove unnecessary lines from assets/images/exclamation.svg --- assets/images/exclamation.svg | 48 +---------------------------------- 1 file changed, 1 insertion(+), 47 deletions(-) diff --git a/assets/images/exclamation.svg b/assets/images/exclamation.svg index 3accbb040921..bb44cdd09b78 100644 --- a/assets/images/exclamation.svg +++ b/assets/images/exclamation.svg @@ -1,47 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file From 19cfcd650db409eb9b46562e2694e4e6319fe3df Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sat, 15 May 2021 04:51:59 +0500 Subject: [PATCH 05/22] change exclamation icon, remove orange color, add yellow color --- assets/images/exclamation.svg | 9 ++++++++- src/libs/PopUpNotification.js | 2 +- src/styles/colors.js | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/assets/images/exclamation.svg b/assets/images/exclamation.svg index bb44cdd09b78..0d2e32a463d9 100644 --- a/assets/images/exclamation.svg +++ b/assets/images/exclamation.svg @@ -1 +1,8 @@ - \ No newline at end of file + + + + + diff --git a/src/libs/PopUpNotification.js b/src/libs/PopUpNotification.js index 87e233c26f6a..ba22044183a6 100644 --- a/src/libs/PopUpNotification.js +++ b/src/libs/PopUpNotification.js @@ -65,7 +65,7 @@ const types = { }, warning: { icon: Exclamation, - iconColor: colors.orange, + iconColor: colors.yellow, }, }; diff --git a/src/styles/colors.js b/src/styles/colors.js index 5136cca900b3..b4a5588caea6 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -10,6 +10,6 @@ export default { green: '#03d47c', greenHover: '#03c775', red: '#fc3826', - orange: '#e67e22', + yellow: '#FED607', transparent: 'transparent', }; From 4918c7970b7b0e42f582fbcf2ad0789e3666cc8c Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sat, 15 May 2021 04:58:42 +0500 Subject: [PATCH 06/22] add font family to notification text and lowercase the yellow hex code --- src/libs/PopUpNotification.js | 2 ++ src/styles/colors.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/PopUpNotification.js b/src/libs/PopUpNotification.js index ba22044183a6..411d4061cfb4 100644 --- a/src/libs/PopUpNotification.js +++ b/src/libs/PopUpNotification.js @@ -14,6 +14,7 @@ import ScreenWrapper from '../components/ScreenWrapper'; import styles from '../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; import variables from '../styles/variables'; +import fontFamily from '../styles/fontFamily'; const desktopContainerStyle = { maxWidth: '380px', @@ -50,6 +51,7 @@ const popupStyles = StyleSheet.create({ }, bodyText: { fontSize: variables.fontSizeNormal, + fontFamily: fontFamily.GTA, ...styles.colorReversed, }, }); diff --git a/src/styles/colors.js b/src/styles/colors.js index b4a5588caea6..89c10430fca0 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -10,6 +10,6 @@ export default { green: '#03d47c', greenHover: '#03c775', red: '#fc3826', - yellow: '#FED607', + yellow: '#fed607', transparent: 'transparent', }; From c6d052f0f4344d5c0879aa0c9b0068abae8bd51b Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sat, 15 May 2021 17:49:41 +0500 Subject: [PATCH 07/22] change line height of the popup notification bodyText --- src/libs/PopUpNotification.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/PopUpNotification.js b/src/libs/PopUpNotification.js index 411d4061cfb4..f53642c4f054 100644 --- a/src/libs/PopUpNotification.js +++ b/src/libs/PopUpNotification.js @@ -52,6 +52,8 @@ const popupStyles = StyleSheet.create({ bodyText: { fontSize: variables.fontSizeNormal, fontFamily: fontFamily.GTA, + width: '90%', + lineHeight: variables.fontSizeNormalHeight, ...styles.colorReversed, }, }); @@ -72,7 +74,7 @@ const types = { }; const defaultOptions = { - bodyText: 'This is a text', + bodyText: '', type: 'success', }; From 49ffc51ea1435381c6de06b97949d293e0d281ad Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Mon, 17 May 2021 23:57:14 +0500 Subject: [PATCH 08/22] rename popUpNotification component to growlNotification and move its styles to styles.js --- src/languages/en.js | 2 +- ...UpNotification.js => GrowlNotification.js} | 71 +++++-------------- src/pages/settings/Profile/ProfilePage.js | 6 +- src/styles/styles.js | 38 ++++++++++ src/styles/utilities/sizing.js | 4 ++ 5 files changed, 64 insertions(+), 57 deletions(-) rename src/libs/{PopUpNotification.js => GrowlNotification.js} (58%) diff --git a/src/languages/en.js b/src/languages/en.js index fb07c5eb86f1..05441af7d963 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -122,7 +122,7 @@ export default { emailAddress: 'Email Address', setMyTimezoneAutomatically: 'Set my timezone automatically', timezone: 'Timezone', - popupMessageOnSave: 'Your profile is successfully saved', + growlMessageOnSave: 'Your profile is successfully saved', }, addSecondaryLoginPage: { addPhoneNumber: 'Add Phone Number', diff --git a/src/libs/PopUpNotification.js b/src/libs/GrowlNotification.js similarity index 58% rename from src/libs/PopUpNotification.js rename to src/libs/GrowlNotification.js index f53642c4f054..3a4715cfdda5 100644 --- a/src/libs/PopUpNotification.js +++ b/src/libs/GrowlNotification.js @@ -2,7 +2,7 @@ import React, { forwardRef, useImperativeHandle, useRef, useState, } from 'react'; import { - StyleSheet, Text, View, Animated, Platform, + Text, View, Animated, Platform, } from 'react-native'; import { Directions, FlingGestureHandler, State, TouchableWithoutFeedback, @@ -13,50 +13,6 @@ import {Checkmark, Exclamation} from '../components/Icon/Expensicons'; import ScreenWrapper from '../components/ScreenWrapper'; import styles from '../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; -import variables from '../styles/variables'; -import fontFamily from '../styles/fontFamily'; - -const desktopContainerStyle = { - maxWidth: '380px', - top: '20px', - right: 0, - position: 'fixed', -}; - -const popupStyles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'flex-start', - position: 'absolute', - width: '100%', - zIndex: 2, - ...Platform.select({ - web: desktopContainerStyle, - macos: desktopContainerStyle, - windows: desktopContainerStyle, - }), - ...styles.ph5, - }, - smallScreenWidth: { - maxWidth: 'none', - }, - box: { - backgroundColor: colors.dark, - borderRadius: variables.componentBorderRadiusNormal, - alignItems: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - shadowColor: '#000', - ...styles.p5, - }, - bodyText: { - fontSize: variables.fontSizeNormal, - fontFamily: fontFamily.GTA, - width: '90%', - lineHeight: variables.fontSizeNormalHeight, - ...styles.colorReversed, - }, -}); const types = { success: { @@ -80,7 +36,7 @@ const defaultOptions = { const outDistance = -255; -const PopUpNotification = forwardRef(({isSmallScreenWidth}, ref) => { +const GrowlNotification = forwardRef(({isSmallScreenWidth}, ref) => { const slideDown = useRef(new Animated.Value(outDistance)).current; const [options, setOptions] = useState(defaultOptions); @@ -112,14 +68,23 @@ const PopUpNotification = forwardRef(({isSmallScreenWidth}, ref) => { }} > fling(outDistance)}> - - + + {options.bodyText} @@ -131,6 +96,6 @@ const PopUpNotification = forwardRef(({isSmallScreenWidth}, ref) => { ); }); -PopUpNotification.propTypes = windowDimensionsPropTypes; +GrowlNotification.propTypes = windowDimensionsPropTypes; -export default withWindowDimensions(PopUpNotification); +export default withWindowDimensions(GrowlNotification); diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 559eb60369ee..71f74cb9e174 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -30,7 +30,7 @@ import CreateMenu from '../../../components/CreateMenu'; import Picker from '../../../components/Picker'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; -import PopUpNotification from '../../../libs/PopUpNotification'; +import GrowlNotification from '../../../libs/GrowlNotification'; const propTypes = { /* Onyx Props */ @@ -210,7 +210,7 @@ class ProfilePage extends Component { selected: selectedTimezone, }, }); - this.notifRef.current.show(this.props.translate('profilePage.popupMessageOnSave'), 'success', 3000); + this.notifRef.current.show(this.props.translate('profilePage.growlMessageOnSave'), 'success', 3000); } /** @@ -260,7 +260,7 @@ class ProfilePage extends Component { return ( - + ({ + transform: [{translateY: y}], + }), + + growlNotificationBox: { + backgroundColor: colors.dark, + borderRadius: variables.componentBorderRadiusNormal, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + shadowColor: '#000', + ...spacing.p5, + }, + + growlNotificationText: { + fontSize: variables.fontSizeNormal, + fontFamily: fontFamily.GTA, + width: '90%', + lineHeight: variables.fontSizeNormalHeight, + color: themeColors.textReversed, + }, }; const baseCodeTagStyles = { diff --git a/src/styles/utilities/sizing.js b/src/styles/utilities/sizing.js index a57aa02d8549..67bba032ecc3 100644 --- a/src/styles/utilities/sizing.js +++ b/src/styles/utilities/sizing.js @@ -15,4 +15,8 @@ export default { w50: { width: '50%', }, + + mwn: { + maxWidth: 'auto', + }, }; From 54d8867467179d2d9abe8c912a1a61a1b0787baa Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Tue, 18 May 2021 23:24:53 +0500 Subject: [PATCH 09/22] remove platform.select and use platform-specific file extensions --- ...tification.js => GrowlNotification-old.js} | 0 .../GrowlNotificationContainer.index.js | 28 ++++++ .../GrowlNotificationContainer.native.js | 24 ++++++ src/libs/GrowlNotification/index.js | 86 +++++++++++++++++++ 4 files changed, 138 insertions(+) rename src/libs/{GrowlNotification.js => GrowlNotification-old.js} (100%) create mode 100644 src/libs/GrowlNotification/GrowlNotificationContainer.index.js create mode 100644 src/libs/GrowlNotification/GrowlNotificationContainer.native.js create mode 100644 src/libs/GrowlNotification/index.js diff --git a/src/libs/GrowlNotification.js b/src/libs/GrowlNotification-old.js similarity index 100% rename from src/libs/GrowlNotification.js rename to src/libs/GrowlNotification-old.js diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer.index.js b/src/libs/GrowlNotification/GrowlNotificationContainer.index.js new file mode 100644 index 000000000000..f3f79e5b81fa --- /dev/null +++ b/src/libs/GrowlNotification/GrowlNotificationContainer.index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import {Animated} from 'react-native'; +import PropTypes from 'prop-types'; +import styles from '../../styles/styles'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; + +const propTypes = { + children: PropTypes.node.isRequired, + translateY: PropTypes.instanceOf(Animated.Value).isRequired, + ...windowDimensionsPropTypes, +}; + +const GrowlNotificationContainer = ({children, translateY, isSmallScreenWidth}) => ( + + {children} + +); + +GrowlNotificationContainer.propTypes = propTypes; + +export default withWindowDimensions(GrowlNotificationContainer); diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer.native.js b/src/libs/GrowlNotification/GrowlNotificationContainer.native.js new file mode 100644 index 000000000000..5c0062da58e7 --- /dev/null +++ b/src/libs/GrowlNotification/GrowlNotificationContainer.native.js @@ -0,0 +1,24 @@ +import React from 'react'; +import {Animated} from 'react-native'; +import PropTypes from 'prop-types'; +import styles from '../../styles/styles'; + +const propTypes = { + children: PropTypes.node.isRequired, + translateY: PropTypes.instanceOf(Animated.Value).isRequired, +}; + +const GrowlNotificationContainer = ({children, translateY}) => ( + + {children} + +); + +GrowlNotificationContainer.propTypes = propTypes; + +export default GrowlNotificationContainer; diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js new file mode 100644 index 000000000000..e78458c3a980 --- /dev/null +++ b/src/libs/GrowlNotification/index.js @@ -0,0 +1,86 @@ +import React, { + forwardRef, useImperativeHandle, useRef, useState, +} from 'react'; +import { + Text, View, Animated, +} from 'react-native'; +import { + Directions, FlingGestureHandler, State, TouchableWithoutFeedback, +} from 'react-native-gesture-handler'; +import colors from '../../styles/colors'; +import Icon from '../../components/Icon'; +import {Checkmark, Exclamation} from '../../components/Icon/Expensicons'; +import ScreenWrapper from '../../components/ScreenWrapper'; +import styles from '../../styles/styles'; +import GrowlNotificationContainer from './GrowlNotificationContainer'; + +const types = { + success: { + icon: Checkmark, + iconColor: colors.green, + }, + error: { + icon: Exclamation, + iconColor: colors.red, + }, + warning: { + icon: Exclamation, + iconColor: colors.yellow, + }, +}; + +const defaultOptions = { + bodyText: '', + type: 'success', +}; + +const outDistance = -255; + +const GrowlNotification = forwardRef((props, ref) => { + const translateY = useRef(new Animated.Value(outDistance)).current; + const [options, setOptions] = useState(defaultOptions); + + const fling = (val = 0) => { + Animated.spring(translateY, { + toValue: val, + duration: 80, + useNativeDriver: true, + }).start(); + }; + + useImperativeHandle(ref, () => ({ + show: (bodyText, type, duration = 2000) => { + setOptions({bodyText, type}); + fling(0); + setTimeout(() => { + fling(outDistance); + }, duration); + }, + })); + + return ( + { + if (nativeEvent.state === State.ACTIVE) { + fling(outDistance); + } + }} + > + + fling(outDistance)}> + + + + {options.bodyText} + + + + + + + + ); +}); + +export default GrowlNotification; From 82df7f0a88b547f6d576eb899c161ea3dd8088fe Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Tue, 18 May 2021 23:26:14 +0500 Subject: [PATCH 10/22] remove old GrowlNotification.js --- src/libs/GrowlNotification-old.js | 101 ------------------------------ 1 file changed, 101 deletions(-) delete mode 100644 src/libs/GrowlNotification-old.js diff --git a/src/libs/GrowlNotification-old.js b/src/libs/GrowlNotification-old.js deleted file mode 100644 index 3a4715cfdda5..000000000000 --- a/src/libs/GrowlNotification-old.js +++ /dev/null @@ -1,101 +0,0 @@ -import React, { - forwardRef, useImperativeHandle, useRef, useState, -} from 'react'; -import { - Text, View, Animated, Platform, -} from 'react-native'; -import { - Directions, FlingGestureHandler, State, TouchableWithoutFeedback, -} from 'react-native-gesture-handler'; -import colors from '../styles/colors'; -import Icon from '../components/Icon'; -import {Checkmark, Exclamation} from '../components/Icon/Expensicons'; -import ScreenWrapper from '../components/ScreenWrapper'; -import styles from '../styles/styles'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; - -const types = { - success: { - icon: Checkmark, - iconColor: colors.green, - }, - error: { - icon: Exclamation, - iconColor: colors.red, - }, - warning: { - icon: Exclamation, - iconColor: colors.yellow, - }, -}; - -const defaultOptions = { - bodyText: '', - type: 'success', -}; - -const outDistance = -255; - -const GrowlNotification = forwardRef(({isSmallScreenWidth}, ref) => { - const slideDown = useRef(new Animated.Value(outDistance)).current; - const [options, setOptions] = useState(defaultOptions); - - const fling = (val = 0) => { - Animated.spring(slideDown, { - toValue: val, - duration: 80, - useNativeDriver: true, - }).start(); - }; - - useImperativeHandle(ref, () => ({ - show: (bodyText, type, duration = 2000) => { - setOptions({bodyText, type}); - fling(0); - setTimeout(() => { - fling(outDistance); - }, duration); - }, - })); - - return ( - { - if (nativeEvent.state === State.ACTIVE) { - fling(outDistance); - } - }} - > - - fling(outDistance)}> - - - - {options.bodyText} - - - - - - - - ); -}); - -GrowlNotification.propTypes = windowDimensionsPropTypes; - -export default withWindowDimensions(GrowlNotification); From 00445531bb6e9518731bf02400a457ef3050433f Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Wed, 19 May 2021 00:19:37 +0500 Subject: [PATCH 11/22] hotfixes --- ...ainer.index.js => GrowlNotificationContainer.js} | 0 src/libs/GrowlNotification/index.js | 13 ++++++------- src/styles/styles.js | 5 ++++- 3 files changed, 10 insertions(+), 8 deletions(-) rename src/libs/GrowlNotification/{GrowlNotificationContainer.index.js => GrowlNotificationContainer.js} (100%) diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer.index.js b/src/libs/GrowlNotification/GrowlNotificationContainer.js similarity index 100% rename from src/libs/GrowlNotification/GrowlNotificationContainer.index.js rename to src/libs/GrowlNotification/GrowlNotificationContainer.js diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js index e78458c3a980..4cb1f2d302a3 100644 --- a/src/libs/GrowlNotification/index.js +++ b/src/libs/GrowlNotification/index.js @@ -10,7 +10,6 @@ import { import colors from '../../styles/colors'; import Icon from '../../components/Icon'; import {Checkmark, Exclamation} from '../../components/Icon/Expensicons'; -import ScreenWrapper from '../../components/ScreenWrapper'; import styles from '../../styles/styles'; import GrowlNotificationContainer from './GrowlNotificationContainer'; @@ -67,18 +66,18 @@ const GrowlNotification = forwardRef((props, ref) => { } }} > - - fling(outDistance)}> - + + + fling(outDistance)}> {options.bodyText} - - - + + + ); }); diff --git a/src/styles/styles.js b/src/styles/styles.js index 69fa1ae9cf44..5b007394a06c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1397,12 +1397,15 @@ const styles = { transform: 'translateX(-100%)', }, + growlNotificationWrapper: { + zIndex: 2, + }, + growlNotificationContainer: { flex: 1, justifyContent: 'flex-start', position: 'absolute', width: '100%', - zIndex: 2, ...spacing.ph5, }, From 6c628a75bfc9fa6674374fce507605ded8b04381 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Wed, 19 May 2021 00:27:35 +0500 Subject: [PATCH 12/22] remove createRef and use callback-style ref declaration --- src/pages/settings/Profile/ProfilePage.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 18424f69d944..387210a08097 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -131,8 +131,7 @@ class ProfilePage extends Component { this.setAutomaticTimezone = this.setAutomaticTimezone.bind(this); this.getLogins = this.getLogins.bind(this); this.createMenuItems = this.createMenuItems.bind(this); - - this.notifRef = createRef(); + this.growlNotification = undefined; } componentDidUpdate(prevProps) { @@ -211,7 +210,7 @@ class ProfilePage extends Component { selected: selectedTimezone, }, }); - this.notifRef.current.show(this.props.translate('profilePage.growlMessageOnSave'), 'success', 3000); + this.growlNotification.show(this.props.translate('profilePage.growlMessageOnSave'), 'success', 3000); } /** @@ -261,7 +260,7 @@ class ProfilePage extends Component { return ( - + this.growlNotification = el} /> Date: Wed, 19 May 2021 00:56:54 +0500 Subject: [PATCH 13/22] switch growlNotification from functional component to class component --- src/libs/GrowlNotification/index.js | 100 +++++++++++----------- src/pages/settings/Profile/ProfilePage.js | 3 +- 2 files changed, 54 insertions(+), 49 deletions(-) diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js index 4cb1f2d302a3..a1820fce430c 100644 --- a/src/libs/GrowlNotification/index.js +++ b/src/libs/GrowlNotification/index.js @@ -1,6 +1,4 @@ -import React, { - forwardRef, useImperativeHandle, useRef, useState, -} from 'react'; +import React, {Component} from 'react'; import { Text, View, Animated, } from 'react-native'; @@ -28,58 +26,64 @@ const types = { }, }; -const defaultOptions = { - bodyText: '', - type: 'success', -}; - const outDistance = -255; -const GrowlNotification = forwardRef((props, ref) => { - const translateY = useRef(new Animated.Value(outDistance)).current; - const [options, setOptions] = useState(defaultOptions); +class GrowlNotification extends Component { + constructor() { + super(); + + this.state = { + bodyText: '', + type: 'success', + translateY: new Animated.Value(outDistance), + }; + } - const fling = (val = 0) => { - Animated.spring(translateY, { + show = (bodyText, type, duration = 2000) => { + this.setState({ + bodyText, + type, + }, () => { + this.fling(0); + setTimeout(() => { + this.fling(outDistance); + }, duration); + }); + } + + fling = (val = outDistance) => { + Animated.spring(this.state.translateY, { toValue: val, duration: 80, useNativeDriver: true, }).start(); - }; - - useImperativeHandle(ref, () => ({ - show: (bodyText, type, duration = 2000) => { - setOptions({bodyText, type}); - fling(0); - setTimeout(() => { - fling(outDistance); - }, duration); - }, - })); + } - return ( - { - if (nativeEvent.state === State.ACTIVE) { - fling(outDistance); - } - }} - > - - - fling(outDistance)}> - - - {options.bodyText} - - - - - - - - ); -}); + render() { + return ( + { + if (nativeEvent.state === State.ACTIVE) { + this.fling(outDistance); + } + }} + > + + + this.fling(outDistance)}> + + + {this.state.bodyText} + + + + + + + + ); + } +} export default GrowlNotification; diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 387210a08097..ff79b5f786cf 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -1,4 +1,4 @@ -import React, {Component, createRef} from 'react'; +import React, {Component} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import { @@ -210,6 +210,7 @@ class ProfilePage extends Component { selected: selectedTimezone, }, }); + this.growlNotification.show(this.props.translate('profilePage.growlMessageOnSave'), 'success', 3000); } From 4e601840983360db305c2afb9e1ae5261aeb2d25 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Wed, 19 May 2021 20:10:22 +0500 Subject: [PATCH 14/22] make expensicons imports and exports alphabetical order --- src/components/Icon/Expensicons.js | 70 +++++++++++++++--------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 0b29b98087ed..bbaf5a5d5947 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -1,66 +1,74 @@ +import Android from '../../../assets/images/android.svg'; +import Apple from '../../../assets/images/apple.svg'; +import ArrowRight from '../../../assets/images/arrow-right.svg'; import BackArrow from '../../../assets/images/back-left.svg'; +import Bug from '../../../assets/images/bug.svg'; +import Camera from '../../../assets/images/camera.svg'; import ChatBubble from '../../../assets/images/chatbubble.svg'; +import Checkmark from '../../../assets/images/checkmark.svg'; import Clipboard from '../../../assets/images/clipboard.svg'; import Close from '../../../assets/images/close.svg'; +import DownArrow from '../../../assets/images/down.svg'; +import Download from '../../../assets/images/download.svg'; +import Emoji from '../../../assets/images/emoji.svg'; +import Exclamation from '../../../assets/images/exclamation.svg'; +import Eye from '../../../assets/images/eye.svg'; +import Gallery from '../../../assets/images/gallery.svg'; +import Gear from '../../../assets/images/gear.svg'; +import Info from '../../../assets/images/info.svg'; +import Link from '../../../assets/images/link.svg'; import LinkCopy from '../../../assets/images/link-copy.svg'; +import Lock from '../../../assets/images/lock.svg'; import MagnifyingGlass from '../../../assets/images/magnifyingglass.svg'; import Mail from '../../../assets/images/mail.svg'; +import MoneyBag from '../../../assets/images/money-bag.svg'; +import MoneyCircle from '../../../assets/images/money-circle.svg'; +import Monitor from '../../../assets/images/monitor.svg'; +import NewWindow from '../../../assets/images/new-window.svg'; +import Offline from '../../../assets/images/offline.svg'; import Paperclip from '../../../assets/images/paperclip.svg'; import Pencil from '../../../assets/images/pencil.svg'; import Phone from '../../../assets/images/phone.svg'; import Pin from '../../../assets/images/pin.svg'; import PinCircle from '../../../assets/images/pin-circle.svg'; import Plus from '../../../assets/images/plus.svg'; +import Profile from '../../../assets/images/profile.svg'; +import Receipt from '../../../assets/images/receipt.svg'; import Send from '../../../assets/images/send.svg'; +import SignOut from '../../../assets/images/sign-out.svg'; import Trashcan from '../../../assets/images/trashcan.svg'; import Users from '../../../assets/images/users.svg'; -import Checkmark from '../../../assets/images/checkmark.svg'; -import Receipt from '../../../assets/images/receipt.svg'; -import MoneyCircle from '../../../assets/images/money-circle.svg'; -import Download from '../../../assets/images/download.svg'; -import DownArrow from '../../../assets/images/down.svg'; -import Profile from '../../../assets/images/profile.svg'; -import Gear from '../../../assets/images/gear.svg'; -import Wallet from '../../../assets/images/wallet.svg'; -import Lock from '../../../assets/images/lock.svg'; -import ArrowRight from '../../../assets/images/arrow-right.svg'; -import Emoji from '../../../assets/images/emoji.svg'; import Upload from '../../../assets/images/upload.svg'; -import Camera from '../../../assets/images/camera.svg'; -import Gallery from '../../../assets/images/gallery.svg'; -import Offline from '../../../assets/images/offline.svg'; -import SignOut from '../../../assets/images/sign-out.svg'; -import Exclamation from '../../../assets/images/exclamation.svg'; -import Info from '../../../assets/images/info.svg'; -import Link from '../../../assets/images/link.svg'; -import Eye from '../../../assets/images/eye.svg'; -import Android from '../../../assets/images/android.svg'; -import Apple from '../../../assets/images/apple.svg'; -import Bug from '../../../assets/images/bug.svg'; -import MoneyBag from '../../../assets/images/money-bag.svg'; -import Monitor from '../../../assets/images/monitor.svg'; -import NewWindow from '../../../assets/images/new-window.svg'; +import Wallet from '../../../assets/images/wallet.svg'; export { Android, Apple, ArrowRight, BackArrow, - DownArrow, + Bug, Camera, ChatBubble, Checkmark, Clipboard, Close, + DownArrow, Download, Emoji, + Exclamation, + Eye, Gallery, Gear, + Info, + Link, LinkCopy, Lock, MagnifyingGlass, Mail, + MoneyBag, MoneyCircle, + Monitor, + NewWindow, Offline, Paperclip, Pencil, @@ -71,17 +79,9 @@ export { Profile, Receipt, Send, + SignOut, Trashcan, Upload, Users, Wallet, - SignOut, - Exclamation, - Info, - Link, - Eye, - Bug, - MoneyBag, - Monitor, - NewWindow, }; From 18404c0ca13a69c8b3048bb8c25e67a9571476ff Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Wed, 19 May 2021 20:17:32 +0500 Subject: [PATCH 15/22] change GrowlNotification folder structure --- .../index.js} | 4 ++-- .../index.native.js} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/libs/GrowlNotification/{GrowlNotificationContainer.js => GrowlNotificationContainer/index.js} (90%) rename src/libs/GrowlNotification/{GrowlNotificationContainer.native.js => GrowlNotificationContainer/index.native.js} (92%) diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer.js b/src/libs/GrowlNotification/GrowlNotificationContainer/index.js similarity index 90% rename from src/libs/GrowlNotification/GrowlNotificationContainer.js rename to src/libs/GrowlNotification/GrowlNotificationContainer/index.js index f3f79e5b81fa..34a31ad96655 100644 --- a/src/libs/GrowlNotification/GrowlNotificationContainer.js +++ b/src/libs/GrowlNotification/GrowlNotificationContainer/index.js @@ -1,8 +1,8 @@ import React from 'react'; import {Animated} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../../styles/styles'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; +import styles from '../../../styles/styles'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; const propTypes = { children: PropTypes.node.isRequired, diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer.native.js b/src/libs/GrowlNotification/GrowlNotificationContainer/index.native.js similarity index 92% rename from src/libs/GrowlNotification/GrowlNotificationContainer.native.js rename to src/libs/GrowlNotification/GrowlNotificationContainer/index.native.js index 5c0062da58e7..dc6d29d5059c 100644 --- a/src/libs/GrowlNotification/GrowlNotificationContainer.native.js +++ b/src/libs/GrowlNotification/GrowlNotificationContainer/index.native.js @@ -1,7 +1,7 @@ import React from 'react'; import {Animated} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../../styles/styles'; +import styles from '../../../styles/styles'; const propTypes = { children: PropTypes.node.isRequired, From e0bc07744bcabf79976846e3a16563f4f394f9a9 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Wed, 19 May 2021 20:29:53 +0500 Subject: [PATCH 16/22] use non-arrow functions in GrowlNotification and bind them to this --- src/libs/GrowlNotification/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js index a1820fce430c..df9dbb3d6ef9 100644 --- a/src/libs/GrowlNotification/index.js +++ b/src/libs/GrowlNotification/index.js @@ -37,9 +37,12 @@ class GrowlNotification extends Component { type: 'success', translateY: new Animated.Value(outDistance), }; + + this.show = this.show.bind(this); + this.fling = this.fling.bind(this); } - show = (bodyText, type, duration = 2000) => { + show(bodyText, type, duration = 2000) { this.setState({ bodyText, type, @@ -51,7 +54,7 @@ class GrowlNotification extends Component { }); } - fling = (val = outDistance) => { + fling(val = outDistance) { Animated.spring(this.state.translateY, { toValue: val, duration: 80, From e56293669657dc5a4dbdf8047933286dce735805 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Wed, 19 May 2021 20:33:12 +0500 Subject: [PATCH 17/22] add JSDoc comments to GrowlNotification functions --- src/libs/GrowlNotification/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js index df9dbb3d6ef9..75c96a85d893 100644 --- a/src/libs/GrowlNotification/index.js +++ b/src/libs/GrowlNotification/index.js @@ -42,6 +42,13 @@ class GrowlNotification extends Component { this.fling = this.fling.bind(this); } + /** + * Show the growl notification + * + * @param {string} bodyText + * @param {string} type + * @param {number} duration - 2000 + */ show(bodyText, type, duration = 2000) { this.setState({ bodyText, @@ -54,6 +61,11 @@ class GrowlNotification extends Component { }); } + /** + * animate growl notification + * + * @param {number} val + */ fling(val = outDistance) { Animated.spring(this.state.translateY, { toValue: val, From 96aa7d5e7899ab8cbe95a754d3329b5dc321aca8 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Wed, 19 May 2021 20:35:41 +0500 Subject: [PATCH 18/22] make the constant UPPER_SNAKE_CASE --- src/libs/GrowlNotification/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js index 75c96a85d893..44085c8f285e 100644 --- a/src/libs/GrowlNotification/index.js +++ b/src/libs/GrowlNotification/index.js @@ -26,7 +26,7 @@ const types = { }, }; -const outDistance = -255; +const INACTIVE_POSITION_Y = -255; class GrowlNotification extends Component { constructor() { @@ -35,7 +35,7 @@ class GrowlNotification extends Component { this.state = { bodyText: '', type: 'success', - translateY: new Animated.Value(outDistance), + translateY: new Animated.Value(INACTIVE_POSITION_Y), }; this.show = this.show.bind(this); @@ -56,7 +56,7 @@ class GrowlNotification extends Component { }, () => { this.fling(0); setTimeout(() => { - this.fling(outDistance); + this.fling(INACTIVE_POSITION_Y); }, duration); }); } @@ -66,7 +66,7 @@ class GrowlNotification extends Component { * * @param {number} val */ - fling(val = outDistance) { + fling(val = INACTIVE_POSITION_Y) { Animated.spring(this.state.translateY, { toValue: val, duration: 80, @@ -80,13 +80,13 @@ class GrowlNotification extends Component { direction={Directions.UP} onHandlerStateChange={({nativeEvent}) => { if (nativeEvent.state === State.ACTIVE) { - this.fling(outDistance); + this.fling(INACTIVE_POSITION_Y); } }} > - this.fling(outDistance)}> + this.fling(INACTIVE_POSITION_Y)}> {this.state.bodyText} From 8e39ad508e8035b59d47a17872a2339bb77f725c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kakajan=20D=C3=B6rtguly=C3=BDew?= Date: Wed, 19 May 2021 22:49:49 +0500 Subject: [PATCH 19/22] Update src/libs/GrowlNotification/index.js Co-authored-by: Rory Abraham <47436092+roryabraham@users.noreply.github.com> --- src/libs/GrowlNotification/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js index 44085c8f285e..8e935fcf367f 100644 --- a/src/libs/GrowlNotification/index.js +++ b/src/libs/GrowlNotification/index.js @@ -86,7 +86,7 @@ class GrowlNotification extends Component { > - this.fling(INACTIVE_POSITION_Y)}> + {this.state.bodyText} From a2bf9270b1db9a79b690264e24c64df61c67236a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kakajan=20D=C3=B6rtguly=C3=BDew?= Date: Thu, 20 May 2021 00:24:05 +0500 Subject: [PATCH 20/22] Update src/languages/en.js Co-authored-by: Alexander Mechler --- src/languages/en.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/en.js b/src/languages/en.js index a5683ea88d6e..44e6ad006ca9 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -129,7 +129,7 @@ export default { emailAddress: 'Email Address', setMyTimezoneAutomatically: 'Set my timezone automatically', timezone: 'Timezone', - growlMessageOnSave: 'Your profile is successfully saved', + growlMessageOnSave: 'Your profile was successfully saved', }, addSecondaryLoginPage: { addPhoneNumber: 'Add Phone Number', From 5dce13ec42fe90aa571c5eebdc45df428c22253a Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Thu, 20 May 2021 02:46:52 +0500 Subject: [PATCH 21/22] use generalized GrowlNotification propTypes and add comments --- .../GrowlNotificationContainerPropTypes.js | 15 +++++++++++++++ .../GrowlNotificationContainer/index.js | 10 ++-------- .../GrowlNotificationContainer/index.native.js | 7 +------ src/libs/GrowlNotification/index.js | 8 ++++---- 4 files changed, 22 insertions(+), 18 deletions(-) create mode 100644 src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js b/src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js new file mode 100644 index 000000000000..6e43cb7fe0ca --- /dev/null +++ b/src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js @@ -0,0 +1,15 @@ +import {Animated} from 'react-native'; +import PropTypes from 'prop-types'; +import {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; + +const propTypes = { + // GrowlNotification content + children: PropTypes.node.isRequired, + + // GrowlNotification Y postion, required to show or hide with fling animation + translateY: PropTypes.instanceOf(Animated.Value).isRequired, + + ...windowDimensionsPropTypes, +}; + +export default propTypes; diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer/index.js b/src/libs/GrowlNotification/GrowlNotificationContainer/index.js index 34a31ad96655..82b0b68cbf6a 100644 --- a/src/libs/GrowlNotification/GrowlNotificationContainer/index.js +++ b/src/libs/GrowlNotification/GrowlNotificationContainer/index.js @@ -1,14 +1,8 @@ import React from 'react'; import {Animated} from 'react-native'; -import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; - -const propTypes = { - children: PropTypes.node.isRequired, - translateY: PropTypes.instanceOf(Animated.Value).isRequired, - ...windowDimensionsPropTypes, -}; +import withWindowDimensions from '../../../components/withWindowDimensions'; +import propTypes from './GrowlNotificationContainerPropTypes'; const GrowlNotificationContainer = ({children, translateY, isSmallScreenWidth}) => ( ( Date: Thu, 20 May 2021 03:38:05 +0500 Subject: [PATCH 22/22] use block-style commenting in GrowlNotificationPropType comments --- .../GrowlNotificationContainerPropTypes.js | 4 ++-- src/libs/GrowlNotification/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js b/src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js index 6e43cb7fe0ca..fb5d017e984a 100644 --- a/src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js +++ b/src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; const propTypes = { - // GrowlNotification content + /** GrowlNotification content */ children: PropTypes.node.isRequired, - // GrowlNotification Y postion, required to show or hide with fling animation + /** GrowlNotification Y postion, required to show or hide with fling animation */ translateY: PropTypes.instanceOf(Animated.Value).isRequired, ...windowDimensionsPropTypes, diff --git a/src/libs/GrowlNotification/index.js b/src/libs/GrowlNotification/index.js index 6532c5f37cdf..16f232b498aa 100644 --- a/src/libs/GrowlNotification/index.js +++ b/src/libs/GrowlNotification/index.js @@ -62,7 +62,7 @@ class GrowlNotification extends Component { } /** - * animate growl notification + * Animate growl notification * * @param {Number} val */