diff --git a/src/CONST.js b/src/CONST.js index 6c6b7629e26..1a86d93f7e2 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -214,6 +214,7 @@ const CONST = { TYPE: { IOU: 'IOU', ADDCOMMENT: 'ADDCOMMENT', + CREATED: 'CREATED', RENAMED: 'RENAMED', }, }, diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 9a73acdfce2..0d30b2f1ed6 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -70,7 +70,7 @@ const ReportWelcomeText = (props) => { const isResctrictedRoom = lodashGet(props, 'report.visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED; return ( - + {!props.shouldIncludeParticipants ? ( <> diff --git a/src/components/EmptyStateAvatars.js b/src/components/RoomHeaderAvatars.js similarity index 87% rename from src/components/EmptyStateAvatars.js rename to src/components/RoomHeaderAvatars.js index 0174ad0eacf..eb50814854b 100644 --- a/src/components/EmptyStateAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -20,7 +20,7 @@ const defaultProps = { isChatRoom: false, }; -const EmptyStateAvatars = (props) => { +const RoomHeaderAvatars = (props) => { if (!props.avatarImageURLs.length) { return null; } @@ -43,13 +43,13 @@ const EmptyStateAvatars = (props) => { {_.map(avatarImageURLsToDisplay, (val, index) => ( - + {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.avatarImageURLs.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && ( <> @@ -65,8 +65,8 @@ const EmptyStateAvatars = (props) => { ); }; -EmptyStateAvatars.defaultProps = defaultProps; -EmptyStateAvatars.propTypes = propTypes; -EmptyStateAvatars.displayName = 'EmptyStateAvatars'; +RoomHeaderAvatars.defaultProps = defaultProps; +RoomHeaderAvatars.propTypes = propTypes; +RoomHeaderAvatars.displayName = 'RoomHeaderAvatars'; -export default memo(EmptyStateAvatars); +export default memo(RoomHeaderAvatars); diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 836627b0a18..1140e1266a2 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -15,6 +15,7 @@ import IOUAction from '../../../components/ReportActionItem/IOUAction'; import ReportActionItemMessage from './ReportActionItemMessage'; import UnreadActionIndicator from '../../../components/UnreadActionIndicator'; import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; +import ReportActionItemCreated from './ReportActionItemCreated'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import ControlSelection from '../../../libs/ControlSelection'; @@ -118,6 +119,9 @@ class ReportActionItem extends Component { } render() { + if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { + return ; + } if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) { return ; } diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js new file mode 100644 index 00000000000..68ef9035ca0 --- /dev/null +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -0,0 +1,52 @@ +import React from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; +import ONYXKEYS from '../../../ONYXKEYS'; +import RoomHeaderAvatars from '../../../components/RoomHeaderAvatars'; +import ReportWelcomeText from '../../../components/ReportWelcomeText'; +import * as ReportUtils from '../../../libs/reportUtils'; +import styles from '../../../styles/styles'; + +const propTypes = { + /** The report currently being looked at */ + report: PropTypes.shape({ + /** Avatars corresponding to a chat */ + icons: PropTypes.arrayOf(PropTypes.string), + }), +}; +const defaultProps = { + report: {}, +}; + +const ReportActionItemCreated = (props) => { + const isChatRoom = ReportUtils.isChatRoom(props.report); + + return ( + + + + + + + ); +}; + +ReportActionItemCreated.defaultProps = defaultProps; +ReportActionItemCreated.propTypes = propTypes; +ReportActionItemCreated.displayName = 'ReportActionItemCreated'; + +export default withOnyx({ + report: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + }, +})(ReportActionItemCreated); diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 8302b6425fc..946f40e76c0 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -33,9 +33,7 @@ import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionCon import variables from '../../../styles/variables'; import MarkerBadge from './MarkerBadge'; import Performance from '../../../libs/Performance'; -import EmptyStateAvatars from '../../../components/EmptyStateAvatars'; import * as ReportUtils from '../../../libs/reportUtils'; -import ReportWelcomeText from '../../../components/ReportWelcomeText'; import ONYXKEYS from '../../../ONYXKEYS'; import {withPersonalDetails} from '../../../components/OnyxProvider'; import currentUserPersonalDetailsPropsTypes from '../../settings/Profile/currentUserPersonalDetailsPropsTypes'; @@ -339,8 +337,9 @@ class ReportActionsView extends React.Component { this.sortedReportActions = _.chain(reportActions) .sortBy('sequenceNumber') .filter(action => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU - || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT - || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) + || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT + || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED + || action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) .map((item, index) => ({action: item, index})) .value() .reverse(); @@ -542,29 +541,11 @@ class ReportActionsView extends React.Component { } render() { - const isChatRoom = ReportUtils.isChatRoom(this.props.report); - // Comments have not loaded at all yet do nothing if (!_.size(this.props.reportActions)) { return null; } - // If we only have the created action then no one has left a comment - if (_.size(this.props.reportActions) === 1) { - return ( - - - - - - - ); - } - // Native mobile does not render updates flatlist the changes even though component did update called. // To notify there something changes we can use extraData prop to flatlist const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.report.newMarkerSequenceNumber : undefined; diff --git a/src/styles/styles.js b/src/styles/styles.js index f5feae94c62..cb2774a3a5d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1207,13 +1207,6 @@ const styles = { paddingVertical: 16, }, - chatContentEmpty: { - paddingTop: 16, - paddingBottom: 16, - paddingLeft: 20, - paddingRight: 20, - }, - // Chat Item chatItem: { display: 'flex', @@ -1786,7 +1779,7 @@ const styles = { height: 80, }, - emptyStateAvatar: { + roomHeaderAvatar: { height: variables.componentSizeLarge, width: variables.componentSizeLarge, borderRadius: 100, diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js index bb3ada935d3..94cdfba094a 100644 --- a/src/styles/utilities/spacing.js +++ b/src/styles/utilities/spacing.js @@ -324,6 +324,10 @@ export default { paddingBottom: 20, }, + pb8: { + paddingBottom: 32, + }, + pb10Percentage: { paddingBottom: '10%', },