From 45ae7093066c07ed3fdffe53ea99eeda8790f36d Mon Sep 17 00:00:00 2001 From: Kevin Aguiar Date: Sat, 28 Mar 2020 14:47:00 -0300 Subject: [PATCH] FIX: Reactivity changed regarding isPickerOpen --- docs/docs/changelog/index.md | 2 ++ src/components/PopupEmoji.vue | 10 ++++----- src/components/Sandbox.vue | 21 ++++++++++++++++--- .../TwemojiPicker/TwemojiPicker.vue | 16 ++++++++++---- src/components/TwemojiPicker/prop-watchers.ts | 13 ++++++++++++ src/components/TwemojiPicker/props.ts | 2 +- src/components/TwemojiTextarea.vue | 8 +++++-- 7 files changed, 57 insertions(+), 15 deletions(-) create mode 100644 src/components/TwemojiPicker/prop-watchers.ts diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md index 1cabf950..ecde2377 100644 --- a/docs/docs/changelog/index.md +++ b/docs/docs/changelog/index.md @@ -6,6 +6,8 @@ title: 'Changelog' ## 5.5.5 - when randomEmojiArray is changed it now triggers a component update +- when isPickerOpen (TwemojiPicker data) is changed it now triggers a component update +- setting emojiPickerDisabled to true will now set isPickerOpen to false ## 5.5.4 - Adds contentChangedHtml event to TwemojiTextarea diff --git a/src/components/PopupEmoji.vue b/src/components/PopupEmoji.vue index d83931bb..96c6e141 100644 --- a/src/components/PopupEmoji.vue +++ b/src/components/PopupEmoji.vue @@ -184,6 +184,11 @@ export default Vue.extend({ }, watch: { popperOpen: function(val): void { + if (val) { + this.$refs.container.setAttribute('data-show', ''); + } else { + this.$refs.container.removeAttribute('data-show'); + } this.$emit('popperOpenChanged', val); setTimeout(() => { this.debouncedPopperOpen = val; @@ -196,12 +201,10 @@ export default Vue.extend({ const ctxPopperInstance = this.popperInstance; if (this.$refs.container.hasAttribute('data-show')) { - this.$refs.container.removeAttribute('data-show'); this.popperOpen = false; setTimeout(ctxPopperInstance.forceUpdate, 1); } else { this.popperOpen = true; - this.$refs.container.setAttribute('data-show', ''); setTimeout(ctxPopperInstance.forceUpdate, 1); } }, @@ -210,7 +213,6 @@ export default Vue.extend({ const ctxPopperInstance = this.popperInstance; if (this.debouncedPopperOpen) { - this.$refs.container.removeAttribute('data-show'); this.popperOpen = false; setTimeout(ctxPopperInstance.forceUpdate, 1); } @@ -220,12 +222,10 @@ export default Vue.extend({ const ctxPopperInstance = this.popperInstance; if (this.$refs.container.hasAttribute('data-show')) { - this.$refs.container.removeAttribute('data-show'); this.popperOpen = false; setTimeout(ctxPopperInstance.forceUpdate, 1); } else { this.popperOpen = true; - this.$refs.container.setAttribute('data-show', ''); setTimeout(ctxPopperInstance.forceUpdate, 1); } } diff --git a/src/components/Sandbox.vue b/src/components/Sandbox.vue index 4e70098c..8ad83ada 100644 --- a/src/components/Sandbox.vue +++ b/src/components/Sandbox.vue @@ -5,10 +5,11 @@ :emojiData="emojiDataAll" :emojiGroups="emojiGroups" pickerPlacement="top-end" - :randomEmojiArray="randomEmojiArray" ref="picker" + :emojiPickerDisabled="emojiPickerDisabled" > +
+
{ - return this.$refs.picker.isPickerOpen; + return this.$refs.twemojiTextareaRef.twemojiPicker.isPickerOpen; }, (value: boolean) => { this.randomEmojiArray = value ? ['😄'] : ['🙂']; @@ -162,6 +167,16 @@ export default Vue.extend({ }, isContentOverflowed(isContentOverflowed: boolean) { console.log('isContentOverflowed', isContentOverflowed); + }, + onClickTest() { + this.emojiPickerDisabled = !this.emojiPickerDisabled; + }, + testChangeIsPickerOpen1() { + this.$refs.picker.isPickerOpen = !this.$refs.picker.isPickerOpen; + }, + testChangeIsPickerOpen2() { + this.$refs.twemojiTextareaRef.twemojiPicker.isPickerOpen = !this.$refs + .twemojiTextareaRef.twemojiPicker.isPickerOpen; } } }); diff --git a/src/components/TwemojiPicker/TwemojiPicker.vue b/src/components/TwemojiPicker/TwemojiPicker.vue index c28a46cf..fbb91a75 100644 --- a/src/components/TwemojiPicker/TwemojiPicker.vue +++ b/src/components/TwemojiPicker/TwemojiPicker.vue @@ -305,6 +305,7 @@ import TwemojiOptions from '../../interfaces/TwemojiOptions'; import EmojiGroup from '../../interfaces/EmojiGroup'; import Props from './props'; +import PropWatchers from './prop-watchers'; import EmojiSkin from '../../interfaces/EmojiSkin'; export default Vue.extend({ @@ -321,7 +322,6 @@ export default Vue.extend({ data() { return { - isPickerOpen: false as boolean, clickingSkinInterval: false as any, isClickingEmojiMouseDown: false as boolean, popupSkinsClickaway: true as boolean, @@ -346,7 +346,8 @@ export default Vue.extend({ searchTimeout: null as any, isSearchingEmoji: false as boolean, calculatedPickerWidth: null as number | null, - hideSearch: false as boolean + hideSearch: false as boolean, + isPickerOpen: false as boolean }; }, @@ -368,6 +369,9 @@ export default Vue.extend({ }, created(): void { + // Init TwemojiPicker watchers + PropWatchers(this, this); + this.twemojiOptions = { base: this.twemojiPath, ext: this.twemojiExtension, @@ -381,8 +385,12 @@ export default Vue.extend({ this.setRandomEmoji(); }, watch: { - randomEmojiArray() { - this.setRandomEmoji(); + // Data Watchers + isPickerOpen(value) { + if (value !== this.$refs.popupEmoji.popperOpen) { + this.$refs.popupEmoji.popperOpen = value; + setTimeout(() => this.$refs.popupEmoji.popperInstance.forceUpdate(), 1); + } }, randomEmoji() { setTimeout(() => this.$refs.popupEmoji.popperInstance.forceUpdate(), 100); diff --git a/src/components/TwemojiPicker/prop-watchers.ts b/src/components/TwemojiPicker/prop-watchers.ts new file mode 100644 index 00000000..43d4a3f6 --- /dev/null +++ b/src/components/TwemojiPicker/prop-watchers.ts @@ -0,0 +1,13 @@ +export default (componentRef: any, twemojiPickerRef: any) => { + componentRef.$watch('randomEmojiArray', + () => twemojiPickerRef.setRandomEmoji() + ); + + componentRef.$watch('emojiPickerDisabled', + (value: boolean) => { + if (value === true) { + twemojiPickerRef.$refs.popupEmoji.popperOpen = false; + } + } + ); +} \ No newline at end of file diff --git a/src/components/TwemojiPicker/props.ts b/src/components/TwemojiPicker/props.ts index ae93282b..fb20a129 100644 --- a/src/components/TwemojiPicker/props.ts +++ b/src/components/TwemojiPicker/props.ts @@ -206,6 +206,6 @@ export default { console.error('The Array must have a length of one or more.'); } return true; - } + }, } } \ No newline at end of file diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue index 45d33296..e19c11aa 100644 --- a/src/components/TwemojiTextarea.vue +++ b/src/components/TwemojiTextarea.vue @@ -113,6 +113,7 @@ import SendIconImg from './SendIconImg.vue'; import TwemojiOptions from '../interfaces/TwemojiOptions'; import TwemojiProps from './TwemojiPicker/props'; +import TwemojiPropWatchers from './TwemojiPicker/prop-watchers'; import { propsForMixin } from '../mixins/propsFor'; export default Vue.extend({ @@ -183,10 +184,10 @@ export default Vue.extend({ }, computed: { - twemojiTextarea(): HTMLElement { + twemojiTextarea(): any { return this.$refs.twemojiTextarea as HTMLElement; }, - twemojiPicker(): HTMLElement { + twemojiPicker(): any { return this.$refs.twemojiPicker as any; } }, @@ -200,6 +201,9 @@ export default Vue.extend({ }, mounted(): void { + // Init TwemojiPicker watchers + TwemojiPropWatchers(this, this.twemojiPicker); + if (this.content.length === 0) { this.twemojiTextarea.innerHTML = this.content; }