};
};
-export function selectComposeSuggestion(position, token, suggestion) {
+export function selectComposeSuggestion(position, token, suggestion, path) {
return (dispatch, getState) => {
let completion, startPosition;
position: startPosition,
token,
completion,
+ path,
});
};
};
import PropTypes from 'prop-types';
import { isRtl } from '../rtl';
import ImmutablePureComponent from 'react-immutable-pure-component';
-import Textarea from 'react-textarea-autosize';
import classNames from 'classnames';
+import { List as ImmutableList } from 'immutable';
-const textAtCursorMatchesToken = (str, caretPosition) => {
+const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
let word;
let left = str.slice(0, caretPosition).search(/\S+$/);
word = str.slice(left, right + caretPosition);
}
- if (!word || word.trim().length < 3 || ['@', ':', '#'].indexOf(word[0]) === -1) {
+ if (!word || word.trim().length < 3 || searchTokens.indexOf(word[0]) === -1) {
return [null, null];
}
}
};
-export default class AutosuggestTextarea extends ImmutablePureComponent {
+export default class AutosuggestInput extends ImmutablePureComponent {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func.isRequired,
onKeyUp: PropTypes.func,
onKeyDown: PropTypes.func,
- onPaste: PropTypes.func.isRequired,
autoFocus: PropTypes.bool,
+ className: PropTypes.string,
+ id: PropTypes.string,
+ searchTokens: PropTypes.list,
+ maxLength: PropTypes.number,
};
static defaultProps = {
autoFocus: true,
+ searchTokens: ImmutableList(['@', ':', '#']),
};
state = {
- suggestionsHidden: false,
+ suggestionsHidden: true,
+ focused: false,
selectedSuggestion: 0,
lastToken: null,
tokenStart: 0,
};
onChange = (e) => {
- const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
+ const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
if (token !== null && this.state.lastToken !== token) {
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
}
onBlur = () => {
- this.setState({ suggestionsHidden: true });
+ this.setState({ suggestionsHidden: true, focused: false });
+ }
+
+ onFocus = () => {
+ this.setState({ focused: true });
}
onSuggestionClick = (e) => {
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index'));
e.preventDefault();
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
- this.textarea.focus();
+ this.input.focus();
}
componentWillReceiveProps (nextProps) {
- if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) {
+ if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
this.setState({ suggestionsHidden: false });
}
}
- setTextarea = (c) => {
- this.textarea = c;
- }
-
- onPaste = (e) => {
- if (e.clipboardData && e.clipboardData.files.length === 1) {
- this.props.onPaste(e.clipboardData.files);
- e.preventDefault();
- }
+ setInput = (c) => {
+ this.input = c;
}
renderSuggestion = (suggestion, i) => {
}
render () {
- const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
+ const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength } = this.props;
const { suggestionsHidden } = this.state;
const style = { direction: 'ltr' };
}
return (
- <div className='autosuggest-textarea'>
+ <div className='autosuggest-input'>
<label>
<span style={{ display: 'none' }}>{placeholder}</span>
- <Textarea
- inputRef={this.setTextarea}
- className='autosuggest-textarea__textarea'
+ <input
+ type='text'
+ ref={this.setInput}
disabled={disabled}
placeholder={placeholder}
autoFocus={autoFocus}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
+ onFocus={this.onFocus}
onBlur={this.onBlur}
- onPaste={this.onPaste}
style={style}
aria-autocomplete='list'
+ id={id}
+ className={className}
+ maxLength={maxLength}
/>
</label>
};
state = {
- suggestionsHidden: false,
+ suggestionsHidden: true,
+ focused: false,
selectedSuggestion: 0,
lastToken: null,
tokenStart: 0,
}
onBlur = () => {
- this.setState({ suggestionsHidden: true });
+ this.setState({ suggestionsHidden: true, focused: false });
+ }
+
+ onFocus = () => {
+ this.setState({ focused: true });
}
onSuggestionClick = (e) => {
}
componentWillReceiveProps (nextProps) {
- if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) {
+ if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
this.setState({ suggestionsHidden: false });
}
}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
+ onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
style={style}
import PropTypes from 'prop-types';
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
+import AutosuggestInput from '../../../components/autosuggest_input';
import PollButtonContainer from '../containers/poll_button_container';
import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl } from 'react-intl';
}
onSuggestionSelected = (tokenStart, token, value) => {
- this.props.onSuggestionSelected(tokenStart, token, value);
+ this.props.onSuggestionSelected(tokenStart, token, value, ['text']);
+ }
+
+ onSpoilerSuggestionSelected = (tokenStart, token, value) => {
+ this.props.onSuggestionSelected(tokenStart, token, value, ['spoiler_text']);
}
handleChangeSpoilerText = (e) => {
this.autosuggestTextarea.textarea.focus();
} else if (this.props.spoiler !== prevProps.spoiler) {
if (this.props.spoiler) {
- this.spoilerText.focus();
+ this.spoilerText.input.focus();
} else {
this.autosuggestTextarea.textarea.focus();
}
<ReplyIndicatorContainer />
<div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
- <label>
- <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
- <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoilerText} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} tabIndex={this.props.spoiler ? 0 : -1} type='text' className='spoiler-input__input' id='cw-spoiler-input' ref={this.setSpoilerText} />
- </label>
+ <AutosuggestInput
+ placeholder={intl.formatMessage(messages.spoiler_placeholder)}
+ value={this.props.spoilerText}
+ onChange={this.handleChangeSpoilerText}
+ onKeyDown={this.handleKeyDown}
+ disabled={!this.props.spoiler}
+ ref={this.setSpoilerText}
+ suggestions={this.props.suggestions}
+ onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+ onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+ onSuggestionSelected={this.onSpoilerSuggestionSelected}
+ searchTokens={[':']}
+ id='cw-spoiler-input'
+ className='spoiler-input__input'
+ />
</div>
<div className='compose-form__autosuggest-wrapper'>
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import IconButton from 'mastodon/components/icon_button';
import Icon from 'mastodon/components/icon';
+import AutosuggestInput from 'mastodon/components/autosuggest_input';
import classNames from 'classnames';
const messages = defineMessages({
onChange: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
onToggleMultiple: PropTypes.func.isRequired,
+ suggestions: ImmutablePropTypes.list,
+ onClearSuggestions: PropTypes.func.isRequired,
+ onFetchSuggestions: PropTypes.func.isRequired,
+ onSuggestionSelected: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
this.props.onRemove(this.props.index);
};
+
handleToggleMultiple = e => {
this.props.onToggleMultiple();
e.preventDefault();
e.stopPropagation();
};
+ onSuggestionsClearRequested = () => {
+ this.props.onClearSuggestions();
+ }
+
+ onSuggestionsFetchRequested = (token) => {
+ this.props.onFetchSuggestions(token);
+ }
+
+ onSuggestionSelected = (tokenStart, token, value) => {
+ this.props.onSuggestionSelected(tokenStart, token, value, ['poll', 'options', this.props.index]);
+ }
+
render () {
const { isPollMultiple, title, index, intl } = this.props;
tabIndex='0'
/>
- <input
- type='text'
+ <AutosuggestInput
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
maxLength={25}
value={title}
onChange={this.handleOptionTitleChange}
+ suggestions={this.props.suggestions}
+ onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+ onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+ onSuggestionSelected={this.onSuggestionSelected}
+ searchTokens={[':']}
/>
</label>
onAddOption: PropTypes.func.isRequired,
onRemoveOption: PropTypes.func.isRequired,
onChangeSettings: PropTypes.func.isRequired,
+ suggestions: ImmutablePropTypes.list,
+ onClearSuggestions: PropTypes.func.isRequired,
+ onFetchSuggestions: PropTypes.func.isRequired,
+ onSuggestionSelected: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
};
render () {
- const { options, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl } = this.props;
+ const { options, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl, ...other } = this.props;
if (!options) {
return null;
return (
<div className='compose-form__poll-wrapper'>
<ul>
- {options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} />)}
+ {options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} {...other} />)}
</ul>
<div className='poll__footer'>
dispatch(fetchComposeSuggestions(token));
},
- onSuggestionSelected (position, token, suggestion) {
- dispatch(selectComposeSuggestion(position, token, suggestion));
+ onSuggestionSelected (position, token, suggestion, path) {
+ dispatch(selectComposeSuggestion(position, token, suggestion, path));
},
onChangeSpoilerText (checked) {
import { connect } from 'react-redux';
import PollForm from '../components/poll_form';
import { addPollOption, removePollOption, changePollOption, changePollSettings } from '../../../actions/compose';
+import {
+ clearComposeSuggestions,
+ fetchComposeSuggestions,
+ selectComposeSuggestion,
+} from '../../../actions/compose';
const mapStateToProps = state => ({
+ suggestions: state.getIn(['compose', 'suggestions']),
options: state.getIn(['compose', 'poll', 'options']),
expiresIn: state.getIn(['compose', 'poll', 'expires_in']),
isMultiple: state.getIn(['compose', 'poll', 'multiple']),
onChangeSettings(expiresIn, isMultiple) {
dispatch(changePollSettings(expiresIn, isMultiple));
},
+
+ onClearSuggestions () {
+ dispatch(clearComposeSuggestions());
+ },
+
+ onFetchSuggestions (token) {
+ dispatch(fetchComposeSuggestions(token));
+ },
+
+ onSuggestionSelected (position, token, accountId, path) {
+ dispatch(selectComposeSuggestion(position, token, accountId, path));
+ },
+
});
export default connect(mapStateToProps, mapDispatchToProps)(PollForm);
});
};
-const insertSuggestion = (state, position, token, completion) => {
+const insertSuggestion = (state, position, token, completion, path) => {
return state.withMutations(map => {
- map.update('text', oldText => `${oldText.slice(0, position)}${completion} ${oldText.slice(position + token.length)}`);
+ map.updateIn(path, oldText => `${oldText.slice(0, position)}${completion} ${oldText.slice(position + token.length)}`);
map.set('suggestion_token', null);
- map.update('suggestions', ImmutableList(), list => list.clear());
- map.set('focusDate', new Date());
- map.set('caretPosition', position + completion.length + 1);
+ map.set('suggestions', ImmutableList());
+ if (path.length === 1 && path[0] === 'text') {
+ map.set('focusDate', new Date());
+ map.set('caretPosition', position + completion.length + 1);
+ }
map.set('idempotencyKey', uuid());
});
};
case COMPOSE_SUGGESTIONS_READY:
return state.set('suggestions', ImmutableList(action.accounts ? action.accounts.map(item => item.id) : action.emojis)).set('suggestion_token', action.token);
case COMPOSE_SUGGESTION_SELECT:
- return insertSuggestion(state, action.position, action.token, action.completion);
+ return insertSuggestion(state, action.position, action.token, action.completion, action.path);
case COMPOSE_SUGGESTION_TAGS_UPDATE:
return updateSuggestionTags(state, action.token);
case COMPOSE_TAG_HISTORY_UPDATE:
}
.autosuggest-textarea,
+ .autosuggest-input,
.spoiler-input {
position: relative;
}
display: none;
}
+ .autossugest-input {
+ flex: 1 1 auto;
+ }
+
input[type=text] {
display: block;
box-sizing: border-box;
- flex: 1 1 auto;
- width: 20px;
+ width: 100%;
font-size: 14px;
color: $inverted-text-color;
display: block;
&.editable {
display: flex;
align-items: center;
+ overflow: visible;
}
}
cat aescling's git repositories / mastodon.git / commitdiff