From 8f1aad8a2c9c4f80e13b607ad9f7eeb81afbd45c Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 21 Aug 2021 02:29:44 +0530 Subject: [PATCH 1/3] fix: marker on android --- .../MarkerBadgeContainerPropTypes.js | 11 +++++ .../MarkerBadgeContainer/index.android.js | 17 ++++++++ .../MarkerBadge/MarkerBadgeContainer/index.js | 15 +++++++ .../{MarkerBadge.js => MarkerBadge/index.js} | 42 +++++++++---------- src/styles/styles.js | 15 +++++++ 5 files changed, 79 insertions(+), 21 deletions(-) create mode 100644 src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js create mode 100644 src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js create mode 100644 src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js rename src/pages/home/report/{MarkerBadge.js => MarkerBadge/index.js} (79%) diff --git a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js new file mode 100644 index 00000000000..4fc18f724f9 --- /dev/null +++ b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js @@ -0,0 +1,11 @@ +import PropTypes from 'prop-types'; + +const propTypes = { + /** Container Styles */ + containerStyles: PropTypes.arrayOf(PropTypes.object).isRequired, + + /** Children of the MakerBadgeContainer */ + children: PropTypes.element.isRequired, +}; + +export default propTypes; diff --git a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js new file mode 100644 index 00000000000..f00302b1438 --- /dev/null +++ b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js @@ -0,0 +1,17 @@ +import React from 'react'; +import {View, Animated} from 'react-native'; +import styles from '../../../../../styles/styles'; +import propTypes from './MarkerBadgeContainerPropTypes'; + +const MarkerBadgeContainer = props => ( + + + {props.children} + + +); + +MarkerBadgeContainer.propTypes = propTypes; +MarkerBadgeContainer.displayName = 'MarkerBadgeContainer'; + +export default MarkerBadgeContainer; diff --git a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js new file mode 100644 index 00000000000..4b4972fd4a3 --- /dev/null +++ b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import {Animated} from 'react-native'; +import styles from '../../../../../styles/styles'; +import propTypes from './MarkerBadgeContainerPropTypes'; + +const MarkerBadgeContainer = props => ( + + {props.children} + +); + +MarkerBadgeContainer.propTypes = propTypes; +MarkerBadgeContainer.displayName = 'MarkerBadgeContainer'; + +export default MarkerBadgeContainer; diff --git a/src/pages/home/report/MarkerBadge.js b/src/pages/home/report/MarkerBadge/index.js similarity index 79% rename from src/pages/home/report/MarkerBadge.js rename to src/pages/home/report/MarkerBadge/index.js index f060f305dd0..2b74e87656c 100644 --- a/src/pages/home/report/MarkerBadge.js +++ b/src/pages/home/report/MarkerBadge/index.js @@ -1,15 +1,14 @@ import React, {PureComponent} from 'react'; import {Animated, Text, View} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../../../styles/styles'; -import Button from '../../../components/Button'; -import Icon from '../../../components/Icon'; -import {Close, DownArrow} from '../../../components/Icon/Expensicons'; -import themeColors from '../../../styles/themes/default'; -import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import styles from '../../../../styles/styles'; +import Button from '../../../../components/Button'; +import Icon from '../../../../components/Icon'; +import {Close, DownArrow} from '../../../../components/Icon/Expensicons'; +import themeColors from '../../../../styles/themes/default'; +import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; +import MarkerBadgeContainer from './MarkerBadgeContainer'; -const MARKER_NOT_ACTIVE_TRANSLATE_Y = -30; -const MARKER_ACTIVE_TRANSLATE_Y = 10; const propTypes = { /** Count of new messages to show in the badge */ count: PropTypes.number, @@ -25,13 +24,18 @@ const propTypes = { ...withLocalizePropTypes, }; + const defaultProps = { count: 0, active: false, onClose: () => {}, onClick: () => {}, }; -class MarkerBadge extends PureComponent { + +const MARKER_NOT_ACTIVE_TRANSLATE_Y = -30; +const MARKER_ACTIVE_TRANSLATE_Y = 10; + +class BaseMarkerBadge extends PureComponent { constructor(props) { super(props); this.translateY = new Animated.Value(MARKER_NOT_ACTIVE_TRANSLATE_Y); @@ -65,12 +69,8 @@ class MarkerBadge extends PureComponent { render() { return ( - - + + - - + + ); } } -MarkerBadge.propTypes = propTypes; -MarkerBadge.defaultProps = defaultProps; -MarkerBadge.displayName = 'MarkerBadge'; +BaseMarkerBadge.propTypes = propTypes; +BaseMarkerBadge.defaultProps = defaultProps; +BaseMarkerBadge.displayName = 'BaseMarkerBadge'; -export default withLocalize(MarkerBadge); +export default withLocalize(BaseMarkerBadge); diff --git a/src/styles/styles.js b/src/styles/styles.js index 8905981ddb7..e3899df840d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2002,6 +2002,21 @@ const styles = { ...visibility('hidden'), }, + reportMarkerBadgeWrapperAndroid: { + left: 0, + width: '100%', + alignItems: 'center', + position: 'absolute', + top: 0, + zIndex: 100, + ...visibility('hidden'), + }, + + reportMarkerBadgeSubWrapperAndroid: { + left: '50%', + width: 'auto', + }, + reportMarkerBadge: { left: '-50%', ...visibility('visible'), From c9496e6309efa073772826cd7d7af8300ac664c2 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 21 Aug 2021 02:54:21 +0530 Subject: [PATCH 2/3] fix: name of the component --- src/pages/home/report/MarkerBadge/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/home/report/MarkerBadge/index.js b/src/pages/home/report/MarkerBadge/index.js index 2b74e87656c..eb8680d402e 100644 --- a/src/pages/home/report/MarkerBadge/index.js +++ b/src/pages/home/report/MarkerBadge/index.js @@ -35,7 +35,7 @@ const defaultProps = { const MARKER_NOT_ACTIVE_TRANSLATE_Y = -30; const MARKER_ACTIVE_TRANSLATE_Y = 10; -class BaseMarkerBadge extends PureComponent { +class MarkerBadge extends PureComponent { constructor(props) { super(props); this.translateY = new Animated.Value(MARKER_NOT_ACTIVE_TRANSLATE_Y); @@ -118,8 +118,8 @@ class BaseMarkerBadge extends PureComponent { } } -BaseMarkerBadge.propTypes = propTypes; -BaseMarkerBadge.defaultProps = defaultProps; -BaseMarkerBadge.displayName = 'BaseMarkerBadge'; +MarkerBadge.propTypes = propTypes; +MarkerBadge.defaultProps = defaultProps; +MarkerBadge.displayName = 'MarkerBadge'; -export default withLocalize(BaseMarkerBadge); +export default withLocalize(MarkerBadge); From 574918e7033c80a85272af36de83a60a28d4b3f1 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 23 Aug 2021 16:34:07 +0530 Subject: [PATCH 3/3] comments --- .../MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js index 4fc18f724f9..af0f2220845 100644 --- a/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js +++ b/src/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js @@ -1,10 +1,10 @@ import PropTypes from 'prop-types'; const propTypes = { - /** Container Styles */ + /** Styles to be assigned to Container */ containerStyles: PropTypes.arrayOf(PropTypes.object).isRequired, - /** Children of the MakerBadgeContainer */ + /** Rendered child component */ children: PropTypes.element.isRequired, };