- Rename functions in js to be in line with rest of scripts

-Add public RefreshAsync method to call refresf function in script (#2225) -Prep work for adding new VisibleOnLoad parameter (#2221)
microsoft · vnbaaij · Jun 24, 2024 · Jun 20, 2024 · Jun 20, 2024 · Jun 22, 2024
commit 88ebac91b24ea764753e4035b45a236cd2352f54
diff --git a/examples/Demo/Shared/Pages/Lab/IssueTester.razor b/examples/Demo/Shared/Pages/Lab/IssueTester.razor
@@ -1 +1,111 @@
 @page "/issue-tester"
+@using System.Collections.ObjectModel
+
+<button id="myPopoverButton" style="width: 200px; height: 30px; overflow-x: visible; border-width: 1px; border-radius: 4px; box-sizing: content-box; padding: 4px;" @onclick="() => _showPopover = !_showPopover">
+    <FluentOverflow Style="width: 100%;" @ref="@_overflow">
+        <ChildContent>
+            @foreach (var item in categoryItems)
+            {
+                <FluentOverflowItem Style="background-color: #ffd800; border-radius: 4px;">
+                    <FluentBadge Appearance="Appearance.Lightweight">@item.Name</FluentBadge>
+                </FluentOverflowItem>
+            }
+        </ChildContent>
+        <MoreButtonTemplate>
+            <FluentBadge Appearance="Appearance.Lightweight" Style="width: 32px; border-radius: 4px; background-color: #ffd800;">
+                @($"+{context.ItemsOverflow.Count()}")
+            </FluentBadge>
+        </MoreButtonTemplate>
+    </FluentOverflow>
+</button>
+
+<FluentPopover AnchorId="myPopoverButton" Style="width: 300px" @bind-Open="_showPopover">
+    <Body>
+        <FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
+            <FluentGridItem xs="11">
+                <FluentSortableList Items="categoryItems" OnUpdate="@SortListAsync" Style="width: 100%;">
+                    <ItemTemplate>
+                        <FluentTextField @bind-value="@context.Name" Minlength="4" Style="width: 80%; margin-right: 15px;"></FluentTextField>
+                        <FluentIcon Value="@(new Icons.Regular.Size16.ChevronUpDown())" />
+                    </ItemTemplate>
+                </FluentSortableList>
+            </FluentGridItem>
+            <FluentGridItem xs="11">
+                <FluentButton Appearance="Appearance.Stealth" OnClick="@Save">
+                    <FluentIcon Value="@(new Icons.Regular.Size28.Save())" />
+                </FluentButton>
+            </FluentGridItem>
+        </FluentGrid>
+    </Body>
+</FluentPopover>
+
+@code
+{
+    protected FluentOverflow? _overflow;
+    protected string ClassValue => "customOverflow";
+    protected string CategoryButton => "categoryButton";
+
+    bool _showPopover;
+
+    [Parameter]
+    public ObservableCollection<string> InitialItems { get; set; } = ["aaaaa", "bbbbb", "ccccc"];
+
+    [Parameter]
+    public EventCallback<ObservableCollection<string>> ItemsUpdated { get; set; }
+
+    public class Item
+    {
+        public int Id { get; set; }
+        public string Name { get; set; } = "";
+
+    }
+
+    public ObservableCollection<Item> categoryItems = new ObservableCollection<Item>();
+
+    protected override void OnInitialized()
+    {
+        if (InitialItems != null)
+        {
+            categoryItems = new ObservableCollection<Item>(InitialItems.Select((name, index) => new Item { Id = index, Name = name }));
+        }
+    }
+
+    private async Task SortListAsync(FluentSortableListEventArgs args)
+    {
+        if (args is null || args.OldIndex == args.NewIndex)
+        {
+            return;
+        }
+
+        var oldIndex = args.OldIndex;
+        var newIndex = args.NewIndex;
+
+        var items = this.categoryItems;
+        var itemToMove = items[oldIndex];
+        items.RemoveAt(oldIndex);
+
+        if (newIndex < items.Count)
+        {
+            items.Insert(newIndex, itemToMove);
+        }
+        else
+        {
+            items.Add(itemToMove);
+        }
+        itemToMove.Id = newIndex;
+
+        if (_overflow is not null)
+        {
+           await _overflow.RefreshAsync();
+        }
+    }
+    private async Task Save()
+    {
+        var updatedItems = categoryItems.OrderBy(i => i.Id).Select(i => i.Name).ToList();
+        if (_overflow is not null)
+        {
+            await _overflow.RefreshAsync();
+        }
+        await ItemsUpdated.InvokeAsync(new ObservableCollection<string>(updatedItems));
+    }
+}
@@ -1,11 +1,18 @@
 <div style="background-color: var(--neutral-layer-4); overflow: auto; resize: horizontal; padding: 10px;">
-<FluentOverflow Style="width: 100%;">
-    <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
-</FluentOverflow>
+    <FluentOverflow Style="width: 100%;">
+        <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
+    </FluentOverflow>
 </div>
@@ -79,7 +79,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             // Overflow
             _jsModuleOverflow = await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
 
-            await _jsModuleOverflow.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, false, OVERFLOW_SELECTOR);
+            await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, false, OVERFLOW_SELECTOR);
         }
     }
 

@@ -16,6 +16,7 @@ public partial class FluentOverflow : FluentComponentBase, IAsyncDisposable
     private readonly List<FluentOverflowItem> _items = [];
     private DotNetObjectReference<FluentOverflow>? _dotNetHelper = null;
     private IJSObjectReference _jsModule = default!;
+    //private string _visibility = "hidden";
 
     /// <summary />
     protected string? ClassValue => new CssBuilder(Class)
@@ -24,6 +25,7 @@ public partial class FluentOverflow : FluentComponentBase, IAsyncDisposable
 
     /// <summary />
     protected string? StyleValue => new StyleBuilder(Style)
+        //.AddStyle("visibility", _visibility)
         .Build();
 
     [Inject]
@@ -88,8 +90,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
             _dotNetHelper = DotNetObjectReference.Create(this);
+            await _jsModule.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, IsHorizontal, Selectors);
+            //_visibility = "visible";
+        }
+    }
 
-            await _jsModule.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, IsHorizontal, Selectors);
+    public async Task RefreshAsync()
+    {
+        if (_jsModule is not null)
+        {
+            await _jsModule.InvokeVoidAsync("fluentOverflowRefresh", _dotNetHelper, Id, IsHorizontal, Selectors);
         }
     }
 

@@ -1,7 +1,7 @@
 let resizeObserver;
 let observerAddRemove;
 
-export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
     var localSelector = querySelector;
     if (!localSelector) {
         // cannot use :scope for node.matches() further down
@@ -23,13 +23,13 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
                 return;
             }
 
-            FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+            fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
         });
     });
 
     // Create a ResizeObserver, started later
     resizeObserver = new ResizeObserver((entries) => {
-        FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+        fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
     });
 
     // Start the resize observation
@@ -42,7 +42,7 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
 
 // When the Element[id] is resized, set overflow attribute to all element outside of this element.
 // Except for elements with fixed attribute.
-export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector) {
     let container = document.getElementById(id);                                  // Container
     if (!container) return;
 

@@ -149,7 +149,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Overflow/FluentOverflow.razor.js");
 
             var horizontal = Orientation == Orientation.Horizontal;
-            await _jsModuleOverflow.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG);
+            await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG);
         }
     }