From e022ee332e95c5fa874cd4d5e8ac5feab9284f52 Mon Sep 17 00:00:00 2001 From: Sobit Neupane <073bct543.sobit@pcampus.edu.np> Date: Sat, 5 Feb 2022 20:37:59 +0545 Subject: [PATCH 1/3] Fix cursor issue in room name input --- src/components/RoomNameInput.js | 43 +++++++++++++++---- .../TextInputWithPrefix/index.android.js | 6 +-- src/components/TextInputWithPrefix/index.js | 6 +-- 3 files changed, 36 insertions(+), 19 deletions(-) diff --git a/src/components/RoomNameInput.js b/src/components/RoomNameInput.js index 5d1042be3ebd..1eda50226394 100644 --- a/src/components/RoomNameInput.js +++ b/src/components/RoomNameInput.js @@ -70,6 +70,7 @@ class RoomNameInput extends Component { this.originalRoomName = props.initialValue; this.checkAndModifyRoomName = this.checkAndModifyRoomName.bind(this); + this.checkRoomName = this.checkRoomName.bind(this); } componentDidUpdate(prevProps, prevState) { @@ -83,7 +84,7 @@ class RoomNameInput extends Component { // If the selected policyID has changed we need to check if the room name already exists on this new policy. if (prevProps.policyID !== this.props.policyID) { - this.checkAndModifyRoomName(this.state.roomName); + this.checkRoomName(this.state.roomName); } } @@ -93,41 +94,65 @@ class RoomNameInput extends Component { * - Cannot not include space or special characters, and we automatically apply an underscore for spaces * - Must be lowercase * Also checks to see if this room name already exists, and displays an error message if so. - * @param {String} roomName + * @param {Event} e * */ - checkAndModifyRoomName(roomName) { - const modifiedRoomNameWithoutHash = roomName.substring(1) + checkAndModifyRoomName(e) { + // console.log("Debug event",event); + const event = e.nativeEvent; + const roomName = event.text; + const target = event.target; + const selection = target.selectionStart; + + const modifiedRoomNameWithoutHash = roomName .replace(/ /g, '_') .replace(/[^a-zA-Z\d_]/g, '') .substring(0, CONST.REPORT.MAX_ROOM_NAME_LENGTH) .toLowerCase(); const finalRoomName = `#${modifiedRoomNameWithoutHash}`; + this.checkRoomName(finalRoomName); + + this.setState({ + roomName: finalRoomName, + }, () => { + if (!selection) { + return; + } + target.selectionEnd = selection; + }); + } + + /** + * Checks to see if this room name already exists, and displays an error message if so. + * @param {String} roomName + * + */ + checkRoomName(roomName) { const isExistingRoomName = _.some( _.values(this.props.reports), - report => report && report.policyID === this.props.policyID && report.reportName === finalRoomName, + report => report && report.policyID === this.props.policyID && report.reportName === roomName, ); let error = ''; // We error if the room name already exists. We don't care if it matches the original name provided in this // component because then we are not changing the room's name. - if (isExistingRoomName && finalRoomName !== this.originalRoomName) { + if (isExistingRoomName && roomName !== this.originalRoomName) { error = this.props.translate('newRoomPage.roomAlreadyExistsError'); } // Certain names are reserved for default rooms and should not be used for policy rooms. - if (_.contains(CONST.REPORT.RESERVED_ROOM_NAMES, finalRoomName)) { + if (_.contains(CONST.REPORT.RESERVED_ROOM_NAMES, roomName)) { error = this.props.translate('newRoomPage.roomNameReservedError'); } this.setState({ - roomName: finalRoomName, error, }); } + render() { return ( this.checkAndModifyRoomName(roomName)} + onChange={this.checkAndModifyRoomName} value={this.state.roomName.substring(1)} errorText={this.state.error} autoCapitalize="none" diff --git a/src/components/TextInputWithPrefix/index.android.js b/src/components/TextInputWithPrefix/index.android.js index 8c1854e1badd..e9b3944289fc 100644 --- a/src/components/TextInputWithPrefix/index.android.js +++ b/src/components/TextInputWithPrefix/index.android.js @@ -17,14 +17,11 @@ const propTypes = { /** Whether to disable the field and style */ disabled: PropTypes.bool, - /** Callback to execute the text input is modified */ - onChangeText: PropTypes.func, }; const defaultProps = { errorText: '', disabled: false, - onChangeText: () => {}, }; const TextInputWithPrefix = props => ( @@ -44,9 +41,8 @@ const TextInputWithPrefix = props => ( styles.noOutline, {height: 40}, ]} - onChangeText={text => props.onChangeText(`${props.prefixCharacter}${text}`)} // eslint-disable-next-line react/jsx-props-no-spreading - {..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])} + {..._.omit(props, ['prefixCharacter', 'errorText'])} /> {!_.isEmpty(props.errorText) && ( diff --git a/src/components/TextInputWithPrefix/index.js b/src/components/TextInputWithPrefix/index.js index 6080b08870c4..8802f88536e2 100644 --- a/src/components/TextInputWithPrefix/index.js +++ b/src/components/TextInputWithPrefix/index.js @@ -17,14 +17,11 @@ const propTypes = { /** Whether to disable the field and style */ disabled: PropTypes.bool, - /** Callback to execute the text input is modified */ - onChangeText: PropTypes.func, }; const defaultProps = { errorText: '', disabled: false, - onChangeText: () => {}, }; const TextInputWithPrefix = props => ( @@ -42,9 +39,8 @@ const TextInputWithPrefix = props => ( styles.textInputWithPrefix.textInput, styles.noOutline, ]} - onChangeText={text => props.onChangeText(`${props.prefixCharacter}${text}`)} // eslint-disable-next-line react/jsx-props-no-spreading - {..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])} + {..._.omit(props, ['prefixCharacter', 'errorText'])} /> {!_.isEmpty(props.errorText) && ( From 0c3c63f81e98fb7e01f15c58a51cefdd85ce2d3a Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Thu, 10 Feb 2022 00:21:35 +0545 Subject: [PATCH 2/3] Syntatic change in checkAndModifyRoomName --- src/components/RoomNameInput.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/RoomNameInput.js b/src/components/RoomNameInput.js index 1eda50226394..337774c86006 100644 --- a/src/components/RoomNameInput.js +++ b/src/components/RoomNameInput.js @@ -94,14 +94,13 @@ class RoomNameInput extends Component { * - Cannot not include space or special characters, and we automatically apply an underscore for spaces * - Must be lowercase * Also checks to see if this room name already exists, and displays an error message if so. - * @param {Event} e + * @param {Event} event * */ - checkAndModifyRoomName(e) { - // console.log("Debug event",event); - const event = e.nativeEvent; - const roomName = event.text; - const target = event.target; + checkAndModifyRoomName(event) { + const nativeEvent = event.nativeEvent; + const roomName = nativeEvent.text; + const target = nativeEvent.target; const selection = target.selectionStart; const modifiedRoomNameWithoutHash = roomName From 8d9a90b0427ca134f39ce2beeae730394496ed6c Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Thu, 10 Feb 2022 21:37:54 +0545 Subject: [PATCH 3/3] Change checkRoomName to checkExistingRoomName --- src/components/RoomNameInput.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/RoomNameInput.js b/src/components/RoomNameInput.js index 337774c86006..c9ba86fbae4d 100644 --- a/src/components/RoomNameInput.js +++ b/src/components/RoomNameInput.js @@ -70,7 +70,7 @@ class RoomNameInput extends Component { this.originalRoomName = props.initialValue; this.checkAndModifyRoomName = this.checkAndModifyRoomName.bind(this); - this.checkRoomName = this.checkRoomName.bind(this); + this.checkExistingRoomName = this.checkExistingRoomName.bind(this); } componentDidUpdate(prevProps, prevState) { @@ -84,7 +84,7 @@ class RoomNameInput extends Component { // If the selected policyID has changed we need to check if the room name already exists on this new policy. if (prevProps.policyID !== this.props.policyID) { - this.checkRoomName(this.state.roomName); + this.checkExistingRoomName(this.state.roomName); } } @@ -110,7 +110,7 @@ class RoomNameInput extends Component { .toLowerCase(); const finalRoomName = `#${modifiedRoomNameWithoutHash}`; - this.checkRoomName(finalRoomName); + this.checkExistingRoomName(finalRoomName); this.setState({ roomName: finalRoomName, @@ -127,7 +127,7 @@ class RoomNameInput extends Component { * @param {String} roomName * */ - checkRoomName(roomName) { + checkExistingRoomName(roomName) { const isExistingRoomName = _.some( _.values(this.props.reports), report => report && report.policyID === this.props.policyID && report.reportName === roomName,