Refactor an input to a razor component – Html

How can I create a variable razor-component where you can set these three values as parameters and the input is moved to the component?

Update

On clarifcation in the comments here’s a version of your component with the binding set up and the ref. Note that this is set up for the TimeOnly type as that is the Input type. You may need to adjust this. I haven’t complicated the control by setting up different typing as you have commented about your experience level in the comment. I’ve also added code to help set up first focus as that’s possibly why you are using element.

@using System.Linq.Expressions
@using System.Diagnostics.CodeAnalysis
@using System.Globalization;

<input class="transition transition-shadow duration-[40ms] ease-out border border-solid border-whitecolor-500 rounded-md bg-whitecolor-200 text-whitecolor-900 focus-visible:border-main-500 focus-visible:shadow-shadowblue @(NoMargin ? "!my-0" : "" ) @(Licence ? "!rounded-lg !py-[26px] !font-Inconsolata !text-2xl !leading-none !font-bold" : "") @(CenterInputContentVertical ? "!align-middle !flex !justify-center !itmes-center" : "") @AdditionalClasses"
       type="time"
       id="startTime"
       value="@this.Value"
       @onchange=this.OnValueChanged
       @ref=this.Element>


@code {
    [Parameter] public string AdditionalClasses { get; set; } = string.Empty;
    [Parameter] public bool NoMargin { get; set; }
    [Parameter] public bool Licence { get; set; }
    [Parameter] public bool CenterInputContentVertical { get; set; }
    [Parameter] public bool InitialFocus { get; set; }

    [Parameter] public TimeOnly? Value { get; set; }
    [Parameter] public EventCallback<TimeOnly?> ValueChanged { get; set; }

    [DisallowNull] public ElementReference? Element { get; protected set; }

    private void OnValueChanged(ChangeEventArgs e)
    {
        if (BindConverter.TryConvertToTimeOnly(e.Value?.ToString(), CultureInfo.InvariantCulture, out TimeOnly timeValue))
            this.ValueChanged.InvokeAsync(timeValue);
    }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender  && this.InitialFocus && this.Element.HasValue)
            await this.Element.Value.FocusAsync();
    }
}

And demo code:

<div class="m-2">
    <InputTextField @bind-Value=this.data InitialFocus=true />
</div>


<div class="alert alert-info">
    @this.data.ToString()
</div>
@code {
    private TimeOnly? data;
}

This is the original answer

I’m not quite sure which three parameters, so if I’m wrong in my assumptions of your intent please tell me. I’m happy to clarify anything. 🙂

On the Css you can create a CSSBuilder class [at the bottom of this answer] that constructs the Css in a more structured way. For example:

<div class="@this.MyCss.Build()">XXXX</div>

@code {
    [Parameter] public string? AdditionalClasses { get; set; }
    [Parameter] public bool NoMargin { get; set; }

    private CSSBuilder MyCss => new CSSBuilder("transition transition-shadow duration-[40ms] ease-out")
            .AddClass(this.NoMargin, "my-0")
            .AddClass(this.NoMargin, "xxx", "yyy")
            .AddClass(this.AdditionalClasses);
}

You’ll find several different implementations of this if your search around. you can extent it’s functionality to fit your specific needs.

On building complex input type components, there’s a recent question and answer here that demonstrates some different approaches.

How do I pass a @bind-Value to a child component?.

public sealed class CSSBuilder
{
    private Queue<string> _cssQueue = new Queue<string>();

    public static CSSBuilder Class(string? cssFragment = null)
        => new CSSBuilder(cssFragment);

    public CSSBuilder() { }

    public CSSBuilder(string? cssFragment)
        => AddClass(cssFragment ?? String.Empty);

    public CSSBuilder AddClass(string? cssFragment)
    {
        if (!string.IsNullOrWhiteSpace(cssFragment))
            _cssQueue.Enqueue(cssFragment);
        return this;
    }

    public CSSBuilder AddClass(IEnumerable<string> cssFragments)
    {
        cssFragments.ToList().ForEach(item => _cssQueue.Enqueue(item));
        return this;
    }

    public CSSBuilder AddClass(bool WhenTrue, string cssFragment)
        => WhenTrue ? this.AddClass(cssFragment) : this;

    public CSSBuilder AddClass(bool WhenTrue, string? trueCssFragment, string? falseCssFragment)
        => WhenTrue ? this.AddClass(trueCssFragment) : this.AddClass(falseCssFragment);

    public CSSBuilder AddClassFromAttributes(IReadOnlyDictionary<string, object> additionalAttributes)
    {
        if (additionalAttributes != null && additionalAttributes.TryGetValue("class", out var val))
            _cssQueue.Enqueue(val.ToString() ?? string.Empty);
        return this;
    }

    public CSSBuilder AddClassFromAttributes(IDictionary<string, object> additionalAttributes)
    {
        if (additionalAttributes != null && additionalAttributes.TryGetValue("class", out var val))
            _cssQueue.Enqueue(val.ToString() ?? string.Empty);
        return this;
    }

    public string Build(string? CssFragment = null)
    {
        if (!string.IsNullOrWhiteSpace(CssFragment)) _cssQueue.Enqueue(CssFragment);
        if (_cssQueue.Count == 0)
            return string.Empty;
        var sb = new StringBuilder();
        foreach (var str in _cssQueue)
        {
            if (!string.IsNullOrWhiteSpace(str)) sb.Append($" {str}");
        }
        return sb.ToString().Trim();
    }
}