2020-07-07 22:45:13 +08:00
|
|
|
|
using System.Collections.Generic;
|
2020-04-23 17:13:56 +08:00
|
|
|
|
using System.Threading.Tasks;
|
|
|
|
|
using Microsoft.AspNetCore.Components;
|
|
|
|
|
using Microsoft.AspNetCore.Components.Web;
|
|
|
|
|
|
2020-05-29 00:33:49 +08:00
|
|
|
|
namespace AntDesign
|
2020-04-23 17:13:56 +08:00
|
|
|
|
{
|
2020-05-29 12:55:15 +08:00
|
|
|
|
public partial class Button : AntDomComponentBase
|
2020-04-23 17:13:56 +08:00
|
|
|
|
{
|
2020-06-07 00:47:18 +08:00
|
|
|
|
private string _formSize;
|
2020-07-02 23:20:16 +08:00
|
|
|
|
|
2020-06-07 00:47:18 +08:00
|
|
|
|
[CascadingParameter(Name = "FormSize")]
|
|
|
|
|
public string FormSize
|
|
|
|
|
{
|
|
|
|
|
get
|
|
|
|
|
{
|
|
|
|
|
return _formSize;
|
|
|
|
|
}
|
|
|
|
|
set
|
|
|
|
|
{
|
|
|
|
|
_formSize = value;
|
|
|
|
|
|
|
|
|
|
Size = value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Option to fit button width to its parent width
|
|
|
|
|
/// </summary>
|
2020-04-23 17:13:56 +08:00
|
|
|
|
[Parameter]
|
2021-06-09 17:51:24 +08:00
|
|
|
|
public bool Block { get; set; } = false;
|
2020-04-23 17:13:56 +08:00
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Content of the button.
|
|
|
|
|
/// </summary>
|
2020-04-23 17:13:56 +08:00
|
|
|
|
[Parameter]
|
2021-06-09 17:51:24 +08:00
|
|
|
|
public RenderFragment ChildContent { get; set; }
|
2020-04-23 17:13:56 +08:00
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Set the danger status of button.
|
|
|
|
|
/// </summary>
|
|
|
|
|
[Parameter]
|
|
|
|
|
public bool Danger { get; set; }
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Whether the `Button` is disabled.
|
|
|
|
|
/// </summary>
|
2020-04-23 17:13:56 +08:00
|
|
|
|
[Parameter]
|
|
|
|
|
public bool Disabled { get; set; }
|
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Make background transparent and invert text and border colors
|
|
|
|
|
/// </summary>
|
2020-05-10 15:42:02 +08:00
|
|
|
|
[Parameter]
|
2021-06-09 17:51:24 +08:00
|
|
|
|
public bool Ghost { get; set; } = false;
|
2020-05-10 15:42:02 +08:00
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Set the original html type of the button element.
|
|
|
|
|
/// </summary>
|
2020-04-23 17:13:56 +08:00
|
|
|
|
[Parameter]
|
2021-06-09 17:51:24 +08:00
|
|
|
|
public string HtmlType { get; set; } = "button";
|
2020-04-23 17:13:56 +08:00
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Set the icon component of button.
|
|
|
|
|
/// </summary>
|
|
|
|
|
[Parameter]
|
|
|
|
|
public string Icon { get; set; }
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Show loading indicator. You have to write the loading logic on your own.
|
|
|
|
|
/// </summary>
|
|
|
|
|
[Parameter]
|
|
|
|
|
public bool Loading
|
|
|
|
|
{
|
|
|
|
|
get => _loading;
|
|
|
|
|
set
|
|
|
|
|
{
|
|
|
|
|
if (_loading != value)
|
|
|
|
|
{
|
|
|
|
|
_loading = value;
|
|
|
|
|
UpdateIconDisplay(_loading);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Callback when `Button` is clicked
|
|
|
|
|
/// </summary>
|
2020-04-23 17:13:56 +08:00
|
|
|
|
[Parameter]
|
2020-05-18 14:46:42 +08:00
|
|
|
|
public EventCallback<MouseEventArgs> OnClick { get; set; }
|
2020-04-23 17:13:56 +08:00
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Do not propagate events when button is clicked.
|
|
|
|
|
/// </summary>
|
2021-01-11 22:59:21 +08:00
|
|
|
|
[Parameter]
|
|
|
|
|
public bool OnClickStopPropagation { get; set; }
|
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
/// Can set button shape: `circle` | `round` or `null` (default, which is rectangle).
|
|
|
|
|
/// </summary>
|
|
|
|
|
[Parameter]
|
|
|
|
|
public string Shape { get; set; } = null;
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Set the size of button.
|
|
|
|
|
/// </summary>
|
|
|
|
|
[Parameter]
|
|
|
|
|
public string Size { get; set; } = AntSizeLDSType.Default;
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Type of the button.
|
|
|
|
|
/// </summary>
|
|
|
|
|
[Parameter]
|
|
|
|
|
public string Type { get; set; } = ButtonType.Default;
|
|
|
|
|
|
2020-06-07 19:41:00 +08:00
|
|
|
|
public IList<Icon> Icons { get; set; } = new List<Icon>();
|
2020-04-23 17:13:56 +08:00
|
|
|
|
|
|
|
|
|
protected string IconStyle { get; set; }
|
|
|
|
|
|
2021-06-09 17:51:24 +08:00
|
|
|
|
private bool _animating = false;
|
|
|
|
|
|
|
|
|
|
private string _btnWave = "--antd-wave-shadow-color: rgb(255, 120, 117);";
|
2020-07-02 23:20:16 +08:00
|
|
|
|
private bool _loading = false;
|
2020-04-23 17:13:56 +08:00
|
|
|
|
|
|
|
|
|
protected void SetClassMap()
|
|
|
|
|
{
|
2021-03-12 17:02:11 +08:00
|
|
|
|
var prefixName = "ant-btn";
|
2020-04-23 17:13:56 +08:00
|
|
|
|
|
|
|
|
|
ClassMapper.Clear()
|
2021-03-12 17:02:11 +08:00
|
|
|
|
.Add(prefixName)
|
2020-09-03 06:02:30 +08:00
|
|
|
|
.GetIf(() => $"{prefixName}-{this.Type}", () => !string.IsNullOrEmpty(Type))
|
2020-06-07 00:47:18 +08:00
|
|
|
|
.If($"{prefixName}-dangerous", () => Danger)
|
2020-09-03 06:02:30 +08:00
|
|
|
|
.GetIf(() => $"{prefixName}-{Shape}", () => !string.IsNullOrEmpty(Shape))
|
2020-07-02 23:20:16 +08:00
|
|
|
|
.If($"{prefixName}-lg", () => Size == "large")
|
|
|
|
|
.If($"{prefixName}-sm", () => Size == "small")
|
2020-04-23 17:13:56 +08:00
|
|
|
|
.If($"{prefixName}-loading", () => Loading)
|
2021-06-09 17:51:24 +08:00
|
|
|
|
.If($"{prefixName}-icon-only", () => !string.IsNullOrEmpty(this.Icon) && this.ChildContent == null)
|
2020-04-23 17:13:56 +08:00
|
|
|
|
.If($"{prefixName}-background-ghost", () => Ghost)
|
|
|
|
|
.If($"{prefixName}-block", () => this.Block)
|
2021-03-12 17:02:11 +08:00
|
|
|
|
.If($"{prefixName}-rtl", () => RTL)
|
2020-04-23 17:13:56 +08:00
|
|
|
|
;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
protected override void OnInitialized()
|
|
|
|
|
{
|
|
|
|
|
base.OnInitialized();
|
|
|
|
|
SetClassMap();
|
2020-07-02 23:20:16 +08:00
|
|
|
|
UpdateIconDisplay(_loading);
|
2020-04-23 17:13:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
2020-07-02 23:20:16 +08:00
|
|
|
|
private void UpdateIconDisplay(bool loading)
|
2020-04-23 17:13:56 +08:00
|
|
|
|
{
|
2020-07-02 23:20:16 +08:00
|
|
|
|
IconStyle = $"display:{(loading ? "none" : "inline-block")}";
|
2020-04-23 17:13:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
2020-07-02 23:20:16 +08:00
|
|
|
|
private async Task HandleOnClick(MouseEventArgs args)
|
2020-04-23 17:13:56 +08:00
|
|
|
|
{
|
2020-05-18 14:46:42 +08:00
|
|
|
|
if (OnClick.HasDelegate)
|
2020-04-23 17:13:56 +08:00
|
|
|
|
{
|
2020-05-18 14:46:42 +08:00
|
|
|
|
await OnClick.InvokeAsync(args);
|
2020-04-23 17:13:56 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-07-07 22:45:13 +08:00
|
|
|
|
|
|
|
|
|
private async Task OnMouseUp(MouseEventArgs args)
|
|
|
|
|
{
|
|
|
|
|
if (args.Button != 0 || this.Type == ButtonType.Link) return; //remove animating from Link Button
|
|
|
|
|
this._animating = true;
|
|
|
|
|
|
2020-07-31 01:12:54 +08:00
|
|
|
|
await Task.Run(async () =>
|
2020-07-07 22:45:13 +08:00
|
|
|
|
{
|
2020-07-31 01:12:54 +08:00
|
|
|
|
await Task.Delay(500);
|
2020-07-07 22:45:13 +08:00
|
|
|
|
this._animating = false;
|
|
|
|
|
|
2020-07-31 01:12:54 +08:00
|
|
|
|
await InvokeAsync(StateHasChanged);
|
2020-07-07 22:45:13 +08:00
|
|
|
|
});
|
|
|
|
|
}
|
2020-04-23 17:13:56 +08:00
|
|
|
|
}
|
|
|
|
|
}
|