Skip to content

Commit 75859b5

Browse files
mckaragozmckaragoz
committed
Working Value Implementation
1 parent c63fc22 commit 75859b5

4 files changed

Lines changed: 112 additions & 77 deletions

File tree

‎src/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535

3636
<!--Uncomment it and build again when you change the CSS/SASS files, currently it fails the CI process-->
3737
<ItemGroup Condition="'$(Configuration)' == 'Debug'">
38-
<PackageReference Include="MudBlazor.SassCompiler" Version="2.0.7">
38+
<!--<PackageReference Include="MudBlazor.SassCompiler" Version="2.0.7">
3939
<PrivateAssets>all</PrivateAssets>
40-
</PackageReference>
40+
</PackageReference>-->
4141
</ItemGroup>
4242

4343
<ItemGroup>

‎src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudBaseDatePickerX.cs‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
using MudBlazor.State;
55
using MudBlazor.Utilities;
66
using System.Globalization;
7-
using System.Runtime.Serialization;
7+
using static MudBlazor.Colors;
88

99
namespace MudExtensions
1010
{
1111
public abstract partial class MudBaseDatePickerX<T> : MudPicker<T>
1212
{
1313
internal readonly string _mudPickerCalendarContentElementId;
1414
private readonly ParameterState<string?> _formatState;
15+
protected readonly string _componentId = Identifier.Create();
1516

1617
protected MudBaseDatePickerX()
1718
{
@@ -72,6 +73,25 @@ protected override void OnInitialized()
7273
base.OnInitialized();
7374
}
7475

76+
protected override async Task OnAfterRenderAsync(bool firstRender)
77+
{
78+
await base.OnAfterRenderAsync(firstRender);
79+
80+
if (firstRender)
81+
{
82+
_picker_month ??= GetCalendarStartOfMonth();
83+
}
84+
85+
if (firstRender && CurrentView == OpenTo.Year)
86+
{
87+
ScrollToYearAsync().CatchAndLog();
88+
return;
89+
}
90+
91+
if (_scrollToYearAfterRender)
92+
ScrollToYearAsync().CatchAndLog();
93+
}
94+
7595
[Inject] protected IScrollManager ScrollManager { get; set; } = null!;
7696
[Inject] private IJsApiService JsApiService { get; set; } = null!;
7797
[Inject] protected TimeProvider TimeProvider { get; set; } = null!;
@@ -92,6 +112,11 @@ private Task FormatChangedAsync(ParameterChangedEventArgs<string?> args)
92112

93113
internal DateTime? _picker_month;
94114

115+
/// <summary>
116+
/// Is set to true to scroll to the actual year after the next render
117+
/// </summary>
118+
protected bool _scrollToYearAfterRender = false;
119+
95120
[Parameter]
96121
public DateTime? PickerMonth
97122
{
@@ -191,12 +216,6 @@ protected string FormatTitleDate(DateTime? date)
191216
return date?.ToString(TitleDateFormat, GetCulture()) ?? "";
192217
}
193218

194-
protected string GetFormattedYearString()
195-
{
196-
var selectedYear = HighlightedDate ?? GetMonthStart(0);
197-
return selectedYear.Year.ToString();
198-
}
199-
200219
protected IEnumerable<string> GetAbbreviatedDayNames()
201220
{
202221
var culture = GetCulture();
@@ -253,6 +272,14 @@ protected DateTime GetMonthEnd(int month)
253272
.EndOfMonth(culture);
254273
}
255274

275+
/// <summary>
276+
/// Scrolls to the current year.
277+
/// </summary>
278+
public virtual async Task ScrollToYearAsync(DateTime? date = null)
279+
{
280+
281+
}
282+
256283
//private ValueTask HandleMouseoverOnPickerCalendarDayButton(int tempId)
257284
//{
258285
// return JsApiService.UpdateStyleProperty(_mudPickerCalendarContentElementId, "--selected-day", tempId);

‎src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudDateTimePicker.razor‎

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,7 @@
8585
{
8686
var year = i;
8787

88-
<div class="mud-picker-year"
89-
id="@(_componentId + year)"
90-
@onclick="@(async () => await OnYearClickedAsync(year))"
91-
@onclick:stopPropagation="true">
92-
88+
<div class="mud-picker-year" id="@(_componentId + year)" @onclick="@(async () => await OnYearClickedAsync(year))" @onclick:stopPropagation="true">
9389
<MudText Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@year</MudText>
9490
</div>
9591
}
@@ -106,9 +102,7 @@
106102

107103
@if (!FixYear.HasValue)
108104
{
109-
<MudIconButton Icon="@PreviousIcon"
110-
OnClick="OnPreviousYearClick"
111-
Class="mud-flip-x-rtl" />
105+
<MudIconButton Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="mud-flip-x-rtl" />
112106

113107
<button type="button"
114108
class="mud-picker-slide-transition mud-picker-calendar-header-transition"
@@ -120,9 +114,7 @@
120114
</MudText>
121115
</button>
122116

123-
<MudIconButton Icon="@NextIcon"
124-
OnClick="OnNextYearClick"
125-
Class="mud-flip-x-rtl" />
117+
<MudIconButton Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud-flip-x-rtl" />
126118
}
127119
else
128120
{
@@ -161,9 +153,7 @@
161153

162154
@if (!FixMonth.HasValue)
163155
{
164-
<MudIconButton Class="mud-picker-nav-button-prev mud-flip-x-rtl"
165-
Icon="@PreviousIcon"
166-
OnClick="@OnPreviousMonthClick" />
156+
<MudIconButton Class="mud-picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="@OnPreviousMonthClick" />
167157

168158
<button type="button"
169159
class="mud-picker-slide-transition mud-picker-calendar-header-transition mud-button-month"
@@ -175,15 +165,11 @@
175165
</MudText>
176166
</button>
177167

178-
<MudIconButton Class="mud-picker-nav-button-next mud-flip-x-rtl"
179-
Icon="@NextIcon"
180-
OnClick="@OnNextMonthClick" />
168+
<MudIconButton Class="mud-picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="@OnNextMonthClick" />
181169
}
182170
else
183171
{
184-
<MudText Class="mud-picker-calendar-header-transition"
185-
Typo="Typo.body1"
186-
Align="Align.Center">
172+
<MudText Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">
187173
@GetMonthName(tempMonth)
188174
</MudText>
189175
}
@@ -194,15 +180,13 @@
194180
@if (ShowWeekNumbers)
195181
{
196182
<div class="mud-picker-calendar-week">
197-
<MudText Typo="Typo.caption"
198-
Class="mud-picker-calendar-week-text"></MudText>
183+
<MudText Typo="Typo.caption" Class="mud-picker-calendar-week-text"></MudText>
199184
</div>
200185
}
201186

202187
@foreach (var dayName in GetAbbreviatedDayNames())
203188
{
204-
<MudText Typo="Typo.caption"
205-
Class="mud-day-label">
189+
<MudText Typo="Typo.caption" Class="mud-day-label">
206190
@dayName
207191
</MudText>
208192
}
@@ -224,8 +208,7 @@
224208
@if (ShowWeekNumbers)
225209
{
226210
<div class="mud-picker-calendar-week">
227-
<MudText Typo="Typo.caption"
228-
Class="mud-picker-calendar-week-text">
211+
<MudText Typo="Typo.caption" Class="mud-picker-calendar-week-text">
229212
@GetWeekNumber(tempMonth, tempWeek)
230213
</MudText>
231214
</div>

0 commit comments

Comments
 (0)