Add new BitDataGrid component (#12502) #12504
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,71 @@ | ||
| namespace BitBlazorUI { | ||
| export class DataGrid { | ||
| // Infinite scrolling is the one feature that genuinely needs to read scroll | ||
| // position (which Blazor's scroll EventArgs do not expose), so this watches | ||
| // the viewport and notifies .NET when the user nears the end. | ||
| public static initInfiniteScroll(viewport: HTMLElement, dotNetRef: DotNetObject, threshold: number) { | ||
| const distance = threshold ?? 200; | ||
| let ticking = false; | ||
| let disposed = false; | ||
| // Guards against firing OnInfiniteScrollNearEndAsync again while a prior invocation is still | ||
| // in flight, which would otherwise overlap loads and duplicate interop on rapid scrolling. | ||
| let pending = false; | ||
|
|
||
| const check = () => { | ||
| ticking = false; | ||
| if (disposed || !viewport || pending) return; | ||
| const remaining = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight; | ||
| if (remaining <= distance) { | ||
| pending = true; | ||
| // The circuit may disconnect (navigation, refresh) between the disposed check and | ||
| // this async call, so swallow the resulting rejection to avoid unhandled console errors. | ||
| // Only re-check once the load settles if the .NET callback reports more data was | ||
| // appended and remains; otherwise stop, so end-of-data (a no-op load) doesn't spin | ||
| // this check()->invoke->check() loop forever. | ||
| // Defer the follow-up near-end check with requestAnimationFrame so it runs only | ||
| // after Blazor has rendered the freshly appended rows; reading scrollHeight in the | ||
| // synchronous continuation would otherwise observe stale layout. The disposed guard | ||
| // is preserved so a circuit teardown between callback and frame stops the loop. | ||
| dotNetRef.invokeMethodAsync<boolean>('OnInfiniteScrollNearEndAsync') | ||
| .then( | ||
| (more) => { pending = false; if (!disposed && more) requestAnimationFrame(check); }, | ||
| () => { pending = false; } | ||
| ); | ||
| } | ||
| }; | ||
|
msynk marked this conversation as resolved.
|
||
|
|
||
| const onScroll = () => { | ||
| if (!ticking) { | ||
| ticking = true; | ||
| requestAnimationFrame(check); | ||
| } | ||
| }; | ||
|
|
||
| viewport.addEventListener('scroll', onScroll, { passive: true }); | ||
| // Initial check so a first batch that doesn't fill the viewport keeps loading. | ||
| setTimeout(check, 0); | ||
|
|
||
| return { | ||
| check: () => check(), | ||
| scrollToTop: () => { if (viewport) viewport.scrollTop = 0; }, | ||
| dispose: () => { disposed = true; viewport.removeEventListener('scroll', onScroll); } | ||
| }; | ||
| } | ||
|
|
||
| // Triggers a client-side file download for the given text content. Used by CSV export so the | ||
| // (potentially large) CSV is generated only on demand instead of living in a DOM attribute and | ||
| // being regenerated on every render. Uses a Blob + object URL to avoid data-URI length limits. | ||
| public static download(fileName: string, content: string, mimeType: string) { | ||
| const blob = new Blob([content], { type: mimeType || 'text/plain;charset=utf-8' }); | ||
| const url = URL.createObjectURL(blob); | ||
| const anchor = document.createElement('a'); | ||
| anchor.href = url; | ||
| anchor.download = fileName || 'download'; | ||
| document.body.appendChild(anchor); | ||
| anchor.click(); | ||
| document.body.removeChild(anchor); | ||
| // Revoke after the click has been dispatched so the download isn't cancelled prematurely. | ||
| setTimeout(() => URL.revokeObjectURL(url), 0); | ||
| } | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| @typeparam TItem | ||
| @namespace Bit.BlazorUI | ||
|
|
||
| @* A single data cell. Each cell owns one stable element with an unconditional @@ref so | ||
| keyboard navigation can move DOM focus via Blazor's FocusAsync without conditional | ||
| reference-capture frames (which break render-tree diffing). *@ | ||
| <div @ref="_el" class="@CssClass" role="gridcell" style="@Style" tabindex="@TabIndex" | ||
| @onclick="HandleClick" | ||
| @ondblclick="HandleDoubleClick" | ||
| @oncontextmenu="HandleContextMenu" | ||
| @oncontextmenu:preventDefault="Grid.OnCellContextMenu.HasDelegate" | ||
| @onfocusin="HandleFocusIn" | ||
| @onkeydown="HandleKeyDown"> | ||
|
msynk marked this conversation as resolved.
|
||
| @ChildContent | ||
| </div> | ||
|
|
||
| @code { | ||
| [Parameter, EditorRequired] public BitDataGrid<TItem> Grid { get; set; } = default!; | ||
| [Parameter, EditorRequired] public TItem Item { get; set; } = default!; | ||
| [Parameter, EditorRequired] public BitDataGridColumn<TItem> Column { get; set; } = default!; | ||
| [Parameter] public int ColIndex { get; set; } | ||
| [Parameter] public string? CssClass { get; set; } | ||
| [Parameter] public string? Style { get; set; } | ||
| [Parameter] public RenderFragment? ChildContent { get; set; } | ||
|
|
||
| private ElementReference _el; | ||
|
|
||
| private int? TabIndex => Grid.CellNavigation ? Grid.CellTabIndex(Item, ColIndex) : (int?)null; | ||
| private bool Editing => Grid.IsEditing(Item); | ||
|
|
||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (Grid.CellNavigation && Grid.ShouldFocusCell(Item, ColIndex)) | ||
| { | ||
| Grid.ClearFocusPending(); | ||
| try { await _el.FocusAsync(); } catch { /* element may have been removed */ } | ||
| } | ||
| } | ||
|
|
||
| private Task HandleClick(MouseEventArgs e) => Grid.HandleCellClickAsync(Column, Item, e); | ||
| private Task HandleDoubleClick(MouseEventArgs e) => Grid.HandleCellDoubleClickAsync(Column, Item, e); | ||
| private Task HandleContextMenu(MouseEventArgs e) => Grid.HandleCellContextMenuAsync(Column, Item, e); | ||
|
|
||
| private void HandleFocusIn() | ||
| { | ||
| if (Grid.CellNavigation) Grid.SetFocusedCell(Item, ColIndex); | ||
| } | ||
|
|
||
| private async Task HandleKeyDown(KeyboardEventArgs e) | ||
| { | ||
| if (!Grid.CellNavigation) return; | ||
|
|
||
| // While inline-editing, the cell only handles the edit lifecycle keys; everything | ||
| // else (typing, caret movement) belongs to the editor input. | ||
| if (Editing) | ||
| { | ||
| if (e.Key == "Escape") | ||
| { | ||
| await Grid.CancelEditAsync(); | ||
| Grid.RefocusFocusedCell(); | ||
| } | ||
| else if (e.Key == "Enter") | ||
| { | ||
| await Grid.CommitEditAsync(); | ||
| Grid.RefocusFocusedCell(); | ||
| } | ||
| return; | ||
| } | ||
|
|
||
| await Grid.HandleCellKeyDownAsync(Item, ColIndex, e); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| @typeparam TItem | ||
| @namespace Bit.BlazorUI | ||
|
|
||
| @switch (Column.EffectiveDataType) | ||
| { | ||
| case BitDataGridColumnDataType.Boolean: | ||
| <input type="checkbox" class="bit-dtg-editor bit-dtg-editor-check" | ||
| checked="@(GetBool())" | ||
| @onchange="e => Set(e.Value)" /> | ||
| break; | ||
|
msynk marked this conversation as resolved.
|
||
|
|
||
| case BitDataGridColumnDataType.Number: | ||
| <input type="number" class="bit-dtg-editor" step="any" | ||
| value="@(GetNumberString())" | ||
| @oninput="e => SetNullable(e.Value)" /> | ||
| break; | ||
|
|
||
| case BitDataGridColumnDataType.Date: | ||
| <input type="date" class="bit-dtg-editor" | ||
| value="@(GetDate())" | ||
| @onchange="e => SetNullable(e.Value)" /> | ||
| break; | ||
|
|
||
| case BitDataGridColumnDataType.DateTime: | ||
| <input type="datetime-local" class="bit-dtg-editor" | ||
| value="@(GetDateTime())" | ||
| @onchange="e => SetDateTime(e.Value)" /> | ||
| break; | ||
|
|
||
| case BitDataGridColumnDataType.DateTimeOffset: | ||
| <input type="datetime-local" class="bit-dtg-editor" | ||
| value="@(GetDateTime())" | ||
| @onchange="e => SetDateTimeOffset(e.Value)" /> | ||
|
msynk marked this conversation as resolved.
msynk marked this conversation as resolved.
|
||
| break; | ||
|
|
||
| case BitDataGridColumnDataType.Enum when Column.Accessor is not null && Column.Accessor.UnderlyingType.IsEnum: | ||
| <select class="bit-dtg-editor" value="@(GetString())" | ||
| @onchange="e => Set(string.IsNullOrEmpty(e.Value as string) ? null : e.Value)"> | ||
| @if (IsNullableEnum || Value is null) | ||
| { | ||
| <option value="">@string.Empty</option> | ||
| } | ||
| @foreach (var name in Enum.GetNames(Column.Accessor.UnderlyingType)) | ||
| { | ||
| <option value="@name">@name</option> | ||
| } | ||
| </select> | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
| break; | ||
|
|
||
| default: | ||
| <input type="text" class="bit-dtg-editor" | ||
| value="@(GetString())" | ||
| @oninput="e => Set(e.Value)" /> | ||
|
Comment on lines
+10
to
+65
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win Give inline editor controls accessible names. These inputs/selects focus directly but don’t expose the column name. Add an 🤖 Prompt for AI Agents |
||
| break; | ||
| } | ||
|
|
||
| @code { | ||
| [Parameter, EditorRequired] public BitDataGrid<TItem> Grid { get; set; } = default!; | ||
| [Parameter, EditorRequired] public BitDataGridColumn<TItem> Column { get; set; } = default!; | ||
| [Parameter, EditorRequired] public TItem Item { get; set; } = default!; | ||
|
|
||
| private object? Value => Column.GetValue(Item); | ||
| private string GetString() => Value?.ToString() ?? string.Empty; | ||
|
|
||
| // HTML <input type="number"> always expects a period as the decimal separator regardless of the | ||
| // browser locale, so format numeric values with the invariant culture to avoid emitting a comma | ||
| // (which the input would reject) in comma-decimal cultures. | ||
| private string GetNumberString() | ||
| => Value is IFormattable f | ||
| ? f.ToString(null, System.Globalization.CultureInfo.InvariantCulture) | ||
| : (Value?.ToString() ?? string.Empty); | ||
|
|
||
| private bool GetBool() => Value is bool b && b; | ||
|
|
||
| private string GetDate() | ||
| { | ||
| // <input type="date"> requires a strict ISO 8601 yyyy-MM-dd value; format with the invariant | ||
| // culture so non-Gregorian thread cultures don't emit an invalid (e.g. localized) date string. | ||
| var inv = System.Globalization.CultureInfo.InvariantCulture; | ||
| return Value switch | ||
| { | ||
| DateTime dt => dt.ToString("yyyy-MM-dd", inv), | ||
| DateOnly d => d.ToString("yyyy-MM-dd", inv), | ||
| DateTimeOffset dto => dto.ToString("yyyy-MM-dd", inv), | ||
| _ => string.Empty | ||
| }; | ||
| } | ||
|
|
||
| private string GetDateTime() | ||
| { | ||
| // <input type="datetime-local"> requires a strict ISO 8601 yyyy-MM-ddTHH:mm value; format with | ||
| // the invariant culture and preserve the time (and the offset's local time) component. | ||
| var inv = System.Globalization.CultureInfo.InvariantCulture; | ||
| return Value switch | ||
| { | ||
| DateTime dt => dt.ToString("yyyy-MM-ddTHH:mm", inv), | ||
| DateTimeOffset dto => dto.ToString("yyyy-MM-ddTHH:mm", inv), | ||
| _ => string.Empty | ||
| }; | ||
| } | ||
|
|
||
| // True when the bound member is a nullable enum (e.g. MyEnum?), so the editor can offer an empty | ||
| // option that maps back to null rather than forcing a concrete enum member. | ||
| private bool IsNullableEnum | ||
| => Column.Accessor is not null | ||
| && Nullable.GetUnderlyingType(Column.Accessor.PropertyType) is not null | ||
| && Column.Accessor.UnderlyingType.IsEnum; | ||
|
|
||
| // <input type="datetime-local"> has no time-zone/Kind information, so a naive parse back through | ||
| // the property accessor yields DateTimeKind.Unspecified and would drop the original Utc/Local | ||
| // semantics (changing the represented instant on round-trip). Re-stamp the parsed value with the | ||
| // current value's Kind so edited DateTimes preserve Utc/Local consistently — mirroring how | ||
| // SetDateTimeOffset reconstructs the offset. | ||
| private void SetDateTime(object? raw) | ||
| { | ||
| var inv = System.Globalization.CultureInfo.InvariantCulture; | ||
| if (raw is string s && !string.IsNullOrEmpty(s) | ||
| && DateTime.TryParse(s, inv, System.Globalization.DateTimeStyles.None, out var local)) | ||
| { | ||
| var kind = Value is DateTime current ? current.Kind : DateTimeKind.Unspecified; | ||
| Grid.SetEditValue(Column, DateTime.SpecifyKind(local, kind)); | ||
| } | ||
| else | ||
| { | ||
| SetNullable(raw); | ||
| } | ||
| } | ||
|
|
||
| private void Set(object? raw) => Grid.SetEditValue(Column, raw); | ||
|
|
||
| // True when the bound member is a nullable value type (e.g. int?, DateTime?). A cleared editor | ||
| // (empty string) should then map back to null rather than being rejected by the accessor's type | ||
| // conversion, which would otherwise leave the previous value in place. | ||
| private bool IsNullableValue | ||
| => Column.Accessor is not null | ||
| && Nullable.GetUnderlyingType(Column.Accessor.PropertyType) is not null; | ||
|
|
||
| // Normalizes a cleared number/date input: an empty string maps to null when the bound property is | ||
| // nullable so the cell actually clears, otherwise the raw value flows through the normal Set path. | ||
| private void SetNullable(object? raw) | ||
| { | ||
| if (raw is string s && string.IsNullOrEmpty(s) && IsNullableValue) | ||
| { | ||
| Grid.SetEditValue(Column, null); | ||
| return; | ||
| } | ||
| Set(raw); | ||
| } | ||
|
|
||
| // <input type="datetime-local"> has no UTC offset, so a naive parse back through the property | ||
| // accessor would discard the original offset. Combine the edited local date/time with the offset | ||
| // of the current value when one exists; otherwise use the local time zone's offset *for that | ||
| // timestamp* (not DateTimeOffset.Now.Offset, which can differ across DST boundaries) so the stored | ||
| // offset matches the entered date. | ||
| private void SetDateTimeOffset(object? raw) | ||
| { | ||
| var inv = System.Globalization.CultureInfo.InvariantCulture; | ||
| if (raw is string s && !string.IsNullOrEmpty(s) | ||
| && DateTime.TryParse(s, inv, System.Globalization.DateTimeStyles.None, out var local)) | ||
| { | ||
| var offset = Value is DateTimeOffset current ? current.Offset : TimeZoneInfo.Local.GetUtcOffset(local); | ||
| Grid.SetEditValue(Column, new DateTimeOffset(local, offset)); | ||
|
msynk marked this conversation as resolved.
msynk marked this conversation as resolved.
|
||
| } | ||
| else | ||
| { | ||
| SetNullable(raw); | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.