Skip to content

Commit

Permalink
refactor(module: select): add overlay, fix some serious bugs (ant-des…
Browse files Browse the repository at this point in the history 
…ign-blazor#584)
  • Loading branch information
@mutouzdl
mutouzdl authored Sep 9, 2020
1 parent c64bd39 commit 2686969
Show file tree
Hide file tree
Showing 11 changed files with 579 additions and 471 deletions.
4 changes: 2 additions & 2 deletions components/core/Component/overlay/Overlay.razor
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@namespace AntDesign.Internal
@inherits AntDomComponentBase

@if (_hasAddOverlayToBody == true || _isWaitForOverlayFirstRender)
@if (_hasAddOverlayToBody == true || _isWaitForOverlayFirstRender || HiddenMode)
{
string display = GetDisplayStyle();
string overlayCls = GetOverlayCls();
Expand All @@ -26,4 +26,4 @@
</CascadingValue>
</CascadingValue>
</div>
}
}
13 changes: 13 additions & 0 deletions components/core/Component/overlay/Overlay.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ public sealed partial class Overlay : AntDomComponentBase
[Parameter]
public EventCallback OnOverlayMouseLeave { get; set; }

[Parameter]
public Action OnShow { get; set; }

[Parameter]
public Action OnHide { get; set; }

[CascadingParameter(Name = "ArrowPointAtCenter")]
public bool ArrowPointAtCenter { get; set; }

Expand All @@ -46,6 +52,9 @@ public sealed partial class Overlay : AntDomComponentBase
[Parameter]
public int HorizontalOffset { get; set; } = 4;

[Parameter]
public bool HiddenMode { get; set; } = false;

private bool _hasAddOverlayToBody = false;
private bool _isPreventHide = false;
private bool _isChildOverlayShow = false;
Expand Down Expand Up @@ -171,6 +180,8 @@ internal async Task Show(int? overlayLeft = null, int? overlayTop = null)
await Trigger.OnVisibleChange.InvokeAsync(true);

StateHasChanged();

OnShow?.Invoke();
}

internal async Task Hide(bool force = false)
Expand Down Expand Up @@ -207,6 +218,8 @@ internal async Task Hide(bool force = false)
await Trigger.OnVisibleChange.InvokeAsync(false);

StateHasChanged();

OnHide?.Invoke();
}

internal void PreventHide(bool prevent)
Expand Down
9 changes: 8 additions & 1 deletion components/core/Component/overlay/OverlayTrigger.razor
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
@namespace AntDesign.Internal
@inherits AntDomComponentBase

@{
string inlineFlexDisplay = InlineFlexMode ? "display: inline-flex;" : "";
}

<div class="@ClassMapper.Class"
style="display: inline-flex; @Style"
style="@inlineFlexDisplay @Style"
id="@Id"
@ref="@Ref"
@onclick="OnClickDiv"
Expand All @@ -18,6 +22,9 @@
<CascadingValue Value="this" Name="Trigger">
<Overlay @ref="_overlay"
OverlayChildPrefixCls="@($"{PrefixCls}-menu")"
HiddenMode="HiddenMode"
OnShow="OnOverlayShow"
OnHide="OnOverlayHide"
OnOverlayMouseEnter="OnOverlayMouseEnter"
OnOverlayMouseLeave="OnOverlayMouseLeave" />
</CascadingValue>
14 changes: 14 additions & 0 deletions components/core/Component/overlay/OverlayTrigger.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ public partial class OverlayTrigger : AntDomComponentBase
[Parameter]
public bool IsButton { get; set; } = false;

[Parameter]
public bool InlineFlexMode { get; set; } = false;

[Parameter]
public bool HiddenMode { get; set; } = false;

[Parameter]
public TriggerType[] Trigger { get; set; } = new TriggerType[] { TriggerType.Hover };

Expand Down Expand Up @@ -212,6 +218,9 @@ protected virtual async Task OverlayHiding(bool visible)
await OnOverlayHiding.InvokeAsync(visible);
}

protected virtual void OnOverlayShow() { }
protected virtual void OnOverlayHide() { }

internal virtual string GetPlacementClass()
{
if (!string.IsNullOrEmpty(PlacementCls))
Expand Down Expand Up @@ -272,5 +281,10 @@ public async Task Close()
{
await _overlay.Hide(true);
}

public bool IsOverlayShow()
{
return _overlay != null ? _overlay.IsPopup() : false;
}
}
}
204 changes: 45 additions & 159 deletions components/select/Select.razor
View file
Original file line number Diff line number Diff line change
@@ -1,159 +1,19 @@
@namespace AntDesign
@inherits AntInputComponentBase<string>
@using AntDesign.Internal
@inherits SelectBase

<CascadingValue Value=this>
<div class="@ClassMapper.Class" style="@Style" id="@Id" title="@Title" tabindex="-1" @onclick="OnSelectOpenClick" @ref="Ref">
@switch (SelectMode)
{
case SelectMode.Default:
{
var selectedOption = SelectedOptions.FirstOrDefault();
<div class="@ClassPrefix-selector">
<span class="@ClassPrefix-selection-search">
<input @ref="_inputRef"
@oninput="OnInput" @onblur="OnInputBlur"
id="@Id"
value="@_searchValue"
role="combobox"
readonly="@(!_isSelectOpened)"
class="@ClassPrefix-selection-search-input"
style="@(_isSelectOpened ? "" : "opacity:0")"
autocomplete="off"
aria-owns="@(Id)_list"
aria-expanded="@_isSelectOpened"
aria-autocomplete="list"
aria-controls="@(Id)_list" />
</span>
@if (ShowPlaceholder)
{
<span class="ant-select-selection-placeholder">@Placeholder</span>
}
else if (string.IsNullOrEmpty(_searchValue) && selectedOption != null)
{
var showValue = GetShowValue(selectedOption);
@if (showValue.IsT0)
{
<span class="ant-select-selection-item">@showValue.AsT0 </span>
}
else
{
<span class="ant-select-selection-item">@showValue.AsT1 </span>
}
}
</div>
break;
}
default:
{
<div class="@ClassPrefix-selector">
@foreach (var option in SelectedOptions)
{
if (TagRender != null)
{
<span>@TagRender(GetProperties(option))</span>
}
else
{
var showValue = GetShowValue(option);
<span class="@ClassPrefix-selection-item">
<span class="@ClassPrefix-selection-item-content">
@if (showValue.IsT0)
{
@showValue.AsT0
}
else
{
@showValue.AsT1
}
</span>

<span unselectable="on" aria-hidden="true" style="user-select: none;" class="@ClassPrefix-selection-item-remove"
@onclick="()=>OnRemoveSelected(option)" @onclick:stopPropagation="true">
<Icon Type="close"></Icon>
</span>
</span>
}
}
<span class="@ClassPrefix-selection-search" style="width:@_inputWidth">
<input @ref="_inputRef"
@oninput="OnInput" @onblur="OnInputBlur"
@bind-value="@_searchValue"
id="@Id"
role="combobox"
readonly="@(!_isSelectOpened)"
class="@ClassPrefix-selection-search-input"
style="@(_isSelectOpened?"":"opacity:0")"
autocomplete="off"
aria-owns="@(Id)_list"
aria-expanded="@_isSelectOpened"
aria-autocomplete="list"
aria-controls="@(Id)_list" />
<span class="@ClassPrefix-selection-search-mirror" aria-hidden="true">&nbsp;</span>
</span>
@if (ShowPlaceholder)
{
<span class="ant-select-selection-placeholder">@Placeholder</span>
}
</div>
break;
}
}

@if (ShowArrow && SelectMode == SelectMode.Default)
{
if (SuffixIcon != null)
{
<span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;">
@SuffixIcon
</span>
}
else if (Loading)
{
<span class="ant-select-arrow ant-select-arrow-loading" unselectable="on" aria-hidden="true" style="user-select: none;">
<Icon Type="loading"></Icon>
</span>
}
else
{
<span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;">
@if (ShowSearch && _isSelectOpened)
{
<Icon Type="search"></Icon>
}
else
{
<Icon Type="down"></Icon>
}
</span>
@if (AllowClear && HasValue)
{
<span class="ant-select-clear" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="OnClearClick">
<Icon Type="close-circle"></Icon>
</span>
}
}
}
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 100%;" @ref="_dropdownRef">
<div>
<div class="@(ClassPrefix)-dropdown @_dropdownClassMapper.Class" style="@_dropdownStyle" tabindex="-1"
@onblur="OnSelectHideClick" @onmouseenter="OnSelectMouseEnter" @onmouseleave="OnSelectMouseLeave">
<div>
@if (IsEmptyOnSearch())
{
<div role="listbox" id="@(Id)_list" class="@ClassPrefix-item-empty">
@if (NotFoundContent != null)
{
@NotFoundContent
}
else
{
<Empty Image="Empty.PRESENTED_IMAGE_SIMPLE" Small="true" />
}
</div>
}
else
{
<CascadingValue Value=@("ant-select-dropdown") Name="PrefixCls">
<div class="@ClassMapper.Class" style="@Style" id="@Id" title="@Title" tabindex="-1" @ref="Ref">
<OverlayTrigger @ref="@_dropDown"
Visible="Open"
Disabled="Disabled"
Trigger="new TriggerType[] { TriggerType.Click }"
HiddenMode
OnVisibleChange="OnVisibleChange"
Placement="@(PlacementType.BottomLeft)">
<Overlay>
<div style="@_dropdownStyle">
<div role="listbox" id="@(Id)_list" style="height: 0px; width: 0px; overflow: hidden;">
@for (var i = 0; SelectOptions.Count > i; ++i)
{
Expand Down Expand Up @@ -190,14 +50,40 @@
</div>
</div>
</div>

if (DropdownRender != null)
@if (IsEmptyOnSearch())
{
<div role="listbox" id="@(Id)_list" class="@ClassPrefix-item-empty">
@if (NotFoundContent != null)
{
@NotFoundContent
}
else
{
<Empty Image="Empty.PRESENTED_IMAGE_SIMPLE" Small="true" />
}
</div>
}

@if (DropdownRender != null)
{
@DropdownRender(default, default);
}
}
</div>
</div>
</div>
</Overlay>
<ChildContent>
<CascadingValue Value="this" Name=@("ParentSelect")>
<SelectContent Prefix="@ClassPrefix"
SearchValue="@_searchValue"
IsOverlayShow="@_dropDown.IsOverlayShow()"
OnInput="OnInput"
Placeholder="@Placeholder"
ShowPlaceholder="@ShowPlaceholder"
GetOptionShowValue="GetShowValue"
OnRemoveSelected="OnRemoveSelected"
InputWidth="@_inputWidth"/>
</CascadingValue>
</ChildContent>
</OverlayTrigger>
</div>
</div>
</CascadingValue>
</CascadingValue>
Loading

0 comments on commit 2686969

Please sign in to comment.