-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
ReportActionItemMessageEdit.js
131 lines (117 loc) · 4.67 KB
/
ReportActionItemMessageEdit.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import React from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import _ from 'underscore';
import ReportActionPropTypes from './ReportActionPropTypes';
import styles from '../../../styles/styles';
import TextInputFocusable from '../../../components/TextInputFocusable';
import {editReportComment, saveReportActionDraft} from '../../../libs/actions/Report';
import {scrollToIndex} from '../../../libs/ReportScrollManager';
import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
import Button from '../../../components/Button';
const propTypes = {
/** All the data of the action */
action: PropTypes.shape(ReportActionPropTypes).isRequired,
/** Draft message */
draftMessage: PropTypes.string.isRequired,
/** ReportID that holds the comment we're editing */
reportID: PropTypes.number.isRequired,
/** Position index of the report action in the overall report FlatList view */
index: PropTypes.number.isRequired,
/** Window Dimensions Props */
...windowDimensionsPropTypes,
};
class ReportActionItemMessageEdit extends React.Component {
constructor(props) {
super(props);
this.updateDraft = this.updateDraft.bind(this);
this.deleteDraft = this.deleteDraft.bind(this);
this.debouncedSaveDraft = _.debounce(this.debouncedSaveDraft.bind(this), 1000, true);
this.publishDraft = this.publishDraft.bind(this);
this.triggerSaveOrCancel = this.triggerSaveOrCancel.bind(this);
this.state = {
draft: this.props.draftMessage,
};
}
/**
* Update the value of the draft in Onyx
*
* @param {String} newDraft
*/
updateDraft(newDraft) {
const trimmedNewDraft = newDraft.trim();
this.setState({draft: trimmedNewDraft});
this.debouncedSaveDraft(trimmedNewDraft);
}
/**
* Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content.
*/
deleteDraft() {
saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, '');
toggleReportActionComposeView(true, this.props.isSmallScreenWidth);
}
/**
* Save the draft of the comment. This debounced so that we're not ceaselessly saving your edit. Saving the draft
* allows one to navigate somewhere else and come back to the comment and still have it in edit mode.
*/
debouncedSaveDraft() {
saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, this.state.draft);
}
/**
* Save the draft of the comment to be the new comment message. This will take the comment out of "edit mode" with
* the new content.
*/
publishDraft() {
editReportComment(this.props.reportID, this.props.action, this.state.draft);
this.deleteDraft();
}
/**
* Key event handlers that short cut to saving/canceling.
*
* @param {Event} e
*/
triggerSaveOrCancel(e) {
if (e && e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this.publishDraft();
} else if (e && e.key === 'Escape') {
e.preventDefault();
this.deleteDraft();
}
}
render() {
return (
<View style={styles.chatItemMessage}>
<TextInputFocusable
multiline
onChangeText={this.updateDraft} // Debounced saveDraftComment
onKeyPress={this.triggerSaveOrCancel}
defaultValue={this.props.draftMessage}
maxLines={16} // This is the same that slack has
style={[styles.textInput, styles.flex0]}
onFocus={() => {
scrollToIndex({animated: true, index: this.props.index}, true);
toggleReportActionComposeView(false);
}}
autoFocus
/>
<View style={[styles.flexRow, styles.mt1]}>
<Button
style={[styles.mr2]}
onPress={this.deleteDraft}
text="Cancel"
/>
<Button
success
style={[styles.mr2]}
onPress={this.publishDraft}
text="Save Changes"
/>
</View>
</View>
);
}
}
ReportActionItemMessageEdit.propTypes = propTypes;
export default withWindowDimensions(ReportActionItemMessageEdit);