From 6b09e0cb9934c99aabb0f338cf808d16b250c8a3 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Fri, 9 Jun 2023 23:33:28 -0400 Subject: [PATCH] Simpler implementation. Show the external `selectedEmoji` in the picker, rely on external code to unset it when `unselect` event is sent. --- README.md | 5 ++--- docs/app.vue | 12 +++++++----- spec/picker-spec.js | 28 +++++++++------------------- src/components/Picker.vue | 25 +++++++------------------ src/utils/shared-props.js | 6 +++--- 5 files changed, 28 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index a345a04..7918eef 100644 --- a/README.md +++ b/README.md @@ -194,7 +194,7 @@ Note: CSS also includes background images for image-based emoji sets (apple, goo | **pickerStyles** | | | Inline styles applied to the root element. Useful for positioning | | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered | | **infiniteScroll** | | `true` | Scroll continuously through the categories | -| **selectable** | | `false` | Display "Selected" category with emoji passed as 'emoji', see "Selectable picker" section | +| **selectedEmoji** | | `undefined` | Display "Selected" category with emoji passed as 'selectedEmoji' | | Event | Description | | --------------- | ----------------------- | @@ -213,8 +213,7 @@ Here is an example: diff --git a/docs/app.vue b/docs/app.vue index ea48789..ca54db5 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -70,6 +70,7 @@

Selectable Example

+
@@ -296,6 +294,7 @@ export default { selectedEmojis: [], flagsVisible: true, selectedEmoji: undefined, + selectableVisible: false, } }, computed: { @@ -338,6 +337,9 @@ export default { selectableUnselectEmoji(emoji) { this.selectedEmoji = undefined }, + toggleSelectable() { + this.selectableVisible = !this.selectableVisible + }, }, components: { Picker, diff --git a/spec/picker-spec.js b/spec/picker-spec.js index cd00863..d4c9959 100644 --- a/spec/picker-spec.js +++ b/spec/picker-spec.js @@ -402,17 +402,15 @@ describe('emjoiSize', () => { describe('selectable emjoi', () => { let index = new EmojiIndex(data) + // The selected emoji is passed ouside the component. const picker = mount(Picker, { propsData: { data: index, - selectable: true, + selectedEmoji: index.emoji('grinning'), }, }) it('selectable emoji is displayed', async () => { - let emoji = picker.find('[data-title="grinning"]') - await emoji.trigger('click') - let selectedEmoji = picker.findComponent(SelectedEmoji) expect(selectedEmoji.exists()).toBe(true) @@ -423,9 +421,6 @@ describe('selectable emjoi', () => { }) it('selectable emoji removed when clicked', async () => { - let emoji = picker.find('[data-title="heart_eyes"]') - await emoji.trigger('click') - let selectedEmoji = picker.findComponent(SelectedEmoji) await selectedEmoji.find('.emoji-selected').trigger('click') @@ -433,17 +428,16 @@ describe('selectable emjoi', () => { let events = selectedEmoji.emitted().click expect(events.length).toBe(1) let emojiData = events[0][0] - expect(emojiData).toBe(index.emoji('heart_eyes')) + expect(emojiData.id).toBe('grinning') - // Selected emoji is not displayed (Picker removed it) - let selectedEmojiAfter = picker.findComponent(SelectedEmoji) - expect(selectedEmojiAfter.exists()).toBe(false) + // Vefiy picker 'unselect' event. + events = picker.emitted().unselect + expect(events.length).toBe(1) + emojiData = events[0][0] + expect(emojiData.id).toBe('grinning') }) it('selectable emoji removed when x icon clicked', async () => { - let emoji = picker.find('[data-title="heart_eyes"]') - await emoji.trigger('click') - let selectedEmoji = picker.findComponent(SelectedEmoji) await selectedEmoji.find('.emoji-delete').trigger('click') @@ -451,11 +445,7 @@ describe('selectable emjoi', () => { let events = selectedEmoji.emitted().remove expect(events.length).toBe(1) let emojiData = events[0][0] - expect(emojiData).toBe(index.emoji('heart_eyes')) - - // Selected emoji is not displayed (Picker removed it) - let selectedEmojiAfter = picker.findComponent(SelectedEmoji) - expect(selectedEmojiAfter.exists()).toBe(false) + expect(emojiData).toBe(index.emoji('grinning')) }) }) diff --git a/src/components/Picker.vue b/src/components/Picker.vue index 31af928..dc49f4d 100644 --- a/src/components/Picker.vue +++ b/src/components/Picker.vue @@ -144,7 +144,6 @@ export default { return { activeSkin: this.skin || store.get('skin') || this.defaultSkin, view: new PickerView(this), - selectedEmoji: undefined, } }, computed: { @@ -249,34 +248,24 @@ export default { // for example, if we search for "asdf". return } - if (this.selectable) { - // When 'selectable' mode is on, selecting the same emoji - // will uneslect it. - if (this.selectedEmoji == this.view.previewEmoji) { - this.$emit('unselect', this.view.previewEmoji) - this.selectedEmoji = undefined - return - } - this.selectedEmoji = this.view.previewEmoji + if (this.selectedEmoji == this.view.previewEmoji) { + // Selecting the same emoji will uneslect it. + this.$emit('unselect', this.selectedEmoji) + return } this.$emit('select', this.view.previewEmoji) frequently.add(this.view.previewEmoji) }, onEmojiClick(emoji) { - if (this.selectable) { - if (this.selectedEmoji == emoji) { - this.$emit('unselect', emoji) - this.selectedEmoji = undefined - return - } - this.selectedEmoji = emoji + if (this.selectedEmoji == emoji) { + this.$emit('unselect', emoji) + return } this.$emit('select', emoji) frequently.add(emoji) }, onUnselectEmoji() { this.$emit('unselect', this.selectedEmoji) - this.selectedEmoji = undefined }, onTextSelect($event) { // Prevent default text select event. diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js index 24027ff..d990228 100644 --- a/src/utils/shared-props.js +++ b/src/utils/shared-props.js @@ -113,9 +113,9 @@ const PickerProps = { return {} }, }, - selectable: { - type: Boolean, - default: false, + selectedEmoji: { + type: Object, + default: undefined, }, }