fix(module: dropdown): couldn't auto close menu (#394)

* fix(module: dropdown): couldn't auto close menu * refactor(module: overlay): change public function to internal * fix(module: dropdown): couldn't close in modal
2020-07-23 22:51:02 +08:00 · 2020-07-23 22:51:02 +08:00 · 7a4ab2a302
--- a/components/core/Component/overlay/Overlay.razor
+++ b/components/core/Component/overlay/Overlay.razor
@ -11,16 +11,18 @@
         @ref="Ref"
         @onmouseenter="OnOverlayMouseEnter"
         @onmouseleave="OnOverlayMouseLeave">
-        <CascadingValue Value="Trigger" Name="ParentTrigger">
-            <CascadingValue Value="OverlayChildPrefixCls" Name="PrefixCls">
-                @if (ChildContent != null)
-                {
-                    @ChildContent
-                }
-                else
-                {
-                    @Trigger.Overlay
-                }
+        <CascadingValue Value="this" Name="Overlay">
+            <CascadingValue Value="Trigger" Name="ParentTrigger">
+                <CascadingValue Value="OverlayChildPrefixCls" Name="PrefixCls">
+                    @if (ChildContent != null)
+                    {
+                        @ChildContent
+                    }
+                    else
+                    {
+                        @Trigger.Overlay
+                    }
+                </CascadingValue>
            </CascadingValue>
        </CascadingValue>
    </div>
--- a/components/core/Component/overlay/Overlay.razor.cs
+++ b/components/core/Component/overlay/Overlay.razor.cs
@ -123,7 +123,7 @@ namespace AntDesign.Internal
            base.Dispose(disposing);
        }

-        public async Task Show(int? overlayLeft = null, int? overlayTop = null)
+        internal async Task Show(int? overlayLeft = null, int? overlayTop = null)
        {
            if (_isOverlayShow || Trigger.Disabled)
            {
@ -164,7 +164,7 @@ namespace AntDesign.Internal
            StateHasChanged();
        }

-        public async Task Hide(bool force = false)
+        internal async Task Hide(bool force = false)
        {
            if (!_isOverlayShow)
            {
@ -200,7 +200,7 @@ namespace AntDesign.Internal
            StateHasChanged();
        }

-        public void PreventHide(bool prevent)
+        internal void PreventHide(bool prevent)
        {
            _isPreventHide = prevent;
        }
@ -210,12 +210,12 @@ namespace AntDesign.Internal
        /// overlay would not hide if any child is showing
        /// </summary>
        /// <param name="isChildOverlayShow"></param>
-        public void UpdateChildState(bool isChildOverlayShow)
+        internal void UpdateChildState(bool isChildOverlayShow)
        {
            _isChildOverlayShow = isChildOverlayShow;
        }

-        public bool IsPopup()
+        internal bool IsPopup()
        {
            return _isOverlayShow;
        }
@ -225,7 +225,7 @@ namespace AntDesign.Internal
        /// when overlay is hiding(playing hide animation), IsPopup return false, IsHiding return true.
        /// </summary>
        /// <returns></returns>
-        public bool IsHiding()
+        internal bool IsHiding()
        {
            return _isOverlayHiding;
        }
--- a/components/core/Component/overlay/OverlayTrigger.razor.cs
+++ b/components/core/Component/overlay/OverlayTrigger.razor.cs
@ -14,7 +14,7 @@ namespace AntDesign.Internal
        public string PrefixCls { get; set; } = "ant-dropdown";

        [Parameter]
-        public string PopupContainerSelector { get; set; }
+        public string PopupContainerSelector { get; set; } = "body";

        [Parameter]
        public string PlacementCls { get; set; }
@ -76,7 +76,7 @@ namespace AntDesign.Internal
        {
            base.OnInitialized();

-            DomEventService.AddEventListener("app", "mouseup", OnMouseUp);
+            DomEventService.AddEventListener("document", "mouseup", OnMouseUp);
        }

        protected virtual async Task OnTriggerMouseEnter()
@ -163,7 +163,7 @@ namespace AntDesign.Internal

        protected virtual async Task OnTriggerClick()
        {
-            if (IsContainTrigger(TriggerType.Click))
+            if (IsContainTrigger(TriggerType.Click) || IsContainTrigger(TriggerType.ContextMenu))
            {
                if (_overlay.IsPopup())
                {
@ -212,7 +212,7 @@ namespace AntDesign.Internal
            await OnOverlayHiding.InvokeAsync(visible);
        }

-        public virtual string GetPlacementClass()
+        internal virtual string GetPlacementClass()
        {
            if (!string.IsNullOrEmpty(PlacementCls))
            {
@ -221,7 +221,7 @@ namespace AntDesign.Internal
            return $"{PrefixCls}-placement-{Placement.Name}";
        }

-        public virtual string GetOverlayEnterClass()
+        internal virtual string GetOverlayEnterClass()
        {
            if (!string.IsNullOrEmpty(OverlayEnterCls))
            {
@ -230,7 +230,7 @@ namespace AntDesign.Internal
            return $"slide-{Placement.SlideName}-enter slide-{Placement.SlideName}-enter-active slide-{Placement.SlideName}";
        }

-        public virtual string GetOverlayLeaveClass()
+        internal virtual string GetOverlayLeaveClass()
        {
            if (!string.IsNullOrEmpty(OverlayLeaveCls))
            {
@ -239,7 +239,7 @@ namespace AntDesign.Internal
            return $"slide-{Placement.SlideName}-leave slide-{Placement.SlideName}-leave-active slide-{Placement.SlideName}";
        }

-        public virtual string GetOverlayHiddenClass()
+        internal virtual string GetOverlayHiddenClass()
        {
            if (!string.IsNullOrEmpty(OverlayHiddenCls))
            {
@ -248,24 +248,29 @@ namespace AntDesign.Internal
            return $"{PrefixCls}-hidden";
        }

-        public virtual async Task Show(int? overlayLeft = null, int? overlayTop = null)
+        internal virtual async Task Show(int? overlayLeft = null, int? overlayTop = null)
        {
            await _overlay.Show(overlayLeft, overlayTop);
        }

-        public virtual async Task Hide(bool force = false)
+        internal virtual async Task Hide(bool force = false)
        {
            await _overlay.Hide(force);
        }

-        public Overlay GetOverlayComponent()
+        internal Overlay GetOverlayComponent()
        {
            return _overlay;
        }

-        public async Task<Element> GetTriggerDomInfo()
+        internal async Task<Element> GetTriggerDomInfo()
        {
            return await JsInvokeAsync<Element>(JSInteropConstants.getFirstChildDomInfo, Ref);
        }
+
+        public async Task Close()
+        {
+            await _overlay.Hide(true);
+        }
    }
 }
--- a/components/core/JsInterop/interop.ts
+++ b/components/core/JsInterop/interop.ts
@ -2,6 +2,9 @@ export function getDom(element) {
  if (!element) {
    element = document.body;
  } else if (typeof element === 'string') {
+    if (element === 'document') {
+      return document;
+    }
    element = document.querySelector(element);
  }
  return element;
--- a/components/dropdown/DropdownButton.cs
+++ b/components/dropdown/DropdownButton.cs
@ -52,7 +52,6 @@ namespace AntDesign
        public DropdownButton()
        {
            IsButton = true;
-            Trigger = new TriggerType[] { TriggerType.Click };
        }
    }
 }
--- a/components/menu/Menu.razor.cs
+++ b/components/menu/Menu.razor.cs
@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Components;
+using AntDesign.Internal;
+using Microsoft.AspNetCore.Components;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@ -13,6 +14,9 @@ namespace AntDesign
        [CascadingParameter]
        public Sider Parent { get; set; }

+        [CascadingParameter(Name = "Overlay")]
+        private Overlay Overlay { get; set; }
+
        [Parameter]
        public MenuTheme Theme { get; set; } = MenuTheme.Light;

@ -37,6 +41,9 @@ namespace AntDesign
        [Parameter]
        public bool InlineCollapsed { get; set; }

+        [Parameter]
+        public bool AutoCloseDropdown { get; set; } = true;
+
        [Parameter]
        public IEnumerable<string> DefaultSelectedKeys { get; set; } = new List<string>();

@ -110,6 +117,11 @@ namespace AntDesign
            _selectedKeys = MenuItems.Where(x => x.IsSelected).Select(x => x.Key).ToArray();
            if (SelectedKeysChanged.HasDelegate)
                SelectedKeysChanged.InvokeAsync(_selectedKeys);
+
+            if (Overlay != null && AutoCloseDropdown)
+            {
+                Overlay.Hide(true);
+            }
        }

        public void SelectSubmenu(SubMenu menu)
--- a/components/popconfirm/Popconfirm.razor.cs
+++ b/components/popconfirm/Popconfirm.razor.cs
@ -55,7 +55,7 @@ namespace AntDesign
            Trigger = new[] { TriggerType.Click };
        }

-        public override async Task Show(int? overlayLeft = null, int? overlayTop = null)
+        internal override async Task Show(int? overlayLeft = null, int? overlayTop = null)
        {
            if (Trigger.Contains(TriggerType.Hover))
            {
@ -65,7 +65,7 @@ namespace AntDesign
            await base.Show(overlayLeft, overlayTop);
        }

-        public override async Task Hide(bool force = false)
+        internal override async Task Hide(bool force = false)
        {
            if (Trigger.Contains(TriggerType.Hover))
            {
--- a/components/popover/Popover.razor.cs
+++ b/components/popover/Popover.razor.cs
@ -32,17 +32,17 @@ namespace AntDesign
            Placement = PlacementType.Top;
        }

-        public override string GetOverlayEnterClass()
+        internal override string GetOverlayEnterClass()
        {
            return "zoom-big-fast-enter zoom-big-fast-enter-active zoom-big-fast";
        }

-        public override string GetOverlayLeaveClass()
+        internal override string GetOverlayLeaveClass()
        {
            return "zoom-big-fast-leave zoom-big-fast-leave-active zoom-big-fast";
        }

-        public override async Task Show(int? overlayLeft = null, int? overlayTop = null)
+        internal override async Task Show(int? overlayLeft = null, int? overlayTop = null)
        {
            if (Trigger.Contains(TriggerType.Hover))
            {
@ -52,7 +52,7 @@ namespace AntDesign
            await base.Show(overlayLeft, overlayTop);
        }

-        public override async Task Hide(bool force = false)
+        internal override async Task Hide(bool force = false)
        {
            if (Trigger.Contains(TriggerType.Hover))
            {
--- a/components/tooltip/Tooltip.razor.cs
+++ b/components/tooltip/Tooltip.razor.cs
@ -26,17 +26,17 @@ namespace AntDesign
            Placement = PlacementType.Top;
        }

-        public override string GetOverlayEnterClass()
+        internal override string GetOverlayEnterClass()
        {
            return "zoom-big-fast-enter zoom-big-fast-enter-active zoom-big-fast";
        }

-        public override string GetOverlayLeaveClass()
+        internal override string GetOverlayLeaveClass()
        {
            return "zoom-big-fast-leave zoom-big-fast-leave-active zoom-big-fast";
        }

-        public override async Task Show(int? overlayLeft = null, int? overlayTop = null)
+        internal override async Task Show(int? overlayLeft = null, int? overlayTop = null)
        {
            if (Trigger.Contains(TriggerType.Hover))
            {
@ -46,7 +46,7 @@ namespace AntDesign
            await base.Show(overlayLeft, overlayTop);
        }

-        public override async Task Hide(bool force = false)
+        internal override async Task Hide(bool force = false)
        {
            if (Trigger.Contains(TriggerType.Hover))
            {
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/ContextMenu.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/ContextMenu.razor
@ -1,21 +1,9 @@
 <Dropdown Trigger="new TriggerType[] { TriggerType.ContextMenu }">
    <Overlay>
        <Menu>
-            <MenuItem>
-                <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
-                    1st menu item
-                </a>
-            </MenuItem>
-            <MenuItem>
-                <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
-                    2nd menu item
-                </a>
-            </MenuItem>
-            <MenuItem>
-                <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
-                    3rd menu item
-                </a>
-            </MenuItem>
+            <MenuItem>1st menu item</MenuItem>
+            <MenuItem>2nd menu item</MenuItem>
+            <MenuItem>3rd menu item</MenuItem>
        </Menu>
    </Overlay>
    <ChildContent>
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/OverlayVisible.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/OverlayVisible.razor
@ -1,6 +1,6 @@
-<Dropdown OnVisibleChange="OnVisibleChange" Visible="_visible">
+<Dropdown @ref="@_dropdown">
    <Overlay>
-        <Menu OnMenuItemClicked="HandleMenuClick">
+        <Menu OnMenuItemClicked="HandleMenuClick" AutoCloseDropdown="@false">
            <MenuItem Id="1">Clicking me will not close the menu.</MenuItem>
            <MenuItem Id="2">Clicking me will not close the menu also.</MenuItem>
            <MenuItem Id="3">Clicking me will close the menu.</MenuItem>
@ -15,18 +15,13 @@

@code
 {
-    private bool _visible = false;
+    private Dropdown _dropdown;

-    private void HandleMenuClick(MenuItem item)
+    private async void HandleMenuClick(MenuItem item)
    {
        if (item.Id == "3")
        {
-            _visible = false;
+           await _dropdown.Close();
        }
    }
-
-    private void OnVisibleChange(bool visible)
-    {
-        _visible = visible;
-    }
 }