|
| 1 | +// Licensed to the .NET Foundation under one or more agreements. |
| 2 | +// The .NET Foundation licenses this file to you under the Apache 2.0 License |
| 3 | +// See the LICENSE file in the project root for more information. |
| 4 | +// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone |
| 5 | + |
| 6 | +namespace BootstrapBlazor.Components; |
| 7 | + |
| 8 | +/// <summary> |
| 9 | +/// OTP input component |
| 10 | +/// </summary> |
| 11 | +[BootstrapModuleAutoLoader("Input/OtpInput.razor.js", JSObjectReference = true)] |
| 12 | +public partial class OtpInput |
| 13 | +{ |
| 14 | + /// <summary> |
| 15 | + /// Gets or sets the length of the OTP input. Default is 6. |
| 16 | + /// </summary> |
| 17 | + [Parameter] |
| 18 | + public int Digits { get; set; } = 6; |
| 19 | + |
| 20 | + /// <summary> |
| 21 | + /// Gets or sets whether the OTP input is readonly. Default is false. |
| 22 | + /// </summary> |
| 23 | + [Parameter] |
| 24 | + public bool IsReadonly { get; set; } |
| 25 | + |
| 26 | + /// <summary> |
| 27 | + /// Gets or sets the value type of the OTP input. Default is <see cref="OtpInputType.Number"/>. |
| 28 | + /// </summary> |
| 29 | + [Parameter] |
| 30 | + public OtpInputType Type { get; set; } |
| 31 | + |
| 32 | + /// <summary> |
| 33 | + /// Gets or sets the placeholder of the OTP input. Default is null. |
| 34 | + /// </summary> |
| 35 | + [Parameter] |
| 36 | + public string? PlaceHolder { get; set; } |
| 37 | + |
| 38 | + private string? ClassString => CssBuilder.Default("bb-opt-input") |
| 39 | + .AddClassFromAttributes(AdditionalAttributes) |
| 40 | + .Build(); |
| 41 | + |
| 42 | + private string? ItemClassString => CssBuilder.Default("bb-opt-item") |
| 43 | + .AddClass("disabled", IsDisabled) |
| 44 | + .AddClass(ValidCss) |
| 45 | + .Build(); |
| 46 | + |
| 47 | + private string? InputClassString => CssBuilder.Default("bb-opt-item") |
| 48 | + .AddClass("input-number-fix", Type == OtpInputType.Number) |
| 49 | + .AddClass(ValidCss) |
| 50 | + .Build(); |
| 51 | + |
| 52 | + private string TypeString => Type switch |
| 53 | + { |
| 54 | + OtpInputType.Number => "number", |
| 55 | + OtpInputType.Password => "password", |
| 56 | + _ => "text" |
| 57 | + }; |
| 58 | + |
| 59 | + private string? MaxLengthString => Type switch |
| 60 | + { |
| 61 | + OtpInputType.Number => null, |
| 62 | + _ => "1" |
| 63 | + }; |
| 64 | + |
| 65 | + private string? TypeModeString => Type switch |
| 66 | + { |
| 67 | + OtpInputType.Number => "numeric", |
| 68 | + _ => null |
| 69 | + }; |
| 70 | + |
| 71 | + private char[] _values = []; |
| 72 | + |
| 73 | + /// <summary> |
| 74 | + /// <inheritdoc/> |
| 75 | + /// </summary> |
| 76 | + protected override void OnParametersSet() |
| 77 | + { |
| 78 | + base.OnParametersSet(); |
| 79 | + |
| 80 | + Value ??= ""; |
| 81 | + _values = new char[Digits]; |
| 82 | + for (var index = 0; index < Digits; index++) |
| 83 | + { |
| 84 | + if (index < Value.Length) |
| 85 | + { |
| 86 | + _values[index] = Value[index]; |
| 87 | + } |
| 88 | + } |
| 89 | + } |
| 90 | + |
| 91 | + /// <summary> |
| 92 | + /// <inheritdoc/> |
| 93 | + /// </summary> |
| 94 | + /// <returns></returns> |
| 95 | + protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerSetValue)); |
| 96 | + |
| 97 | + private char? GetValueString(int index) |
| 98 | + { |
| 99 | + return _values[index] != 0 ? _values[index] : null; |
| 100 | + } |
| 101 | + |
| 102 | + |
| 103 | + /// <summary> |
| 104 | + /// Trigger value changed event callback. Trigger by JavaScript. |
| 105 | + /// </summary> |
| 106 | + /// <param name="val"></param> |
| 107 | + /// <returns></returns> |
| 108 | + [JSInvokable] |
| 109 | + public Task TriggerSetValue(string val) |
| 110 | + { |
| 111 | + SetValue(val); |
| 112 | + return Task.CompletedTask; |
| 113 | + } |
| 114 | +} |
0 commit comments