allow dynamic container element updates and use isUndefined typeguard…

…s everywhere
Maronato · Mar 16, 2020 · 6428344 · 6428344
1 parent 4ecc1e1
commit 6428344
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/src/components/VtToastContainer.vue b/src/components/VtToastContainer.vue
@@ -25,6 +25,7 @@ import events from "../ts/events";
 import { EVENTS, POSITION, VT_NAMESPACE } from "../ts/constants";
 import PROPS from "../ts/propValidators";
 import { PluginOptions, ToastOptions, ToastID } from "../types";
+import { removeElement, isUndefined } from "../ts/utils";
 
 export default Vue.extend({
   components: { Toast, Transition },
@@ -56,15 +57,15 @@ export default Vue.extend({
       return Object.values(this.toasts);
     },
     filteredToasts(): ToastOptions[] {
-      if (typeof this.defaults.filterToasts !== "undefined") {
+      if (!isUndefined(this.defaults.filterToasts)) {
         return this.defaults.filterToasts(this.toastArray);
       }
       return this.toastArray;
     }
   },
 
   beforeMount() {
-    this.setup();
+    this.setup(this.container);
     events.$on(EVENTS.ADD, this.addToast);
     events.$on(EVENTS.CLEAR, this.clearToasts);
     events.$on(EVENTS.DISMISS, this.dismissToast);
@@ -74,29 +75,26 @@ export default Vue.extend({
   },
 
   methods: {
-    setup() {
-      this.container.appendChild(this.$el);
+    setup(container: HTMLElement) {
+      removeElement(this.$el);
+      container.appendChild(this.$el);
     },
     setToast(props: ToastOptions) {
-      if (typeof props.id !== "undefined") {
+      if (!isUndefined(props.id)) {
         this.$set(this.toasts, props.id, props);
       }
     },
     addToast(params: ToastOptions) {
       const props = Object.assign({}, this.defaults, params);
-      const filterBeforeCreate =
-        typeof this.defaults.filterBeforeCreate === "undefined"
-          ? (toast: ToastOptions) => toast
-          : this.defaults.filterBeforeCreate;
+      const filterBeforeCreate = isUndefined(this.defaults.filterBeforeCreate)
+        ? (toast: ToastOptions) => toast
+        : this.defaults.filterBeforeCreate;
       const toast = filterBeforeCreate(props, this.toastArray);
       toast && this.setToast(toast);
     },
     dismissToast(id: ToastID) {
       const toast = this.toasts[id];
-      if (
-        typeof toast !== "undefined" &&
-        typeof toast.onClose !== "undefined"
-      ) {
+      if (!isUndefined(toast) && !isUndefined(toast.onClose)) {
         toast.onClose();
       }
       this.$delete(this.toasts, id);
@@ -111,6 +109,10 @@ export default Vue.extend({
       return this.defaults.newestOnTop ? toasts.reverse() : toasts;
     },
     updateDefaults(update: PluginOptions) {
+      // Update container if changed
+      if (!isUndefined(update.container)) {
+        this.setup(update.container);
+      }
       this.defaults = Object.assign({}, this.defaults, update);
     },
     updateToast({

diff --git a/src/ts/utils.ts b/src/ts/utils.ts
@@ -105,5 +105,6 @@ export {
   isNonEmptyString,
   isToastContent,
   getVueComponentFromObj,
-  hasProp
+  hasProp,
+  isUndefined
 };