FluentTextArea.razor.cs

// ------------------------------------------------------------------------
// This file is licensed to you under the MIT License.
// ------------------------------------------------------------------------

using System.Diagnostics.CodeAnalysis;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;

namespace Microsoft.FluentUI.AspNetCore.Components;

/// <summary>
/// A textarea component that allows users to enter and edit multiple lines of text.
/// </summary>
public partial class FluentTextArea : FluentInputImmediateBase<string?>, IFluentComponentElementBase, ITooltipComponent, IFluentComponentChangeAfterKeyPress
{

    /// <summary>
    /// Initializes a new instance of the <see cref="FluentTextArea"/> class.
    /// </summary>
    public FluentTextArea(LibraryConfiguration configuration) : base(configuration)
    {
        // Default conditions for the message
        MessageCondition = (field) =>
        {
            field.MessageIcon = FluentStatus.ErrorIcon;
            field.Message = Localizer[Localization.LanguageResource.TextInput_RequiredMessage];

            return FocusLost &&
                   (Required ?? false)
                   && !(Disabled ?? false)
                   && !ReadOnly
                   && string.IsNullOrEmpty(CurrentValueAsString);
        };
    }

    /// <inheritdoc />
    protected override string? StyleValue => DefaultStyleBuilder
        .AddStyle("width", Width)
        .Build();

    /// <summary>
    /// Gets the CSS class to apply to the internal web-component.
    /// </summary>
    protected virtual string? ComponentStyleValue => new StyleBuilder()
        .AddStyle("width", Width)
        .AddStyle("height", Height)
        .Build();

    /// <inheritdoc cref="IFluentComponentElementBase.Element" />
    [Parameter]
    public ElementReference Element { get; set; }

    /// <summary>
    /// Gets or sets the visual appearance.
    /// </summary>
    [Parameter]
    public TextAreaAppearance? Appearance { get; set; }

    /// <summary>
    /// Gets or sets the short hint displayed in the textarea before the user enters a value.
    /// </summary>
    [Parameter]
    public string? Placeholder { get; set; }

    /// <summary>
    /// Gets or sets the maximum number of characters allowed in the textarea
    /// </summary>
    [Parameter]
    public int? MaxLength { get; set; }

    /// <summary>
    /// Gets or sets the minimum number of characters allowed in the textarea
    /// </summary>
    [Parameter]
    public int? MinLength { get; set; }

    /// <summary>
    /// Gets or sets the autocomplete hint for the textarea (e.g., <c>AutoComplete="on"</c> or <c>AutoComplete="off"</c>).
    /// An Id value must be set to use this property.
    /// </summary>
    [Parameter]
    public string? AutoComplete { get; set; }

    /// <summary>
    /// Gets or sets a value indicating whether the textarea height adjusts automatically to fit its content.
    /// </summary>
    [Parameter]
    public bool? AutoResize { get; set; }

    /// <summary>
    /// Gets or sets the size of the textarea. See <see cref="Components.TextAreaSize"/>
    /// </summary>
    [Parameter]
    public TextAreaSize? Size { get; set; }

    /// <summary>
    /// Gets or sets the width of the textarea (e.g., <c>Width="300px"</c>).
    /// </summary>
    [Parameter]
    public string? Width { get; set; }

    /// <summary>
    /// Gets or sets the height of the textarea (e.g., <c>Height="150px"</c>). See also <see cref="AutoResize"/>.
    /// </summary>
    [Parameter]
    public string? Height { get; set; }

    /// <summary>
    /// Gets or sets how the textarea can be resized by the user. See <see cref="Components.TextAreaResize"/>.
    /// </summary>
    [Parameter]
    public TextAreaResize? Resize { get; set; }

    /// <summary>
    /// Gets or sets a value indicating whether spellcheck should be used.
    /// </summary>
    [Parameter]
    public bool? Spellcheck { get; set; }

    /// <inheritdoc cref="ITooltipComponent.Tooltip" />
    [Parameter]
    public string? Tooltip { get; set; }

    /// <inheritdoc cref="IFluentComponentChangeAfterKeyPress.ChangeAfterKeyPress" />
    [Parameter]
    public KeyPress[]? ChangeAfterKeyPress { get; set; }

    /// <inheritdoc cref="IFluentComponentChangeAfterKeyPress.OnChangeAfterKeyPress" />
    [Parameter]
    public EventCallback<FluentKeyPressEventArgs> OnChangeAfterKeyPress { get; set; }

    /// <inheritdoc cref="IFluentComponentChangeAfterKeyPress.ChangeAfterKeyPressHandlerAsync(string, KeyPress)" />
    [JSInvokable]
    public async Task ChangeAfterKeyPressHandlerAsync(string value, KeyPress key)
    {
        await ChangeHandlerAsync(new ChangeEventArgs()
        {
            Value = value,
        });

        if (OnChangeAfterKeyPress.HasDelegate)
        {
            await OnChangeAfterKeyPress.InvokeAsync(new FluentKeyPressEventArgs()
            {
                Value = value,
                KeyPress = key,
            });
        }
    }

    /// <summary />
    protected override async Task OnInitializedAsync()
    {
        await base.RenderTooltipAsync(Tooltip);
    }

    /// <inheritdoc cref="ComponentBase.OnAfterRenderAsync(bool)" />
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("Microsoft.FluentUI.Blazor.Utilities.Attributes.observeAttributeChange", Element, "value");

            // Initialize the 'immediate' custom event for the immediate mode
            await InitializeImmediateAsync();

            // Initialize the change after key press event
            await IFluentComponentChangeAfterKeyPress.InitializeRuntimeAsync(this, JSRuntime, Element);
        }
    }

    /// <summary>
    /// Parses a string to create the <see cref="Microsoft.AspNetCore.Components.Forms.InputBase{TValue}.Value"/>.
    /// </summary>
    /// <param name="value">The string value to be parsed.</param>
    /// <param name="result">The result to inject into the Value.</param>
    /// <param name="validationErrorMessage">If the value could not be parsed, provides a validation error message.</param>
    /// <returns>True if the value could be parsed; otherwise false.</returns>
    protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out string? result, [NotNullWhen(false)] out string? validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }

    /// <summary>
    /// Handler for the OnFocus event.
    /// </summary>
    /// <param name="e"></param>
    /// <returns></returns>
    protected virtual Task FocusOutHandlerAsync(FocusEventArgs e)
    {
        FocusLost = true;
        return Task.CompletedTask;
    }

    private string? DisplayShadow
        => Appearance == TextAreaAppearance.FilledDarkerShadow || Appearance == TextAreaAppearance.FilledLighterShadow
            ? "true"
            : null;

    private string? SpellCheckValue
        => Spellcheck.HasValue
            ? Spellcheck.Value
                ? "true"
                : "false"
            : null;
}