Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move the user is typing and other metadata back below the composer box #9276

Merged
merged 6 commits into from
Jun 2, 2022
Merged

Move the user is typing and other metadata back below the composer box #9276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
53d7f92
Revert the PR updating the gaps
mountiny Jun 1, 2022
23c282c
Partially revert the changes which moved the metadata to wo palces
mountiny Jun 1, 2022
2f38325
Update the stylings and finish refactoring
mountiny Jun 2, 2022
73a1e13
Fix a whitespace
mountiny Jun 2, 2022
2fe2930
Revert the package-lock json change
mountiny Jun 2, 2022
02d702e
Remove the testing change
mountiny Jun 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions src/components/ExceededCommentLength.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,27 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
import CONST from '../CONST';
import Text from './Text';
import styles from '../styles/styles';
import stylePropTypes from '../styles/stylePropTypes';

const propTypes = {
/** The current length of the comment */
commentLength: PropTypes.number.isRequired,

/** Additional style props */
style: stylePropTypes,
};

const defaultProps = {
style: [],
};

const ExceededCommentLength = (props) => {
if (props.commentLength <= CONST.MAX_COMMENT_LENGTH) {
return null;
}

const additionalStyles = _.isArray(props.style) ? props.style : [props.style];

return (
<Text style={[styles.textMicro, styles.textDanger, ...additionalStyles]}>
<Text style={[styles.textMicro, styles.textDanger, styles.chatItemComposeSecondaryRow]}>
neil-marcellini marked this conversation as resolved.
Show resolved Hide resolved
{`${props.commentLength}/${CONST.MAX_COMMENT_LENGTH}`}
</Text>
);
};

ExceededCommentLength.propTypes = propTypes;
ExceededCommentLength.defaultProps = defaultProps;
ExceededCommentLength.displayName = 'ExceededCommentLength';

export default ExceededCommentLength;
18 changes: 5 additions & 13 deletions src/components/OfflineIndicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
import {withNetwork} from './OnyxProvider';
import networkPropTypes from './networkPropTypes';
import Icon from './Icon';
Expand All @@ -10,31 +9,25 @@ import Text from './Text';
import styles from '../styles/styles';
import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import stylePropTypes from '../styles/stylePropTypes';

const propTypes = {
/** Information about the network */
network: networkPropTypes.isRequired,

/** Additional style props */
style: stylePropTypes,

...withLocalizePropTypes,
};

const defaultProps = {
style: [],
};

const OfflineIndicator = (props) => {
if (!props.network.isOffline) {
return null;
}

const additionalStyles = _.isArray(props.style) ? props.style : [props.style];

return (
<View style={[styles.flexRow, ...additionalStyles]}>
<View style={[
styles.chatItemComposeSecondaryRowOffset,
styles.flexRow,
styles.alignItemsCenter]}
>
<Icon
src={Expensicons.Offline}
width={variables.iconSizeExtraSmall}
Expand All @@ -48,7 +41,6 @@ const OfflineIndicator = (props) => {
};

OfflineIndicator.propTypes = propTypes;
OfflineIndicator.defaultProps = defaultProps;
OfflineIndicator.displayName = 'OfflineIndicator';

export default compose(
Expand Down
43 changes: 20 additions & 23 deletions src/pages/home/report/ParticipantLocalTime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,24 @@
import React, {PureComponent} from 'react';
import {
View,
} from 'react-native';
import lodashGet from 'lodash/get';
import Str from 'expensify-common/lib/str';
import _ from 'underscore';
import styles from '../../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import participantPropTypes from '../../../components/participantPropTypes';
import Text from '../../../components/Text';
import Timers from '../../../libs/Timers';
import CONST from '../../../CONST';
import DateUtils from '../../../libs/DateUtils';
import stylePropTypes from '../../../styles/stylePropTypes';

const propTypes = {
/** Personal details of the participant */
participant: participantPropTypes.isRequired,

/** Additional style props */
style: stylePropTypes,

...withLocalizePropTypes,
};

const defaultProps = {
style: [],
};

class ParticipantLocalTime extends PureComponent {
constructor(props) {
super(props);
Expand Down Expand Up @@ -60,29 +54,32 @@ class ParticipantLocalTime extends PureComponent {
}

render() {
const additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
const reportRecipientDisplayName = this.props.participant.firstName
|| (Str.isSMSLogin(this.props.participant.login)
? this.props.toLocalPhone(this.props.participant.displayName)
: this.props.participant.displayName);

return (
<Text
style={[styles.chatItemComposeSecondaryRowSubText, ...additionalStyles]}
numberOfLines={1}
>
{this.props.translate(
'reportActionCompose.localTime',
{
user: reportRecipientDisplayName,
time: this.state.localTime,
},
)}
</Text>
<View style={[styles.chatItemComposeSecondaryRow]}>
<Text
style={[
styles.chatItemComposeSecondaryRowSubText,
styles.chatItemComposeSecondaryRowOffset,
]}
numberOfLines={1}
>
{this.props.translate(
'reportActionCompose.localTime',
{
user: reportRecipientDisplayName,
time: this.state.localTime,
},
)}
</Text>
</View>
);
}
}

ParticipantLocalTime.propTypes = propTypes;
ParticipantLocalTime.defaultProps = defaultProps;
export default withLocalize(ParticipantLocalTime);
18 changes: 8 additions & 10 deletions src/pages/home/report/ReportActionCompose.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,16 +443,9 @@ class ReportActionCompose extends React.Component {
const hasExceededMaxCommentLength = this.comment.length > CONST.MAX_COMMENT_LENGTH;

return (
<View style={[styles.chatItemComposeWithFirstRow]}>
<View style={[styles.flexRow, styles.chatItemComposeSecondaryRow, styles.chatItemComposeSecondaryRowOffset, styles.flexWrap, styles.tester]}>
{shouldShowReportRecipientLocalTime && (
<ParticipantLocalTime participant={reportRecipient} style={[styles.mr3]} />
)}
<OfflineIndicator style={[styles.mr3]} />
<ExceededCommentLength commentLength={this.comment.length} style={[styles.mr3]} />
<ReportTypingIndicator reportID={this.props.reportID} />
</View>

<View style={[shouldShowReportRecipientLocalTime && styles.chatItemComposeWithFirstRow]}>
{shouldShowReportRecipientLocalTime
&& <ParticipantLocalTime participant={reportRecipient} />}
<View style={[
(!isBlockedFromConcierge && (this.state.isFocused || this.state.isDraggingOver))
? styles.chatItemComposeBoxFocusedColor
Expand Down Expand Up @@ -592,6 +585,11 @@ class ReportActionCompose extends React.Component {
</Tooltip>
</View>
</View>
<View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
<OfflineIndicator />
<ReportTypingIndicator reportID={this.props.reportID} />
<ExceededCommentLength commentLength={this.comment.length} />
</View>
</View>
);
}
Expand Down
18 changes: 17 additions & 1 deletion src/pages/home/report/ReportTypingIndicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
import {withNetwork} from '../../../components/OnyxProvider';
import networkPropTypes from '../../../components/networkPropTypes';
import compose from '../../../libs/compose';
import ONYXKEYS from '../../../ONYXKEYS';
import styles from '../../../styles/styles';
Expand All @@ -14,6 +16,9 @@ const propTypes = {
/** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */
userTypingStatuses: PropTypes.objectOf(PropTypes.bool),

/** Information about the network */
network: networkPropTypes.isRequired,

...withLocalizePropTypes,
};

Expand Down Expand Up @@ -46,6 +51,11 @@ class ReportTypingIndicator extends React.Component {
render() {
const numUsersTyping = _.size(this.state.usersTyping);

// If we are offline, the user typing statuses are not up-to-date so do not show them
if (this.props.network.isOffline) {
mountiny marked this conversation as resolved.
Show resolved Hide resolved
return null;
}

// Decide on the Text element that will hold the display based on the number of users that are typing.
switch (numUsersTyping) {
case 0:
Expand All @@ -57,13 +67,18 @@ class ReportTypingIndicator extends React.Component {
leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
textStyle={[styles.chatItemComposeSecondaryRowSubText]}
wrapperStyle={styles.chatItemComposeSecondaryRow}
leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
/>
);

default:
return (
<Text
style={[styles.chatItemComposeSecondaryRowSubText]}
style={[
styles.chatItemComposeSecondaryRowSubText,
styles.chatItemComposeSecondaryRowOffset,
]}
numberOfLines={1}
>
{this.props.translate('reportTypingIndicator.multipleUsers')}
Expand All @@ -79,6 +94,7 @@ ReportTypingIndicator.defaultProps = defaultProps;

export default compose(
withLocalize,
withNetwork(),
withOnyx({
userTypingStatuses: {
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`,
Expand Down
2 changes: 1 addition & 1 deletion src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,7 +648,7 @@ const styles = {
},

chatItemComposeSecondaryRow: {
minHeight: 15,
height: 15,
neil-marcellini marked this conversation as resolved.
Show resolved Hide resolved
marginBottom: 5,
marginTop: 5,
},
Expand Down