Mithril 2 Update (#29)

Update for Mithril 2

- Please note that AutocompleteDropdown is now a Fragment, not a Component. Accordingly, it's location has been changed.
This commit is contained in:
Alexander Skvortsov 2020-09-23 22:46:54 -04:00 committed by GitHub
parent 61c99013ab
commit 77d5e2cd83
2 changed files with 15 additions and 17 deletions

View File

@ -7,22 +7,21 @@ import TextEditorButton from 'flarum/components/TextEditorButton';
import getEmojiIconCode from './helpers/getEmojiIconCode';
import KeyboardNavigatable from 'flarum/utils/KeyboardNavigatable';
import AutocompleteDropdown from './components/AutocompleteDropdown';
import AutocompleteDropdown from './fragments/AutocompleteDropdown';
export default function addComposerAutocomplete() {
const emojiKeys = Object.keys(emojiMap);
extend(TextEditor.prototype, 'config', function(original, isInitialized) {
if (isInitialized) return;
extend(TextEditor.prototype, 'oncreate', function() {
const $container = $('<div class="ComposerBody-emojiDropdownContainer"></div>');
const dropdown = new AutocompleteDropdown({items: []});
const dropdown = new AutocompleteDropdown();
const $textarea = this.$('textarea').wrap('<div class="ComposerBody-emojiWrapper"></div>');
let emojiStart;
let typed;
const applySuggestion = (replacement) => {
this.props.composer.editor.replaceBeforeCursor(emojiStart - 1, replacement + ' ');
this.attrs.composer.editor.replaceBeforeCursor(emojiStart - 1, replacement + ' ');
dropdown.hide();
};
@ -125,7 +124,7 @@ export default function addComposerAutocomplete() {
})).map(makeSuggestion);
if (suggestions.length) {
dropdown.props.items = suggestions;
dropdown.items = suggestions;
m.render($container[0], dropdown.render());
dropdown.show();
@ -158,7 +157,7 @@ export default function addComposerAutocomplete() {
extend(TextEditor.prototype, 'toolbarItems', function(items) {
items.add('emoji', (
<TextEditorButton onclick={() => this.props.composer.editor.insertAtCursor(':')} icon="far fa-smile">
<TextEditorButton onclick={() => this.attrs.composer.editor.insertAtCursor(':')} icon="far fa-smile">
{app.translator.trans('flarum-emoji.forum.composer.emoji_tooltip')}
</TextEditorButton>
));

View File

@ -1,17 +1,16 @@
import Component from 'flarum/Component';
import Fragment from 'flarum/Fragment';
export default class AutocompleteDropdown extends Component {
init() {
this.active = false;
this.index = 0;
this.keyWasJustPressed = false;
}
export default class AutocompleteDropdown extends Fragment {
items = [];
active = false;
index = 0;
keyWasJustPressed = false;
view() {
return (
<ul className="Dropdown-menu EmojiDropdown">
<li className="Dropdown-header" key="0">{app.translator.trans('flarum-emoji.forum.composer.type_to_search_text')}</li>
{this.props.items.map(item => <li key={item.attrs.key}>{item}</li>)}
<li className="Dropdown-header">{app.translator.trans('flarum-emoji.forum.composer.type_to_search_text')}</li>
{this.items.map(item => <li key={item.attrs.key}>{item}</li>)}
</ul>
);
}
@ -72,7 +71,7 @@ export default class AutocompleteDropdown extends Component {
}
if (typeof scrollTop !== 'undefined') {
$dropdown.stop(true).animate({scrollTop}, 100);
$dropdown.stop(true).animate({ scrollTop }, 100);
}
}
}