From 4cac27f887d392f0f822741e330d343db45ec0d9 Mon Sep 17 00:00:00 2001 From: Andrzej Bakun Date: Wed, 9 Jun 2021 11:51:24 +0200 Subject: [PATCH] fix(module: dropdown): dropdown button missing properties & docs fix for Dropdown & Button (#1609) * fix:fix(module:dropdownbutton): add regular button behaviors and properties * fix(module:button): add text type & docs * docs(module:dropdown): version correction * fix(module:overlay): re-add IsButton parameter * fix: add xml comment to public methods * fix(module:overlay): add xml documentation * fix(module:dropdown): chrome block button force * fix(module:button): remove Search parameter Co-authored-by: James Yeung --- components/button/Button.razor.cs | 130 +++++++---- components/button/ButtonType.cs | 8 +- components/core/AntSizeLDSType.cs | 7 +- .../core/Component/Overlay/Overlay.razor.cs | 8 + .../Component/Overlay/OverlayTrigger.razor.cs | 207 +++++++++++++----- components/dropdown/Dropdown.razor | 57 ++++- components/dropdown/Dropdown.razor.cs | 54 ++++- components/dropdown/DropdownButton.cs | 186 ++++++++++------ .../internal/DropdownGroupButton.razor | 2 +- .../Demos/Components/Button/demo/Basic.razor | 5 +- .../Demos/Components/Button/demo/Danger.razor | 11 +- .../Components/Button/demo/Disabled.razor | 27 ++- .../Demos/Components/Button/demo/block.md | 2 +- .../Demos/Components/Button/demo/danger.md | 2 +- .../Demos/Components/Button/demo/ghost.md | 2 +- .../Components/Button/doc/index.en-US.md | 23 ++ .../Components/Button/doc/index.zh-CN.md | 21 ++ .../Components/Dropdown/demo/Basic.razor | 5 +- .../Dropdown/demo/DropdownButtonDemo.razor | 46 +++- .../Components/Dropdown/doc/index.en-US.md | 47 ++++ .../Components/Dropdown/doc/index.zh-CN.md | 55 +++++ 21 files changed, 685 insertions(+), 220 deletions(-) diff --git a/components/button/Button.razor.cs b/components/button/Button.razor.cs index b12aeda0..99a07a11 100644 --- a/components/button/Button.razor.cs +++ b/components/button/Button.razor.cs @@ -7,42 +7,6 @@ namespace AntDesign { public partial class Button : AntDomComponentBase { - [Parameter] - public bool Block { get; set; } = false; - - [Parameter] - public bool Ghost { get; set; } = false; - - [Parameter] - public bool Search { get; set; } = false; - - [Parameter] - public bool Loading - { - get => _loading; - set - { - if (_loading != value) - { - _loading = value; - UpdateIconDisplay(_loading); - } - } - } - - [Parameter] - public string Type { get; set; } = ButtonType.Default; - - [Parameter] - public string HtmlType { get; set; } = "button"; - - [Parameter] - public string Shape { get; set; } = null; - - private bool _animating = false; - - private string _btnWave = "--antd-wave-shadow-color: rgb(255, 120, 117);"; - private string _formSize; [CascadingParameter(Name = "FormSize")] @@ -60,31 +24,102 @@ namespace AntDesign } } + /// + /// Option to fit button width to its parent width + /// [Parameter] - public string Size { get; set; } = AntSizeLDSType.Default; - - [Parameter] - public string Icon { get; set; } - - [Parameter] - public bool Disabled { get; set; } - - [Parameter] - public bool Danger { get; set; } + public bool Block { get; set; } = false; + /// + /// Content of the button. + /// [Parameter] public RenderFragment ChildContent { get; set; } + /// + /// Set the danger status of button. + /// + [Parameter] + public bool Danger { get; set; } + + /// + /// Whether the `Button` is disabled. + /// + [Parameter] + public bool Disabled { get; set; } + + /// + /// Make background transparent and invert text and border colors + /// + [Parameter] + public bool Ghost { get; set; } = false; + + /// + /// Set the original html type of the button element. + /// + [Parameter] + public string HtmlType { get; set; } = "button"; + + /// + /// Set the icon component of button. + /// + [Parameter] + public string Icon { get; set; } + + /// + /// Show loading indicator. You have to write the loading logic on your own. + /// + [Parameter] + public bool Loading + { + get => _loading; + set + { + if (_loading != value) + { + _loading = value; + UpdateIconDisplay(_loading); + } + } + } + + /// + /// Callback when `Button` is clicked + /// [Parameter] public EventCallback OnClick { get; set; } + /// + /// Do not propagate events when button is clicked. + /// [Parameter] public bool OnClickStopPropagation { get; set; } + /// + /// Can set button shape: `circle` | `round` or `null` (default, which is rectangle). + /// + [Parameter] + public string Shape { get; set; } = null; + + /// + /// Set the size of button. + /// + [Parameter] + public string Size { get; set; } = AntSizeLDSType.Default; + + /// + /// Type of the button. + /// + [Parameter] + public string Type { get; set; } = ButtonType.Default; + public IList Icons { get; set; } = new List(); protected string IconStyle { get; set; } + private bool _animating = false; + + private string _btnWave = "--antd-wave-shadow-color: rgb(255, 120, 117);"; private bool _loading = false; protected void SetClassMap() @@ -99,10 +134,9 @@ namespace AntDesign .If($"{prefixName}-lg", () => Size == "large") .If($"{prefixName}-sm", () => Size == "small") .If($"{prefixName}-loading", () => Loading) - .If($"{prefixName}-icon-only", () => !string.IsNullOrEmpty(this.Icon) && !this.Search && this.ChildContent == null) + .If($"{prefixName}-icon-only", () => !string.IsNullOrEmpty(this.Icon) && this.ChildContent == null) .If($"{prefixName}-background-ghost", () => Ghost) .If($"{prefixName}-block", () => this.Block) - .If($"ant-input-search-button", () => this.Search) .If($"{prefixName}-rtl", () => RTL) ; } diff --git a/components/button/ButtonType.cs b/components/button/ButtonType.cs index 0de92c2a..8a6bbea2 100644 --- a/components/button/ButtonType.cs +++ b/components/button/ButtonType.cs @@ -1,9 +1,4 @@ -using System; -using System.Collections.Generic; -using System.Linq; -using System.Threading.Tasks; - -namespace AntDesign +namespace AntDesign { public static class ButtonType { @@ -11,5 +6,6 @@ namespace AntDesign public const string Primary = "primary"; public const string Dashed = "dashed"; public const string Link = "link"; + public const string Text = "text"; } } diff --git a/components/core/AntSizeLDSType.cs b/components/core/AntSizeLDSType.cs index e12b1bb3..f179b1aa 100644 --- a/components/core/AntSizeLDSType.cs +++ b/components/core/AntSizeLDSType.cs @@ -1,9 +1,4 @@ -using System; -using System.Collections.Generic; -using System.Linq; -using System.Threading.Tasks; - -namespace AntDesign +namespace AntDesign { public class AntSizeLDSType { diff --git a/components/core/Component/Overlay/Overlay.razor.cs b/components/core/Component/Overlay/Overlay.razor.cs index 9a17ca98..ee7ae047 100644 --- a/components/core/Component/Overlay/Overlay.razor.cs +++ b/components/core/Component/Overlay/Overlay.razor.cs @@ -54,6 +54,14 @@ namespace AntDesign.Internal [Parameter] public int HorizontalOffset { get; set; } = 4; + /// + /// By default Overlay does not render its content if Overlay hasn't been + /// activated (shown at least once). Setting HiddenMode = true will + /// go through rendering process. + /// Use case: Select component, when using or + /// needs HiddenMode = true, so the select options are initialized and + /// potential defaults can be rendered properly. + /// [Parameter] public bool HiddenMode { get; set; } = false; diff --git a/components/core/Component/Overlay/OverlayTrigger.razor.cs b/components/core/Component/Overlay/OverlayTrigger.razor.cs index 950af09d..2fdfe688 100644 --- a/components/core/Component/Overlay/OverlayTrigger.razor.cs +++ b/components/core/Component/Overlay/OverlayTrigger.razor.cs @@ -29,34 +29,17 @@ namespace AntDesign.Internal } } + /// + /// Overlay adjustment strategy (when for example browser resize is happening) + /// [Parameter] - public string PopupContainerSelector { get; set; } = "body"; + public TriggerBoundaryAdjustMode BoundaryAdjustMode { get; set; } = TriggerBoundaryAdjustMode.InView; + /// + /// Trigger (link, button, etc) + /// [Parameter] - public string PlacementCls { get; set; } - - [Parameter] - public string OverlayEnterCls { get; set; } - - [Parameter] - public string OverlayLeaveCls { get; set; } - - [Parameter] - public string OverlayHiddenCls { get; set; } - - [Parameter] - public string OverlayClassName { get; set; } - - [Parameter] - public string OverlayStyle { get; set; } - - [Parameter] - public bool Disabled { get; set; } - - [Parameter] - public bool Visible { get; set; } = false; - - public void SetVisible(bool visible) => Visible = visible; + public RenderFragment ChildContent { get; set; } /// /// 自动关闭功能和Visible参数同时生效 @@ -65,23 +48,101 @@ namespace AntDesign.Internal [Parameter] public bool ComplexAutoCloseAndVisible { get; set; } = false; + /// + /// Whether the trigger is disabled. + /// [Parameter] - public bool IsButton { get; set; } = false; - - [Parameter] - public bool InlineFlexMode { get; set; } = false; + public bool Disabled { get; set; } + /// + /// Property forwarded to Overlay component. Consult the Overlay + /// property for more detailed explanation. + /// [Parameter] public bool HiddenMode { get; set; } = false; + /// + /// (not used in Unbound) Sets wrapping div style to `display: inline-flex;`. + /// [Parameter] - public TriggerType[] Trigger { get; set; } = new TriggerType[] { TriggerType.Hover }; + public bool InlineFlexMode { get; set; } = false; - /* - * 通过参数赋值的placement，不应该通过其它方式赋值 - * Placement set by Parameter, should not be change by other way - */ - private PlacementType _paramPlacement = PlacementType.BottomLeft; + /// + /// Behave like a button: when clicked invoke OnClick + /// (unless OnClickDiv is overriden and does not call base). + /// + [Parameter] + public bool IsButton { get; set; } = false; + + /// + /// Callback when triggger is clicked + /// + [Parameter] + public EventCallback OnClick { get; set; } + + /// + /// Callback - equivalent of OnMouseUp event on the trigger trigger. + /// + [Parameter] + public EventCallback OnMaskClick { get; set; } + + /// + /// Callback when mouse enters trigger boundaries. + /// + [Parameter] public Action OnMouseEnter { get; set; } + + /// + /// Callback when mouse leaves trigger boundaries. + /// + [Parameter] public Action OnMouseLeave { get; set; } + + /// + /// Callback when overlay is hiding. + /// + [Parameter] + public EventCallback OnOverlayHiding { get; set; } + + /// + /// Callback when overlay visibility is changing. + /// + [Parameter] + public EventCallback OnVisibleChange { get; set; } + + /// + /// Overlay content (what will be rendered after trigger is activated) + /// + [Parameter] + public RenderFragment Overlay { get; set; } + + /// + /// Overlay container custom css class. + /// + [Parameter] + public string OverlayClassName { get; set; } + + /// + /// Css class added to overlay when overlay is shown. + /// + [Parameter] + public string OverlayEnterCls { get; set; } + + /// + /// Css class added to overlay when overlay is hidden. + /// + [Parameter] + public string OverlayHiddenCls { get; set; } + + /// + /// Css class added to overlay when overlay is hiding. + /// + [Parameter] + public string OverlayLeaveCls { get; set; } + + /// + /// Css style that will be added to overlay div. + /// + [Parameter] + public string OverlayStyle { get; set; } /* * 当前的placement，某些情况下可能会被Overlay组件修改（通过ChangePlacementForShow函数） @@ -89,6 +150,12 @@ namespace AntDesign.Internal */ private PlacementType _placement = PlacementType.BottomLeft; + /* + * 通过参数赋值的placement，不应该通过其它方式赋值 + * Placement set by Parameter, should not be change by other way + */ + private PlacementType _paramPlacement = PlacementType.BottomLeft; + [Parameter] public PlacementType Placement { @@ -103,34 +170,29 @@ namespace AntDesign.Internal } } - [Parameter] public Action OnMouseEnter { get; set; } - - [Parameter] public Action OnMouseLeave { get; set; } - + /// + /// Override default placement class which is based on `Placement` parameter. + /// [Parameter] - public EventCallback OnVisibleChange { get; set; } + public string PlacementCls { get; set; } + /// + /// Define what is going to be the container of the overlay. + /// Example use case: when overlay has to be contained in a + /// scrollable area. + /// [Parameter] - public EventCallback OnOverlayHiding { get; set; } + public string PopupContainerSelector { get; set; } = "body"; + /// + /// Trigger mode. Could be multiple by passing an array. + /// [Parameter] - public RenderFragment Overlay { get; set; } - - [Parameter] - public RenderFragment ChildContent { get; set; } - - [Parameter] - public RenderFragment Unbound { get; set; } - - [Parameter] - public EventCallback OnClick { get; set; } - - [Parameter] - public EventCallback OnMaskClick { get; set; } - - [Parameter] - public TriggerBoundaryAdjustMode BoundaryAdjustMode { get; set; } = TriggerBoundaryAdjustMode.InView; + public TriggerType[] Trigger { get; set; } = new TriggerType[] { TriggerType.Hover }; + /// + /// Manually set reference to triggering element. + /// [Parameter] public ElementReference TriggerReference { @@ -138,6 +200,18 @@ namespace AntDesign.Internal set => Ref = value; } + /// + /// ChildElement with ElementReference set to avoid wrapping div. + /// + [Parameter] + public RenderFragment Unbound { get; set; } + + /// + /// Toggles overlay viability. + /// + [Parameter] + public bool Visible { get; set; } = false; + [Inject] protected DomEventService DomEventService { get; set; } @@ -288,6 +362,11 @@ namespace AntDesign.Internal } } + /// + /// Handle the trigger click. + /// + /// MouseEventArgs + /// public virtual async Task OnClickDiv(MouseEventArgs args) { if (!IsButton) @@ -458,14 +537,28 @@ namespace AntDesign.Internal return await JsInvokeAsync(JSInteropConstants.GetFirstChildDomInfo, Ref); } + /// + /// Will hide the overlay. + /// + /// public async Task Close() { await _overlay.Hide(true); } + /// + /// Checks if overlay is currently in visible state. + /// + /// public bool IsOverlayShow() { return _overlay != null ? _overlay.IsPopup() : false; } + + /// + /// Toggle overlay visibility. + /// + /// boolean: visibility true/false + public void SetVisible(bool visible) => Visible = visible; } } diff --git a/components/dropdown/Dropdown.razor b/components/dropdown/Dropdown.razor index fce1ae76..ff1d4444 100644 --- a/components/dropdown/Dropdown.razor +++ b/components/dropdown/Dropdown.razor @@ -7,18 +7,37 @@ @if (IsButton) {
- + - + - - - + + +
\ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Button/demo/Danger.razor b/site/AntDesign.Docs/Demos/Components/Button/demo/Danger.razor index da3ed263..d627df39 100644 --- a/site/AntDesign.Docs/Demos/Components/Button/demo/Danger.razor +++ b/site/AntDesign.Docs/Demos/Components/Button/demo/Danger.razor @@ -3,10 +3,13 @@ Primary - - + \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Button/demo/Disabled.razor b/site/AntDesign.Docs/Demos/Components/Button/demo/Disabled.razor index 2e6b1a01..20304ddf 100644 --- a/site/AntDesign.Docs/Demos/Components/Button/demo/Disabled.razor +++ b/site/AntDesign.Docs/Demos/Components/Button/demo/Disabled.razor @@ -7,20 +7,25 @@
- - +
- - + +
+ +
- -
@@ -28,6 +33,16 @@ +
+ + +
+ +