Skip to content

Commit d18973c

Browse files
ArgoZhangArgoZhang
committed
refactor: 新建预览组件准备复用
1 parent f42d4ac commit d18973c

5 files changed

Lines changed: 341 additions & 150 deletions

File tree

‎src/BootstrapBlazor/Components/Upload/ButtonUpload.razor‎

Lines changed: 9 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -12,49 +12,15 @@
1212
</Button>
1313
@if (ShowUploadFileList)
1414
{
15-
<div class="upload-body is-list">
16-
@foreach (var item in GetUploadFiles())
17-
{
18-
<div @key="item" class="@GetItemClassString(item)">
19-
<i class="@GetFileFormatClassString(item)"></i>
20-
<div class="upload-item-body">
21-
<span>@item.GetFileName()</span>
22-
<span>(@item.Size.ToFileSizeString())</span>
23-
</div>
24-
@if (GetShowProgress(item))
25-
{
26-
<i class="@LoadingIconString"></i>
27-
<i class="@CancelIconString" @onclick="() => OnClickCancel(item)"></i>
28-
<Progress Color="Color.Success" Height="2" Value="@item.ProgressPercent"></Progress>
29-
}
30-
else
31-
{
32-
<div class="upload-buttons">
33-
@if (item.Code == 0)
34-
{
35-
@if (ShowDownloadButton)
36-
{
37-
<i class="@DownloadIconString" @onclick="() => OnClickDownload(item)"></i>
38-
}
39-
<i class="@ValidStatusIconString"></i>
40-
@if (!IsDisabled)
41-
{
42-
<i class="@DeleteIconString" @onclick:stopPropagation @onclick="@(e => OnFileDelete(item))"></i>
43-
}
44-
}
45-
else
46-
{
47-
@if (!IsDisabled)
48-
{
49-
<i class="@InvalidStatusIconString"></i>
50-
<i class="@DeleteIconString" @onclick:stopPropagation @onclick="@(e => OnFileDelete(item))"></i>
51-
}
52-
}
53-
</div>
54-
}
55-
</div>
56-
}
57-
</div>
15+
<UploadPreviewList Items="GetUploadFiles()" IsDisabled="@IsDisabled" ShowProgress="@ShowProgress"
16+
OnGetFileFormat="@OnGetFileFormat" OnCancel="OnCancel" CancelIcon="@CancelIcon" LoadingIcon="@LoadingIcon"
17+
InvalidStatusIcon="@InvalidStatusIcon" ValidStatusIcon="@ValidStatusIcon"
18+
ShowDownloadButton="@ShowDownloadButton" DownloadIcon="@DownloadIcon" OnDownload="@OnDownload"
19+
DeleteIcon="@DeleteIcon" OnDelete="@OnFileDelete"
20+
FileIconExcel="@FileIconExcel" FileIconDocx="@FileIconDocx" FileIconPPT="@FileIconPPT"
21+
FileIconAudio="@FileIconAudio" FileIconVideo="@FileIconVideo"
22+
FileIconCode="@FileIconCode" FileIconPdf="@FileIconPdf" FileIconZip="@FileIconZip"
23+
FileIconArchive="@FileIconArchive" FileIconImage="@FileIconImage" FileIconFile="@FileIconFile"></UploadPreviewList>
5824
}
5925
<InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange" />
6026
</div>

‎src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs‎

Lines changed: 2 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ namespace BootstrapBlazor.Components;
99

1010
/// <summary>
1111
/// 按钮上传组件
12+
/// <para>ButtonUpload Component</para>
1213
/// </summary>
1314
public partial class ButtonUpload<TValue>
1415
{
1516
/// <summary>
16-
/// 获得/设置 浏览按钮图标
17+
/// 获得/设置 浏览按钮加载中图标
1718
/// </summary>
1819
[Parameter]
1920
public string? LoadingIcon { get; set; }
@@ -193,43 +194,10 @@ public partial class ButtonUpload<TValue>
193194
.AddClassFromAttributes(AdditionalAttributes)
194195
.Build();
195196

196-
private string? GetItemClassString(UploadFile item) => CssBuilder.Default(ItemClassString)
197-
.AddClass("is-valid", item is { Uploaded: true, Code: 0 })
198-
.AddClass("is-invalid", item.Code != 0)
199-
.Build();
200-
201-
private string? ItemClassString => CssBuilder.Default("upload-item")
202-
.AddClass("disabled", IsDisabled)
203-
.Build();
204-
205197
private string? BrowserButtonClassString => CssBuilder.Default("btn-browser")
206198
.AddClass(BrowserButtonClass, !string.IsNullOrEmpty(BrowserButtonClass))
207199
.Build();
208200

209-
private string? LoadingIconString => CssBuilder.Default("loading-icon")
210-
.AddClass(LoadingIcon)
211-
.Build();
212-
213-
private string? DeleteIconString => CssBuilder.Default("delete-icon")
214-
.AddClass(DeleteIcon)
215-
.Build();
216-
217-
private string? ValidStatusIconString => CssBuilder.Default("valid-icon")
218-
.AddClass(ValidStatusIcon)
219-
.Build();
220-
221-
private string? InvalidStatusIconString => CssBuilder.Default("invalid-icon")
222-
.AddClass(InvalidStatusIcon)
223-
.Build();
224-
225-
private string? DownloadIconString => CssBuilder.Default("download-icon")
226-
.AddClass(DownloadIcon)
227-
.Build();
228-
229-
private string? CancelIconString => CssBuilder.Default("cancel-icon")
230-
.AddClass(CancelIcon)
231-
.Build();
232-
233201
/// <summary>
234202
/// OnParametersSet 方法
235203
/// </summary>
@@ -239,24 +207,6 @@ protected override void OnParametersSet()
239207

240208
BrowserButtonText ??= Localizer[nameof(BrowserButtonText)];
241209
BrowserButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.ButtonUploadBrowserButtonIcon);
242-
LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.ButtonUploadLoadingIcon);
243-
InvalidStatusIcon ??= IconTheme.GetIconByKey(ComponentIcons.ButtonUploadInvalidStatusIcon);
244-
ValidStatusIcon ??= IconTheme.GetIconByKey(ComponentIcons.ButtonUploadValidStatusIcon);
245-
DownloadIcon ??= IconTheme.GetIconByKey(ComponentIcons.ButtonUploadDownloadIcon);
246-
DeleteIcon ??= IconTheme.GetIconByKey(ComponentIcons.ButtonUploadDeleteIcon);
247-
248-
FileIconExcel ??= IconTheme.GetIconByKey(ComponentIcons.FileIconExcel);
249-
FileIconDocx ??= IconTheme.GetIconByKey(ComponentIcons.FileIconDocx);
250-
FileIconPPT ??= IconTheme.GetIconByKey(ComponentIcons.FileIconPPT);
251-
FileIconAudio ??= IconTheme.GetIconByKey(ComponentIcons.FileIconAudio);
252-
FileIconVideo ??= IconTheme.GetIconByKey(ComponentIcons.FileIconVideo);
253-
FileIconCode ??= IconTheme.GetIconByKey(ComponentIcons.FileIconCode);
254-
FileIconPdf ??= IconTheme.GetIconByKey(ComponentIcons.FileIconPdf);
255-
FileIconZip ??= IconTheme.GetIconByKey(ComponentIcons.FileIconZip);
256-
FileIconArchive ??= IconTheme.GetIconByKey(ComponentIcons.FileIconArchive);
257-
FileIconImage ??= IconTheme.GetIconByKey(ComponentIcons.FileIconImage);
258-
FileIconFile ??= IconTheme.GetIconByKey(ComponentIcons.FileIconFile);
259-
CancelIcon ??= IconTheme.GetIconByKey(ComponentIcons.UploadCancelIcon);
260210
}
261211

262212
private bool CheckStatus()
@@ -275,58 +225,4 @@ private bool CheckStatus()
275225
// 只允许单个上传
276226
return GetUploadFiles().Count > 0;
277227
}
278-
279-
/// <summary>
280-
/// 点击下载按钮回调此方法
281-
/// </summary>
282-
/// <param name="item"></param>
283-
/// <returns></returns>
284-
private async Task OnClickDownload(UploadFile item)
285-
{
286-
if (OnDownload != null)
287-
{
288-
await OnDownload(item);
289-
}
290-
}
291-
292-
/// <summary>
293-
/// 点击取消按钮回调此方法
294-
/// </summary>
295-
/// <param name="item"></param>
296-
/// <returns></returns>
297-
private async Task OnClickCancel(UploadFile item)
298-
{
299-
if (OnCancel != null)
300-
{
301-
await OnCancel(item);
302-
}
303-
}
304-
305-
private string? GetFileFormatClassString(UploadFile item)
306-
{
307-
var builder = CssBuilder.Default("file-icon");
308-
var fileExtension = Path.GetExtension(item.OriginFileName ?? item.FileName);
309-
if (!string.IsNullOrEmpty(fileExtension))
310-
{
311-
fileExtension = fileExtension.ToLowerInvariant();
312-
}
313-
var icon = OnGetFileFormat?.Invoke(fileExtension) ?? GetFileExtensions(fileExtension);
314-
builder.AddClass(icon);
315-
return builder.Build();
316-
}
317-
318-
private string? GetFileExtensions(string? fileExtension) => fileExtension switch
319-
{
320-
".csv" or ".xls" or ".xlsx" => FileIconExcel,
321-
".doc" or ".docx" or ".dot" or ".dotx" => FileIconDocx,
322-
".ppt" or ".pptx" => FileIconPPT,
323-
".wav" or ".mp3" => FileIconAudio,
324-
".mp4" or ".mov" or ".mkv" => FileIconVideo,
325-
".cs" or ".html" or ".vb" => FileIconCode,
326-
".pdf" => FileIconPdf,
327-
".zip" or ".rar" or ".iso" => FileIconZip,
328-
".txt" or ".log" => FileIconArchive,
329-
".jpg" or ".jpeg" or ".png" or ".bmp" or ".gif" => FileIconImage,
330-
_ => FileIconFile
331-
};
332228
}

‎src/BootstrapBlazor/Components/Upload/UploadBase.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,8 +205,8 @@ protected virtual async Task<bool> OnFileDelete(UploadFile item)
205205
UploadFiles.Remove(item);
206206
DefaultFileList?.Remove(item);
207207
}
208+
StateHasChanged();
208209
return ret;
209-
210210
}
211211

212212
/// <summary>

‎src/BootstrapBlazor/Components/Upload/UploadPreviewList.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@namespace BootstrapBlazor.Components
2+
3+
<div class="upload-body is-list">
4+
@foreach (var item in Items)
5+
{
6+
<div @key="item" class="@GetItemClassString(item)">
7+
<i class="@GetFileFormatClassString(item)"></i>
8+
<div class="upload-item-body">
9+
<span>@item.GetFileName()</span>
10+
<span>(@item.Size.ToFileSizeString())</span>
11+
</div>
12+
@if (GetShowProgress(item))
13+
{
14+
<i class="@LoadingIconString"></i>
15+
<i class="@CancelIconString" @onclick="() => OnClickCancel(item)"></i>
16+
<Progress Color="Color.Success" Height="2" Value="@item.ProgressPercent"></Progress>
17+
}
18+
else
19+
{
20+
<div class="upload-buttons">
21+
@if (item.Code == 0)
22+
{
23+
@if (ShowDownloadButton)
24+
{
25+
<i class="@DownloadIconString" @onclick="() => OnClickDownload(item)"></i>
26+
}
27+
<i class="@ValidStatusIconString"></i>
28+
@if (!IsDisabled)
29+
{
30+
<i class="@DeleteIconString" @onclick:stopPropagation @onclick="@(e => OnFileDelete(item))"></i>
31+
}
32+
}
33+
else
34+
{
35+
@if (!IsDisabled)
36+
{
37+
<i class="@InvalidStatusIconString"></i>
38+
<i class="@DeleteIconString" @onclick:stopPropagation @onclick="@(e => OnFileDelete(item))"></i>
39+
}
40+
}
41+
</div>
42+
}
43+
</div>
44+
}
45+
</div>

0 commit comments

Comments
 (0)