mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-11 01:15:22 +08:00
152a574577
* feat(module:overlay): OverlayTrigger not bound to a div * feat(module:overlay): OverlayTrigger not bound to a div * feat(module:overlay): Logic transfer to single Overlay * feat(module:overlay): remove obsolete duplication * feat(module:Tooltip): Add for unbounded oncontextmenu event handler * feat(module:tooltip): unbound js event listeners remove * docs(module:tooltip): unbound explanation * fix(module:button): attach Ref to top level html element @ref * feat(module:dropdown&tooltip&popconfirm&popover): Overlay not bound to a div * docs(module:dropdown&tooltip&popconfirm&popover): unbound explanation * feat(module:OverlayTrigger): common logic relocation * feat(module:overlaytrigger): Overlay not bound to a div * feat(module:DatePicker): Overlay not bound to a div * feat(module:select): Overlay not boud to div * fix(module:select): onclickarrow event relocation * fix(module:select): rename Show to OnArrowClick * feat(module:avatar): Overlay not bound to a div * docs(module:avatar): demo switch to unbound version * feat(module:autocomplete): partial OverlayTrigger not bound to a div * feat(module:slider): tooltip * docs(module:slider): tooltip * fix(module:overlay): add SetVisible method * feat: set Ref where missing, performance components register Ref when missing IsFixed flag for CascadeValue changed hard-code sequence numbers when using RenderTreeBuilder Rate component use Tooltip Unbound version Tabs test fix * fix: revert changes (accidental) * feat(module:upload): tooltip with unbound usage * feat(module:table): column use of unbound tooltip * feat(module:autocomplete):overlay unbound from div * fix(module:upload): missing div restore Co-authored-by: James Yeung <shunjiey@hotmail.com>
170 lines
9.3 KiB
C#
170 lines
9.3 KiB
C#
@namespace AntDesign
|
|
@inherits AntDomComponentBase
|
|
|
|
@using AntDesign.Internal;
|
|
|
|
<span class="@ClassMapper.Class @(IsPictureCard? "ant-upload-picture-card-wrapper" : "")" style="@Style" @ref="Ref">
|
|
@if (!IsPictureCard || !ShowUploadList)
|
|
{
|
|
<CascadingValue Value="this" IsFixed>
|
|
<UploadButton Action="@Action"
|
|
Accept="@Accept"
|
|
ListType="@ListType"
|
|
Name="@Name"
|
|
Directory="@Directory"
|
|
Multiple="@Multiple"
|
|
Data="@Data"
|
|
Headers="@Headers"
|
|
Disabled="Disabled"
|
|
ShowButton="@ShowButton">
|
|
@ChildContent
|
|
</UploadButton>
|
|
</CascadingValue>
|
|
}
|
|
|
|
@if (ShowUploadList)
|
|
{
|
|
<div class="ant-upload-list ant-upload-list-@ListType">
|
|
@{
|
|
var containerClass = ListType switch
|
|
{
|
|
"picture-card" => "ant-upload-list-picture-card-container",
|
|
"text" => "ant-upload-list-text-container",
|
|
"picture" => "ant-upload-list-picture-container",
|
|
_ => ""
|
|
};
|
|
|
|
}
|
|
|
|
@foreach (var file in FileList)
|
|
{
|
|
var tips = string.Empty;
|
|
var stateClass = string.Empty;
|
|
|
|
switch (file.State)
|
|
{
|
|
case UploadState.Uploading:
|
|
tips = Locale.Uploading;
|
|
break;
|
|
case UploadState.Fail:
|
|
tips = !string.IsNullOrWhiteSpace(file.Response) ? file.Response : Locale.UploadError;
|
|
stateClass = "ant-upload-list-item-error";
|
|
break;
|
|
case UploadState.Success:
|
|
tips = file.FileName;
|
|
stateClass = "ant-upload-list-item-done";
|
|
break;
|
|
}
|
|
|
|
<Tooltip Title="tips" Disabled="file.State != UploadState.Fail">
|
|
<Unbound>
|
|
<div Class="@containerClass" Style="@(IsPictureCard ? "" : "display: list-item;")">
|
|
@if (IsPictureCard && file.State == UploadState.Uploading)
|
|
{
|
|
<div class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture-card" @ref="@context.Current">
|
|
<div class="ant-upload-list-item-info">
|
|
<div class="ant-upload-list-item-thumbnail">@Locale.Uploading</div>
|
|
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="@file.FileName">
|
|
@file.FileName
|
|
</span>
|
|
</div>
|
|
<div class="ant-upload-list-item-progress">
|
|
<Progress Percent="file.Percent" StrokeWidth="2" Type="ProgressType.Line" ShowInfo="false"></Progress>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="ant-upload-list-item @stateClass ant-upload-list-item-list-type-@ListType" @ref="@context.Current">
|
|
<div class="ant-upload-list-item-info">
|
|
<span class="ant-upload-span">
|
|
@if (IsText)
|
|
{
|
|
<div class="ant-upload-text-icon">
|
|
@if (file.State == UploadState.Uploading)
|
|
{
|
|
<Icon Type="loading" />
|
|
}
|
|
else
|
|
{
|
|
<Icon Type="paper-clip" />
|
|
}
|
|
</div>
|
|
<a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" title="@file.FileName" href="@file.Url">@file.FileName</a>
|
|
<span class="ant-upload-list-item-card-actions">
|
|
<button title="@Locale.RemoveFile" type="button" class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" @onclick="() => RemoveFile(file)">
|
|
<Icon Type="delete" />
|
|
</button>
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
if (file.State == UploadState.Success)
|
|
{
|
|
<a class="ant-upload-list-item-thumbnail" href="@file.Url" target="_blank" rel="noopener noreferrer">
|
|
@if (file.IsPicture())
|
|
{
|
|
<img src="@(file.ObjectURL ?? file.Url)" alt="@file.FileName" class="ant-upload-list-item-image" />
|
|
}
|
|
else
|
|
{
|
|
<Icon Type="file" />
|
|
}
|
|
</a>
|
|
}
|
|
else
|
|
{
|
|
<div class="ant-upload-list-item-thumbnail ant-upload-list-item-file">
|
|
<Icon Type="picture" />
|
|
</div>
|
|
}
|
|
<a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" title="@file.FileName" href="@file.Url">@file.FileName</a>
|
|
}
|
|
</span>
|
|
</div>
|
|
@if (IsPictureCard)
|
|
{
|
|
<span class="ant-upload-list-item-actions">
|
|
<a href="@(OnPreview.HasDelegate ? null : file.Url)" target="_blank" rel="noopener noreferrer" title="@Locale.PreviewFile" @onclick="() => PreviewFile(file)" style="@(file.State==UploadState.Fail?"pointer-events: none; opacity: 0.5;":"")">
|
|
<Icon Type="eye" />
|
|
</a>
|
|
<button title="@Locale.RemoveFile" type="button" class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" @onclick="() => RemoveFile(file)">
|
|
<Icon Type="delete" />
|
|
</button>
|
|
</span>
|
|
}
|
|
@if (file.State == UploadState.Uploading)
|
|
{
|
|
<div class="ant-upload-list-item-progress">
|
|
<Progress Percent="file.Percent" StrokeWidth="2" Type="ProgressType.Line" ShowInfo="false"></Progress>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</Unbound>
|
|
</Tooltip>
|
|
}
|
|
|
|
@if (IsPictureCard)
|
|
{
|
|
<CascadingValue Value="this" IsFixed>
|
|
<UploadButton Action="@Action"
|
|
Accept="@Accept"
|
|
ListType="@ListType"
|
|
Name="@Name"
|
|
Directory="@Directory"
|
|
Multiple="@Multiple"
|
|
Data="@Data"
|
|
Headers="@Headers"
|
|
Disabled="Disabled"
|
|
ShowButton="@ShowButton">
|
|
@ChildContent
|
|
</UploadButton>
|
|
</CascadingValue>
|
|
}
|
|
</div>
|
|
}
|
|
</span>
|
|
|