Skip to content

Commit

Permalink
🚚 refactor(Breadcrumbs): merge code from BlazorComponent (#1905)
Browse files Browse the repository at this point in the history
* 🚚 refactor(Breadcrumbs): merge code from BlazorComponent

* docs update

* remove unnecessary code
  • Loading branch information
capdiem authored May 10, 2024
1 parent 9c4dc44 commit 9799a86
Show file tree
Hide file tree
Showing 21 changed files with 311 additions and 109 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@

List<BreadcrumbItem> items = new()
{
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/components/breadcrumbs"}
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/blazor/components/breadcrumbs"}
};

}
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@

List<BreadcrumbItem> items = new()
{
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/components/breadcrumbs"}
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/blazor/components/breadcrumbs"}
};

}
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@

List<BreadcrumbItem> items = new()
{
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/components/breadcrumbs"}
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/blazor/components/breadcrumbs"}
};

}
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@

List<BreadcrumbItem> items = new()
{
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/components/breadcrumbs"}
new BreadcrumbItem() {Text = "Dashboard", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 1", Disabled = false, Href = "/blazor/components/breadcrumbs"},
new BreadcrumbItem() {Text = "Link 2", Disabled = true, Href = "/blazor/components/breadcrumbs"}
};

}
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@

List<BreadcrumbItem> items = new()
{
new BreadcrumbItem() { Text = "Docs", Href = "/", Exact = true },
new BreadcrumbItem() { Text = "Masa.Blazor", Href = "/blazor/components/all", Exact = true },
new BreadcrumbItem() { Text = "Borders", Href = "/blazor/components/borders", Exact = true },
new BreadcrumbItem() { Text = "Breadcrumbs", Href = "/blazor/components/breadcrumbs" }
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@ By default, breadcrumbs use a text divider. This can be any string.

<breadcrumbs-usage></breadcrumbs-usage>

## Caveats

<app-alert type="info" content="By default **MBreadcrumbs** will disable the linkage with router. You can enable the feature by using `Linkage` prop."></app-alert>

## Examples

### Props
Expand All @@ -29,6 +25,9 @@ For the icon variant, breadcrumbs can use any icon in Material Design Icons.

#### Routable

In addition to using the `Disabled` property of each item to set whether the breadcrumb is enabled,
you can also use `Routable` to automatically set whether the breadcrumb is enabled based on the route.

<masa-example file="Examples.components.breadcrumbs.Routable"></masa-example>

#### Large
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,20 @@ related:

<breadcrumbs-usage></breadcrumbs-usage>

## 注意

<app-alert type="info" content="默认情况下,**MBreadcrumbs** 将禁用路由联动。可以通过 `Linkage` 属性开启路由联动。"></app-alert>

## 示例

### 属性

#### 分割线

可以使用 `Divider` 属性来设置面包屑分隔符
使用 `Divider` 属性来自定义面包屑分隔符

<masa-example file="Examples.components.breadcrumbs.Divider"></masa-example>

#### 路由联动

除了使用每项的 `Disabled` 属性设置面包屑导航是否可用外,还可以使用 `Routable` 根据路由自动设置面包屑导航是否可用。

<masa-example file="Examples.components.breadcrumbs.Routable"></masa-example>

#### 大号
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,13 @@ private List<NotificationItem> GetNotifications()
{
return
[
new NotificationItem(
"v1.5.1 Release",
I18n.T("release-notifications.patch"),
NotificationType.Release,
"/blazor/getting-started/release-notes?v=v1.5.1",
"release notes",
new DateOnly(2024, 5, 10)),
new NotificationItem(
"v1.5.0 Release",
$"""
Expand Down
4 changes: 0 additions & 4 deletions docs/Masa.Docs.Shared/wwwroot/css/docs.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ h1:focus {
outline: none;
}

.m-application {
line-height: 1.5 !important;
}

#blazor-error-ui {
background: lightyellow;
bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion docs/Masa.Docs.Shared/wwwroot/js/markdown-parser.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ window.MasaBlazor.extendMarkdownIt = function (parser) {

if (scope === "document") {
addHeadingRules(md);
addCodeRules(md);
addImageRules(md);
addBlockquoteRules(md);
addTableRules(md);
Expand All @@ -22,6 +21,7 @@ window.MasaBlazor.extendMarkdownIt = function (parser) {
addCodeGroupRules(parser);
}

addCodeRules(md);
addLinkRules(parser);

function addHtmlInlineRules(md) {
Expand Down
1 change: 1 addition & 0 deletions docs/Masa.Docs.Shared/wwwroot/locale/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -517,6 +517,7 @@
},
"usage-note": "* Partial code, for demonstration purposes only.",
"release-notifications": {
"patch": "Bug fixes and documentation updates.",
"v1_5_0": {
"button": "add `IconName`, `LeftIconName` and `RightIconName` to simplify the usage of icon buttons.",
"card": "add sub-component parameter, includes `Title`, `Subtitle` and `Text`.",
Expand Down
1 change: 1 addition & 0 deletions docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -614,6 +614,7 @@
},
"usage-note": "* 部分代码,仅供演示。",
"release-notifications": {
"patch": "已知问题修复和文档更新",
"v1_5_0": {
"button": "新增 `IconName`, `LeftIconName` 和 `RightIconName` 参数以简化图标按钮的使用。",
"card": "新增子组件参数,包括 `Title`, `Subtitle` 和 `Text`。",
Expand Down
40 changes: 0 additions & 40 deletions src/Masa.Blazor/Components/Breadcrumbs/MBreadcrumbs.cs

This file was deleted.

66 changes: 66 additions & 0 deletions src/Masa.Blazor/Components/Breadcrumbs/MBreadcrumbs.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
@namespace Masa.Blazor
@inherits MasaComponentBase

<CascadingValue Value="IsDark" Name="IsDark">
<CascadingValue Value="this" IsFixed>
<ul class="@GetClass()"
style="@GetStyle()"
id="@Id"
@attributes="@Attributes">
@if (ChildContent == null)
{
@for (var i = 0; i < Items.Count; i++)
{
var index = i;
var item = Items[index];
var isLast = index == Items.Count - 1;

@GenGroup(item, isLast)
}
}
else
{
@ChildContent
}
</ul>
</CascadingValue>
</CascadingValue>

@code
{
private RenderFragment GenGroup(BreadcrumbItem? item, bool isLast) => __builder =>
{
if (item == null)
{
return;
}

if (ItemContent != null)
{
@ItemContent(item)

if (!isLast)
{
@GenDivider()
}
}
else
{
<MBreadcrumbsItem Text="@item.Text"
Href="@item.Href"
Disabled="@item.Disabled"
Exact="@item.Exact">
</MBreadcrumbsItem>

if (!isLast)
{
@GenDivider()
}
}
};

internal RenderFragment GenDivider()
{
return RenderFragments.RenderFragmentOrText(DividerContent, Divider, "m-breadcrumbs__divider", "li");
}
}
82 changes: 82 additions & 0 deletions src/Masa.Blazor/Components/Breadcrumbs/MBreadcrumbs.razor.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
namespace Masa.Blazor;

public partial class MBreadcrumbs : MasaComponentBase
{
[Inject] private MasaBlazor MasaBlazor { get; set; } = null!;

[Parameter] public bool Large { get; set; }

[Parameter, MasaApiParameter("/")] public string? Divider { get; set; } = "/";

[Parameter] public RenderFragment? DividerContent { get; set; }

[Parameter] public bool Routable { get; set; }

[Parameter] public IReadOnlyList<BreadcrumbItem> Items { get; set; } = new List<BreadcrumbItem>();

[Parameter] public RenderFragment<BreadcrumbItem>? ItemContent { get; set; }

[Parameter] public RenderFragment? ChildContent { get; set; }

[Parameter] public bool Dark { get; set; }

[Parameter] public bool Light { get; set; }

[CascadingParameter(Name = "IsDark")] public bool CascadingIsDark { get; set; }

public bool IsDark
{
get
{
if (Dark)
{
return true;
}

if (Light)
{
return false;
}

return CascadingIsDark;
}
}

#region When using razor definition without Items parameter

internal List<MBreadcrumbsItem> SubBreadcrumbsItems { get; } = new();

internal void AddSubBreadcrumbsItem(MBreadcrumbsItem item)
{
if (!SubBreadcrumbsItems.Contains(item))
{
SubBreadcrumbsItems.Add(item);
}
}

#endregion

private bool IndependentTheme =>
(IsDirtyParameter(nameof(Dark)) && Dark) || (IsDirtyParameter(nameof(Light)) && Light);

protected override void OnParametersSet()
{
base.OnParametersSet();

#if NET8_0_OR_GREATER
if (MasaBlazor.IsSsr && !IndependentTheme)
{
CascadingIsDark = MasaBlazor.Theme.Dark;
}
#endif
}

private Block _block = new("m-breadcrumbs");

protected override IEnumerable<string> BuildComponentClass()
{
return _block.Modifier(Large)
.AddTheme(IsDark, IndependentTheme)
.GenerateCssClasses();
}
}
10 changes: 0 additions & 10 deletions src/Masa.Blazor/Components/Breadcrumbs/MBreadcrumbsDivider.cs

This file was deleted.

Loading

0 comments on commit 9799a86

Please sign in to comment.