FIX: Reactivity changed regarding isPickerOpen

kevinfaveri · Mar 28, 2020 · 45ae709 · 45ae709
1 parent baf16b8
commit 45ae709
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 15 deletions.
diff --git 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
@@ -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
@@ -5,10 +5,11 @@
         :emojiData="emojiDataAll"
         :emojiGroups="emojiGroups"
         pickerPlacement="top-end"
-        :randomEmojiArray="randomEmojiArray"
         ref="picker"
+        :emojiPickerDisabled="emojiPickerDisabled"
       >
       </twemoji-picker>
+      <button @click="onClickTest">Working Test</button>
     </div>
     <div>
       <twemoji-textarea
@@ -30,7 +31,10 @@
         :pickerArrowEnabled="true"
         idTextarea="idTextarea"
         pickerWidth="#idTextarea"
+        :randomEmojiArray="randomEmojiArray"
+        :emojiPickerDisabled="emojiPickerDisabled"
       ></twemoji-textarea>
+      <button @click="onClickTest">Working Test</button>
     </div>
     <div>
       <twemoji-textarea
@@ -99,13 +103,14 @@ export default Vue.extend({
   data() {
     return {
       content: '',
-      randomEmojiArray: ['😀']
+      randomEmojiArray: ['😀'],
+      emojiPickerDisabled: false
     };
   },
   mounted() {
     this.$watch(
       () => {
-        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
@@ -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
@@ -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;
+      }
+    }
+  );
+}
diff --git 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;
-    }
+    },
   }
 }
diff --git 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;
     }