children
; + const component = renderer.create(); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders the props.text instead of children', () => { + const text = 'foo'; + const children =children
; + const component = renderer.create(); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders class="button--block" if props.block given', () => { + const component = renderer.create(); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('adds class "button-secondary" if props.secondary given', () => { + const component = renderer.create(); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/javascript/mastodon/components/__tests__/display_name-test.js b/app/javascript/mastodon/components/__tests__/display_name-test.js new file mode 100644 index 00000000000000..0d040c4cd8cc04 --- /dev/null +++ b/app/javascript/mastodon/components/__tests__/display_name-test.js @@ -0,0 +1,18 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { fromJS } from 'immutable'; +import DisplayName from '../display_name'; + +describe('Foo
', + }); + const component = renderer.create(
+ 
+
+ {emoji.colons}
+
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js
index 98b0985e96cde0..70d70baf96cbb7 100644
--- a/app/javascript/mastodon/components/autosuggest_textarea.js
+++ b/app/javascript/mastodon/components/autosuggest_textarea.js
@@ -1,11 +1,13 @@
import React from 'react';
import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
import AutosuggestProfileEmoji from '../features/compose/components/autosuggest_profile_emoji';
+import AutosuggestEmoji from './autosuggest_emoji';
import ImmutablePropTypes from 'react-immutable-proptypes';
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';
const textAtCursorMatchesToken = (str, caretPosition) => {
let word;
@@ -19,11 +21,11 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
word = str.slice(left, right + caretPosition);
}
- if (!word || word.trim().length < 2 || word[0] !== '@') {
+ if (!word || word.trim().length < 3 || ['@', ':'].indexOf(word[0]) === -1) {
return [null, null];
}
- word = word.trim().toLowerCase().slice(1);
+ word = word.trim().toLowerCase();
if (word.length > 0) {
return [left + 1, word];
@@ -32,34 +34,6 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
}
};
-const textAtCursorMatchesProfileEmojiToken = (str, caretPosition) => {
- let word;
-
- let left = str.slice(0, caretPosition).search(/:[^:\s]+$/);
- let right = str.slice(caretPosition).search(/[:\s]/);
- if (left < 0) {
- return [null, null];
- }
-
- if (right < 0) {
- word = str.slice(left);
- } else {
- word = str.slice(left, right + caretPosition);
- }
-
- if (!word || word.trim().length < 2) {
- return [null, null];
- }
-
- word = word.trim().toLowerCase().slice(1);
-
- if (word.length > 1 && word[0] === '@') {
- return [left + 1, word];
- } else {
- return [null, null];
- }
-};
-
export default class AutosuggestTextarea extends ImmutablePureComponent {
static propTypes = {
@@ -94,26 +68,13 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
onChange = (e) => {
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
- const [ emojiTokenStart, emojiToken ] = textAtCursorMatchesProfileEmojiToken(e.target.value, e.target.selectionStart);
if (token !== null && this.state.lastToken !== token) {
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
this.props.onSuggestionsFetchRequested(token);
- } else if (emojiToken !== null && this.state.lastToken !== emojiToken) {
- // emojiToken contains first '@' sigil
- if (emojiToken[0] === '@') {
- this.setState({ lastToken: emojiToken.slice(1), selectedSuggestion: 0, tokenStart: emojiTokenStart });
- this.props.onProfileEmojiSuggestionsFetchRequested(emojiToken.slice(1));
- }
- } else {
- if (token === null) {
- this.setState({ lastToken: null });
- this.props.onSuggestionsClearRequested();
- }
- if (emojiToken === null) {
- this.setState({ lastToken: null });
- this.props.onProfileEmojiSuggestionsClearRequested();
- }
+ } else if (token === null) {
+ this.setState({ lastToken: null });
+ this.props.onSuggestionsClearRequested();
}
this.props.onChange(e);
@@ -182,12 +143,22 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
this.props.onKeyDown(e);
}
+ onKeyUp = e => {
+ if (e.key === 'Escape' && this.state.suggestionsHidden) {
+ document.querySelector('.ui').parentElement.focus();
+ }
+
+ if (this.props.onKeyUp) {
+ this.props.onKeyUp(e);
+ }
+ }
+
onBlur = () => {
this.setState({ suggestionsHidden: true });
}
onSuggestionClick = (e) => {
- const suggestion = Number(e.currentTarget.getAttribute('data-index'));
+ 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();
@@ -221,8 +192,27 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
}
}
+ renderSuggestion = (suggestion, i) => {
+ const { selectedSuggestion } = this.state;
+ let inner, key;
+
+ if (typeof suggestion === 'object') {
+ inner =
+ {inner}
+
+ );
+ }
+
render () {
- const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, profileEmojiSuggestions } = this.props;
+ const { value, suggestions, disabled, placeholder, autoFocus, profileEmojiSuggestions } = this.props;
const { suggestionsHidden, selectedSuggestion } = this.state;
const style = { direction: 'ltr' };
const isSuggestionsHidden = suggestionsHidden || (suggestions.isEmpty() && profileEmojiSuggestions.isEmpty());
@@ -235,6 +225,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {