github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-04-28 07:34:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mithril 2 Update (#29)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
extensions/emoji/js/src/forum/addComposerAutocomplete.js
View File

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

17
extensions/emoji/js/src/forum/components/AutocompleteDropdown.js → extensions/emoji/js/src/forum/fragments/AutocompleteDropdown.js
View File

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