Skip to content

Commit

Permalink
SamProf#492, SamProf#496 - MatNavItem Target Feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@enkodellc
enkodellc committed May 14, 2020
1 parent dbadbbf commit 1914e79
Show file tree
Hide file tree
Showing 7 changed files with 219 additions and 24 deletions.
2 changes: 1 addition & 1 deletion src/MatBlazor.Demo/Demo/DemoMatNavMenu.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

</MatNavSubMenuList>
</MatNavSubMenu>
<MatNavItem Href="https://blazorboilerplate.com/" >Blazor Boilerplate - Href</MatNavItem>
<MatNavItem Href="https://blazorboilerplate.com/" Target="_blank">Blazor Boilerplate - Href - Target = _blank</MatNavItem>
<MatNavItem Href="https://www.matblazor.com/">MatBlazor - Href</MatNavItem>
</MatNavMenu>

Expand Down
189 changes: 182 additions & 7 deletions src/MatBlazor.Demo/Demo/DemoTable.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""@cars"" class=""mat-elevation-z5"">
<MatTableHeader>
<th>Name</th>
Expand Down Expand Up @@ -133,7 +133,7 @@

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""@todos"" LoadInitialData=""true"" Striped=""true"" RequestApiOnlyOnce=""true"" AllowSelection=""true"" RowClass=""tester""
ApiUrl=""https://jsonplaceholder.typicode.com/todos"" FilterByColumnName=""Title"" DebounceMilliseconds=""150"" class=""mat-elevation-z5"">
<MatTableHeader>
Expand Down Expand Up @@ -170,6 +170,184 @@
</SourceContent>
</DemoContainer>

<h5 class="mat-h5">Example with sort header table</h5>
<DemoContainer>
<Content>
<MatTable Items="@sortedData" class="mat-elevation-z5" ShowPaging="false" UseSortHeaderRow="true">
<MatTableHeader>
<MatSortHeaderRow SortChanged="@SortData">
<MatSortHeader SortId="name"><span style="width:600px">Dessert (100g)</span></MatSortHeader>
<MatSortHeader SortId="calories">Calories</MatSortHeader>
<MatSortHeader SortId="fat">Fat (g)</MatSortHeader>
<MatSortHeader SortId="carbs">Carbs (g)</MatSortHeader>
<MatSortHeader SortId="protein">Protein (g)</MatSortHeader>
</MatSortHeaderRow>
</MatTableHeader>
<MatTableRow>
<td>@context.Name</td>
<td>@context.Calories</td>
<td>@context.Fat</td>
<td>@context.Carbs</td>
<td>@context.Protein</td>
</MatTableRow>
</MatTable>

@code
{
class Dessert
{
public int Calories { get; set; }
public int Carbs { get; set; }
public int Fat { get; set; }
public string Name { get; set; }
public int Protein { get; set; }
}

Dessert[] desserts = new[]
{
new Dessert() {Name = "Frozen yogurt", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
new Dessert() {Name = "Ice cream sandwich", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
new Dessert() {Name = "Eclair", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
new Dessert() {Name = "Cupcake", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
new Dessert() {Name = "Gingerbread", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
};

void SortData(MatSortChangedEvent sort)
{
sortedData = desserts.ToArray();
if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
{
Comparison<Dessert> comparison = null;
switch (sort.SortId)
{
case "name":
comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
break;
case "calories":
comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
break;
case "fat":
comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
break;
case "carbs":
comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
break;
case "protein":
comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
break;
}
if (comparison != null)
{
if (sort.Direction == MatSortDirection.Desc)
{
Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
}
else
{
Array.Sort(sortedData, comparison);
}
}
}
}

Dessert[] sortedData = null;

protected override void OnInitialized()
{
base.OnInitialized();
SortData(null);
}
}

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""@sortedData"" class=""mat-elevation-z5"" ShowPaging=""false"" UseSortHeaderRow=""true"">
<MatTableHeader >
<MatSortHeaderRow SortChanged=""@SortData"">
<MatSortHeader SortId=""name"">Dessert (100g)</MatSortHeader>
<MatSortHeader SortId=""calories"">Calories</MatSortHeader>
<MatSortHeader SortId=""fat"">Fat (g)</MatSortHeader>
<MatSortHeader SortId=""carbs"">Carbs (g)</MatSortHeader>
<MatSortHeader SortId=""protein"">Protein (g)</MatSortHeader>
</MatSortHeaderRow>
</MatTableHeader>
<MatTableRow>
<td>@context.Name</td>
<td>@context.Calories</td>
<td>@context.Fat</td>
<td>@context.Carbs</td>
<td>@context.Protein</td>
</MatTableRow>
</MatTable>
@code
{
class Dessert
{
public int Calories { get; set; }
public int Carbs { get; set; }
public int Fat { get; set; }
public string Name { get; set; }
public int Protein { get; set; }
}
Dessert[] desserts = new[]
{
new Dessert() {Name = ""Frozen yogurt"", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
new Dessert() {Name = ""Ice cream sandwich"", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
new Dessert() {Name = ""Eclair"", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
new Dessert() {Name = ""Cupcake"", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
new Dessert() {Name = ""Gingerbread"", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
};
void SortData(MatSortChangedEvent sort)
{
sortedData = desserts.ToArray();
if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
{
Comparison<Dessert> comparison = null;
switch (sort.SortId)
{
case ""name"":
comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
break;
case ""calories"":
comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
break;
case ""fat"":
comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
break;
case ""carbs"":
comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
break;
case ""protein"":
comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
break;
}
if (comparison != null)
{
if (sort.Direction == MatSortDirection.Desc)
{
Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
}
else
{
Array.Sort(sortedData, comparison);
}
}
}
}
Dessert[] sortedData = null;
protected override void OnInitialized()
{
base.OnInitialized();
SortData(null);
}
}
")></BlazorFiddle>
</SourceContent>
</DemoContainer>



<h5 class="mat-h5">Select row, with returning selected item example</h5>
<DemoContainer>
<Content>
Expand Down Expand Up @@ -202,9 +380,6 @@
Description = description;
}
}
protected override void OnInitialized()
{
}

Task[] tasks = new[]
{
Expand Down Expand Up @@ -233,7 +408,7 @@

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""tasks"" class=""mat-elevation-z5"" AllowSelection=""true"" SelectionChanged=""SelectionChangedEvent"">
<MatTableHeader>
<th>Id</th>
Expand Down Expand Up @@ -294,4 +469,4 @@
")></BlazorFiddle>
</SourceContent>
</DemoContainer>
</DemoContainer>
2 changes: 1 addition & 1 deletion src/MatBlazor/Components/Base/BaseMatComponent.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,4 @@ protected void DisposeDotNetObjectRef<T>(DotNetObjectReference<T> value) where T

#endregion
}
}
}
2 changes: 1 addition & 1 deletion src/MatBlazor/Components/MatNavMenu/BaseMatNavItem.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ protected async void OnClickHandler(MouseEventArgs e)
{
if (!string.IsNullOrEmpty(Target))
{
await JsInvokeAsync<object>("open", Href, Target);
// Do nothing here as it is a target for an anchor tag
}
else
{
Expand Down
24 changes: 12 additions & 12 deletions src/MatBlazor/Components/MatNavMenu/MatNavItem.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
@using Microsoft.AspNetCore.Components.Routing;
@inherits BaseMatNavItem

<CascadingValue Value="@this">
<CascadingValue Value="@this">

@if (string.IsNullOrEmpty(Href) || Disabled)
{
<li class="@ClassMapper.AsString()" @onmousedown="OnMouseDown" style="@StyleMapper.AsString()" @ref="Ref" @attributes="Attributes" Id="@Id" @onclick="OnClickHandler">
@ChildContent
</li>
}
else
{
@if (string.IsNullOrEmpty(Href) || Disabled)
{
<li class="@ClassMapper.AsString()" @onmousedown="OnMouseDown" style="@StyleMapper.AsString()" @ref="Ref" @attributes="Attributes" Id="@Id" @onclick="OnClickHandler">
@ChildContent
</li>
}
else
{
<li class="mdc-nav-li" @ref="Ref" @attributes="Attributes" Id="@Id">
<NavLink class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" href="@Href" @onclick="OnClickHandler" Match="@NavLinkMatch" ActiveClass="mdc-list-item--selected">
<NavLink class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" href="@Href" @onclick="OnClickHandler" Match="@NavLinkMatch" ActiveClass="mdc-list-item--selected" target="@Target">
@ChildContent
</NavLink>
</li>
}
}

</CascadingValue>
</CascadingValue>
12 changes: 11 additions & 1 deletion src/MatBlazor/Components/MatTable/MatTable.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,14 @@
<CascadingValue Value="@this">
<table class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" @ref="Ref" @attributes="Attributes" Id="@Id">
<thead>
<tr class="mdc-table-header-row @(HeaderRowClass)">@MatTableHeader</tr>
@if (UseSortHeaderRow)
{
@MatTableHeader
}
else
{
<tr class="mdc-table-header-row @(HeaderRowClass)">@MatTableHeader</tr>
}
</thead>
<tbody>
@if (ItemList != null)
Expand Down Expand Up @@ -91,6 +98,9 @@
[Parameter]
public RenderFragment MatTableHeader { get; set; }

[Parameter]
public bool UseSortHeaderRow { get; set; } = false;

[Parameter]
public RenderFragment<TableItem> MatTableRow { get; set; }

Expand Down
12 changes: 11 additions & 1 deletion src/MatBlazor/MatBlazor.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 1914e79

Please sign in to comment.