feat: implement single date selector.

This commit is contained in:
rabbitism
2024-06-20 16:21:36 +08:00
parent ddb6900943
commit e6b23312ba
8 changed files with 422 additions and 31 deletions

View File

@@ -15,6 +15,7 @@
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="Template">
<ControlTemplate TargetType="u:CalendarDayButton">
@@ -118,6 +119,7 @@
<Setter Property="Cursor" Value="No" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type u:CalendarYearButton}" TargetType="u:CalendarYearButton">
<Setter Property="MinWidth" Value="32" />
<Setter Property="MinHeight" Value="32" />
@@ -159,6 +161,7 @@
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type u:CalendarView}" TargetType="u:CalendarView">
<Setter Property="MinHeight" Value="260" />
<Setter Property="MinWidth" Value="260" />

View File

@@ -0,0 +1,124 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme TargetType="u:DatePicker" x:Key="{x:Type u:DatePicker}">
<Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource CalendarDatePickerCornerRadius}" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Padding" Value="8 0" />
<Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerDefaultHeight}" />
<Setter Property="Template">
<ControlTemplate TargetType="u:DatePicker">
<DataValidationErrors>
<Panel
x:Name="LayoutRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border
x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"/>
<Grid
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ColumnDefinitions="*, Auto, Auto">
<TextBox
Name="PART_TextBox"
Grid.Column="0"
Grid.ColumnSpan="2"
MinHeight="{TemplateBinding MinHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{TemplateBinding Foreground}"
Theme="{DynamicResource LooklessTextBox}"
>
</TextBox>
<Button
Name="ClearButton"
Grid.Column="1"
Padding="0,0,8,0"
Content="{DynamicResource IconButtonClearData}"
Command="{Binding $parent[u:DatePicker].Clear}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
<Button
Name="PART_Button"
Grid.Column="2"
Padding="0,0,8,0"
Content="{DynamicResource CalendarDatePickerIconGlyph}"
Focusable="False"
Theme="{DynamicResource InnerIconButton}" />
<Popup
Name="PART_Popup"
Grid.Column="0"
HorizontalOffset="-8"
IsLightDismissEnabled="True"
PlacementTarget="{TemplateBinding}"
Placement="BottomEdgeAlignedLeft"
IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropdownOpen, Mode=TwoWay}"
VerticalOffset="-4">
<Border
Margin="8"
Padding="8"
Background="{DynamicResource SemiColorBackground0}"
BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
CornerRadius="{DynamicResource CalendarCornerRadius}">
<u:CalendarView
Name="PART_Calendar"
BorderThickness="0"
CornerRadius="{Binding $parent[Border].CornerRadius}"
FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}">
</u:CalendarView>
</Border>
</Popup>
</Grid>
</Panel>
</DataValidationErrors>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource CalendarDatePickerPointeroverBackground}" />
</Style>
</Style>
<!-- Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource CalendarDatePickerDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Button#PART_Button">
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerDisabledIconForeground}" />
</Style>
<Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
</Style>
<!-- Focused State -->
<Style Selector="^:focus /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
</Style>
<Style Selector="^:focus-within /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -8,6 +8,7 @@
<ResourceInclude Source="Calendar.axaml" />
<ResourceInclude Source="ControlClassesInput.axaml" />
<ResourceInclude Source="Clock.axaml" />
<ResourceInclude Source="DatePicker.axaml" />
<ResourceInclude Source="Dialog.axaml" />
<ResourceInclude Source="DialogShared.axaml" />
<ResourceInclude Source="DisableContainer.axaml" />

View File

@@ -24,8 +24,7 @@ public class CalendarDayButton : ContentControl
private static HashSet<string> _pseudoClasses =
[
PseudoClassName.PC_Selected, PC_EndDate, PC_PreviewStartDate,
PC_PreviewEndDate, PseudoClassName.PC_Selected, PC_InRange
PseudoClassName.PC_Selected, PC_StartDate, PC_EndDate, PC_PreviewStartDate, PC_PreviewEndDate, PC_InRange
];
public static readonly RoutedEvent<CalendarDayButtonEventArgs> DateSelectedEvent =
@@ -127,7 +126,7 @@ public class CalendarDayButton : ContentControl
set
{
_isSelected = value;
PseudoClasses.Set(PseudoClassName.PC_Selected, value);
SetPseudoClass(PseudoClassName.PC_Selected);
}
}
@@ -170,20 +169,6 @@ public class CalendarDayButton : ContentControl
remove => RemoveHandler(DateSelectedEvent, value);
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
/*
PseudoClasses.Set(PC_Today, IsToday);
PseudoClasses.Set(PC_StartDate, IsStartDate);
PseudoClasses.Set(PC_EndDate, IsEndDate);
PseudoClasses.Set(PC_PreviewStartDate, IsPreviewStartDate);
PseudoClasses.Set(PC_PreviewEndDate, IsPreviewEndDate);
PseudoClasses.Set(PC_InRange, IsInRange);
PseudoClasses.Set(PseudoClassName.PC_Selected, IsSelected);
*/
}
protected override void OnPointerPressed(PointerPressedEventArgs e)
{
base.OnPointerPressed(e);

View File

@@ -1,4 +1,5 @@
using System.Globalization;
using System.Runtime.CompilerServices;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
@@ -60,6 +61,10 @@ public class CalendarView : TemplatedControl
private Button? _yearButton;
private Grid? _yearGrid;
private DateTime? _start;
private DateTime? _end;
private DateTime? _previewStart;
private DateTime? _previewEnd;
static CalendarView()
{
@@ -329,6 +334,7 @@ public class CalendarView : TemplatedControl
}
FadeOutDayButtons();
MarkDates(_start, _end, _previewStart, _previewEnd);
}
private void UpdateYearButtons()
@@ -414,7 +420,10 @@ public class CalendarView : TemplatedControl
if (e.Date.Month != ContextCalendar.Month)
{
ContextCalendar.Month = e.Date.Month;
ContextCalendar.Year = e.Date.Year;
ContextCalendar.Day = 1;
UpdateDayButtons();
UpdateHeaderButtons();
}
OnDateSelected?.Invoke(sender, e);
@@ -535,4 +544,47 @@ public class CalendarView : TemplatedControl
IsEnabledProperty.SetValue(canForward, _previousButton, _fastPreviousButton);
IsEnabledProperty.SetValue(canNext, _nextButton, _fastNextButton);
}
public void MarkDates(DateTime? startDate = null, DateTime? endDate = null, DateTime? previewStartDate = null, DateTime? previewEndDate = null)
{
_start = startDate;
_end = endDate;
_previewStart = previewStartDate;
_previewEnd = previewEndDate;
if (_monthGrid?.Children is null) return;
DateTime start = startDate ?? DateTime.MaxValue;
DateTime end = endDate ?? DateTime.MinValue;
DateTime previewStart = previewStartDate ?? DateTime.MaxValue;
DateTime previewEnd = previewEndDate ?? DateTime.MinValue;
DateTime rangeStart = DateTimeHelper.Min(start, previewStart);
DateTime rangeEnd = DateTimeHelper.Max(end, previewEnd);
foreach (var child in _monthGrid.Children)
{
if (child is not CalendarDayButton { DataContext: DateTime d } button) continue;
button.ResetSelection();
if(d.Month != ContextCalendar.Month) continue;
if (d < rangeEnd && d > rangeStart) button.IsInRange = true;
if (d == previewStart) button.IsPreviewStartDate = true;
if (d == previewEnd) button.IsPreviewEndDate = true;
if (d == startDate) button.IsStartDate = true;
if (d == endDate) button.IsEndDate = true;
if (d == startDate && d == endDate) button.IsSelected = true;
}
}
public void ClearSelection()
{
_start = null;
_end = null;
_previewStart = null;
_previewEnd = null;
if (_monthGrid?.Children is null) return;
foreach (var child in _monthGrid.Children)
{
if (child is not CalendarDayButton button) continue;
button.IsStartDate = false;
button.IsEndDate = false;
button.IsInRange = false;
}
}
}

View File

@@ -1,8 +1,162 @@
using Avalonia.Controls.Primitives;
using System.Globalization;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.Interactivity;
using Irihi.Avalonia.Shared.Contracts;
using Irihi.Avalonia.Shared.Helpers;
namespace Ursa.Controls;
public class DatePicker: DatePickerBase
[TemplatePart(PART_Button, typeof(Button))]
[TemplatePart(PART_Popup, typeof(Popup))]
[TemplatePart(PART_TextBox, typeof(TextBox))]
[TemplatePart(PART_Calendar, typeof(CalendarView))]
public class DatePicker: DatePickerBase, IClearControl
{
public const string PART_Button = "PART_Button";
public const string PART_Popup = "PART_Popup";
public const string PART_TextBox = "PART_TextBox";
public const string PART_Calendar = "PART_Calendar";
private Button? _button;
private Popup? _popup;
private TextBox? _textBox;
private CalendarView? _calendar;
public static readonly StyledProperty<DateTime?> SelectedDateProperty = AvaloniaProperty.Register<DatePicker, DateTime?>(
nameof(SelectedDate));
public DateTime? SelectedDate
{
get => GetValue(SelectedDateProperty);
set => SetValue(SelectedDateProperty, value);
}
static DatePicker()
{
SelectedDateProperty.Changed.AddClassHandler<DatePicker, DateTime?>((picker, args) =>
picker.OnSelectionChanged(args));
}
private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<DateTime?> args)
{
if (args.NewValue.Value is null)
{
_calendar?.ClearSelection();
_textBox?.Clear();
}
else
{
_calendar?.MarkDates(startDate: args.NewValue.Value, endDate: args.NewValue.Value);
_textBox?.SetValue(TextBox.TextProperty, args.NewValue.Value.Value.ToString(DisplayFormat ?? "yyyy-MM-dd"));
}
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _textBox);
TextBox.TextChangedEvent.RemoveHandler(OnTextChanged, _textBox);
PointerPressedEvent.RemoveHandler(OnTextBoxPointerPressed, _textBox);
Button.ClickEvent.RemoveHandler(OnButtonClick, _button);
if (_calendar != null)
{
_calendar.OnDateSelected -= OnDateSelected;
}
_button = e.NameScope.Find<Button>(PART_Button);
_popup = e.NameScope.Find<Popup>(PART_Popup);
_textBox = e.NameScope.Find<TextBox>(PART_TextBox);
_calendar = e.NameScope.Find<CalendarView>(PART_Calendar);
Button.ClickEvent.AddHandler(OnButtonClick, RoutingStrategies.Tunnel, true, _button);
GotFocusEvent.AddHandler(OnTextBoxGetFocus, _textBox);
TextBox.TextChangedEvent.AddHandler(OnTextChanged, _textBox);
PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _textBox);
if (_calendar != null)
{
_calendar.OnDateSelected += OnDateSelected;
}
}
private void OnDateSelected(object sender, CalendarDayButtonEventArgs e)
{
SetCurrentValue(SelectedDateProperty, e.Date);
}
private void OnButtonClick(object sender, RoutedEventArgs e)
{
Focus(NavigationMethod.Pointer);
SetCurrentValue(IsDropdownOpenProperty, !IsDropdownOpen);
}
private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
{
SetCurrentValue(IsDropdownOpenProperty, true);
}
private void OnTextChanged(object sender, TextChangedEventArgs e)
{
if (string.IsNullOrEmpty(_textBox?.Text))
{
SetCurrentValue(SelectedDateProperty, null);
_calendar?.ClearSelection();
}
else if (DisplayFormat is null || DisplayFormat.Length == 0)
{
if (DateTime.TryParse(_textBox?.Text, out var defaultTime))
{
SetCurrentValue(SelectedDateProperty, defaultTime);
_calendar?.MarkDates(startDate: defaultTime, endDate: defaultTime);
}
}
else
{
if (DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None,
out var date))
{
SetCurrentValue(SelectedDateProperty, date);
_calendar?.MarkDates(startDate: date, endDate: date);
}
}
}
private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
{
SetCurrentValue(IsDropdownOpenProperty, true);
}
protected override void OnKeyDown(KeyEventArgs e)
{
if (e.Key == Key.Escape)
{
SetCurrentValue(IsDropdownOpenProperty, false);
e.Handled = true;
return;
}
if (e.Key == Key.Down)
{
SetCurrentValue(IsDropdownOpenProperty, true);
e.Handled = true;
return;
}
if (e.Key == Key.Tab)
{
SetCurrentValue(IsDropdownOpenProperty, false);
return;
}
base.OnKeyDown(e);
}
public void Clear()
{
}
}

View File

@@ -1,46 +1,115 @@
using Avalonia;
using Avalonia.Collections;
using Avalonia.Controls.Primitives;
using Avalonia.Controls.Templates;
using Avalonia.Data;
using Irihi.Avalonia.Shared.Contracts;
namespace Ursa.Controls;
public class DatePickerBase: TemplatedControl
public class DatePickerBase : TemplatedControl, IInnerContentControl, IPopupInnerContent
{
public static readonly StyledProperty<string?> DisplayFormatProperty =
AvaloniaProperty.Register<TimePicker, string?>(
nameof(DisplayFormat), "yyyy-MM-dd");
public static readonly StyledProperty<AvaloniaList<DateRange>> BlackoutDatesProperty =
AvaloniaProperty.Register<DatePickerBase, AvaloniaList<DateRange>>(nameof(BlackoutDates));
public static readonly StyledProperty<IDateSelector?> BlackoutDateRuleProperty =
AvaloniaProperty.Register<DatePickerBase, IDateSelector?>(nameof(BlackoutDateRule));
public static readonly StyledProperty<DayOfWeek> FirstDayOfWeekProperty =
AvaloniaProperty.Register<DatePickerBase, DayOfWeek>(
nameof(FirstDayOfWeek), DateTimeHelper.GetCurrentDateTimeFormatInfo().FirstDayOfWeek);
public static readonly StyledProperty<bool> IsTodayHighlightedProperty =
AvaloniaProperty.Register<DatePickerBase, bool>(nameof(IsTodayHighlighted), true);
public static readonly StyledProperty<object?> InnerLeftContentProperty =
AvaloniaProperty.Register<DatePickerBase, object?>(
nameof(InnerLeftContent));
public static readonly StyledProperty<object?> InnerRightContentProperty =
AvaloniaProperty.Register<DatePickerBase, object?>(
nameof(InnerRightContent));
public static readonly StyledProperty<object?> PopupInnerTopContentProperty =
AvaloniaProperty.Register<DatePickerBase, object?>(
nameof(PopupInnerTopContent));
public static readonly StyledProperty<object?> PopupInnerBottomContentProperty =
AvaloniaProperty.Register<DatePickerBase, object?>(
nameof(PopupInnerBottomContent));
public static readonly StyledProperty<bool> IsDropdownOpenProperty = AvaloniaProperty.Register<DatePickerBase, bool>(
nameof(IsDropdownOpen), defaultBindingMode: BindingMode.TwoWay);
public static readonly StyledProperty<bool> IsReadonlyProperty = AvaloniaProperty.Register<DatePickerBase, bool>(
nameof(IsReadonly));
public AvaloniaList<DateRange> BlackoutDates
{
get => GetValue(BlackoutDatesProperty);
set => SetValue(BlackoutDatesProperty, value);
}
public static readonly StyledProperty<IDateSelector?> BlackoutDateRuleProperty =
AvaloniaProperty.Register<DatePickerBase, IDateSelector?>(nameof(BlackoutDateRule));
public IDateSelector? BlackoutDateRule
{
get => GetValue(BlackoutDateRuleProperty);
set => SetValue(BlackoutDateRuleProperty, value);
}
public static readonly StyledProperty<DayOfWeek> FirstDayOfWeekProperty =
AvaloniaProperty.Register<DatePickerBase, DayOfWeek>(
nameof(FirstDayOfWeek), DateTimeHelper.GetCurrentDateTimeFormatInfo().FirstDayOfWeek);
public DayOfWeek FirstDayOfWeek
{
get => GetValue(FirstDayOfWeekProperty);
set => SetValue(FirstDayOfWeekProperty, value);
}
public static readonly StyledProperty<bool> IsTodayHighlightedProperty =
AvaloniaProperty.Register<DatePickerBase, bool>(nameof(IsTodayHighlighted), true);
public bool IsTodayHighlighted
{
get => GetValue(IsTodayHighlightedProperty);
set => SetValue(IsTodayHighlightedProperty, value);
}
public bool IsReadonly
{
get => GetValue(IsReadonlyProperty);
set => SetValue(IsReadonlyProperty, value);
}
public bool IsDropdownOpen
{
get => GetValue(IsDropdownOpenProperty);
set => SetValue(IsDropdownOpenProperty, value);
}
public object? InnerLeftContent
{
get => GetValue(InnerLeftContentProperty);
set => SetValue(InnerLeftContentProperty, value);
}
public object? InnerRightContent
{
get => GetValue(InnerRightContentProperty);
set => SetValue(InnerRightContentProperty, value);
}
public object? PopupInnerTopContent
{
get => GetValue(PopupInnerTopContentProperty);
set => SetValue(PopupInnerTopContentProperty, value);
}
public object? PopupInnerBottomContent
{
get => GetValue(PopupInnerBottomContentProperty);
set => SetValue(PopupInnerBottomContentProperty, value);
}
public string? DisplayFormat
{
get => GetValue(DisplayFormatProperty);
set => SetValue(DisplayFormatProperty, value);
}
}