Breadcrumb updates

[CAPCHIK]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• Bundle size optimization
• Performance optimization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

Breadcrumb can have dropdown with Overlay property, that feature has been added. Additionaly, in Dropdown component ChildContent was wrapped to ant-dropdown-trigger according to AntDesign, for applying to icon style font-width = 10 instead of 14.

BreadcrumbItem can have Href property to automatically create NavLink.

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

[codecov]

Codecov Report

Merging #1859 (a8ce5c5) into master (ae160cf) will increase coverage by 23.57%.
The diff coverage is 81.81%.

❗ Current head a8ce5c5 differs from pull request most recent head 380dcb3. Consider uploading reports for the commit 380dcb3 to get more accurate results

@@             Coverage Diff             @@
##           master    #1859       +/-   ##
===========================================
+ Coverage    0.00%   23.57%   +23.57%     
===========================================
  Files         478      495       +17     
  Lines       31217    23295     -7922     
  Branches        0      121      +121     
===========================================
+ Hits            0     5492     +5492     
+ Misses      31217    17800    -13417     
- Partials        0        3        +3     

Impacted Files	Coverage Δ
components/breadcrumb/BreadcrumbItem.razor	0.00% <0.00%> (ø)
components/core/JsInterop/JSInteropConstants.cs	20.00% <50.00%> (+20.00%)	⬆️
components/dropdown/Dropdown.razor	99.59% <97.14%> (+99.59%)	⬆️
...nts/core/Component/Overlay/OverlayTrigger.razor.cs	41.48% <100.00%> (+41.48%)	⬆️
components/dropdown/Dropdown.razor.cs	63.46% <100.00%> (+63.46%)	⬆️
components/card/Card.razor	0.00% <0.00%> (ø)
components/form/Form.razor	0.00% <0.00%> (ø)
components/rate/Rate.razor	0.00% <0.00%> (ø)
components/spin/Spin.razor	0.00% <0.00%> (ø)
components/tree/Tree.razor	0.00% <0.00%> (ø)
... and 442 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ae160cf...380dcb3. Read the comment docs.

[ElderJames]

We recommend using the Unbound way to bind the trigger. And when we use it internally we need to use Unbound.

[CAPCHIK]

Can you show an example with using Unbound property? I can't find a working example.

[ElderJames]

<Dropdown>
    <Overlay>
     ...
    </Overlay>
    <Unbound>
        <div @ref="@context.Current">
         Trigger
        </div>
    </Unbound>
</Dropdown>

[ElderJames]

We can also try to implement route matching, similar to the implementation in the menu.

https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router-4

[CAPCHIK]

Ok, I will try to create the same experience with _breadcrumbs field

ant-design-blazor/components/breadcrumb/Breadcrumb.razor.cs

Line 24 in 4738685

private readonly BreadcrumbOption[] _breadcrumbs = Array.Empty<BreadcrumbOption>();

ant-design-blazor/components/breadcrumb/Breadcrumb.razor

Lines 7 to 15 in 4738685

	@if (AutoGenerate)
	{
	foreach (var breadcrumb in _breadcrumbs)
	{
	<BreadcrumbItem>
	<a href="@breadcrumb.Url" @onclick="(e)=>Navigate(breadcrumb.Url.ToString())">@breadcrumb.Label</a>
	</BreadcrumbItem>
	}
	}

[ElderJames]

Here's what I mean, when the route changes, the matching item is automatically displayed.

[CAPCHIK]

I understand, but in React example that behavior was realized using re-rendering component and parsing URL. In Blazor, that logic can be placed in Layout, I think.

So, using Options parameter can be implemented in the following way

    <Breadcrumb AutoGenerate Options="@(new BreadcrumbOption[] {
                new BreadcrumbOption("Applications", "apps" ),
                new BreadcrumbOption("Application 1", "apps/1" ),
                new BreadcrumbOption("Detail", "apps/1/detail" ),
                })" />

With that option, we can generate array when need

@implements IDisposable
@inject NavigationManager NavigationManager
<div>
    <Breadcrumb AutoGenerate Options="@options" />
</div>

@code {

    private BreadcrumbOption[] options;

    private Dictionary<string, string> pathNames = new Dictionary<string, string>
    {
        { "components", "Components" },
        { "components/breadcrumb", "Breadcrumb" },
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        NavigationManager.LocationChanged += HandleLocationChanged;
        UpdateBreadcrumb(NavigationManager.ToBaseRelativePath(NavigationManager.Uri));
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs args)
    {
        UpdateBreadcrumb(NavigationManager.ToBaseRelativePath(args.Location));
    }

    private void UpdateBreadcrumb(string location)
    {
        var pathSnippets = location.Split('/', StringSplitOptions.RemoveEmptyEntries);
        options = pathSnippets
            .Skip(1) // Lang
            .Select((_, index) => string.Join('/', pathSnippets.Skip(1).Take(index + 1)))
            .Select(r => new BreadcrumbOption(pathNames[r], $"{pathSnippets[0]}/{r}"))
            .ToArray();
        StateHasChanged();
    }


    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

But if you want to see same code as in React example - we need to render BreadcrumbItem content from parse location logic:

@implements IDisposable
@inject NavigationManager NavigationManager
<div>
    <Breadcrumb>
        @foreach (var (label, href) in options)
        {
            <BreadcrumbItem>
                <NavLink href="@href">@label</NavLink>
            </BreadcrumbItem>
        }
        </Breadcrumb>
</div>

@code {

    private (string label, string href)[] options = new (string label, string href)[0];

    private Dictionary<string, string> pathNames = new Dictionary<string, string>
    {
        { "components", "Components" },
        { "components/breadcrumb", "Breadcrumb" },
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        NavigationManager.LocationChanged += HandleLocationChanged;
        UpdateBreadcrumb(NavigationManager.ToBaseRelativePath(NavigationManager.Uri));
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs args)
    {
        UpdateBreadcrumb(NavigationManager.ToBaseRelativePath(args.Location));
    }

    private void UpdateBreadcrumb(string location)
    {
        var pathSnippets = location.Split('/', StringSplitOptions.RemoveEmptyEntries);
        options = pathSnippets
            .Skip(1) // Lang
            .Select((_, index) => string.Join('/', pathSnippets.Skip(1).Take(index + 1)))
            .Select(r => (pathNames[r], $"{pathSnippets[0]}/{r}"))
            .ToArray();
        StateHasChanged();
    }


    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Both examples can be shown on the documentation page, but the first example with the Options parameter looks too complicated.

For integrating with router, we can create "path resolver" logic and place work with NavigationManager inside the Breadcrumb, and usage might look like this :

    <Breadcrumb RegexPathResolvers="@(new (Regex pattern, string label)[]{
                                      (new Regex("components$"), "Components"),
                                      (new Regex("components/breadcrumb$"), "Breadcrumb"),
                                      })"
                PathResolver="@(path => "Unexpected path")">

Which implementation method do you prefer?

[ElderJames]

This last one is the best. It may be difficult for users to understand though, and it would be better to use the existing API.

Maybe something like:

  <Breadcrumb RouterLinks="@(new (string routerlink, NavLinkMatch match, label match)[]{
                                      ("components", NavLinkMatch.Prefix, "Components"),
                                      ("components/breadcrumb$",NavLinkMatch.All, "Breadcrumb"),
                                      })">