test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 12:07:44 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(module: switch): two-way binding and loading (#358)

Browse Source
This commit is contained in:
James Yeung 2020-07-14 17:07:50 +08:00 committed by GitHub
parent c1f3371f9c
commit 9f6af264d0
6 changed files with 46 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/switch/Switch.razor
View File

@ -2,21 +2,22 @@
@inherits AntInputComponentBase<bool>
<button type="button" role="switch"
aria-checked="@(_isChecked?"true":"false")"
disabled="@Disabled"
aria-checked="@(CurrentValue?"true":"false")"
disabled="@(Disabled||Loading)"
class="@ClassMapper.Class"
style="@Style"
ant-click-animating="@(_clickAnimating?"true":"false")"
@onmouseover="HandleMouseOver"
@onmouseout="HandleMouseOut"
@onclick="HandleClick">
@if (Loading)
{
<Icon Type="loading" Class="@($"{_prefixCls}-loading-icon")" />
}
<div class="@($"{_prefixCls}-handle")"></div>
<div class="@($"{_prefixCls}-handle")">
@if (Loading)
{
<Icon Type="loading" Class="@($"{_prefixCls}-loading-icon")" />
}
</div>
<span class="@($"{_prefixCls}-inner")">
@if (_isChecked)
@if (CurrentValue)
{
if (CheckedChildren.IsT0)
{
@ -41,7 +42,7 @@
</span>
<!--animation-->
@if (_isChecked)
@if (CurrentValue)
{
<div class="ant-click-animating-node"></div>
}

39
components/switch/Switch.razor.cs
View File

@ -9,21 +9,6 @@ namespace AntDesign
{
protected string _prefixCls = "ant-switch";
protected override Task OnParametersSetAsync()
{
ClassMapper.Clear()
.Add(_prefixCls)
.If($"{_prefixCls}-checked", () => _isChecked)
.If($"{_prefixCls}-disabled", () => Disabled || Loading)
.If($"{_prefixCls}-loading", () => Loading)
.If($"{_prefixCls}-small", () => Size.Equals("small"))
;
return base.OnParametersSetAsync();
}
private bool _isChecked = false;
[Parameter]
public bool Checked { get; set; }
@ -49,26 +34,26 @@ namespace AntDesign
protected override void OnInitialized()
{
this._isChecked = Value ? Value : Checked;
base.OnInitialized();
}
private void UpdateValue(bool value)
{
if (this._isChecked != value)
{
this._isChecked = value;
CurrentValue = value;
this.OnChange.InvokeAsync(this._isChecked);
}
this.CurrentValue = this.CurrentValue ? this.CurrentValue : this.Checked;
ClassMapper.Clear()
.Add(_prefixCls)
.If($"{_prefixCls}-checked", () => CurrentValue)
.If($"{_prefixCls}-disabled", () => Disabled || Loading)
.If($"{_prefixCls}-loading", () => Loading)
.If($"{_prefixCls}-small", () => Size == "small")
;
}
private void HandleClick(MouseEventArgs e)
{
if (!Disabled && !Loading && !Control)
{
CurrentValue = !this._isChecked;
this.UpdateValue(!this._isChecked);
this.CurrentValue = !CurrentValue;
this.OnChange.InvokeAsync(CurrentValue);
}
}

7
site/AntBlazor.Docs/Demos/Switch/demo/Disable.razor
View File

@ -1,16 +1,15 @@
<div>
<Switch Checked="switchValue2" Disabled="isDisabled2"/>
<Switch Checked="switchValue" Disabled="isDisabled"/>
<br />
<br />
<Button Type="primary" @onclick="(_)=>isDisabled2 = !isDisabled2">Toggle disabled</Button>
<Button Type="primary" @onclick="(_)=>isDisabled = !isDisabled">Toggle disabled</Button>
</div>
@code{
bool switchValue = false;
bool switchValue2 = false;
bool isDisabled2 = true;
bool isDisabled = true;
RenderFragment checkedChildren =@<Icon Type="check"></Icon>;

4
site/AntBlazor.Docs/Demos/Switch/demo/Loading.razor
View File

@ -1,7 +1,7 @@
<div>
<Switch Checked="true" Loading="true"/>
<Switch Checked Loading/>
<br />
<Switch Size="small" Loading="true"/>
<Switch Size="small" Loading/>
</div>

26
site/AntBlazor.Docs/Demos/Table/demo/Blazor.razor
View File

@ -11,10 +11,13 @@
@bind-SelectedRows="selectedRows">
<Selection Key="@(context.Id.ToString())" />
<Column @bind-Field="@context.Id" Sortable />
<Column @bind-Field="@context.Date" Format="yyyy-MM-dd" Sortable/>
<Column @bind-Field="@context.TemperatureC" Sortable/>
<Column @bind-Field="@context.Date" Format="yyyy-MM-dd" Sortable />
<Column @bind-Field="@context.TemperatureC" Sortable />
<Column Title="Temp. (F)" Field="@context.TemperatureF" />
<Column @bind-Field="@context.Summary"Sortable />
<Column Title="Hot" Field="@context.Hot">
<Switch @bind-Value="@context.Hot"></Switch>
</Column>
<Column @bind-Field="@context.Summary" Sortable />
</Table>
<br />
@ -75,6 +78,8 @@
public string Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
public bool Hot { get; set; }
}
private static readonly string[] Summaries = new[]
@ -85,12 +90,17 @@
public Task<WeatherForecast[]> GetForecastAsync(int pageIndex, int pageSize)
{
var rng = new Random();
return Task.FromResult(Enumerable.Range((pageIndex - 1) * pageSize + 1, pageSize).Select(index => new WeatherForecast
return Task.FromResult(Enumerable.Range((pageIndex - 1) * pageSize + 1, pageSize).Select(index =>
{
Id = index,
Date = DateTime.Now.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = Summaries[rng.Next(Summaries.Length)]
var temperatureC = rng.Next(-20, 55);
return new WeatherForecast
{
Id = index,
Date = DateTime.Now.AddDays(index),
TemperatureC = temperatureC,
Summary = Summaries[rng.Next(Summaries.Length)],
Hot = temperatureC > 30,
};
}).ToArray());
}

2
site/AntBlazor.Docs/Pages/Components.razor.cs
View File

@ -7,7 +7,7 @@ using Microsoft.AspNetCore.Components;
namespace AntDesign.Docs.Pages
{
public partial class Components
public partial class Components : ComponentBase
{
[Parameter]
public string Name { get; set; }