feat(Table): add OnResizeColumnCallback parameter (#1575)

* feat: 增加 ResizeColumnCallback 回调方法

* test: 增加单元测试

* chore: bump version 7.8.7-beta03

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
  <PropertyGroup>
- <Version>7.8.7-beta02</Version>
+ <Version>7.8.7-beta03</Version>
  </PropertyGroup>
 
  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -781,7 +781,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
  if (_init)
  {
  _init = false;
- await InvokeVoidAsync("init", Id, Interop, nameof(ResetColumnsCallback));
+ await InvokeVoidAsync("init", Id, Interop, new { DragColumnCallback = nameof(DragColumnCallback), ResizeColumnCallback = nameof(ResizeColumnCallback) });
  }
 
  if (_resetColumns)
@@ -1206,14 +1206,20 @@ private async Task OnContextMenu(MouseEventArgs e, TItem item)
  [Parameter]
  public Func<string, Task>? OnDragColumnEndAsync { get; set; }
 
+ /// <summary>
+ /// 获得/设置 设置列宽回调方法 
+ /// </summary>
+ [Parameter]
+ public Func<string, int, Task>? OnResizeColumnAsync { get; set; }
+
  /// <summary>
  /// 重置列方法 由 JavaScript 脚本调用
  /// </summary>
  /// <param name="originIndex"></param>
  /// <param name="currentIndex"></param>
  /// <returns></returns>
  [JSInvokable]
- public async Task ResetColumnsCallback(int originIndex, int currentIndex)
+ public async Task DragColumnCallback(int originIndex, int currentIndex)
  {
  var firstColumn = GetVisibleColumns().ElementAtOrDefault(originIndex);
  var targetColumn = GetVisibleColumns().ElementAtOrDefault(currentIndex);
@@ -1231,6 +1237,25 @@ public async Task ResetColumnsCallback(int originIndex, int currentIndex)
  }
  }
 
+ /// <summary>
+ /// 设置列宽方法 由 JavaScript 脚本调用
+ /// </summary>
+ /// <param name="index"></param>
+ /// <param name="width"></param>
+ /// <returns></returns>
+ [JSInvokable]
+ public async Task ResizeColumnCallback(int index, int width)
+ {
+ var column = GetVisibleColumns().ElementAtOrDefault(index);
+ if (column != null)
+ {
+ if (OnResizeColumnAsync != null)
+ {
+ await OnResizeColumnAsync(column.GetFieldName(), width);
+ }
+ }
+ }
+
  /// <summary>
  /// 是否触摸
  /// </summary>

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -258,6 +258,8 @@ const setResizeListener = table => {
  },
  () => {
  eff(col, false)
+ const width = getWidth(col.parentNode);
+ table.invoke.invokeMethodAsync(table.callbacks.resizeColumnCallback, index, width)
  }
  )
  })
@@ -366,7 +368,7 @@ const setDraggable = table => {
  EventHandler.on(col, 'drop', e => {
  e.stopPropagation()
  e.preventDefault()
- table.invoke.invokeMethodAsync(table.callback, index, table.dragColumns.indexOf(col))
+ table.invoke.invokeMethodAsync(table.callbacks.dragColumnCallback, index, table.dragColumns.indexOf(col))
  return false
  })
  EventHandler.on(col, 'dragenter', e => {
@@ -404,15 +406,15 @@ const disposeDragColumns = columns => {
  })
 }
 
-export function init(id, invoke, callback) {
+export function init(id, invoke, callbacks) {
  const el = document.getElementById(id)
  if (el === null) {
  return
  }
  const table = {
  el,
  invoke,
- callback,
+ callbacks,
  columns: [],
  tables: [],
  dragColumns: []

test/UnitTest/Components/TableTest.cs

@@ -6746,7 +6746,7 @@ public void AllowDragColumn_Ok()
  });
 
  var table = cut.FindComponent<Table<Foo>>();
- cut.InvokeAsync(() => table.Instance.ResetColumnsCallback(1, 0));
+ cut.InvokeAsync(() => table.Instance.DragColumnCallback(1, 0));
  Assert.Equal("Address", name);
 
  cut.InvokeAsync(async () =>
@@ -6755,10 +6755,50 @@ public void AllowDragColumn_Ok()
  Assert.Contains("地址", columns[0].InnerHtml);
  Assert.Contains("姓名", columns[1].InnerHtml);
 
- await table.Instance.ResetColumnsCallback(2, 3);
+ await table.Instance.DragColumnCallback(2, 3);
  });
  }
 
+ [Fact]
+ public void OnResizeColumnCallback_Ok()
+ {
+ var name = "";
+ var width = 0;
+ var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+ var cut = Context.RenderComponent<BootstrapBlazorRoot>(pb =>
+ {
+ pb.AddChildContent<Table<Foo>>(pb =>
+ {
+ pb.Add(a => a.RenderMode, TableRenderMode.Table);
+ pb.Add(a => a.AllowResizing, true);
+ pb.Add(a => a.OnResizeColumnAsync, (field, colWidth) =>
+ {
+ name = field;
+ width = colWidth;
+ return Task.CompletedTask;
+ });
+ pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
+ pb.Add(a => a.TableColumns, foo => builder =>
+ {
+ builder.OpenComponent<TableColumn<Foo, string>>(0);
+ builder.AddAttribute(1, "Field", "Name");
+ builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+ builder.CloseComponent();
+
+ builder.OpenComponent<TableColumn<Foo, string>>(0);
+ builder.AddAttribute(3, "Field", "Address");
+ builder.AddAttribute(4, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
+ builder.CloseComponent();
+ });
+ });
+ });
+
+ var table = cut.FindComponent<Table<Foo>>();
+ cut.InvokeAsync(() => table.Instance.ResizeColumnCallback(1, 100));
+ Assert.Equal("Address", name);
+ Assert.Equal(100, width);
+ }
+
  [Theory]
  [InlineData(null, true)]
  [InlineData(180, true)]