|
| 1 | +using System.Linq.Expressions; |
| 2 | + |
| 3 | +using Microsoft.AspNetCore.Components.Rendering; |
| 4 | + |
| 5 | +namespace TDesign; |
| 6 | +/// <summary> |
| 7 | +/// 范围输入框，用于输入范围文本。 |
| 8 | +/// </summary> |
| 9 | +/// <typeparam name="TValue">值的类型。</typeparam> |
| 10 | +[CssClass("t-range-input")] |
| 11 | +public class TInputRange<TValue> : BlazorComponentBase |
| 12 | +{ |
| 13 | + |
| 14 | + /// <summary> |
| 15 | + /// 设置开始值。 |
| 16 | + /// </summary> |
| 17 | + [Parameter] public TValue? StartValue { get; set; } |
| 18 | + |
| 19 | + /// <summary> |
| 20 | + /// 设置开始值的表达式。 |
| 21 | + /// </summary> |
| 22 | + [Parameter] public Expression<Func<TValue?>>? StartValueExpression { get; set; } |
| 23 | + |
| 24 | + /// <summary> |
| 25 | + /// 设置开始值变化触发的回调。 |
| 26 | + /// </summary> |
| 27 | + [Parameter] public EventCallback<TValue?> StartValueChanged { get; set; } |
| 28 | + |
| 29 | + |
| 30 | + /// <summary> |
| 31 | + /// 设置结束值。 |
| 32 | + /// </summary> |
| 33 | + [Parameter] public TValue? EndValue { get; set; } |
| 34 | + |
| 35 | + /// <summary> |
| 36 | + /// 设置结束值的表达式。 |
| 37 | + /// </summary> |
| 38 | + [Parameter] public Expression<Func<TValue?>>? EndValueExpression { get; set; } |
| 39 | + |
| 40 | + /// <summary> |
| 41 | + /// 设置结束值变化触发的回调。 |
| 42 | + /// </summary> |
| 43 | + [Parameter] public EventCallback<TValue?> EndValueChanged { get; set; } |
| 44 | + |
| 45 | + /// <summary> |
| 46 | + /// 设置大小。 |
| 47 | + /// </summary> |
| 48 | + [Parameter][CssClass] public Size Size { get; set; } = Size.Medium; |
| 49 | + |
| 50 | + |
| 51 | + /// <summary> |
| 52 | + /// 设置分隔符文本。 |
| 53 | + /// </summary> |
| 54 | + [Parameter] public string Seperator { get; set; } = "-"; |
| 55 | + |
| 56 | + |
| 57 | + /// <inheritdoc/> |
| 58 | + protected override void AddContent(RenderTreeBuilder builder, int sequence) |
| 59 | + { |
| 60 | + builder.CreateElement(sequence, "div", inner => |
| 61 | + { |
| 62 | + BuildRangeInput(inner, 0, true, StartValue, StartValueExpression, StartValueChanged); |
| 63 | + BuildRnageSeperator(inner, 1); |
| 64 | + BuildRangeInput(inner, 3, false, EndValue, EndValueExpression, EndValueChanged); |
| 65 | + }, |
| 66 | + new |
| 67 | + { |
| 68 | + @class = "t-range-input__inner" |
| 69 | + }); |
| 70 | + } |
| 71 | + |
| 72 | + /// <summary> |
| 73 | + /// 构建分隔符。 |
| 74 | + /// </summary> |
| 75 | + /// <param name="builder">The <see cref="RenderTreeBuilder"/> instance.</param> |
| 76 | + /// <param name="sequence">一个整数，表示该指令在源代码中的位置。</param> |
| 77 | + void BuildRnageSeperator(RenderTreeBuilder builder, int sequence) |
| 78 | + { |
| 79 | + builder.CreateElement(sequence, "div", Seperator, new { @class = "t-range-input__inner-separator" }); |
| 80 | + } |
| 81 | + |
| 82 | + /// <summary> |
| 83 | + /// 构建输入框。 |
| 84 | + /// </summary> |
| 85 | + /// <param name="builder">The <see cref="RenderTreeBuilder"/> instance.</param> |
| 86 | + /// <param name="sequence">一个整数，表示该指令在源代码中的位置。</param> |
| 87 | + /// <param name="leftOrRight"><c>true</c>是左边，否则为右边。</param> |
| 88 | + /// <param name="value">值</param> |
| 89 | + /// <param name="expression">值的表达式</param> |
| 90 | + /// <param name="changed">改变事件。</param> |
| 91 | + void BuildRangeInput(RenderTreeBuilder builder, int sequence, bool leftOrRight, TValue? value, Expression<Func<TValue?>>? expression, EventCallback<TValue?> changed) |
| 92 | + { |
| 93 | + builder.CreateComponent<TInputText<TValue>>(0, attributes: new |
| 94 | + { |
| 95 | + Value = value, |
| 96 | + ValueExpression = expression, |
| 97 | + ValueChanged = changed, |
| 98 | + Size, |
| 99 | + AdditionalCssClass = $"t-range-input__inner-{(leftOrRight ? "left" : "right")}" |
| 100 | + }); |
| 101 | + } |
| 102 | +} |
0 commit comments