-
-
Notifications
You must be signed in to change notification settings - Fork 59
/
Debounce.razor
210 lines (183 loc) · 9.27 KB
/
Debounce.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<PageScroll />
<h1>Deboudnce Input controls</h1>
<p>
Blazor component that renders an Input, InputText, Textarea or InputTextarea, etc. element with debounced onChange. For usage see source code and docs on
<a href="https://github.com/majorimi/blazor-components/blob/master/.github/docs/DebounceInputs.md" target="_blank">Github</a>.
<br /><strong>Majorsoft.Blazor.Components.Debounce</strong> package is available on <a href="https://www.nuget.org/packages/Majorsoft.Blazor.Components.Debounce" target="_blank">Nuget</a>
</p>
<div class="container-fluid p-3 mb-3 border rounded">
<h3>DebounceInput component</h3>
<p>Wraps around <strong>HTML Input</strong> control and adds debounce (delay) with notification onChange.</p>
<div>
<div>
<input type="range" min="-1" max="2000" @bind="_debounceMilisec" @oninput="(e => _debounceMilisec = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Debounce time: @_debounceMilisec ms.</pre>
</div>
<div>
<input type="range" min="0" max="10" @bind="_minCharsLength" @oninput="(e => _minCharsLength = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Min required chars: @_minCharsLength</pre>
</div>
<pre>Force Notify by Enter: <input class="mr-3" type="checkbox" @bind="_forceNotifyByEnter" /> @_forceNotifyByEnter</pre>
<pre>Force Notify On Blur: <input class="mr-3" type="checkbox" @bind="_forceNotifyOnBlur" />@_forceNotifyOnBlur</pre>
</div>
<div class="row pb-2">
<div class="col-12 col-lg-8 col-xl-5">
<DebounceInput id="in1" class="form-control w-100" placeholder="@($"Please type in at least: {_minCharsLength} char(s)")" autocomplete="off"
@ref="input1"
@bind-Value="@_debounceInputValue" @bind-Value:event="OnInput"
DebounceTime="@_debounceMilisec"
MinLength="@_minCharsLength"
OnValueChanged="e => { _notifiedInputValue = e; }"
ForceNotifyByEnter="@_forceNotifyByEnter"
ForceNotifyOnBlur="@_forceNotifyOnBlur" />
</div>
</div>
<div>Last Notified value: @_notifiedInputValue</div>
<div>Actual value: @_debounceInputValue</div>
</div>
<div class="container-fluid p-3 mb-3 border rounded">
<h3>DebounceInputText component</h3>
<p>Wraps around <strong>Blazor InputText</strong> component and adds debounce (delay) with notification onChange.</p>
<div>
<div>
<input type="range" min="-1" max="2000" @bind="_debounceInputTextDebounceMilisec" @oninput="(e => _debounceInputTextDebounceMilisec = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Debounce time: @_debounceInputTextDebounceMilisec ms.</pre>
</div>
<div>
<input type="range" min="0" max="10" @bind="_debounceInputTextMinCharsLength" @oninput="(e => _debounceInputTextMinCharsLength = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Min required chars: @_debounceInputTextMinCharsLength</pre>
</div>
<pre>Force Notify by Enter: <input class="mr-3" type="checkbox" @bind="_forceNotifyByEnter2" /> @_forceNotifyByEnter2</pre>
<pre>Force Notify On Blur: <input class="mr-3" type="checkbox" @bind="_forceNotifyOnBlur2" />@_forceNotifyOnBlur2</pre>
</div>
<EditForm Model="@exampleModel">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="row pb-2">
<div class="col-12 col-lg-8 col-xl-5">
@*<InputText @bind-Value="exampleModel.Name" />*@
<DebounceInputText class="form-control w-100" placeholder="@($"Please type in at least: {_debounceInputTextMinCharsLength} char(s)")"
@ref="inputText1"
@bind-Value="exampleModel.Name"
DebounceTime="@_debounceInputTextDebounceMilisec"
MinLength="@_debounceInputTextMinCharsLength"
OnValueChanged="e => { _debounceInputTextValue = e; }"
ForceNotifyByEnter="@_forceNotifyByEnter2"
ForceNotifyOnBlur="@_forceNotifyOnBlur2" />
</div>
</div>
<div class="pb-2">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</EditForm>
<div>Last Notified value: @_debounceInputTextValue</div>
<div>Actual value: @(exampleModel.Name)</div>
</div>
<div class="container-fluid p-3 mb-3 border rounded">
<h3>DebounceTextArea component</h3>
<p>Wraps around <strong>HTML TextArea</strong> control and adds debounce (delay) with notification onChange.</p>
<div>
<div>
<input type="range" min="-1" max="2000" @bind="_debounceTextAreaMilisec" @oninput="(e => _debounceTextAreaMilisec = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Debounce time: @_debounceTextAreaMilisec ms.</pre>
</div>
<div>
<input type="range" min="0" max="10" @bind="_debounceTextAreaMinCharsLength" @oninput="(e => _debounceTextAreaMinCharsLength = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Min required chars: @_debounceTextAreaMinCharsLength</pre>
</div>
<pre>Force Notify by Enter: <input class="mr-3" type="checkbox" @bind="_forceNotifyByEnter3" /> @_forceNotifyByEnter3</pre>
<pre>Force Notify On Blur: <input class="mr-3" type="checkbox" @bind="_forceNotifyOnBlur3" />@_forceNotifyOnBlur3</pre>
</div>
<div class="row pb-2">
<div class="col-12 col-lg-8 col-xl-5">
<DebounceTextArea class="form-control w-100" placeholder="@($"Please type in at least: {_debounceTextAreaMinCharsLength} char(s)")"
@ref="text1"
@bind-Value="@_debounceTextAreaText" @bind-Value:event="OnInput"
DebounceTime="@_debounceTextAreaMilisec"
MinLength="@_debounceTextAreaMinCharsLength"
OnValueChanged="e => { _notifiedTextAreaValue = e; }"
ForceNotifyByEnter="@_forceNotifyByEnter3"
ForceNotifyOnBlur="@_forceNotifyOnBlur3" />
</div>
</div>
<div>Last Notified value: @_notifiedTextAreaValue</div>
<div>Actual value: @_debounceTextAreaText</div>
</div>
<div class="container-fluid p-3 mb-3 border rounded">
<h3>DebounceInputTextArea component</h3>
<p>Wraps around <strong>Blazor InputTextArea</strong> component and adds debounce (delay) with notification onChange.</p>
<div>
<div>
<input type="range" min="-1" max="2000" @bind="_debounceInputTextAreaMilisec" @oninput="(e => _debounceInputTextAreaMilisec = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Debounce time: @_debounceInputTextAreaMilisec ms.</pre>
</div>
<div>
<input type="range" min="0" max="10" @bind="_debounceInputTextAreaMinCharsLength" @oninput="(e => _debounceInputTextAreaMinCharsLength = int.Parse(e.Value?.ToString()))" /> <pre style="display: inline;">Min required chars: @_debounceInputTextAreaMinCharsLength</pre>
</div>
<pre>Force Notify by Enter: <input class="mr-3" type="checkbox" @bind="_forceNotifyByEnter4" /> @_forceNotifyByEnter4</pre>
<pre>Force Notify On Blur: <input class="mr-3" type="checkbox" @bind="_forceNotifyOnBlur4" />@_forceNotifyOnBlur4</pre>
</div>
<EditForm Model="@exampleModel2">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="row pb-2">
<div class="col-12 col-lg-8 col-xl-5">
@*<InputTextArea @bind-Value="exampleModel2.Name" />*@
<DebounceInputTextArea class="form-control w-100" placeholder="@($"Please type in at least: {_debounceInputTextAreaMinCharsLength} char(s)")"
@ref="inputTextArea1"
@bind-Value="exampleModel2.Name"
DebounceTime="@_debounceInputTextAreaMilisec"
MinLength="@_debounceInputTextAreaMinCharsLength"
OnValueChanged="e => { _debounceInputTextAreaValue = e; }"
ForceNotifyByEnter="@_forceNotifyByEnter4"
ForceNotifyOnBlur="@_forceNotifyOnBlur4" />
</div>
</div>
<div class="pb-2">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</EditForm>
<div>Last Notified value: @_debounceInputTextAreaValue</div>
<div>Actual value: @(exampleModel2.Name)</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await input1.InnerElementReference.FocusAsync();
}
}
//DebounceInput
private string _debounceInputValue = "";
private string? _notifiedInputValue;
private int _debounceMilisec = 1000;
private int _minCharsLength = 2;
private bool _forceNotifyByEnter = true;
private bool _forceNotifyOnBlur = true;
private DebounceInput input1;
//DebounceInputText
private string _debounceInputTextValue = "";
private int _debounceInputTextDebounceMilisec = 1000;
private int _debounceInputTextMinCharsLength = 2;
private bool _forceNotifyByEnter2 = true;
private bool _forceNotifyOnBlur2 = true;
private DebounceInputText inputText1;
//DebounceTextArea
private string _debounceTextAreaText = "";
private string? _notifiedTextAreaValue;
private int _debounceTextAreaMilisec = 1000;
private int _debounceTextAreaMinCharsLength = 5;
private bool _forceNotifyByEnter3 = true;
private bool _forceNotifyOnBlur3 = true;
private DebounceTextArea text1;
//DebounceInputTextArea
private string _debounceInputTextAreaValue = "";
private int _debounceInputTextAreaMilisec = 1000;
private int _debounceInputTextAreaMinCharsLength = 5;
private bool _forceNotifyByEnter4 = true;
private bool _forceNotifyOnBlur4 = true;
private DebounceInputTextArea inputTextArea1;
//Form model
private ExampleModel exampleModel = new ExampleModel() { Name = "" };
private ExampleModel exampleModel2 = new ExampleModel();
public class ExampleModel
{
[Required]
[StringLength(10, ErrorMessage = "Name is too long.")]
public string Name { get; set; }
}
}