test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-11-29 18:48:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

add component input (#33)

Browse Source 
* add input component

* fix menu
This commit is contained in:
Brian Ding 2020-03-23 09:31:08 +08:00 committed by GitHub
parent d0876cc3f7
commit 9c98b27e3b
10 changed files with 695 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
components/input/AntInput.cs Normal file
View File

@ -0,0 +1,282 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
using Microsoft.AspNetCore.Components.Web;
using System.Threading.Tasks;
namespace AntBlazor
{
/// <summary>
///
/// </summary>
public class AntInput : AntInputComponentBase<string>
{
protected const string PrefixCls = "ant-input";
protected int _renderSequence = 0;
protected bool _allowClear;
protected string _type = "text";
protected string _affixWrapperClass = $"{PrefixCls}-affix-wrapper";
protected string _groupWrapperClass = $"{PrefixCls}-group-wrapper";
protected string _clearIconClass;
protected EventCallbackFactory _callbackFactory = new EventCallbackFactory();
protected ElementReference inputEl { get; set; }
[Parameter]
public RenderFragment addOnBefore { get; set; }
[Parameter]
public RenderFragment addOnAfter { get; set; }
[Parameter]
public string size { get; set; } = AntInputSize.Default;
[Parameter]
public string placeholder { get; set; }
[Parameter]
public string defaultValue { get; set; }
[Parameter]
public int maxLength { get; set; } = -1;
[Parameter]
public RenderFragment prefix { get; set; }
[Parameter]
public RenderFragment suffix { get; set; }
[Parameter]
public EventCallback<ChangeEventArgs> onChange { get; set; }
[Parameter]
public EventCallback<KeyboardEventArgs> onPressEnter { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
if (!string.IsNullOrEmpty(defaultValue) && string.IsNullOrEmpty(Value))
{
Value = defaultValue;
}
SetClasses();
}
protected virtual void SetClasses()
{
ClassMapper.Clear()
.Add($"{PrefixCls}")
.If($"{PrefixCls}-lg", () => size == AntInputSize.Large)
.If($"{PrefixCls}-sm", () => size == AntInputSize.Small);
if (Attributes is null)
{
Attributes = new System.Collections.Generic.Dictionary<string, object>();
}
_affixWrapperClass = $"{PrefixCls}-affix-wrapper";
_groupWrapperClass = $"{PrefixCls}-group-wrapper";
if (maxLength >= 0)
{
Attributes?.Add("maxlength", maxLength);
}
if (Attributes.ContainsKey("disabled"))
{
// TODO: disable element
_affixWrapperClass = string.Join(" ", _affixWrapperClass, $"{PrefixCls}-affix-wrapper-disabled");
ClassMapper.Add($"{PrefixCls}-disabled");
}
if (Attributes.ContainsKey("allowClear"))
{
_allowClear = true;
_clearIconClass = $"{PrefixCls}-clear-icon";
ToggleClearBtn();
}
if (size == AntInputSize.Large)
{
_affixWrapperClass = string.Join(" ", _affixWrapperClass, $"{PrefixCls}-affix-wrapper-lg");
_groupWrapperClass = string.Join(" ", _groupWrapperClass, $"{PrefixCls}-group-wrapper-lg");
}
else if (size == AntInputSize.Small)
{
_affixWrapperClass = string.Join(" ", _affixWrapperClass, $"{PrefixCls}-affix-wrapper-sm");
_groupWrapperClass = string.Join(" ", _groupWrapperClass, $"{PrefixCls}-group-wrapper-sm");
}
}
protected override void OnParametersSet()
{
base.OnParametersSet();
SetClasses();
}
public override Task SetParametersAsync(ParameterView parameters)
{
return base.SetParametersAsync(parameters);
}
protected async Task OnChangeAsync(ChangeEventArgs args)
{
if (onChange.HasDelegate)
{
await onChange.InvokeAsync(args);
}
}
protected async Task OnPressEnterAsync(KeyboardEventArgs args)
{
if (args.Key == "Enter" && onPressEnter.HasDelegate)
{
await onPressEnter.InvokeAsync(args);
}
}
private void ToggleClearBtn()
{
suffix = new RenderFragment((builder) =>
{
builder.OpenComponent<AntIcon>(31);
builder.AddAttribute(32, "type", "close-circle");
if (string.IsNullOrEmpty(Value))
{
builder.AddAttribute(33, "style", "visibility: hidden;");
}
else
{
builder.AddAttribute(33, "style", "visibility: visible;");
}
builder.AddAttribute(34, "onclick", _callbackFactory.Create<MouseEventArgs>(this, (args) =>
{
Value = string.Empty;
ToggleClearBtn();
}));
builder.CloseComponent();
});
}
/// <summary>
/// Invoked when user add/remove content
/// </summary>
/// <param name="args"></param>
/// <returns></returns>
protected virtual void OnInputAsync(ChangeEventArgs args)
{
bool flag = true;
if (!string.IsNullOrEmpty(Value) && !string.IsNullOrEmpty(args.Value.ToString()))
{
flag = false;
}
// AntInputComponentBase.Value will be empty, use args.Value
Value = args.Value.ToString();
if (_allowClear && flag)
{
ToggleClearBtn();
}
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
base.BuildRenderTree(builder);
string container = "input";
if (addOnBefore != null || addOnAfter != null)
{
container = "groupWrapper";
builder.OpenElement(0, "span");
builder.AddAttribute(1, "class", _groupWrapperClass);
builder.AddAttribute(2, "style", Style);
builder.OpenElement(3, "span");
builder.AddAttribute(4, "class", $"{PrefixCls}-wrapper {PrefixCls}-group");
}
if (addOnBefore != null)
{
// addOnBefore
builder.OpenElement(5, "span");
builder.AddAttribute(6, "class", $"{PrefixCls}-group-addon");
builder.AddContent(7, addOnBefore);
builder.CloseElement();
}
if (prefix != null || suffix != null)
{
builder.OpenElement(8, "span");
builder.AddAttribute(9, "class", _affixWrapperClass);
if (container == "input")
{
container = "affixWrapper";
builder.AddAttribute(10, "style", Style);
}
}
if (prefix != null)
{
// prefix
builder.OpenElement(11, "span");
builder.AddAttribute(12, "class", $"{PrefixCls}-prefix");
builder.AddContent(13, prefix);
builder.CloseElement();
}
// input
builder.OpenElement(14, "input");
builder.AddAttribute(15, "class", ClassMapper.Class);
if (container == "input")
{
builder.AddAttribute(16, "style", Style);
}
if (Attributes != null)
{
foreach (var pair in Attributes)
{
builder.AddAttribute(17, pair.Key, pair.Value);
}
}
builder.AddAttribute(18, "Id", Id);
builder.AddAttribute(19, "type", _type);
builder.AddAttribute(20, "placeholder", placeholder);
builder.AddAttribute(21, "value", Value);
builder.AddAttribute(22, "onchange", _callbackFactory.Create(this, OnChangeAsync));
builder.AddAttribute(23, "onkeypress", _callbackFactory.Create(this, OnPressEnterAsync));
builder.AddAttribute(24, "oninput", _callbackFactory.Create(this, OnInputAsync));
builder.CloseElement();
if (suffix != null)
{
// suffix
builder.OpenElement(25, "span");
builder.AddAttribute(26, "class", $"{PrefixCls}-suffix");
builder.AddContent(27, suffix);
builder.CloseElement();
}
if (prefix != null || suffix != null)
{
builder.CloseElement();
}
if (addOnAfter != null)
{
// addOnAfter
builder.OpenElement(28, "span");
builder.AddAttribute(29, "class", $"{PrefixCls}-group-addon");
builder.AddContent(30, addOnAfter);
builder.CloseElement();
}
if (addOnBefore != null || addOnAfter != null)
{
builder.CloseElement();
builder.CloseElement();
}
}
}
}

6
components/input/AntInputGroup.razor Normal file
View File

@ -0,0 +1,6 @@
@namespace AntBlazor
@inherits AntDomComponentBase
<span class="@ClassMapper.Class" style="@Style" Id="@Id">
@ChildContent
</span>

26
components/input/AntInputGroup.razor.cs Normal file
View File

@ -0,0 +1,26 @@
using Microsoft.AspNetCore.Components;
namespace AntBlazor
{
public partial class AntInputGroup : AntDomComponentBase
{
protected const string PrefixCls = "ant-input-group";
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public string size { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
ClassMapper.Clear()
.Add(PrefixCls)
.If($"{PrefixCls}-lg", () => size == AntInputSize.Large)
.If($"{PrefixCls}-sm", () => size == AntInputSize.Small)
.If($"{PrefixCls}-compact", () => Attributes != null && Attributes.ContainsKey("compact"));
}
}
}

68
components/input/AntInputPassword.razor.cs Normal file
View File

@ -0,0 +1,68 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace AntBlazor
{
public partial class AntInputPassword : AntInput
{
private bool _visible = false;
private string _eyeIcon;
[Parameter]
public bool visibilityToggle { get; set; } = true;
protected override void OnInitialized()
{
base.OnInitialized();
_type = "password";
ToggleVisibility(new MouseEventArgs());
}
protected override void SetClasses()
{
base.SetClasses();
//ant-input-password-large ant-input-affix-wrapper ant-input-affix-wrapper-lg
ClassMapper
.If($"{PrefixCls}-password-large", () => size == AntInputSize.Large)
.If($"{PrefixCls}-password-small", () => size == AntInputSize.Small);
_affixWrapperClass = string.Join(" ", _affixWrapperClass, $"{PrefixCls}-password");
if (visibilityToggle)
{
suffix = new RenderFragment((builder) =>
{
int i = 0;
builder.OpenElement(i++, "span");
builder.AddAttribute(i++, "class", $"{PrefixCls}-suffix");
builder.OpenComponent<AntIcon>(i++);
builder.AddAttribute(i++, "class", $"{PrefixCls}-password-icon");
builder.AddAttribute(i++, "type", _eyeIcon);
builder.AddAttribute(i++, "onclick", _callbackFactory.Create(this, ToggleVisibility));
builder.CloseComponent();
builder.CloseElement();
});
}
}
private void ToggleVisibility(MouseEventArgs args)
{
if (visibilityToggle)
{
if (_visible)
{
_eyeIcon = "eye";
_type = "text";
}
else
{
_eyeIcon = "eye-invisible";
_type = "password";
}
_visible = !_visible;
}
}
}
}

9
components/input/AntInputSize.cs Normal file
View File

@ -0,0 +1,9 @@
namespace AntBlazor
{
public static class AntInputSize
{
public const string Default = "default";
public const string Large = "large";
public const string Small = "small";
}
}

98
components/input/AntSearch.razor.cs Normal file
View File

@ -0,0 +1,98 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System;
using System.Threading.Tasks;
namespace AntBlazor
{
public partial class AntSearch : AntInput
{
private bool _isSearching;
[Parameter]
public EventCallback<EventArgs> onSearch { get; set; }
private int _sequence = 0;
protected override void OnInitialized()
{
base.OnInitialized();
if (Attributes == null || !Attributes.ContainsKey("enterButton"))
{
suffix = new RenderFragment((builder) =>
{
builder.OpenComponent<AntIcon>(35);
builder.AddAttribute(36, "class", $"{PrefixCls}-search-icon");
builder.AddAttribute(37, "type", "search");
builder.AddAttribute(38, "onclick", _callbackFactory.Create<MouseEventArgs>(this, Search));
builder.CloseComponent();
});
}
else
{
addOnAfter = new RenderFragment((builder) =>
{
builder.OpenComponent<AntButton>(_sequence++);
builder.AddAttribute(_sequence++, "class", $"{PrefixCls}-search-button");
builder.AddAttribute(_sequence++, "type", "primary");
builder.AddAttribute(_sequence++, "size", size);
if (_isSearching)
{
builder.AddAttribute(_sequence++, "loading", true);
}
else
{
EventCallback<MouseEventArgs> e = new EventCallbackFactory().Create(this, Search);
builder.AddAttribute(_sequence++, "onclick", e);
}
if (Attributes["enterButton"].ToString() == true.ToString()) // show search icon button
{
builder.AddAttribute(_sequence++, "icon", "search");
}
else // show search content button
{
builder.AddAttribute(_sequence++, "ChildContent", new RenderFragment((b) =>
{
b.AddContent(_sequence++, Attributes["enterButton"].ToString());
}));
}
builder.CloseComponent();
});
}
}
protected override void SetClasses()
{
base.SetClasses();
if (size == AntInputSize.Large)
{
_groupWrapperClass = string.Join(" ", _groupWrapperClass, $"{PrefixCls}-search-large");
}
else if (size == AntInputSize.Small)
{
_groupWrapperClass = string.Join(" ", _groupWrapperClass, $"{PrefixCls}-search-small");
}
_affixWrapperClass = string.Join(" ", _affixWrapperClass, $"{PrefixCls}-search");
_groupWrapperClass = string.Join(" ", _groupWrapperClass, $"{PrefixCls}-search");
_groupWrapperClass = string.Join(" ", _groupWrapperClass, $"{PrefixCls}-search-enter-button");
}
private async void Search(MouseEventArgs args)
{
_isSearching = true;
StateHasChanged();
if (onSearch.HasDelegate)
{
await onSearch.InvokeAsync(EventArgs.Empty);
}
await Task.Delay(TimeSpan.FromSeconds(10));
_isSearching = false;
StateHasChanged();
}
}
}

10
components/input/AntTextArea.razor Normal file
View File

@ -0,0 +1,10 @@
@namespace AntBlazor
@inherits AntInput
<!--TODO: minheight, maxheight, onResize-->
<textarea class="@ClassMapper.Class" style="@Style" @attributes="Attributes" id="@Id" placeholder="@placeholder"
@ref="inputEl"
@oninput="OnInputAsync"
@onkeypress="OnPressEnterAsync">@Value</textarea>
@_hidden

48
components/input/AntTextArea.razor.cs Normal file
View File

@ -0,0 +1,48 @@
using AntBlazor.JsInterop;
using Microsoft.AspNetCore.Components;
using System.Threading.Tasks;
namespace AntBlazor
{
public partial class AntTextArea : AntInput
{
private RenderFragment _hidden;
private ElementReference _hiddenEle;
[Parameter]
public bool autoSize { get; set; }
[Parameter]
public EventCallback<object> onResize { get; set; }
protected override async void OnInitialized()
{
base.OnInitialized();
}
protected override async void OnInputAsync(ChangeEventArgs args)
{
// do not call base method to avoid lost focus
//base.OnInputAsync(args);
if (autoSize)
{
await ChangeSizeAsync();
}
}
private async Task ChangeSizeAsync()
{
// Ant-design use a hidden textarea to calculate row height, totalHeight = rows * rowHeight
// TODO: compare with maxheight
Element element = await JsInvokeAsync<Element>(JSInteropConstants.getDomInfo, inputEl);
Style = $"height: {element.scrollHeight}px;overflow-y: hidden;";
}
protected async Task OnResizeAsync()
{
}
}
}

143
site/AntBlazor.Docs/Pages/Input.razor Normal file
View File

@ -0,0 +1,143 @@

<AntTitle level="1">Input</AntTitle>
<AntText>Input用于输入文字123</AntText>
<AntTitle level="2">何时使用</AntTitle>
<AntParagraph>xxxxxxx。</AntParagraph>
<AntParagraph>在 Ant Design 中，xxxxxxx。</AntParagraph>
<br />
<h2>演示</h2>
<br />
<DemoCard>
<Title>Basic usage</Title>
<Description>Basic usage example.</Description>
<Demo>
<AntButton onclick="(e)=>Click(e)">Change addOnAfter</AntButton>
<AntInput addOnAfter="@addOn">
123
</AntInput>
<AntInput placeholder="basic usage"></AntInput>
<AntInput placeholder="allwoClear" allowClear></AntInput>
<AntInput placeholder="disabled" disabled></AntInput>
</Demo>
</DemoCard>
@code{
private RenderFragment addOn = new RenderFragment((builder) => { builder.AddContent(0, ".com"); });
private void Click(MouseEventArgs args)
{
addOn = new RenderFragment((builder) => { builder.AddContent(0, ".net"); });
}
}
<DemoCard>
<Title>Three sizes of input</Title>
<Description>There are three sizes of an Input box: <code>large</code> (40px), <code>default</code> (32px) and <code>small</code> (24px).</Description>
<Demo>
<style>
.example-input > span {
width: 200px;
margin: 0 8px 8px 0;
}
</style>
<span class="example-input">
<AntInput placeholder="large size" defaultValue="123" size="@AntInputSize.Large">
<prefix>
<AntIcon type="user" />
</prefix>
</AntInput>
<AntInput placeholder="default size">
<prefix>
<AntIcon type="user" />
</prefix>
</AntInput>
<AntInput placeholder="small size" size="@AntInputSize.Small">
<prefix>
<AntIcon type="user" />
</prefix>
</AntInput>
@*<AntInputPassword @bind="password" placeholder="large Password" size="@AntInputSize.Large" onPressEnter="(e)=>Submit(e)" />*@
<AntInputPassword @bind-Value="@_password" placeholder="large Password" size="@AntInputSize.Large" onPressEnter="(e)=>Submit(e)" />
</span>
</Demo>
</DemoCard>
@code{
private string _password;
private void Submit(KeyboardEventArgs args)
{
Console.WriteLine($"password: {_password}");
}
}
<DemoCard>
<Title>TextArea</Title>
<Description>For multi-line input.</Description>
<Demo>
<div>
<AntTextArea defaultValue="hello world!"></AntTextArea>
<AntTextArea autoSize="true"></AntTextArea>
<AntTextArea defaultValue="onResize"></AntTextArea>
</div>
</Demo>
</DemoCard>
<DemoCard>
<Title>Pre / Post tab</Title>
<Description>Using pre & post tabs example.</Description>
<Demo>
<div>
<AntInput defaultValue="mysite">
<addOnBefore>https://</addOnBefore>
<addOnAfter>.com</addOnAfter>
</AntInput>
<AntInput defaultValue="mysite">
<addOnAfter><AntIcon type="setting"></AntIcon></addOnAfter>
</AntInput>
<AntInput defaultValue="mysite">
<addOnBefore>https://</addOnBefore>
</AntInput>
</div>
</Demo>
</DemoCard>
<DemoCard>
<Title>Search box</Title>
<Description>Example of creating a search box by grouping a standard input with a search button.</Description>
<Demo>
<div>
<AntSearch placeholder="input search text" size="@AntInputSize.Small" />
<AntSearch placeholder="input search text" onChange="(e)=>Handle(e)" enterButton />
<AntSearch placeholder="input search text" size="@AntInputSize.Large" enterButton="Search" />
</div>
</Demo>
</DemoCard>
@code{
private void Handle(ChangeEventArgs args)
{
Console.WriteLine("123");
System.Diagnostics.Debug.WriteLine("456");
}
}
<DemoCard>
<Title>Input Group</Title>
<Description>
Input.Group example
Note: You don't need <code>Col</code> to control the width in the <code>compact</code> mode.
</Description>
<Demo>
<AntInputGroup size="@AntInputSize.Large">
<AntInput defaultValue="0571" />
<AntInput defaultValue="26888888" />
</AntInputGroup>
<br />
<AntInputGroup compact>
<AntInput defaultValue="0571" Style="width: 20%;" />
<AntInput defaultValue="26888888" Style="width: 30%;" />
</AntInputGroup>
<br />
<AntInputGroup compact>
<AntInput defaultValue="0571" Style="width: 20%;" />
<AntSearch defaultValue="26888888" Style="width: 30%;" />
</AntInputGroup>
</Demo>
</DemoCard>

5
site/AntBlazor.Docs/wwwroot/menu.json
View File

@ -72,6 +72,11 @@
"title": "Switch",
"type": "menuItem",
"url": "switch"
},
{
"title": "Input",
"type": "menuItem",
"url": "input"
}
]
},