Переглянути джерело

HUE-9485 [frontend] Pass close action to slots of DropdownPanel

Johan Ahlen 5 роки тому
батько
коміт
d8c8d0a5dc

+ 5 - 1
desktop/core/src/desktop/js/components/dropdown/DropdownMenu.test.ts

@@ -15,16 +15,20 @@
 // limitations under the License.
 
 import { shallowMount } from '@vue/test-utils';
+import DropdownPanel from './DropdownPanel.vue';
 import DropdownMenu from './DropdownMenu.vue';
 
 describe('DropdownMenu.vue', () => {
   it('should render empty dropdown', () => {
-    const wrapper = shallowMount(DropdownMenu);
+    const wrapper = shallowMount(DropdownMenu, {
+      stubs: { 'dropdown-panel': DropdownPanel }
+    });
     expect(wrapper.element).toMatchSnapshot();
   });
 
   it('should render dropdown with slots', () => {
     const wrapper = shallowMount(DropdownMenu, {
+      stubs: { 'dropdown-panel': DropdownPanel },
       scopedSlots: {
         default: '<div>Some item</div>'
       }

+ 10 - 8
desktop/core/src/desktop/js/components/dropdown/DropdownMenu.vue

@@ -17,12 +17,14 @@
 -->
 
 <template>
-  <dropdown-panel class="hue-dropdown-menu" :text="text" :inline="inline">
-    <div class="hue-dropdown-menu-inner">
-      <ul>
-        <slot />
-      </ul>
-    </div>
+  <dropdown-panel class="hue-dropdown-menu" :text="text" :link="link">
+    <template #contents="{ closePanel }">
+      <div class="hue-dropdown-menu-inner" @click="closePanel">
+        <ul>
+          <slot />
+        </ul>
+      </div>
+    </template>
   </dropdown-panel>
 </template>
 
@@ -37,9 +39,9 @@
   })
   export default class DropdownMenu extends Vue {
     @Prop({ required: false, default: '' })
-    text: string;
+    text!: string;
     @Prop({ required: false, default: false })
-    inline: boolean;
+    link!: boolean;
   }
 </script>
 

+ 14 - 13
desktop/core/src/desktop/js/components/dropdown/DropdownPanel.vue

@@ -17,21 +17,17 @@
 -->
 
 <template>
-  <div
-    v-click-outside="clickOutside"
-    class="hue-dropdown-panel"
-    :class="{ 'dropdown-inline': inline }"
-  >
-    <hue-link v-if="inline" @click="togglePanel">
+  <div v-click-outside="clickOutside" class="hue-dropdown-panel">
+    <hue-link v-if="link" @click="togglePanel">
       {{ text }} <i class="fa fa-caret-down" />
     </hue-link>
     <hue-button v-else @click="togglePanel"> {{ text }} <i class="fa fa-caret-down" /></hue-button>
-    <div class="hue-dropdown-container" :class="{ open: panelOpen }" @click="togglePanel">
+    <div class="hue-dropdown-container" :class="{ open: panelOpen }">
       <div
         class="hue-dropdown-inner"
         :class="{ 'position-top': positionTop, 'position-left': positionLeft }"
       >
-        <slot />
+        <slot name="contents" :closePanel="closePanel" />
       </div>
     </div>
   </div>
@@ -70,9 +66,10 @@
   })
   export default class DropdownPanel extends Vue {
     @Prop({ required: false, default: '' })
-    text: string;
+    text!: string;
     @Prop({ required: false, default: false })
-    inline: boolean;
+    link!: boolean;
+
     panelOpen = false;
 
     positionTop = false;
@@ -90,6 +87,12 @@
       this.panelOpen = !this.panelOpen;
     }
 
+    closePanel(): void {
+      if (this.panelOpen) {
+        this.togglePanel();
+      }
+    }
+
     clickOutside(): void {
       if (this.panelOpen) {
         this.panelOpen = false;
@@ -103,9 +106,7 @@
   @import '../styles/mixins';
 
   .hue-dropdown-panel {
-    &.dropdown-inline {
-      display: inline-block;
-    }
+    display: inline-block;
 
     .hue-dropdown-container {
       position: fixed;

+ 49 - 15
desktop/core/src/desktop/js/components/dropdown/__snapshots__/DropdownMenu.test.ts.snap

@@ -1,31 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownMenu.vue should render dropdown with slots 1`] = `
-<dropdown-panel-stub
-  class="hue-dropdown-menu"
-  text=""
+<div
+  class="hue-dropdown-panel hue-dropdown-menu"
 >
+  <button
+    class="btn"
+    type="button"
+  >
+      
+    <i
+      class="fa fa-caret-down"
+    />
+  </button>
+   
   <div
-    class="hue-dropdown-menu-inner"
+    class="hue-dropdown-container"
   >
-    <ul>
-      <div>
-        Some item
+    <div
+      class="hue-dropdown-inner"
+    >
+      <div
+        class="hue-dropdown-menu-inner"
+      >
+        <ul>
+          <div>
+            Some item
+          </div>
+        </ul>
       </div>
-    </ul>
+    </div>
   </div>
-</dropdown-panel-stub>
+</div>
 `;
 
 exports[`DropdownMenu.vue should render empty dropdown 1`] = `
-<dropdown-panel-stub
-  class="hue-dropdown-menu"
-  text=""
+<div
+  class="hue-dropdown-panel hue-dropdown-menu"
 >
+  <button
+    class="btn"
+    type="button"
+  >
+      
+    <i
+      class="fa fa-caret-down"
+    />
+  </button>
+   
   <div
-    class="hue-dropdown-menu-inner"
+    class="hue-dropdown-container"
   >
-    <ul />
+    <div
+      class="hue-dropdown-inner"
+    >
+      <div
+        class="hue-dropdown-menu-inner"
+      >
+        <ul />
+      </div>
+    </div>
   </div>
-</dropdown-panel-stub>
+</div>
 `;

+ 1 - 5
desktop/core/src/desktop/js/components/dropdown/__snapshots__/DropdownPanel.test.ts.snap

@@ -16,11 +16,7 @@ exports[`DropdownPanel.vue should render dropdown panel with slots 1`] = `
   >
     <div
       class="hue-dropdown-inner"
-    >
-      <div>
-        Some item
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;