Skip to content

Commit eca3481

Browse files
mckaragozmckaragoz
committed
Add LoadingButton
1 parent a1fabb5 commit eca3481

File tree

7 files changed

+509
-1
lines changed

7 files changed

+509
-1
lines changed

‎CodeBeam.MudExtensions/CodeBeam.MudExtensions.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<Title>CodeBeam.MudBlazor.Extensions</Title>
99
<Authors>CodeBeam</Authors>
1010
<Company>CodeBeam</Company>
11-
<Description>MudBlazor extensions from contributors.</Description>
11+
<Description>MudBlazor extension components from contributors.</Description>
1212
<Copyright>CodeBeam OpenSource MIT</Copyright>
1313
<PackageIcon>CodeBeam Purple.jpg</PackageIcon>
1414
<PackageProjectUrl>https://github.com/CodeBeamOrg/CodeBeam.MudExtensions</PackageProjectUrl>

‎CodeBeam.MudExtensions/Components/LoadingButton/MudLoadingButton.razor‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@namespace MudExtensions
2+
@inherits MudBaseButton
3+
4+
@if (ButtonVariant == ButtonVariant.Button)
5+
{
6+
<MudButton Disabled="@(Disabled ? true : Loading ? true : false)"
7+
Size="@Size" Class="@Class" Style="@Style" UserAttributes="@UserAttributes" Variant="@Variant" Color="@Color" OnClick="@ButtonClick"
8+
Href="@Href" Target="@Target" ButtonType="@ButtonType" DisableElevation="@DisableElevation" DisableRipple="@DisableRipple"
9+
StartIcon="@StartIcon" EndIcon="@EndIcon" Command="@Command" CommandParameter="@CommandParameter" FullWidth="@FullWidth" HtmlTag="@HtmlTag"
10+
IconClass="@IconClass" IconColor="@IconColor" Tag="@Tag">
11+
@if (Loading)
12+
{
13+
if (LoadingAdornment == Adornment.Start)
14+
{
15+
<MudProgressCircular Class="me-2" Size="Size.Small" Color="@LoadingCircularColor" Indeterminate="true" />
16+
}
17+
18+
if (LoadingContent != null)
19+
{
20+
@LoadingContent
21+
}
22+
else
23+
{
24+
@ChildContent
25+
}
26+
27+
if (LoadingAdornment == Adornment.End)
28+
{
29+
<MudProgressCircular Class="ms-2" Size="Size.Small" Color="@LoadingCircularColor" Indeterminate="true" />
30+
}
31+
}
32+
else
33+
{
34+
@ChildContent
35+
}
36+
</MudButton>
37+
}
38+
else if (ButtonVariant == ButtonVariant.IconButton)
39+
{
40+
<MudIconButton Disabled="@(Disabled ? true : Loading ? true : false)"
41+
Size="@Size" Class="@Class" Style="@Style" UserAttributes="@UserAttributes" Variant="@Variant" Color="@Color" OnClick="@ButtonClick"
42+
Href="@Href" Target="@Target" ButtonType="@ButtonType" DisableElevation="@DisableElevation" DisableRipple="@DisableRipple"
43+
Icon="@(Loading ? null : Icon)" Command="@Command" CommandParameter="@CommandParameter" HtmlTag="@HtmlTag" Title="@Title">
44+
@if (Loading)
45+
{
46+
<div class="d-flex align-center">
47+
@if (LoadingAdornment == Adornment.Start)
48+
{
49+
<MudProgressCircular Class="@(LoadingContent != null ? "me-2" : null)" Size="Size.Small" Color="@LoadingCircularColor" Indeterminate="true" />
50+
}
51+
@if (LoadingContent != null)
52+
{
53+
@LoadingContent
54+
}
55+
@if (LoadingAdornment == Adornment.End)
56+
{
57+
<MudProgressCircular Class="@(LoadingContent != null ? "ms-2" : null)" Size="Size.Small" Color="@LoadingCircularColor" Indeterminate="true" />
58+
}
59+
</div>
60+
61+
}
62+
</MudIconButton>
63+
}
64+
else if (ButtonVariant == ButtonVariant.Fab)
65+
{
66+
@if (Loading == false)
67+
{
68+
<MudFab Disabled="@(Disabled ? true : Loading ? true : false)"
69+
Size="@Size" Class="@Class" Style="@Style" UserAttributes="@UserAttributes" Color="@Color" OnClick="@ButtonClick"
70+
Href="@Href" Target="@Target" ButtonType="@ButtonType" DisableElevation="@DisableElevation" DisableRipple="@DisableRipple"
71+
Icon="@Icon" StartIcon="@StartIcon" EndIcon="@EndIcon" IconColor="@IconColor" IconSize="@IconSize" Label="@Label"
72+
Command="@Command" CommandParameter="@CommandParameter" HtmlTag="@HtmlTag" Title="@Title" />
73+
}
74+
else
75+
{
76+
if (LoadingAdornment == Adornment.Start)
77+
{
78+
<MudProgressCircular Size="Size.Small" Color="@LoadingCircularColor" Indeterminate="true" />
79+
}
80+
81+
if (LoadingContent != null)
82+
{
83+
@LoadingContent
84+
}
85+
86+
87+
if (LoadingAdornment == Adornment.End)
88+
{
89+
<MudProgressCircular Size="Size.Small" Color="@LoadingCircularColor" Indeterminate="true" />
90+
}
91+
}
92+
}

‎CodeBeam.MudExtensions/Components/LoadingButton/MudLoadingButton.razor.cs‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
using System;
2+
using System.Threading.Tasks;
3+
using Microsoft.AspNetCore.Components;
4+
using Microsoft.AspNetCore.Components.Web;
5+
using MudBlazor;
6+
using MudBlazor.Utilities;
7+
8+
namespace MudExtensions
9+
{
10+
public partial class MudLoadingButton : MudBaseButton
11+
{
12+
13+
bool _loading = true;
14+
/// <summary>
15+
/// Two way binded loading state.
16+
/// </summary>
17+
[Parameter]
18+
[Category(CategoryTypes.FormComponent.Behavior)]
19+
public bool Loading
20+
{
21+
get => _loading;
22+
set
23+
{
24+
if (_loading == value)
25+
{
26+
return;
27+
}
28+
_loading = value;
29+
LoadingChanged.InvokeAsync(_loading).AndForget();
30+
}
31+
}
32+
33+
/// <summary>
34+
/// Fires when loading changed.
35+
/// </summary>
36+
[Parameter]
37+
public EventCallback<bool> LoadingChanged { get; set; }
38+
39+
[Parameter]
40+
[Category(CategoryTypes.FormComponent.Appearance)]
41+
public Color LoadingCircularColor { get; set; } = Color.Default;
42+
43+
[Parameter]
44+
[Category(CategoryTypes.FormComponent.Appearance)]
45+
public Adornment LoadingAdornment { get; set; } = Adornment.Start;
46+
47+
/// <summary>
48+
/// Icon placed before the text if set.
49+
/// </summary>
50+
[Parameter]
51+
[Category(CategoryTypes.Button.Behavior)]
52+
public string StartIcon { get; set; }
53+
54+
/// <summary>
55+
/// Icon placed before the text if set. Only works for IconButton variant. For button variant use Start and EndIcon.
56+
/// </summary>
57+
[Parameter]
58+
[Category(CategoryTypes.Button.Behavior)]
59+
public string Icon { get; set; }
60+
61+
/// <summary>
62+
/// Icon placed after the text if set.
63+
/// </summary>
64+
[Parameter]
65+
[Category(CategoryTypes.Button.Behavior)]
66+
public string EndIcon { get; set; }
67+
68+
/// <summary>
69+
/// The color of the icon. It supports the theme colors.
70+
/// </summary>
71+
[Parameter]
72+
[Category(CategoryTypes.Button.Appearance)]
73+
public Color IconColor { get; set; } = Color.Inherit;
74+
75+
/// <summary>
76+
/// Icon class names, separated by space
77+
/// </summary>
78+
[Parameter]
79+
[Category(CategoryTypes.Button.Appearance)]
80+
public string IconClass { get; set; }
81+
82+
/// <summary>
83+
/// The color of the component. It supports the theme colors.
84+
/// </summary>
85+
[Parameter]
86+
[Category(CategoryTypes.Button.Appearance)]
87+
public Color Color { get; set; } = Color.Default;
88+
89+
/// <summary>
90+
/// The Size of the component.
91+
/// </summary>
92+
[Parameter]
93+
[Category(CategoryTypes.Button.Appearance)]
94+
public Size Size { get; set; } = Size.Medium;
95+
96+
[Parameter]
97+
[Category(CategoryTypes.Button.Appearance)]
98+
public ButtonVariant ButtonVariant { get; set; } = ButtonVariant.Button;
99+
100+
/// <summary>
101+
/// Title of the icon used for accessibility. Only for IconButton and Fab variants.
102+
/// </summary>
103+
[Parameter]
104+
[Category(CategoryTypes.Button.Behavior)]
105+
public string Title { get; set; }
106+
107+
/// <summary>
108+
/// The variant to use.
109+
/// </summary>
110+
[Parameter]
111+
[Category(CategoryTypes.Button.Appearance)]
112+
public Variant Variant { get; set; } = Variant.Text;
113+
114+
/// <summary>
115+
/// If true, the button will take up 100% of available width.
116+
/// </summary>
117+
[Parameter]
118+
[Category(CategoryTypes.Button.Appearance)]
119+
public bool FullWidth { get; set; }
120+
121+
/// <summary>
122+
/// Custom loader content. If it is set, the overlap, darken and loadertype parameters ignored.
123+
/// </summary>
124+
[Parameter]
125+
[Category(CategoryTypes.FormComponent.Appearance)]
126+
public RenderFragment LoadingContent { get; set; }
127+
128+
/// <summary>
129+
/// The child content.
130+
/// </summary>
131+
[Parameter]
132+
[Category(CategoryTypes.FormComponent.Appearance)]
133+
public RenderFragment ChildContent { get; set; }
134+
135+
/// <summary>
136+
/// The size of the icon.
137+
/// </summary>
138+
[Parameter]
139+
[Category(CategoryTypes.Button.Appearance)]
140+
public Size IconSize { get; set; } = Size.Medium;
141+
142+
/// <summary>
143+
/// If applied the text will be added to the component.
144+
/// </summary>
145+
[Parameter]
146+
[Category(CategoryTypes.Button.Behavior)]
147+
public string Label { get; set; }
148+
149+
/// <summary>
150+
/// If not null, LoadingButton goes for loading state for determined miliseconds.
151+
/// </summary>
152+
[Parameter]
153+
[Category(CategoryTypes.FormComponent.Appearance)]
154+
public int? AutoDelay { get; set; } = 300;
155+
156+
protected async Task ButtonClick(MouseEventArgs args)
157+
{
158+
159+
if (AutoDelay != null)
160+
{
161+
Task task = Task.Delay(AutoDelay.Value);
162+
_loading = true;
163+
await OnClickHandler(args);
164+
await task;
165+
_loading = false;
166+
}
167+
else
168+
{
169+
await OnClickHandler(args);
170+
}
171+
}
172+
173+
}
174+
}

‎CodeBeam.MudExtensions/Enums/ButtonVariant.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions
4+
{
5+
public enum ButtonVariant
6+
{
7+
[Description("button")]
8+
Button,
9+
[Description("iconbutton")]
10+
IconButton,
11+
[Description("fab")]
12+
Fab
13+
}
14+
}

0 commit comments

Comments
 (0)