Merge pull request #297 from irihitech/datepicker-fix

Fix: DatePicker ClearButton and LostFocus behavior
irihitech · Jul 22, 2024 · 96ec5b6 · 96ec5b6
2 parents 78686c7 + 35933eb
commit 96ec5b6
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 72 deletions.
diff --git a/demo/Ursa.Demo/Pages/DatePickerDemo.axaml b/demo/Ursa.Demo/Pages/DatePickerDemo.axaml
@@ -8,7 +8,7 @@
     <StackPanel Margin="20" HorizontalAlignment="Left">
         <u:CalendarView DateSelected="CalendarView_OnOnDateSelected" DatePreviewed="CalendarView_OnOnDatePreviewed"/>
         <TextBlock Text="{Binding #singlePicker.SelectedDate}" ></TextBlock>
-        <u:DatePicker Name="singlePicker" Width="200" />
-        <u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" />
+        <u:DatePicker Name="singlePicker" Width="200" Classes="ClearButton" />
+        <u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" Classes="ClearButton" />
     </StackPanel>
 </UserControl>
diff --git a/src/Ursa.Themes.Semi/Controls/DatePicker.axaml b/src/Ursa.Themes.Semi/Controls/DatePicker.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:contracts="https://irihi.tech/shared"
     xmlns:u="https://irihi.tech/ursa">
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type u:DatePicker}" TargetType="u:DatePicker">
@@ -30,7 +31,7 @@
                         <Grid
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
-                            ColumnDefinitions="*, Auto, Auto">
+                            ColumnDefinitions="*, Auto">
                             <TextBox
                                 Name="PART_TextBox"
                                 Grid.Column="0"
@@ -59,8 +60,9 @@
                                 Theme="{DynamicResource InnerIconButton}" />
                             <Button
                                 Name="PART_Button"
-                                Grid.Column="2"
+                                Grid.Column="1"
                                 Padding="0,0,8,0"
+                                IsVisible="{Binding !#ClearButton.IsVisible}"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
                                 Focusable="False"
                                 Theme="{DynamicResource InnerIconButton}" />
@@ -83,9 +85,9 @@
                                     <u:CalendarView
                                         Name="PART_Calendar"
                                         BorderThickness="0"
-                                        FontSize="{DynamicResource DefaultFontSize}"
                                         CornerRadius="{Binding $parent[Border].CornerRadius}"
                                         FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                                        FontSize="{DynamicResource DefaultFontSize}"
                                         IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" />
                                 </Border>
                             </Popup>
@@ -95,6 +97,12 @@
                 </DataValidationErrors>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^.clearButton, ^.ClearButton">
+            <Style Selector="^:pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="{Binding $parent[u:DatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}" />
+            </Style>
+        </Style>
 
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#Background">

diff --git a/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml b/src/Ursa.Themes.Semi/Controls/DateRangePicker.axaml
@@ -68,6 +68,7 @@
                                 Name="{x:Static u:DateRangePicker.PART_Button}"
                                 Grid.Column="3"
                                 Padding="8,0"
+                                IsVisible="{Binding !#ClearButton.IsVisible}"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
                                 Focusable="False"
                                 Theme="{DynamicResource InnerIconButton}" />
@@ -142,11 +143,8 @@
         </Setter>
 
         <Style Selector="^.clearButton, ^.ClearButton">
-            <Style Selector="^:pointerover /template/ Button#ClearButton">
-                <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNotNull}}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Button#PART_Button">
-                <Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNull}}" />
+            <Style Selector="^:not(:empty):pointerover /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="{Binding $parent[u:DatePicker].start, Converter={x:Static ObjectConverters.IsNotNull}}" />
             </Style>
         </Style>
 

diff --git a/src/Ursa/Controls/DateTimePicker/DatePicker.cs b/src/Ursa/Controls/DateTimePicker/DatePicker.cs
@@ -1,4 +1,5 @@
 using System.Globalization;
+using System.Runtime.CompilerServices;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
@@ -116,7 +117,13 @@ private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
         SetCurrentValue(IsDropdownOpenProperty, true);
     }
 
+    [MethodImpl(MethodImplOptions.AggressiveInlining)]
     private void OnTextChanged(object sender, TextChangedEventArgs e)
+    {
+        SetSelectedDate(true);
+    }
+
+    private void SetSelectedDate(bool fromText = false)
     {
         if (string.IsNullOrEmpty(_textBox?.Text))
         {
@@ -145,6 +152,15 @@ private void OnTextChanged(object sender, TextChangedEventArgs e)
                 }
                 _calendar?.MarkDates(startDate: date, endDate: date);
             }
+            else
+            {
+                SetCurrentValue(SelectedDateProperty, null);
+                if (!fromText)
+                {
+                    _textBox?.SetValue(TextBox.TextProperty, null);
+                }
+                _calendar?.ClearSelection();
+            }
         }
     }
 
@@ -158,7 +174,14 @@ private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
         }
         SetCurrentValue(IsDropdownOpenProperty, true);
     }
-
+
+    protected override void OnLostFocus(RoutedEventArgs e)
+    {
+        base.OnLostFocus(e);
+        SetCurrentValue(IsDropdownOpenProperty, false);
+        SetSelectedDate();
+    }
+
     protected override void OnKeyDown(KeyEventArgs e)
     {
         if (e.Key == Key.Escape)
@@ -186,6 +209,6 @@ protected override void OnKeyDown(KeyEventArgs e)
 
     public void Clear()
     {
-
+        SetCurrentValue(SelectedDateProperty, null);
     }
 }