Skip to content

Commit 23411c0

Browse files
YomodoJeffrey Jangli
Yomodo
and
Jeffrey Jangli
authored
Made <Header/> optional (#5)
Co-authored-by: Jeffrey Jangli <adminjja@KPNWP.onmicrosoft.com>
1 parent ecb85fc commit 23411c0

File tree

2 files changed

+101
-92
lines changed

2 files changed

+101
-92
lines changed

‎samples/BlazorTextDiff.Web/Pages/Index.razor‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,42 @@
44

55
<h1>Static</h1>
66
<TextDiff OldText="@left" NewText="@right" CollapseContent="@collapsible">
7-
<Header>
8-
<h6 style="padding: 12px; margin: 0px;">
9-
Harry Potter and the Metabolic Stone
10-
<span class="badge badge-primary">@($"{context.LineModificationCount} Line Modifications")</span>
11-
<span class="badge badge-danger">@($"{context.LineDeletionCount} Line Deletions")</span>
12-
<span class="badge badge-success">@($"{context.LineAdditionCount} Line Additions")</span>
13-
14-
<span class="badge badge-primary">@($"{context.WordModificationCount} Word Modifications")</span>
15-
<span class="badge badge-danger">@($"{context.WordDeletionCount} Word Deletions")</span>
16-
<span class="badge badge-success">@($"{context.WordAdditionCount} Word Additions")</span>
17-
</h6>
18-
</Header>
7+
<Header>
8+
<h6 style="padding: 12px; margin: 0px;">
9+
Harry Potter and the Metabolic Stone
10+
<span class="badge badge-primary">@($"{context.LineModificationCount} Line Modifications")</span>
11+
<span class="badge badge-danger">@($"{context.LineDeletionCount} Line Deletions")</span>
12+
<span class="badge badge-success">@($"{context.LineAdditionCount} Line Additions")</span>
13+
14+
<span class="badge badge-primary">@($"{context.WordModificationCount} Word Modifications")</span>
15+
<span class="badge badge-danger">@($"{context.WordDeletionCount} Word Deletions")</span>
16+
<span class="badge badge-success">@($"{context.WordAdditionCount} Word Additions")</span>
17+
</h6>
18+
</Header>
1919
</TextDiff>
2020

2121

22+
<h1 style="margin-top: 40px;">Static (No header)</h1>
23+
<TextDiff OldText="@left" NewText="@right" CollapseContent="@collapsible" />
24+
25+
2226
@code {
23-
string left = @"Mr. and Mrs. Fursley, of number six, Sunset Drive, were proud to say that they were almost perfectly normal. They were the last people you'd expect to be involved in anything weird or mysterious, because they just didn't hold with such nonsense.
24-
Mr. Fursley was the director of a firm called Brunings, which made hatchets. He was a big, well fed man with no neck, although he did have a very large mustache. Mrs. Fursley was petite and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time bending over garden fences, spying on the neighbors. The Fursley's had a small son called Fudley and in their opinion there was no finer boy anywhere.
25-
The Dursleys had everything they wanted...
27+
string left = @"Mr. and Mrs. Fursley, of number six, Sunset Drive, were proud to say that they were almost perfectly normal. They were the last people you'd expect to be involved in anything weird or mysterious, because they just didn't hold with such nonsense.
28+
Mr. Fursley was the director of a firm called Brunings, which made hatchets. He was a big, well fed man with no neck, although he did have a very large mustache. Mrs. Fursley was petite and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time bending over garden fences, spying on the neighbors. The Fursley's had a small son called Fudley and in their opinion there was no finer boy anywhere.
29+
The Dursleys had everything they wanted...
2630
2731
<some>
28-
<xml1>
29-
</xml1>
32+
<xml1>
33+
</xml1>
3034
</some>
3135
";
32-
string right = @"Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say that they were perfectly normal, thank you very much. They were the last people you'd expect to be involved in anything strange or mysterious, because they just didn't hold with such nonsense.
33-
Mr. Dursley was the director of a firm called Grunnings, which made drills. He was a big, beefy man with hardly any neck, although he did have a very large mustache. Mrs. Dursley was thin and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time craning over garden fences, spying on the neighbors. The Dursleys had a small son called Dudley and in their opinion there was no finer boy anywhere.
34-
The Dursleys had everything they wanted...
36+
string right = @"Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say that they were perfectly normal, thank you very much. They were the last people you'd expect to be involved in anything strange or mysterious, because they just didn't hold with such nonsense.
37+
Mr. Dursley was the director of a firm called Grunnings, which made drills. He was a big, beefy man with hardly any neck, although he did have a very large mustache. Mrs. Dursley was thin and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time craning over garden fences, spying on the neighbors. The Dursleys had a small son called Dudley and in their opinion there was no finer boy anywhere.
38+
The Dursleys had everything they wanted...
3539
3640
<some>
37-
<xml2>
38-
</xml2>
41+
<xml2>
42+
</xml2>
3943
</some>";
40-
bool collapsible = true;
44+
bool collapsible = true;
4145
}

‎src/TextDiff.razor‎

Lines changed: 74 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,81 +5,86 @@
55

66

77
<div class="diff-container">
8-
<div class="diff-header">
9-
@Header(new DiffStats(diff.NewText))
10-
</div>
11-
<CascadingValue Value="ShowWhiteSpace" Name="ShowWhiteSpace">
12-
<CascadingValue Value="CollapseContent" Name="CollapseContent">
13-
<div class="diff-panes" @ref="pane" style="@(CollapseContent ? $"max-height: {MaxHeight}px; overflow: hidden;" : "max-height: auto; overflow: auto;")">
14-
<div class="diff-pane">
15-
<TextDiffPane Model="diff.OldText" PanePosition="@PanePosition.Left"></TextDiffPane>
16-
</div>
17-
<div class="diff-pane">
18-
<TextDiffPane Model="diff.NewText" PanePosition="@PanePosition.Right"></TextDiffPane>
19-
</div>
8+
9+
@if (null != Header)
10+
{
11+
<div class="diff-header">
12+
@Header(new DiffStats(diff.NewText))
13+
</div>
14+
}
15+
16+
<CascadingValue Value="@ShowWhiteSpace" Name="@nameof(ShowWhiteSpace)">
17+
<CascadingValue Value="@CollapseContent" Name="@nameof(CollapseContent)">
18+
<div class="diff-panes" @ref="pane" style="@(CollapseContent ? $"max-height: {MaxHeight}px; overflow: hidden;" : "max-height: auto; overflow: auto;")">
19+
<div class="diff-pane">
20+
<TextDiffPane Model="diff.OldText" PanePosition="@PanePosition.Left"></TextDiffPane>
21+
</div>
22+
<div class="diff-pane">
23+
<TextDiffPane Model="diff.NewText" PanePosition="@PanePosition.Right"></TextDiffPane>
2024
</div>
21-
</CascadingValue>
22-
</CascadingValue>
23-
@if (CollapseContent && paneHeight >= MaxHeight)
24-
{
25-
<p class="diff-expand-notice">...</p>
26-
}
25+
</div>
26+
</CascadingValue>
27+
</CascadingValue>
28+
@if (CollapseContent && paneHeight >= MaxHeight)
29+
{
30+
<p class="diff-expand-notice">...</p>
31+
}
2732
</div>
2833

2934

3035

3136

3237
@code {
3338

34-
[Parameter]
35-
public bool ShowWhiteSpace { get; set; }
36-
37-
[Parameter]
38-
public int MaxHeight { get; set; } = 300;
39-
40-
[Parameter]
41-
public bool CollapseContent { get; set; }
42-
43-
/// <summary>
44-
/// The text before any changes.
45-
/// </summary>
46-
[Parameter] public string OldText { get; set; }
47-
48-
/// <summary>
49-
/// The text after any changes.
50-
/// </summary>
51-
[Parameter] public string NewText { get; set; }
52-
[Parameter] public RenderFragment<DiffStats> Header { get; set; }
53-
54-
private SideBySideDiffModel diff;
55-
private ElementReference pane;
56-
private int paneHeight;
57-
58-
59-
/// <summary>
60-
/// When parameters set update the component.
61-
/// </summary>
62-
/// <returns></returns>
63-
protected override async Task OnParametersSetAsync()
64-
{
65-
diff = sideBySide.BuildDiffModel(OldText, NewText);
66-
67-
if(pane.Id != null)
68-
{
69-
paneHeight = await JSRuntime.InvokeAsync<int>("blazorTextDiff.getHeight", pane);
70-
}
71-
}
72-
73-
/// <summary>
74-
/// When loaded try to diff if text available.
75-
/// </summary>
76-
/// <returns></returns>
77-
protected override async Task OnInitializedAsync()
78-
{
79-
if (pane.Id != null)
80-
{
81-
paneHeight = await JSRuntime.InvokeAsync<int>("blazorTextDiff.getHeight", pane);
82-
Console.WriteLine(paneHeight);
83-
}
84-
}
39+
[Parameter]
40+
public bool ShowWhiteSpace { get; set; }
41+
42+
[Parameter]
43+
public int MaxHeight { get; set; } = 300;
44+
45+
[Parameter]
46+
public bool CollapseContent { get; set; }
47+
48+
/// <summary>
49+
/// The text before any changes.
50+
/// </summary>
51+
[Parameter] public string OldText { get; set; }
52+
53+
/// <summary>
54+
/// The text after any changes.
55+
/// </summary>
56+
[Parameter] public string NewText { get; set; }
57+
[Parameter] public RenderFragment<DiffStats> Header { get; set; }
58+
59+
private SideBySideDiffModel diff;
60+
private ElementReference pane;
61+
private int paneHeight;
62+
63+
64+
/// <summary>
65+
/// When parameters set update the component.
66+
/// </summary>
67+
/// <returns></returns>
68+
protected override async Task OnParametersSetAsync()
69+
{
70+
diff = sideBySide.BuildDiffModel(OldText, NewText);
71+
72+
if (pane.Id != null)
73+
{
74+
paneHeight = await JSRuntime.InvokeAsync<int>("blazorTextDiff.getHeight", pane);
75+
}
76+
}
77+
78+
/// <summary>
79+
/// When loaded try to diff if text available.
80+
/// </summary>
81+
/// <returns></returns>
82+
protected override async Task OnInitializedAsync()
83+
{
84+
if (pane.Id != null)
85+
{
86+
paneHeight = await JSRuntime.InvokeAsync<int>("blazorTextDiff.getHeight", pane);
87+
Console.WriteLine(paneHeight);
88+
}
89+
}
8590
}

0 commit comments

Comments
 (0)