jsakamoto / BlazingStory

The clone of "Storybook" for Blazor, a frontend workshop for building UI components and pages in isolation.
https://jsakamoto.github.io/BlazingStory/
Mozilla Public License 2.0
319 stars 16 forks source link

Text Parameter should have the possibility to have ControlType.Select with options #39

Open WimVdSElia opened 6 months ago

WimVdSElia commented 6 months ago

Hi @jsakamoto,

For the moment the text field only have color and default but I would like to have the possibility to choose from a list to facilite the rendering.

I was thinking to do like this in the TextParameterController.razor

@inherits ParameterControllerBase

@if (Parameter?.Control is ControlType.Color)
{
    var colorValue = (Value ?? Parameter.DefaultValue) as string;
    <ColorInput Value="@colorValue" PlaceHolder="Choose color..." OnInput="@((args) => OnInputAsync(args.Value))" />
}
else if (Parameter?.Control is ControlType.Select)
{
    var selectValue = (Value ?? Parameter.DefaultValue) as string;
    <Select Value="@selectValue" Items="Parameter.Options" OnChange="@((args) => OnInputAsync(args.Value))" />
}
else
{
    <TextArea PlaceHolder="Edit string..." Value="@(Value as string)" OnInput="@((args) => OnInputAsync(args.Value))" />
}

I was thinking to do like this in the ArgType.razor

@using System.Linq.Expressions;
@typeparam TComponent where TComponent : notnull
@typeparam TParameter

@code {
    [CascadingParameter]
    internal IEnumerable<ComponentParameter>? ComponentParameters { get; set; }

    [Parameter]
    public Expression<Func<TComponent, TParameter>>? For { get; set; }

    [Parameter]
    public ControlType Control { get; set; } = ControlType.Default;

    [Parameter]
    public object? DefaultValue { get; set; }

    [Parameter]
    public string[] Options { get; set; } = Array.Empty<string>();

    protected override void OnInitialized()
    {
        if (this.ComponentParameters == null) throw new InvalidOperationException($"The ComponentParameters cascading parameter is required.");
        var parameterName = ParameterExtractor.GetParameterName(this.For);
        if (this.ComponentParameters.TryGetByName(parameterName, out var parameter))
        {
            parameter.Control = this.Control;
            parameter.DefaultValue = this.DefaultValue;
            parameter.Options = this.Options;
        }
    }
}