Code Monkey home page Code Monkey logo

Comments (2)

vnbaaij avatar vnbaaij commented on June 27, 2024 1

Currently, the FluentOverflow is setup in such a way that the underlying script only responds to changes to its 'childlist' (OverflowItems being added/removed) so the behavior you are seeing is expected.

The script does already have an exported resize/refresh function . What we could do is add a public method RefreshAsync to the FluentOverflow component that would call the exported function in the script when invoked.

Your code would then change to this:

@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. add @ref="@_overflow" to the FluentOverflow (and declare it of course)
  2. call await _overflow.RefreshAsync(); on SortListAsync and Save

Thoughts?

from fluentui-blazor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.