test/BootstrapBlazor3
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2024-12-02 03:59:14 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(CardUpload): add IsUploadButtonAtFirst (#4081)

Browse Source 
* feat: 增加 IsUploadButtonAtFirst 参数

* feat: 增加 IsUploadButtonAtFirst

* refactor: 增加前置增加按钮逻辑

* refactor: 增加前置增加按钮逻辑

* test: 增加单元测试

* refactor: 更新脚本
This commit is contained in:
Argo Zhang 2024-08-17 02:11:22 +08:00 committed by GitHub
parent c8764afea2
commit 4a61921da9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 64 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/BootstrapBlazor/Components/Upload/AvatarUpload.razor
View File

@ -8,6 +8,10 @@
}
<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
<div class="upload-body is-avatar">
@if (IsUploadButtonAtFirst && CheckCanUpload())
{
@RenderAdd
}
@foreach (var item in GetUploadFiles())
{
<div class="@GetItemClassString(item)" id="@item.ValidateId" style="@PrevStyleString">
@ -35,17 +39,22 @@
}
</div>
}
@if (CheckCanUpload())
@if (!IsUploadButtonAtFirst && CheckCanUpload())
{
<div class="@ItemClassString" style="@PrevStyleString">
<div class="upload-item-actions btn-browser">
<span class="upload-item-plus">
<i class="@AddIcon"></i>
</span>
</div>
</div>
@RenderAdd
}
</div>
<InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange" />
</div>
@code {
RenderFragment RenderAdd =>
@<div class="@ItemClassString" style="@PrevStyleString">
<div class="upload-item-actions btn-browser">
<span class="upload-item-plus">
<i class="@AddIcon"></i>
</span>
</div>
</div>;
}

6
src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs
View File

@ -98,6 +98,12 @@ public partial class AvatarUpload<TValue>
[Parameter]
public string? InvalidStatusIcon { get; set; }
/// <summary>
/// 获得/设置 继续上传按钮是否在列表前 默认 false
/// </summary>
[Parameter]
public bool IsUploadButtonAtFirst { get; set; }
[Inject]
[NotNull]
private IIconTheme? IconTheme { get; set; }

31
src/BootstrapBlazor/Components/Upload/CardUpload.razor
View File

@ -8,6 +8,10 @@
}
<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id" data-bb-previewer-id="@PreviewerId">
<div class="@BodyClassString">
@if (IsUploadButtonAtFirst && CheckCanUpload())
{
@RenderAdd
}
@foreach (var item in GetUploadFiles())
{
<div @key="@item" class="@GetItemClassString(item)">
@ -66,18 +70,9 @@
</span>
</div>
}
@if (CheckCanUpload())
@if (!IsUploadButtonAtFirst && CheckCanUpload())
{
<div class="@CardItemClass">
<div class="upload-item-actions btn-browser">
@if (!IsDisabled)
{
<span class="upload-item-plus">
<i class="@AddIcon"></i>
</span>
}
</div>
</div>
@RenderAdd
}
</div>
<InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange" />
@ -87,3 +82,17 @@
<ImagePreviewer Id="@PreviewerId" PreviewList="PreviewList" />
}
</div>
@code {
RenderFragment RenderAdd =>
@<div class="@CardItemClass">
<div class="upload-item-actions btn-browser">
@if (!IsDisabled)
{
<span class="upload-item-plus">
<i class="@AddIcon"></i>
</span>
}
</div>
</div>;
}

6
src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs
View File

@ -95,6 +95,12 @@ public partial class CardUpload<TValue>
[Parameter]
public bool ShowDeletedButton { get; set; } = true;
/// <summary>
/// 获得/设置 继续上传按钮是否在列表前 默认 false
/// </summary>
[Parameter]
public bool IsUploadButtonAtFirst { get; set; }
[Inject]
[NotNull]
private IIconTheme? IconTheme { get; set; }

10
src/BootstrapBlazor/wwwroot/modules/upload.js
View File

@ -15,7 +15,6 @@ export function init(id) {
inputFile.click()
})
//阻止浏览器默认行为
EventHandler.on(document, "dragleave", preventHandler)
EventHandler.on(document, 'drop', preventHandler)
EventHandler.on(document, 'dragenter', preventHandler)
@ -23,15 +22,12 @@ export function init(id) {
EventHandler.on(el, 'drop', e => {
try {
//获取文件对象
const fileList = e.dataTransfer.files
//检测是否是拖拽文件到页面的操作
if (fileList.length === 0) {
return false
}
inputFile.files = e.dataTransfer.files
inputFile.files = fileList
const event = new Event('change', { bubbles: true })
inputFile.dispatchEvent(event)
} catch (e) {
@ -69,9 +65,9 @@ export function dispose(id) {
const upload = Data.get(id)
Data.remove(id)
const el = upload.el
const preventHandler = upload.preventHandler
if (upload) {
const { el, preventHandler } = upload;
EventHandler.off(el, 'click')
EventHandler.off(el, 'drop')
EventHandler.off(el, 'paste')

12
test/UnitTest/Components/UploadTest.cs
View File

@ -205,6 +205,12 @@ public class UploadTest : BootstrapBlazorTestBase
{
pb.Add(a => a.IsDisabled, true);
});
// IsUploadButtonAtFirst
cut.SetParametersAndRender(pb =>
{
pb.Add(a => a.IsUploadButtonAtFirst, true);
});
}
[Fact]
@ -760,6 +766,12 @@ public class UploadTest : BootstrapBlazorTestBase
{
new("test.png")
})));
// IsUploadButtonAtFirst
cut.SetParametersAndRender(pb =>
{
pb.Add(a => a.IsUploadButtonAtFirst, true);
});
}
[Fact]