Skip to content

Commit 0a951f6

Browse files
mckaragozmckaragoz
authored
Wheel Sensitivity Parameter (#54)
1 parent 93e8ea0 commit 0a951f6

File tree

4 files changed

+37
-16
lines changed

4 files changed

+37
-16
lines changed

‎CodeBeam.MudExtensions/Components/DateWheelPicker/MudDateWheelPicker.razor‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,30 +42,30 @@
4242
int dayIndex = DateFormat.IndexOf('d');
4343
@if (yearIndex < dayIndex)
4444
{
45-
<MudWheel Class="mud-width-full" @bind-Value="_year" ItemCollection="Years" Label="@(ShowHeader ? LocalizedStrings.Year : null)" Dense="@Dense" Color="@Color" Disabled="FixYear" />
46-
<MudWheel Class="mud-width-full" @bind-Value="_month" ItemCollection="Months" Label="@(ShowHeader ? LocalizedStrings.Month : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixMonth" />
47-
<MudWheel Class="mud-width-full" @bind-Value="_day" ItemCollection="Days" Label="@(ShowHeader ? LocalizedStrings.Day : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixDay" />
45+
<MudWheel Class="mud-width-full" @bind-Value="_year" ItemCollection="Years" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Year : null)" Dense="@Dense" Color="@Color" Disabled="FixYear" />
46+
<MudWheel Class="mud-width-full" @bind-Value="_month" ItemCollection="Months" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Month : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixMonth" />
47+
<MudWheel Class="mud-width-full" @bind-Value="_day" ItemCollection="Days" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Day : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixDay" />
4848
}
4949
else if (monthIndex < dayIndex && dayIndex < yearIndex )
5050
{
51-
<MudWheel Class="mud-width-full" @bind-Value="_month" ItemCollection="Months" Label="@(ShowHeader ? LocalizedStrings.Month : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixMonth" />
52-
<MudWheel Class="mud-width-full" @bind-Value="_day" ItemCollection="Days" Label="@(ShowHeader ? LocalizedStrings.Day : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixDay" />
53-
<MudWheel Class="mud-width-full" @bind-Value="_year" ItemCollection="Years" Label="@(ShowHeader ? LocalizedStrings.Year : null)" Dense="@Dense" Color="@Color" Disabled="FixYear" />
51+
<MudWheel Class="mud-width-full" @bind-Value="_month" ItemCollection="Months" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Month : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixMonth" />
52+
<MudWheel Class="mud-width-full" @bind-Value="_day" ItemCollection="Days" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Day : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixDay" />
53+
<MudWheel Class="mud-width-full" @bind-Value="_year" ItemCollection="Years" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Year : null)" Dense="@Dense" Color="@Color" Disabled="FixYear" />
5454
}
5555
else
5656
{
57-
<MudWheel Class="mud-width-full" @bind-Value="_day" ItemCollection="Days" Label="@(ShowHeader ? LocalizedStrings.Day : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixDay" />
58-
<MudWheel Class="mud-width-full" @bind-Value="_month" ItemCollection="Months" Label="@(ShowHeader ? LocalizedStrings.Month : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixMonth" />
59-
<MudWheel Class="mud-width-full" @bind-Value="_year" ItemCollection="Years" Label="@(ShowHeader ? LocalizedStrings.Year : null)" Dense="@Dense" Color="@Color" Disabled="FixYear" />
57+
<MudWheel Class="mud-width-full" @bind-Value="_day" ItemCollection="Days" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Day : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixDay" />
58+
<MudWheel Class="mud-width-full" @bind-Value="_month" ItemCollection="Months" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Month : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@Color" Disabled="FixMonth" />
59+
<MudWheel Class="mud-width-full" @bind-Value="_year" ItemCollection="Years" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Year : null)" Dense="@Dense" Color="@Color" Disabled="FixYear" />
6060
}
6161
}
6262
@if (DateView == DateView.Time || DateView == DateView.Both)
6363
{
64-
<MudWheel Class="mud-width-full" @bind-Value="_hour" ItemCollection="Hours" Label="@(ShowHeader ? LocalizedStrings.Hour : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@(ColorTime == Color.Inherit ? Color : ColorTime)" Disabled="FixHour" />
65-
<MudWheel Class="mud-width-full" @bind-Value="_minute" ItemCollection="Minutes" Label="@(ShowHeader ? LocalizedStrings.Minute : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@(ColorTime == Color.Inherit ? Color : ColorTime)" Disabled="FixMinute" />
64+
<MudWheel Class="mud-width-full" @bind-Value="_hour" ItemCollection="Hours" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Hour : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@(ColorTime == Color.Inherit ? Color : ColorTime)" Disabled="FixHour" />
65+
<MudWheel Class="mud-width-full" @bind-Value="_minute" ItemCollection="Minutes" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Minute : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@(ColorTime == Color.Inherit ? Color : ColorTime)" Disabled="FixMinute" />
6666
@if (HasSeconds())
6767
{
68-
<MudWheel Class="mud-width-full" @bind-Value="_second" ItemCollection="Seconds" Label="@(ShowHeader ? LocalizedStrings.Second : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@(ColorTime == Color.Inherit ? Color : ColorTime)" Disabled="FixSecond" />
68+
<MudWheel Class="mud-width-full" @bind-Value="_second" ItemCollection="Seconds" Sensitivity="@Sensitivity" Label="@(ShowHeader ? LocalizedStrings.Second : null)" ToStringFunc="new Func<int, string>(NumberToString)" Dense="@Dense" Color="@(ColorTime == Color.Inherit ? Color : ColorTime)" Disabled="FixSecond" />
6969
}
7070
}
7171
</div>

‎CodeBeam.MudExtensions/Components/DateWheelPicker/MudDateWheelPicker.razor.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ protected override void OnInitialized()
4747
[Category(CategoryTypes.FormComponent.Behavior)]
4848
public bool SubmitOnClose { get; set; } = true;
4949

50+
/// <summary>
51+
/// The minimum swipe delta to change wheel value on touch devices. Default is 30.
52+
/// </summary>
53+
[Parameter]
54+
public int Sensitivity { get; set; } = 30;
55+
5056
/// <summary>
5157
/// If true, the year wheel is disabled.
5258
/// </summary>

‎CodeBeam.MudExtensions/Components/Wheel/MudWheel.razor‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
{
1010
<MudText Align="Align.Center" Color="@Color">@Label</MudText>
1111
}
12-
<MudSwipeArea Class="@InnerClassname" Style="@GetStylename()" OnSwipe="@(async(d) => await HandleOnSwipe(d))" @onwheel="HandleOnWheel" PreventDefault="true">
12+
<MudSwipeArea Class="@InnerClassname" Style="@GetStylename()" Sensitivity="@Sensitivity" OnSwipe="@(async(d) => await HandleOnSwipe(d))" @onwheel="HandleOnWheel" PreventDefault="true">
1313

1414
@if (true)
1515
{
@@ -21,7 +21,7 @@
2121
{
2222
<div class="@OuterItemClassname(index - a)" @onclick="@(async() => await ChangeWheel(-a))">
2323
<MudText Typo="@(Dense ? Typo.body1 : Typo.h6)">@(ToStringFunc != null ? ToStringFunc(ItemCollection[index - a]) : Converter.Set(ItemCollection[index - a]))</MudText>
24-
</div>
24+
</div>
2525
}
2626
else
2727
{
@@ -33,7 +33,7 @@
3333

3434
<div class="@MiddleItemClassname">
3535
<MudText Class="@($"mud-wheel-ani-{_animateGuid} my-2)")" Typo="@(Dense ? Typo.body1 : Typo.h6)" Color="@Color" Style="font-weight: 900">@(ToStringFunc != null ? ToStringFunc(ItemCollection[index]) : Converter.Set(ItemCollection[index]))</MudText>
36-
</div>
36+
</div>
3737

3838
<div class="@BorderClassname" />
3939

@@ -44,7 +44,7 @@
4444
{
4545
<div class="@OuterItemClassname(index + a)" @onclick="@(async() => await ChangeWheel(a))">
4646
<MudText Typo="@(Dense ? Typo.body1 : Typo.h6)">@(ToStringFunc != null ? ToStringFunc(ItemCollection[index + a]) : Converter.Set(ItemCollection[index + a]))</MudText>
47-
</div>
47+
</div>
4848
}
4949
else
5050
{
@@ -54,4 +54,5 @@
5454
}
5555
</MudSwipeArea>
5656
</div>
57+
5758
<MudAnimate @ref="_animate" Selector="@($".mud-wheel-ani-{_animateGuid}")" AnimationType="AnimationType.SlideY" Duration="0.3" Value="0" ValueSecondary="_animateValue" AnimationTiming="AnimationTiming.Ease" />

‎CodeBeam.MudExtensions/Components/Wheel/MudWheel.razor.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,18 @@ public partial class MudWheel<T> : MudBaseInput<T>
5353
[Parameter]
5454
public List<T> ItemCollection { get; set; }
5555

56+
/// <summary>
57+
/// Determines how many items will show before and after the middle one.
58+
/// </summary>
5659
[Parameter]
5760
public int WheelLevel { get; set; } = 2;
5861

62+
/// <summary>
63+
/// The minimum swipe delta to change wheel value on touch devices. Default is 30.
64+
/// </summary>
65+
[Parameter]
66+
public int Sensitivity { get; set; } = 30;
67+
5968
[Parameter]
6069
public string InnerClass { get; set; }
6170

@@ -65,6 +74,9 @@ public partial class MudWheel<T> : MudBaseInput<T>
6574
[Parameter]
6675
public bool SmoothBorders { get; set; }
6776

77+
/// <summary>
78+
/// Color for middle item and borders
79+
/// </summary>
6880
[Parameter]
6981
public Color Color { get; set; }
7082

@@ -150,6 +162,8 @@ protected async Task HandleOnSwipe(SwipeDirection direction)
150162
{
151163
_animateValue = - GetAnimateValue();
152164
}
165+
166+
153167
await _animate.Refresh();
154168
if (direction == SwipeDirection.TopToBottom)
155169
{

0 commit comments

Comments
 (0)