PLT-4404 Replace calls to onInput with onChange to better support IE11 (#4315)
* Replace calls to onInput with onChange to better support IE11 * Replaced react-textarea-autosize with react-autosize-textarea
Этот коммит содержится в:
коммит произвёл
GitHub
родитель
f8182022b6
Коммит
0741d3be0a
29
NOTICE.txt
29
NOTICE.txt
@@ -1284,33 +1284,34 @@ limitations under the License.
|
||||
|
||||
---
|
||||
|
||||
This product contains a modified portion of 'react-textarea-autosize', a drop-in replacement for the textarea component which automatically resizes textarea as content changes by Andrey Popp.
|
||||
This product contains a modified portion of 'react-autosize-textarea', a light replacement for built-in textarea component which automaticaly adjusts its height to match the content.
|
||||
|
||||
* HOMEPAGE:
|
||||
* https://github.com/andreypopp/react-textarea-autosize
|
||||
* https://github.com/buildo/react-autosize-textarea
|
||||
|
||||
* LICENSE:
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 Andrey Popp
|
||||
Copyright (c) 2016 buildo s.r.l.s.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ export default class SwitchChannelModal extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.onInput = this.onInput.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.onShow = this.onShow.bind(this);
|
||||
this.onHide = this.onHide.bind(this);
|
||||
this.onExited = this.onExited.bind(this);
|
||||
@@ -68,7 +68,7 @@ export default class SwitchChannelModal extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
onInput(e) {
|
||||
onChange(e) {
|
||||
this.setState({text: e.target.value});
|
||||
}
|
||||
|
||||
@@ -152,7 +152,7 @@ export default class SwitchChannelModal extends React.Component {
|
||||
ref='search'
|
||||
className='form-control focused'
|
||||
type='input'
|
||||
onInput={this.onInput}
|
||||
onChange={this.onChange}
|
||||
value={this.state.text}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
listComponent={SuggestionList}
|
||||
|
||||
@@ -35,7 +35,7 @@ export default class CreateComment extends React.Component {
|
||||
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this);
|
||||
this.handleInput = this.handleInput.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||||
this.handleUploadClick = this.handleUploadClick.bind(this);
|
||||
this.handleUploadStart = this.handleUploadStart.bind(this);
|
||||
@@ -180,7 +180,7 @@ export default class CreateComment extends React.Component {
|
||||
GlobalActions.emitLocalUserTypingEvent(this.props.channelId, this.props.rootId);
|
||||
}
|
||||
|
||||
handleInput(e) {
|
||||
handleChange(e) {
|
||||
const messageText = e.target.value;
|
||||
|
||||
const draft = PostStore.getCommentDraft(this.props.rootId);
|
||||
@@ -393,7 +393,7 @@ export default class CreateComment extends React.Component {
|
||||
>
|
||||
<div className='post-body__cell'>
|
||||
<Textbox
|
||||
onInput={this.handleInput}
|
||||
onChange={this.handleChange}
|
||||
onKeyPress={this.commentMsgKeyPress}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
messageText={this.state.messageText}
|
||||
|
||||
@@ -43,7 +43,7 @@ export default class CreatePost extends React.Component {
|
||||
this.getCurrentDraft = this.getCurrentDraft.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.postMsgKeyPress = this.postMsgKeyPress.bind(this);
|
||||
this.handleInput = this.handleInput.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleUploadClick = this.handleUploadClick.bind(this);
|
||||
this.handleUploadStart = this.handleUploadStart.bind(this);
|
||||
this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
|
||||
@@ -210,7 +210,7 @@ export default class CreatePost extends React.Component {
|
||||
GlobalActions.emitLocalUserTypingEvent(this.state.channelId, '');
|
||||
}
|
||||
|
||||
handleInput(e) {
|
||||
handleChange(e) {
|
||||
const messageText = e.target.value;
|
||||
this.setState({messageText});
|
||||
|
||||
@@ -512,7 +512,7 @@ export default class CreatePost extends React.Component {
|
||||
<div className='post-create-body'>
|
||||
<div className='post-body__cell'>
|
||||
<Textbox
|
||||
onInput={this.handleInput}
|
||||
onChange={this.handleChange}
|
||||
onKeyPress={this.postMsgKeyPress}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
messageText={this.state.messageText}
|
||||
|
||||
@@ -31,7 +31,7 @@ export default class EditPostModal extends React.Component {
|
||||
this.handleEditKeyPress = this.handleEditKeyPress.bind(this);
|
||||
this.handleEditPostEvent = this.handleEditPostEvent.bind(this);
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||||
this.handleInput = this.handleInput.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.onPreferenceChange = this.onPreferenceChange.bind(this);
|
||||
this.onModalHidden = this.onModalHidden.bind(this);
|
||||
this.onModalShow = this.onModalShow.bind(this);
|
||||
@@ -89,7 +89,7 @@ export default class EditPostModal extends React.Component {
|
||||
$('#edit_post').modal('hide');
|
||||
}
|
||||
|
||||
handleInput(e) {
|
||||
handleChange(e) {
|
||||
this.setState({
|
||||
editText: e.target.value
|
||||
});
|
||||
@@ -230,7 +230,7 @@ export default class EditPostModal extends React.Component {
|
||||
</div>
|
||||
<div className='edit-modal-body modal-body'>
|
||||
<Textbox
|
||||
onInput={this.handleInput}
|
||||
onChange={this.handleChange}
|
||||
onKeyPress={this.handleEditKeyPress}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
messageText={this.state.editText}
|
||||
|
||||
@@ -27,7 +27,7 @@ export default class SearchBar extends React.Component {
|
||||
this.mounted = false;
|
||||
|
||||
this.onListenerChange = this.onListenerChange.bind(this);
|
||||
this.handleInput = this.handleInput.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleUserFocus = this.handleUserFocus.bind(this);
|
||||
this.handleUserBlur = this.handleUserBlur.bind(this);
|
||||
this.performSearch = this.performSearch.bind(this);
|
||||
@@ -94,7 +94,7 @@ export default class SearchBar extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
handleInput(e) {
|
||||
handleChange(e) {
|
||||
var term = e.target.value;
|
||||
SearchStore.storeSearchTerm(term);
|
||||
SearchStore.emitSearchTermChange(false);
|
||||
@@ -188,7 +188,7 @@ export default class SearchBar extends React.Component {
|
||||
value={this.state.searchTerm}
|
||||
onFocus={this.handleUserFocus}
|
||||
onBlur={this.handleUserBlur}
|
||||
onInput={this.handleInput}
|
||||
onChange={this.handleChange}
|
||||
listComponent={SearchSuggestionList}
|
||||
providers={this.suggestionProviders}
|
||||
type='search'
|
||||
|
||||
@@ -9,7 +9,7 @@ import * as GlobalActions from 'actions/global_actions.jsx';
|
||||
import SuggestionStore from 'stores/suggestion_store.jsx';
|
||||
import * as Utils from 'utils/utils.jsx';
|
||||
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import TextareaAutosize from 'react-autosize-textarea';
|
||||
|
||||
const KeyCodes = Constants.KeyCodes;
|
||||
|
||||
@@ -22,7 +22,7 @@ export default class SuggestionBox extends React.Component {
|
||||
this.handleDocumentClick = this.handleDocumentClick.bind(this);
|
||||
|
||||
this.handleCompleteWord = this.handleCompleteWord.bind(this);
|
||||
this.handleInput = this.handleInput.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||||
this.handlePretextChanged = this.handlePretextChanged.bind(this);
|
||||
|
||||
@@ -70,15 +70,15 @@ export default class SuggestionBox extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
handleInput(e) {
|
||||
handleChange(e) {
|
||||
const textbox = ReactDOM.findDOMNode(this.refs.textbox);
|
||||
const caret = Utils.getCaretPosition(textbox);
|
||||
const pretext = textbox.value.substring(0, caret);
|
||||
|
||||
GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext);
|
||||
|
||||
if (this.props.onInput) {
|
||||
this.props.onInput(e);
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(e);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,14 +103,14 @@ export default class SuggestionBox extends React.Component {
|
||||
|
||||
this.refs.textbox.value = prefix + term + ' ' + suffix;
|
||||
|
||||
if (this.props.onInput) {
|
||||
if (this.props.onChange) {
|
||||
// fake an input event to send back to parent components
|
||||
const e = {
|
||||
target: this.refs.textbox
|
||||
};
|
||||
|
||||
// don't call handleInput or we'll get into an event loop
|
||||
this.props.onInput(e);
|
||||
// don't call handleChange or we'll get into an event loop
|
||||
this.props.onChange(e);
|
||||
}
|
||||
|
||||
textbox.focus();
|
||||
@@ -157,7 +157,7 @@ export default class SuggestionBox extends React.Component {
|
||||
ref='textbox'
|
||||
type='text'
|
||||
{...this.props}
|
||||
onInput={this.handleInput}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
/>
|
||||
);
|
||||
@@ -167,7 +167,7 @@ export default class SuggestionBox extends React.Component {
|
||||
ref='textbox'
|
||||
type='search'
|
||||
{...this.props}
|
||||
onInput={this.handleInput}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
/>
|
||||
);
|
||||
@@ -177,7 +177,7 @@ export default class SuggestionBox extends React.Component {
|
||||
id={this.suggestionId}
|
||||
ref='textbox'
|
||||
{...this.props}
|
||||
onInput={this.handleInput}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
/>
|
||||
);
|
||||
@@ -226,6 +226,6 @@ SuggestionBox.propTypes = {
|
||||
renderDividers: React.PropTypes.bool,
|
||||
|
||||
// explicitly name any input event handlers we override and need to manually call
|
||||
onInput: React.PropTypes.func,
|
||||
onChange: React.PropTypes.func,
|
||||
onKeyDown: React.PropTypes.func
|
||||
};
|
||||
|
||||
@@ -206,7 +206,7 @@ export default class Textbox extends React.Component {
|
||||
spellCheck='true'
|
||||
maxLength={Constants.MAX_POST_LEN}
|
||||
placeholder={this.props.createMessage}
|
||||
onInput={this.props.onInput}
|
||||
onChange={this.props.onChange}
|
||||
onKeyPress={this.handleKeyPress}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onHeightChange={this.handleHeightChange}
|
||||
@@ -251,7 +251,7 @@ Textbox.propTypes = {
|
||||
id: React.PropTypes.string.isRequired,
|
||||
channelId: React.PropTypes.string,
|
||||
messageText: React.PropTypes.string.isRequired,
|
||||
onInput: React.PropTypes.func.isRequired,
|
||||
onChange: React.PropTypes.func.isRequired,
|
||||
onKeyPress: React.PropTypes.func.isRequired,
|
||||
createMessage: React.PropTypes.string.isRequired,
|
||||
onKeyDown: React.PropTypes.func,
|
||||
|
||||
@@ -24,13 +24,13 @@
|
||||
"perfect-scrollbar": "0.6.12",
|
||||
"react": "15.3.2",
|
||||
"react-addons-pure-render-mixin": "15.3.2",
|
||||
"react-autosize-textarea": "0.3.3",
|
||||
"react-bootstrap": "0.30.3",
|
||||
"react-custom-scrollbars": "4.0.0",
|
||||
"react-dom": "15.3.2",
|
||||
"react-intl": "2.1.5",
|
||||
"react-router": "2.8.1",
|
||||
"react-select": "1.0.0-rc.2",
|
||||
"react-textarea-autosize": "4.0.5",
|
||||
"superagent": "2.3.0",
|
||||
"twemoji": "2.2.0",
|
||||
"velocity-animate": "1.2.3",
|
||||
|
||||
Ссылка в новой задаче
Block a user