mirror of
https://github.com/flarum/framework.git
synced 2024-11-28 20:16:08 +08:00
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:
parent
61c99013ab
commit
77d5e2cd83
|
@ -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>
|
||||
));
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user