miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

Chat drag/drop working. Debugging autosuggesttextarea drag/drop

drag_drop
Curtis ROck 2020-09-23 21:50:31 -05:00
rodzic 414163f0dc
commit ef73294ba4
2 zmienionych plików z 33 dodań i 37 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

44
app/soapbox/components/autosuggest_textarea.js
Wyświetl plik

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container'; import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
import AutosuggestEmoji from './autosuggest_emoji'; import AutosuggestEmoji from './autosuggest_emoji';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
@ -35,9 +36,11 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
} }
}; };
export default class AutosuggestTextarea extends ImmutablePureComponent { export default @connect()
class AutosuggestTextarea extends ImmutablePureComponent {
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired,
value: PropTypes.string, value: PropTypes.string,
suggestions: ImmutablePropTypes.list, suggestions: ImmutablePropTypes.list,
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -52,7 +55,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
onFocus: PropTypes.func, onFocus: PropTypes.func,
onBlur: PropTypes.func, onBlur: PropTypes.func,
onAttachment: PropTypes.func, // onAttachment: PropTypes.func,
}; };
static defaultProps = { static defaultProps = {
@ -69,19 +72,19 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
}; };
componentDidMount() { componentDidMount() {
window.addEventListener('dragenter', this.handleDragEnter, false); this.node.addEventListener('dragenter', this.handleDragEnter, false);
window.addEventListener('dragover', this.handleDragOver, false); this.node.addEventListener('dragover', this.handleDragOver, false);
window.addEventListener('drop', this.handleDrop, false); this.node.addEventListener('drop', this.handleDrop, false);
window.addEventListener('dragleave', this.handleDragLeave, false); this.node.addEventListener('dragleave', this.handleDragLeave, false);
window.addEventListener('dragend', this.handleDragEnd, false); this.node.addEventListener('dragend', this.handleDragEnd, false);
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('dragenter', this.handleDragEnter); this.node.removeEventListener('dragenter', this.handleDragEnter);
window.removeEventListener('dragover', this.handleDragOver); this.node.removeEventListener('dragover', this.handleDragOver);
window.removeEventListener('drop', this.handleDrop); this.node.removeEventListener('drop', this.handleDrop);
window.removeEventListener('dragleave', this.handleDragLeave); this.node.removeEventListener('dragleave', this.handleDragLeave);
window.removeEventListener('dragend', this.handleDragEnd); this.node.removeEventListener('dragend', this.handleDragEnd);
} }
onChange = (e) => { onChange = (e) => {
@ -194,10 +197,6 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
this.node = c; this.node = c;
} }
handleAttachment = () => {
const { onAttachment } = this.props;
onAttachment(true);
}
dataTransferIsText = (dataTransfer) => { dataTransferIsText = (dataTransfer) => {
return (dataTransfer && Array.from(dataTransfer.types).includes('text/plain') && dataTransfer.items.length === 1); return (dataTransfer && Array.from(dataTransfer.types).includes('text/plain') && dataTransfer.items.length === 1);
} }
@ -232,10 +231,10 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
return false; return false;
} }
handleAttachment = () => { // handleAttachment = () => {
const { onAttachment } = this.props; // const { onAttachment } = this.props;
onAttachment(true); // onAttachment(true);
} // }
handleFiles = (files) => { handleFiles = (files) => {
const { dispatch } = this.props; const { dispatch } = this.props;
@ -245,7 +244,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
const data = new FormData(); const data = new FormData();
data.append('file', files[0]); data.append('file', files[0]);
dispatch(uploadCompose(data)); dispatch(uploadCompose(data));
dispatch(this.handleAttachment()); // dispatch(this.handleAttachment());
// dispatch(uploadMedia(data, this.onUploadProgress)).then(response => { // dispatch(uploadMedia(data, this.onUploadProgress)).then(response => {
// this.setState({ attachment: response.data, isUploading: false }); // this.setState({ attachment: response.data, isUploading: false });
// this.handleAttachment(); // this.handleAttachment();
@ -255,9 +254,6 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
} }
handleDrop = (e) => { handleDrop = (e) => {
const { me } = this.props;
if (!me) return;
if (this.dataTransferIsText(e.dataTransfer)) return; if (this.dataTransferIsText(e.dataTransfer)) return;
e.preventDefault(); e.preventDefault();

26
app/soapbox/features/chats/components/chat_box.js
Wyświetl plik

@ -56,19 +56,19 @@ class ChatBox extends ImmutablePureComponent {
state = this.initialState() state = this.initialState()
componentDidMount() { componentDidMount() {
window.addEventListener('dragenter', this.handleDragEnter, false); this.node.addEventListener('dragenter', this.handleDragEnter, false);
window.addEventListener('dragover', this.handleDragOver, false); this.node.addEventListener('dragover', this.handleDragOver, false);
window.addEventListener('drop', this.handleDrop, false); this.node.addEventListener('drop', this.handleDrop, false);
window.addEventListener('dragleave', this.handleDragLeave, false); this.node.addEventListener('dragleave', this.handleDragLeave, false);
window.addEventListener('dragend', this.handleDragEnd, false); this.node.addEventListener('dragend', this.handleDragEnd, false);
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('dragenter', this.handleDragEnter); this.node.removeEventListener('dragenter', this.handleDragEnter);
window.removeEventListener('dragover', this.handleDragOver); this.node.removeEventListener('dragover', this.handleDragOver);
window.removeEventListener('drop', this.handleDrop); this.node.removeEventListener('drop', this.handleDrop);
window.removeEventListener('dragleave', this.handleDragLeave); this.node.removeEventListener('dragleave', this.handleDragLeave);
window.removeEventListener('dragend', this.handleDragEnd); this.node.removeEventListener('dragend', this.handleDragEnd);
} }
clearState = () => { clearState = () => {
@ -251,8 +251,8 @@ class ChatBox extends ImmutablePureComponent {
<div className='chat-box__filename'> <div className='chat-box__filename'>
{truncateFilename(attachment.preview_url, 20)} {truncateFilename(attachment.preview_url, 20)}
</div> </div>
<div class='chat-box__remove-attachment'> <div className='chat-box__remove-attachment'>
<IconButton icon='remove' onClick={this.handleRemoveFile} /> <IconButton icon='remove' title='remove' onClick={this.handleRemoveFile} />
</div> </div>
</div> </div>
); );
@ -263,7 +263,7 @@ class ChatBox extends ImmutablePureComponent {
return this.canSubmit() ? ( return this.canSubmit() ? (
<div className='chat-box__send'> <div className='chat-box__send'>
<IconButton icon='send' size={16} onClick={this.sendMessage} /> <IconButton icon='send' size={16} title='send' onClick={this.sendMessage} />
</div> </div>
) : ( ) : (
<UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} /> <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />