dropdown comp add before-visible-change callback method

Author: huangshuwei

packages/ve-dropdown/src/index.jsx

@@ -3,6 +3,7 @@ import VeCheckbox from "vue-easytable/packages/ve-checkbox";
 import VeRadio from "vue-easytable/packages/ve-radio";
 import { COMPS_NAME, EMIT_EVENTS } from "./util/constant";
 import { clsName } from "./util/index";
+import { isFunction, isBoolean } from "../../src/utils";
 import { getRandomId } from "../../src/utils/random";
 import {
     getViewportOffset,
@@ -111,6 +112,14 @@ export default {
                 return document.body;
             },
         },
+        /*
+        before visible change
+        如果返回false 则阻止显示或者关闭
+        */
+        beforeVisibleChange: {
+            type: Function,
+            default: null,
+        },
     },
     data() {
         return {
@@ -232,30 +241,17 @@ export default {
             this.hideDropDown();
         },
 
-        // hide dropdown
-        hideDropDown() {
-            this.$emit(EMIT_EVENTS.VISIBLE_CHANGE, false);
-
-            setTimeout(() => {
-                this.internalVisible = false;
-                this.removeOrEmptyRootPanel();
-            }, 150);
-        },
-
-        // remove or emoty root panel
-        removeOrEmptyRootPanel() {
-            const { rootId } = this;
-
-            let rootEl = document.querySelector(`#${rootId}`);
-            if (rootEl) {
-                rootEl.innerHTML = "";
-            }
-        },
-
         // show dropdown
         showDropDown() {
             const { rootId, dropdownItemsPanelId } = this;
 
+            const nextVisible = true;
+
+            const allowChange = this.beforeVisibleChangeCallback(nextVisible);
+            if (isBoolean(allowChange) && !allowChange) {
+                return false;
+            }
+
             let rootEl = document.querySelector(`#${rootId}`);
 
             if (rootEl) {
@@ -271,7 +267,51 @@ export default {
 
             this.internalVisible = true;
 
-            this.$emit(EMIT_EVENTS.VISIBLE_CHANGE, true);
+            this.$emit(EMIT_EVENTS.VISIBLE_CHANGE, nextVisible);
+        },
+
+        // hide dropdown
+        hideDropDown() {
+            const nextVisible = false;
+
+            const allowChange = this.beforeVisibleChangeCallback(nextVisible);
+            if (isBoolean(allowChange) && !allowChange) {
+                return false;
+            }
+
+            this.$emit(EMIT_EVENTS.VISIBLE_CHANGE, nextVisible);
+
+            setTimeout(() => {
+                this.internalVisible = false;
+                this.removeOrEmptyRootPanel();
+            }, 150);
+        },
+
+        // before visible change callback
+        beforeVisibleChangeCallback(nextVisible) {
+            // console.log("nextVisible22::", nextVisible);
+            const { beforeVisibleChange, isDropdownVisible } = this;
+
+            if (nextVisible === isDropdownVisible) {
+                return false;
+            }
+
+            if (isFunction(beforeVisibleChange)) {
+                // next visible
+                return beforeVisibleChange({
+                    nextVisible,
+                });
+            }
+        },
+
+        // remove or emoty root panel
+        removeOrEmptyRootPanel() {
+            const { rootId } = this;
+
+            let rootEl = document.querySelector(`#${rootId}`);
+            if (rootEl) {
+                rootEl.innerHTML = "";
+            }
         },
 
         // change dropdown panel position
@@ -366,10 +406,14 @@ export default {
             this.inputValue = result;
         },
 
-        // dropdown show toggle
-        dropdownShowToggle() {
+        // dropdown panel click
+        dropdownPanelClick() {
             this.isDropdownShowTriggerClicked = true;
+            this.dropdownShowToggle();
+        },
 
+        // dropdown show toggle
+        dropdownShowToggle() {
             if (this.isDropdownVisible) {
                 this.hideDropDown();
             } else {
@@ -520,7 +564,7 @@ export default {
             isSelect,
             width,
             maxHeight,
-            dropdownShowToggle,
+            dropdownPanelClick,
             getMaxWidth,
             reset,
             singleSelectOptionClick,
@@ -614,7 +658,7 @@ export default {
 
         return (
             <dl {...dropdownProps}>
-                <dt class="ve-dropdown-dt" on-click={dropdownShowToggle}>
+                <dt class="ve-dropdown-dt" on-click={dropdownPanelClick}>
                     <a
                         class={[isSelect ? clsName("dt-selected") : ""]}
                         style={{ width: width + "px" }}

tests/unit/specs/ve-dropdown.spec.js

@@ -426,4 +426,44 @@ describe("veDropdown", () => {
                 .length,
         ).toEqual(0);
     });
+
+    it("beforeVisibleChange callback method", async () => {
+        const mockBeforeVisibleChangeFn = jest.fn();
+        const wrapper = mount({
+            render() {
+                return (
+                    <ve-dropdown
+                        hide-by-item-click={true}
+                        before-visible-change={(args) =>
+                            mockBeforeVisibleChangeFn(args)
+                        }
+                        value={DROPDOWN_ITEMS}
+                        // slots= {
+                        //             default: `<div class="btn">click me</div>`,
+                        //         }
+                    >
+                        <div class="btn" style="color:blue;cursor: pointer;">
+                            点击这里
+                        </div>
+                    </ve-dropdown>
+                );
+            },
+        });
+
+        wrapper.find(".btn").trigger("click");
+        await later(100);
+        expect(wrapper.find(".ve-dropdown-dd-show").exists()).toBe(true);
+
+        expect(mockBeforeVisibleChangeFn).toHaveBeenCalledWith({
+            nextVisible: true,
+        });
+
+        wrapper.find(".ve-dropdown-items-li").trigger("click");
+        await later(150);
+
+        expect(wrapper.find(".ve-dropdown-dd-show").exists()).toBe(false);
+        expect(mockBeforeVisibleChangeFn).toHaveBeenCalledWith({
+            nextVisible: false,
+        });
+    });
 });