From 59756beaec1dc41221e924441b02fe9f6fa4561f Mon Sep 17 00:00:00 2001 From: Oliver Wilks Date: Tue, 30 May 2023 20:25:20 +0100 Subject: [PATCH 1/8] Implement pin button functionality --- src/components/HeaderWithCloseButton.js | 26 ++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index f6e979cbde7c..7f2a628becad 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -2,6 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {View, Keyboard, Pressable} from 'react-native'; import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; import Header from './Header'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; @@ -18,6 +19,7 @@ import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState'; import AvatarWithDisplayName from './AvatarWithDisplayName'; import iouReportPropTypes from '../pages/iouReportPropTypes'; import participantPropTypes from './participantPropTypes'; +import * as Report from '../libs/actions/Report'; const propTypes = { /** Title of the Header */ @@ -50,6 +52,9 @@ const propTypes = { /** Whether we should show a get assistance (question mark) button */ shouldShowGetAssistanceButton: PropTypes.bool, + /** Whether we should show a pin button */ + shouldShowPinButton: PropTypes.bool, + /** Whether we should show a more options (threedots) button */ shouldShowThreeDotsButton: PropTypes.bool, @@ -83,6 +88,9 @@ const propTypes = { /** Whether we should show an avatar */ shouldShowAvatarWithDisplay: PropTypes.bool, + /** Parent report, if provided it will override props.report for AvatarWithDisplay */ + parentReport: iouReportPropTypes, + /** Report, if we're showing the details for one and using AvatarWithDisplay */ report: iouReportPropTypes, @@ -112,10 +120,12 @@ const defaultProps = { shouldShowDownloadButton: false, shouldShowGetAssistanceButton: false, shouldShowThreeDotsButton: false, + shouldShowPinButton: false, shouldShowCloseButton: true, shouldShowStepCounter: true, shouldShowAvatarWithDisplay: false, report: null, + parentReport: null, policies: {}, personalDetails: {}, guidesCallTaskID: '', @@ -168,7 +178,7 @@ class HeaderWithCloseButton extends Component { )} {this.props.shouldShowAvatarWithDisplay && ( @@ -212,6 +222,20 @@ class HeaderWithCloseButton extends Component { )} + {this.props.shouldShowPinButton && ( + + Report.togglePinnedState(this.props.report)} + style={[styles.touchableButtonImage]} + > + + + + )} + {this.props.shouldShowThreeDotsButton && ( Date: Tue, 30 May 2023 20:26:19 +0100 Subject: [PATCH 2/8] Add shouldShowPinButton and parentReport props --- src/components/MoneyRequestHeader.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 8bf719e679d7..2db66e50370b 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -93,6 +93,7 @@ const MoneyRequestHeader = (props) => { { }, ]} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} - report={moneyRequestReport} + report={props.report} + parentReport={moneyRequestReport} policies={props.policies} personalDetails={props.personalDetails} shouldShowCloseButton={false} From 3da1a26d74f001b3a91f1f54745469ac49847573 Mon Sep 17 00:00:00 2001 From: Olly Date: Wed, 31 May 2023 19:10:52 +0100 Subject: [PATCH 3/8] Change ternary to OR Co-authored-by: Eugene Voloshchak --- src/components/HeaderWithCloseButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 7f2a628becad..d136e8822a56 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -178,7 +178,7 @@ class HeaderWithCloseButton extends Component { )} {this.props.shouldShowAvatarWithDisplay && ( From ad30e2d2322c8df1575a768122842d74074bcd57 Mon Sep 17 00:00:00 2001 From: Oliver Wilks Date: Wed, 31 May 2023 20:10:26 +0100 Subject: [PATCH 4/8] Added PinButton component --- src/components/PinButton.js | 41 +++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/PinButton.js diff --git a/src/components/PinButton.js b/src/components/PinButton.js new file mode 100644 index 000000000000..e52305240202 --- /dev/null +++ b/src/components/PinButton.js @@ -0,0 +1,41 @@ +import React from 'react'; +import {Pressable} from 'react-native'; +import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; +import Icon from './Icon'; +import Tooltip from './Tooltip'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import iouReportPropTypes from '../pages/iouReportPropTypes'; +import * as Report from '../libs/actions/Report'; +import * as Expensicons from './Icon/Expensicons'; +import * as Session from '../libs/actions/Session'; + +const propTypes = { + /** Report to pin */ + report: iouReportPropTypes, + ...withLocalizePropTypes, +}; + +const defaultProps = { + report: null, +}; + +const PinButton = (props) => ( + + Report.togglePinnedState(props.report))} + style={[styles.touchableButtonImage]} + > + + + + ); + +PinButton.displayName = 'PinButton'; +PinButton.propTypes = propTypes; +PinButton.defaultProps = defaultProps; + +export default (withLocalize)(PinButton); From 03aa9fa44f8cecefc907de9a7c7ed2607fa5e25b Mon Sep 17 00:00:00 2001 From: Oliver Wilks Date: Wed, 31 May 2023 20:10:58 +0100 Subject: [PATCH 5/8] Implemented PinButton component --- src/components/HeaderWithCloseButton.js | 15 ++------------- src/pages/home/HeaderView.js | 15 ++------------- 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index d136e8822a56..5ad73a592e22 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -2,7 +2,6 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {View, Keyboard, Pressable} from 'react-native'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; import Header from './Header'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; @@ -19,7 +18,7 @@ import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState'; import AvatarWithDisplayName from './AvatarWithDisplayName'; import iouReportPropTypes from '../pages/iouReportPropTypes'; import participantPropTypes from './participantPropTypes'; -import * as Report from '../libs/actions/Report'; +import PinButton from './PinButton' const propTypes = { /** Title of the Header */ @@ -223,17 +222,7 @@ class HeaderWithCloseButton extends Component { )} {this.props.shouldShowPinButton && ( - - Report.togglePinnedState(this.props.report)} - style={[styles.touchableButtonImage]} - > - - - + )} {this.props.shouldShowThreeDotsButton && ( diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 2d9d4cd4f265..18158e03c7f1 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -9,7 +9,6 @@ import themeColors from '../../styles/themes/default'; import Icon from '../../components/Icon'; import * as Expensicons from '../../components/Icon/Expensicons'; import compose from '../../libs/compose'; -import * as Report from '../../libs/actions/Report'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; import MultipleAvatars from '../../components/MultipleAvatars'; import SubscriptAvatar from '../../components/SubscriptAvatar'; @@ -28,7 +27,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import ThreeDotsMenu from '../../components/ThreeDotsMenu'; import * as Task from '../../libs/actions/Task'; import reportActionPropTypes from './report/reportActionPropTypes'; -import * as Session from '../../libs/actions/Session'; +import PinButton from '../../components/PinButton' const propTypes = { /** Toggles the navigationMenu open and closed */ @@ -196,17 +195,7 @@ const HeaderView = (props) => { guideCalendarLink={guideCalendarLink} /> )} - - Report.togglePinnedState(props.report))} - style={[styles.touchableButtonImage]} - > - - - + {shouldShowThreeDotsButton && ( Date: Wed, 31 May 2023 20:21:07 +0100 Subject: [PATCH 6/8] Run prettier --- src/components/HeaderWithCloseButton.js | 6 ++---- src/components/PinButton.js | 4 ++-- src/pages/home/HeaderView.js | 4 ++-- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 5ad73a592e22..cc037b6094dc 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -18,7 +18,7 @@ import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState'; import AvatarWithDisplayName from './AvatarWithDisplayName'; import iouReportPropTypes from '../pages/iouReportPropTypes'; import participantPropTypes from './participantPropTypes'; -import PinButton from './PinButton' +import PinButton from './PinButton'; const propTypes = { /** Title of the Header */ @@ -221,9 +221,7 @@ class HeaderWithCloseButton extends Component { )} - {this.props.shouldShowPinButton && ( - - )} + {this.props.shouldShowPinButton && } {this.props.shouldShowThreeDotsButton && ( ( /> - ); +); PinButton.displayName = 'PinButton'; PinButton.propTypes = propTypes; PinButton.defaultProps = defaultProps; -export default (withLocalize)(PinButton); +export default withLocalize(PinButton); diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 18158e03c7f1..73cc0fc4a535 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -27,7 +27,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import ThreeDotsMenu from '../../components/ThreeDotsMenu'; import * as Task from '../../libs/actions/Task'; import reportActionPropTypes from './report/reportActionPropTypes'; -import PinButton from '../../components/PinButton' +import PinButton from '../../components/PinButton'; const propTypes = { /** Toggles the navigationMenu open and closed */ @@ -195,7 +195,7 @@ const HeaderView = (props) => { guideCalendarLink={guideCalendarLink} /> )} - + {shouldShowThreeDotsButton && ( Date: Thu, 1 Jun 2023 17:47:10 +0100 Subject: [PATCH 7/8] Passed isPinned prop to Report.togglePinnedState --- src/components/PinButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PinButton.js b/src/components/PinButton.js index 31d5aa03b635..4ea01ceb770c 100644 --- a/src/components/PinButton.js +++ b/src/components/PinButton.js @@ -23,7 +23,7 @@ const defaultProps = { const PinButton = (props) => ( Report.togglePinnedState(props.report))} + onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))} style={[styles.touchableButtonImage]} > Date: Thu, 1 Jun 2023 17:56:25 +0100 Subject: [PATCH 8/8] Changed iouReportPropTypes to reportPropTypes --- src/components/PinButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PinButton.js b/src/components/PinButton.js index 4ea01ceb770c..00d9ae3a6077 100644 --- a/src/components/PinButton.js +++ b/src/components/PinButton.js @@ -5,14 +5,14 @@ import themeColors from '../styles/themes/default'; import Icon from './Icon'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import iouReportPropTypes from '../pages/iouReportPropTypes'; +import reportPropTypes from '../pages/reportPropTypes'; import * as Report from '../libs/actions/Report'; import * as Expensicons from './Icon/Expensicons'; import * as Session from '../libs/actions/Session'; const propTypes = { /** Report to pin */ - report: iouReportPropTypes, + report: reportPropTypes, ...withLocalizePropTypes, };