BlazorDatasheet 에서 대문자 / 소문자만 입력되도록 처리하기

BlazorDatasheet 에서 대문자 / 소문자만 입력되도록 처리하

 

BalzorDataSheet 는 기본적으로 대문자와 소문자 입력을 모두 허용합니다.

하지만 대문자만, 소문자만 입력이 가능하게 하고 싶을 때가 있는데 이번 글에서는 BlazorDatasheet 소스를 직접 수정하여
입력 값을 대문자 / 소문자 / 제한 없음으로 제어하는 방법을 정리해봅니다.

1. BalzorDatasheet 소스 수정 준비

이번 작업은 라이브러리 확장이 아닌 소스 직접 수정 방식입니다.

https://github.com/anmcgrath/BlazorDatasheet

GitHub - anmcgrath/BlazorDatasheet: Simple excel-like datasheet Blazor component

2. 대소문자 구분용 Enum 추가

먼저 대문자, 소문자, 대소문자를 구분하는 enum 을 추가합니다.

BlazorDatasheet 프로젝트의 KeyboardInput 에 추가했습니다.

TextCase.cs

namespace BlazorDatasheet.KeyboardInput
{
    public enum TextCase
    {
        None,
        Upper,
        Lower
    }
}

3. Datasheet에 TextCase 파라미터 추가

Datasheet 에 TextCase parameter 를 정의합니다.

Datasheet.razor.cs

[Parameter]
public TextCase TextCase { get; set; } = TextCase.None;

4. Datasheet → EditorLayer로 TextCase 전달

Datasheet.razor 파일에서 TextCase 를 EditLayer 에 전달합니다.

Datasheet.razor

<EditorLayer Disabled="@IsReadOnly" @ref="_editorLayer" CustomCellTypes="@CustomCellTypeDefinitions" TextCase="@TextCase" />

5. EditorLayer에서 TextCase 처리

Edit 폴더의 EditorLayer 에 전달 받은 TextCase 를 처리하기위해 parameter 로 정의하고 GetDynamicEditorParameters() 메서드에서 TextCase 를 추가합니다.

EditorLayer.razor

[Parameter] 
public TextCase TextCase { get; set; } = TextCase.None;

    private IDictionary<string, object> GetDynamicEditorParameters()
    {
        var editCell = _sheet.Editor.EditCell!;
        var merge = _sheet.Cells.GetMerge(editCell.Row, editCell.Col);
        var r = merge?.Right ?? editCell.Col;
        var b = merge?.Bottom ?? editCell.Row;
        var cellWidth = _sheet.Columns.GetVisualWidthBetween(editCell.Col, r + 1);
        var cellHeight = _sheet.Rows.GetVisualHeightBetween(editCell.Row, b + 1);
        return new Dictionary<string, object>()
        {
            { nameof(BaseEditor.OnValueChanged), EventCallback.Factory.Create<string>(this, HandleEditValueChanged) },
            { "Style", GetEditorDisplayStyling() },
            { "CellWidth", cellWidth },
            { "CellHeight", cellHeight },
            { "TextCase", TextCase } // 추가
        };
    }

6. TextEditorComponent에서 실제 입력값 처리

Edit 폴더> DefaultComponents폴더의 TextEditorComponent.cs 에서 TextCase 를 정의하고 사용자 입력에 따라 TextCase 에 따른 처리를 합니다.

ApplyTextCase 메서드를 정의하여 TextCase 에 따라 대소문자를 반환하고 HandleEditValueChange, OnInput 에서 사용하면 됩니다. 추가한 부분은 아래와 같습니다.

TextEditorComponent.razor

    [Parameter]
    public TextCase TextCase { get; set; } = TextCase.None;
    
    private string ApplyTextCase(string? s)
    {
        if (string.IsNullOrEmpty(s))
            return s ?? string.Empty;

        return TextCase switch
        {
            TextCase.Upper => s!.ToUpper(CultureInfo.CurrentCulture),
            TextCase.Lower => s!.ToLower(CultureInfo.CurrentCulture),
            _ => s!
        };
    }

    public override void HandleEditValueChange(string? s)
    {
        var newValue = ApplyTextCase(s);
        base.HandleEditValueChange(newValue);
    }
    
    private void OnInput(string value)
    {
        var newValue = ApplyTextCase(value);
        CurrentValue = newValue;

        HandleInputChanged();
        SuggestFunctions();
    }

테스트

Home 화면에 테스트 코드를 추가하고 확인한 결과는 아래와 같습니다.

• TextCase.None → 대소문자 모두 입력 가능
• TextCase.Upper → 입력 즉시 대문자로 변환
• TextCase.Lower → 입력 즉시 소문자로 변환

정상적으로 동작하는 것을 확인할 수 있습니다.