-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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.
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
Empty State Design #13647
Empty State Design #13647
Changes from all commits
17f4d94
a739303
7fb162d
3d31260
e16af81
882a866
2137936
1ce6051
cc8a117
284b025
61cb1d5
86095e1
0383b99
17e6fa0
d3eee04
57f1bc8
514d4b9
55a42ee
b9577b8
95f5cf0
5e0dcc4
7e961e9
8e36b3f
0482070
8329746
1feae14
c8d2492
70b2302
44b28f2
f378578
c192797
a33d6c8
51a9688
fa6ea43
87d197a
752ea0f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
import React from 'react'; | ||
import {Pressable, View} from 'react-native'; | ||
import {Pressable, ImageBackground, View} from 'react-native'; | ||
import lodashGet from 'lodash/get'; | ||
import {withOnyx} from 'react-native-onyx'; | ||
import PropTypes from 'prop-types'; | ||
|
@@ -12,6 +12,10 @@ import styles from '../../../styles/styles'; | |
import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; | ||
import * as Report from '../../../libs/actions/Report'; | ||
import reportPropTypes from '../../reportPropTypes'; | ||
import EmptyStateBackgroundImage from '../../../../assets/images/empty-state_background-fade.png'; | ||
import * as StyleUtils from '../../../styles/StyleUtils'; | ||
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; | ||
import compose from '../../../libs/compose'; | ||
|
||
const propTypes = { | ||
/** The id of the report */ | ||
|
@@ -28,6 +32,8 @@ const propTypes = { | |
/** Name of the policy */ | ||
name: PropTypes.string, | ||
}), | ||
|
||
...windowDimensionsPropTypes, | ||
}; | ||
const defaultProps = { | ||
report: {}, | ||
|
@@ -37,28 +43,36 @@ const defaultProps = { | |
|
||
const ReportActionItemCreated = (props) => { | ||
const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies); | ||
|
||
return ( | ||
<OfflineWithFeedback | ||
pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(props.report, 'pendingFields.createChat')} | ||
errors={lodashGet(props.report, 'errorFields.addWorkspaceRoom') || lodashGet(props.report, 'errorFields.createChat')} | ||
errorRowStyles={styles.addWorkspaceRoomErrorRow} | ||
errorRowStyles={[styles.ml10, styles.mr2]} | ||
onClose={() => Report.navigateToConciergeChatAndDeleteReport(props.report.reportID)} | ||
> | ||
<View | ||
accessibilityLabel="Chat welcome message" | ||
style={[ | ||
styles.chatContent, | ||
styles.pb8, | ||
styles.p5, | ||
]} | ||
> | ||
<View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}> | ||
<Pressable onPress={() => ReportUtils.navigateToDetailsPage(props.report)}> | ||
<View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}> | ||
<View pointerEvents="none" style={StyleUtils.getReportWelcomeBackgroundImageViewStyle(props.isSmallScreenWidth)}> | ||
<ImageBackground | ||
source={EmptyStateBackgroundImage} | ||
style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)} | ||
/> | ||
</View> | ||
<View | ||
accessibilityLabel="Chat welcome message" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we be using non-translated strings for There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. let's translate this as well. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See my comments in Slack - I agree that this should be changed BUT I think we need to handle that separately (for context, this was already here, I just moved it). It is being used for testing here and this is the pattern across the app. Again, I don't like this either but I think we can do another issue for this at this time. |
||
style={styles.p5} | ||
> | ||
<Pressable | ||
onPress={() => ReportUtils.navigateToDetailsPage(props.report)} | ||
style={[styles.ph5, styles.pb3, styles.alignSelfStart]} | ||
> | ||
<RoomHeaderAvatars | ||
icons={icons} | ||
/> | ||
</Pressable> | ||
<ReportWelcomeText report={props.report} /> | ||
<View style={[styles.ph5]}> | ||
<ReportWelcomeText report={props.report} /> | ||
</View> | ||
</View> | ||
</View> | ||
</OfflineWithFeedback> | ||
|
@@ -69,14 +83,17 @@ ReportActionItemCreated.defaultProps = defaultProps; | |
ReportActionItemCreated.propTypes = propTypes; | ||
ReportActionItemCreated.displayName = 'ReportActionItemCreated'; | ||
|
||
export default withOnyx({ | ||
report: { | ||
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, | ||
}, | ||
personalDetails: { | ||
key: ONYXKEYS.PERSONAL_DETAILS, | ||
}, | ||
policies: { | ||
key: ONYXKEYS.COLLECTION.POLICY, | ||
}, | ||
})(ReportActionItemCreated); | ||
export default compose( | ||
withWindowDimensions, | ||
withOnyx({ | ||
report: { | ||
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, | ||
}, | ||
personalDetails: { | ||
key: ONYXKEYS.PERSONAL_DETAILS, | ||
}, | ||
policies: { | ||
key: ONYXKEYS.COLLECTION.POLICY, | ||
}, | ||
}), | ||
)(ReportActionItemCreated); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it okay to remove this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep! Removing that style shifts the text over to the left, to match the mocks. Not needed anymore.