diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 9b2d028a7350..532b8b78ff7d 100755 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -9,7 +9,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Growl from '../../libs/Growl'; import themeColors from '../../styles/themes/default'; import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable'; -import getNumberOfLines from '../../libs/ComposerUtils/index'; +import * as ComposerUtils from '../../libs/ComposerUtils'; import * as Browser from '../../libs/Browser'; import Clipboard from '../../libs/Clipboard'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; @@ -343,7 +343,7 @@ class Composer extends React.Component { const lineHeight = parseInt(computedStyle.lineHeight, 10) || 20; const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10) + parseInt(computedStyle.paddingTop, 10); - const computedNumberOfLines = getNumberOfLines(this.props.maxLines, lineHeight, paddingTopAndBottom, this.textInput.scrollHeight); + const computedNumberOfLines = ComposerUtils.getNumberOfLines(this.props.maxLines, lineHeight, paddingTopAndBottom, this.textInput.scrollHeight); const numberOfLines = computedNumberOfLines === 0 ? this.props.numberOfLines : computedNumberOfLines; updateIsFullComposerAvailable(this.props, numberOfLines); this.setState({ diff --git a/src/libs/ComposerUtils/getNumberOfLines/index.js b/src/libs/ComposerUtils/getNumberOfLines/index.js new file mode 100644 index 000000000000..a469da7516bb --- /dev/null +++ b/src/libs/ComposerUtils/getNumberOfLines/index.js @@ -0,0 +1,17 @@ +/** + * Get the current number of lines in the composer + * + * @param {Number} maxLines + * @param {Number} lineHeight + * @param {Number} paddingTopAndBottom + * @param {Number} scrollHeight + * + * @returns {Number} + */ +function getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, scrollHeight) { + let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight); + newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines); + return newNumberOfLines; +} + +export default getNumberOfLines; diff --git a/src/libs/ComposerUtils/getNumberOfLines/index.native.js b/src/libs/ComposerUtils/getNumberOfLines/index.native.js new file mode 100644 index 000000000000..ff4a1c6d74b1 --- /dev/null +++ b/src/libs/ComposerUtils/getNumberOfLines/index.native.js @@ -0,0 +1,14 @@ +/** + * Get the current number of lines in the composer + * + * @param {Number} lineHeight + * @param {Number} paddingTopAndBottom + * @param {Number} scrollHeight + * + * @returns {Number} + */ +function getNumberOfLines(lineHeight, paddingTopAndBottom, scrollHeight) { + return Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight); +} + +export default getNumberOfLines; diff --git a/src/libs/ComposerUtils/index.js b/src/libs/ComposerUtils/index.js index a469da7516bb..e48a803f1152 100644 --- a/src/libs/ComposerUtils/index.js +++ b/src/libs/ComposerUtils/index.js @@ -1,17 +1,19 @@ +import getNumberOfLines from './getNumberOfLines'; +import updateNumberOfLines from './updateNumberOfLines'; + /** - * Get the current number of lines in the composer - * - * @param {Number} maxLines - * @param {Number} lineHeight - * @param {Number} paddingTopAndBottom - * @param {Number} scrollHeight - * - * @returns {Number} + * Replace substring between selection with a text. + * @param {String} text + * @param {Object} selection + * @param {String} textToInsert + * @returns {String} */ -function getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, scrollHeight) { - let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight); - newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines); - return newNumberOfLines; +function insertText(text, selection, textToInsert) { + return text.slice(0, selection.start) + textToInsert + text.slice(selection.end, text.length); } -export default getNumberOfLines; +export { + getNumberOfLines, + updateNumberOfLines, + insertText, +}; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.js b/src/libs/ComposerUtils/updateNumberOfLines/index.js new file mode 100644 index 000000000000..ff8b4c56321a --- /dev/null +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.js @@ -0,0 +1 @@ +export default {}; diff --git a/src/libs/ComposerUtils/index.native.js b/src/libs/ComposerUtils/updateNumberOfLines/index.native.js similarity index 57% rename from src/libs/ComposerUtils/index.native.js rename to src/libs/ComposerUtils/updateNumberOfLines/index.native.js index 783fbac9a426..5a13ae670d81 100644 --- a/src/libs/ComposerUtils/index.native.js +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.js @@ -1,19 +1,7 @@ import lodashGet from 'lodash/get'; -import styles from '../../styles/styles'; -import updateIsFullComposerAvailable from './updateIsFullComposerAvailable'; - -/** - * Get the current number of lines in the composer - * - * @param {Number} lineHeight - * @param {Number} paddingTopAndBottom - * @param {Number} scrollHeight - * - * @returns {Number} - */ -function getNumberOfLines(lineHeight, paddingTopAndBottom, scrollHeight) { - return Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight); -} +import styles from '../../../styles/styles'; +import updateIsFullComposerAvailable from '../updateIsFullComposerAvailable'; +import getNumberOfLines from '../getNumberOfLines'; /** * Check the current scrollHeight of the textarea (minus any padding) and @@ -32,7 +20,4 @@ function updateNumberOfLines(props, e) { updateIsFullComposerAvailable(props, numberOfLines); } -export { - getNumberOfLines, - updateNumberOfLines, -}; +export default updateNumberOfLines; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e664815c95a2..b863a928d4b0 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -53,6 +53,7 @@ import withKeyboardState, {keyboardStatePropTypes} from '../../../components/wit import ArrowKeyFocusManager from '../../../components/ArrowKeyFocusManager'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import KeyboardShortcut from '../../../libs/KeyboardShortcut'; +import * as ComposerUtils from '../../../libs/ComposerUtils'; import * as Welcome from '../../../libs/actions/Welcome'; import Permissions from '../../../libs/Permissions'; @@ -512,17 +513,13 @@ class ReportActionCompose extends React.Component { * @param {String} emoji */ addEmojiToTextBox(emoji) { - const emojiWithSpace = `${emoji} `; - const newComment = this.comment.slice(0, this.state.selection.start) - + emojiWithSpace - + this.comment.slice(this.state.selection.end, this.comment.length); this.setState(prevState => ({ selection: { - start: prevState.selection.start + emojiWithSpace.length, - end: prevState.selection.start + emojiWithSpace.length, + start: prevState.selection.start + emoji.length, + end: prevState.selection.start + emoji.length, }, })); - this.updateComment(newComment); + this.updateComment(ComposerUtils.insertText(this.comment, this.state.selection, emoji)); } /** diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index db037c4122b0..95f4caa7249a 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -27,6 +27,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState'; import ONYXKEYS from '../../../ONYXKEYS'; +import * as ComposerUtils from '../../../libs/ComposerUtils'; const propTypes = { /** All the data of the action */ @@ -229,15 +230,13 @@ class ReportActionItemMessageEdit extends React.Component { * @param {String} emoji */ addEmojiToTextBox(emoji) { - const newComment = this.state.draft.slice(0, this.state.selection.start) - + emoji + this.state.draft.slice(this.state.selection.end, this.state.draft.length); this.setState(prevState => ({ selection: { start: prevState.selection.start + emoji.length, end: prevState.selection.start + emoji.length, }, })); - this.updateDraft(newComment); + this.updateDraft(ComposerUtils.insertText(this.state.draft, this.state.selection, emoji)); } /**