[NUI] Add DatePicker Handler (dotnet#528)

* Add DatePicker * Add missing class * Update Style and Use DummyPopupPage * Refactoring with MauiTimePicker * add new file Co-authored-by: Jay Cho <chojoong@gmail.com>
myroot · Aug 25, 2022 · ec4b27b · ec4b27b
1 parent 0bc0d3b
commit ec4b27b
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 141 deletions.
diff --git a/src/Core/src/Handlers/DatePicker/DatePickerHandler.Tizen.cs b/src/Core/src/Handlers/DatePicker/DatePickerHandler.Tizen.cs
@@ -1,36 +1,107 @@
-using NView = Tizen.NUI.BaseComponents.View;
+using Tizen.NUI;
+using Tizen.UIExtensions.NUI;
+using NEntry = Tizen.UIExtensions.NUI.Entry;
 
 namespace Microsoft.Maui.Handlers
 {
-	public partial class DatePickerHandler : ViewHandler<IDatePicker, NView>
+	public partial class DatePickerHandler : ViewHandler<IDatePicker, NEntry>
 	{
-		// TODO Need to implement
-
-		protected override NView CreatePlatformView() => new NView()
+		protected override NEntry CreatePlatformView() => new NEntry
 		{
-			BackgroundColor = Tizen.NUI.Color.Red
+			IsReadOnly = true,
+			VerticalAlignment = VerticalAlignment.Center,
+			Focusable = true
 		};
 
-		[MissingMapper]
-		public static void MapFormat(IDatePickerHandler handler, IDatePicker datePicker) { }
+		protected override void ConnectHandler(NEntry platformView)
+		{
+			platformView.TouchEvent += OnTouch;
+			platformView.KeyEvent += OnKeyEvent;
+			base.ConnectHandler(platformView);
+		}
 
-		[MissingMapper]
-		public static void MapDate(IDatePickerHandler handler, IDatePicker datePicker) { }
+		protected override void DisconnectHandler(NEntry platformView)
+		{
+			platformView.TouchEvent -= OnTouch;
+			platformView.KeyEvent -= OnKeyEvent;
+			base.DisconnectHandler(platformView);
+		}
 
-		[MissingMapper]
-		public static void MapFont(IDatePickerHandler handler, IDatePicker datePicker) { }
+		public static void MapFormat(IDatePickerHandler handler, IDatePicker datePicker)
+		{
+			handler.PlatformView.UpdateFormat(datePicker);
+		}
 
-		[MissingMapper]
-		public static void MapTextColor(IDatePickerHandler handler, IDatePicker datePicker) { }
+		public static void MapDate(IDatePickerHandler handler, IDatePicker datePicker)
+		{
+			handler.PlatformView.UpdateDate(datePicker);
+		}
+
+		public static void MapFont(IDatePickerHandler handler, IDatePicker datePicker)
+		{
+			var fontManager = handler.GetRequiredService<IFontManager>();
+			handler.PlatformView.UpdateFont(datePicker, fontManager);
+		}
+
+		public static void MapTextColor(IDatePickerHandler handler, IDatePicker datePicker)
+		{
+			handler.PlatformView.UpdateTextColor(datePicker);
+		}
 
 		[MissingMapper]
 		public static void MapMinimumDate(IDatePickerHandler handler, IDatePicker datePicker) { }
 
 		[MissingMapper]
 		public static void MapMaximumDate(IDatePickerHandler handler, IDatePicker datePicker) { }
 
-		[MissingMapper]
-		public static void MapCharacterSpacing(IDatePickerHandler handler, IDatePicker datePicker) { }
+		public static void MapCharacterSpacing(IDatePickerHandler handler, IDatePicker datePicker)
+		{
+			handler.PlatformView.UpdateCharacterSpacing(datePicker);
+		}
+
+		bool OnTouch(object source, Tizen.NUI.BaseComponents.View.TouchEventArgs e)
+		{
+			if (e.Touch.GetState(0) != PointStateType.Up)
+				return false;
+
+			if (VirtualView == null)
+				return false;
+
+			OpenPopupAsync();
+			return true;
+		}
+
+		bool OnKeyEvent(object source, Tizen.NUI.BaseComponents.View.KeyEventArgs e)
+		{
+			if (e.Key.IsAcceptKeyEvent())
+			{
+				OpenPopupAsync();
+				return true;
+			}
+			return false;
+		}
+
+		async void OpenPopupAsync()
+		{
+			if (VirtualView == null)
+				return;
 
+			var modalStack = MauiContext?.GetModalStack();
+			if (modalStack != null)
+			{
+				await modalStack.PushDummyPopupPage(async () =>
+				{
+					try
+					{
+						using var popup = new MauiDateTimePicker(VirtualView.Date, false);
+						VirtualView.Date = await popup.Open();
+					}
+					catch
+					{
+						// Cancel
+					}
+				});
+			}
+		}
 	}
 }
diff --git a/src/Core/src/Handlers/DatePicker/DatePickerHandler.cs b/src/Core/src/Handlers/DatePicker/DatePickerHandler.cs
@@ -7,7 +7,7 @@
 #elif WINDOWS
 using PlatformView = Microsoft.UI.Xaml.Controls.CalendarDatePicker;
 #elif TIZEN
-using PlatformView = Tizen.NUI.BaseComponents.View;
+using PlatformView = Tizen.UIExtensions.NUI.Entry;
 #elif (NETSTANDARD || !PLATFORM) || (NET6_0_OR_GREATER && !IOS && !ANDROID && !TIZEN)
 using PlatformView = System.Object;
 #endif

diff --git a/src/Core/src/Handlers/DatePicker/IDatePickerHandler.cs b/src/Core/src/Handlers/DatePicker/IDatePickerHandler.cs
@@ -7,7 +7,7 @@
 #elif WINDOWS
 using PlatformView = Microsoft.UI.Xaml.Controls.CalendarDatePicker;
 #elif TIZEN
-using PlatformView = Tizen.NUI.BaseComponents.View;
+using PlatformView = Tizen.UIExtensions.NUI.Entry;
 #elif (NETSTANDARD || !PLATFORM) || (NET6_0_OR_GREATER && !IOS && !ANDROID && !TIZEN)
 using PlatformView = System.Object;
 #endif

diff --git a/src/Core/src/Handlers/TimePicker/TimePickerHandler.Tizen.cs b/src/Core/src/Handlers/TimePicker/TimePickerHandler.Tizen.cs
@@ -1,3 +1,4 @@
+using System;
 using Tizen.NUI;
 using Tizen.UIExtensions.NUI;
 using NEntry = Tizen.UIExtensions.NUI.Entry;
@@ -87,8 +88,9 @@ await modalStack.PushDummyPopupPage(async () =>
 				{
 					try
 					{
-						using var popup = new MauiTimePicker(VirtualView.Time);
-						VirtualView.Time = await popup.Open();
+						using var popup = new MauiDateTimePicker(new DateTime() + VirtualView.Time, true);
+						var dateTime = await popup.Open();
+						VirtualView.Time = TimeSpan.FromTicks(dateTime.Ticks);
 					}
 					catch
 					{

diff --git a/src/Core/src/Platform/Tizen/MauiDateTimePicker.cs b/src/Core/src/Platform/Tizen/MauiDateTimePicker.cs
@@ -0,0 +1,137 @@
+using System;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+using Tizen.UIExtensions.NUI;
+using NButton = Tizen.UIExtensions.NUI.Button;
+using NView = Tizen.NUI.BaseComponents.View;
+using NFontAttributes = Tizen.UIExtensions.Common.FontAttributes;
+using NTextAlignment = Tizen.UIExtensions.Common.TextAlignment;
+using TColor = Tizen.UIExtensions.Common.Color;
+
+namespace Microsoft.Maui.Platform
+{
+	public class MauiDateTimePicker : Popup<DateTime>
+	{
+		DateTime _dateTime;
+		bool _isTimePicker;
+
+		public MauiDateTimePicker(DateTime dateTime, bool isTimePicker)
+		{
+			_dateTime = dateTime;
+			_isTimePicker = isTimePicker;
+		}
+
+		protected override NView CreateContent()
+		{
+			Layout = new LinearLayout
+			{
+				VerticalAlignment = VerticalAlignment.Center,
+				HorizontalAlignment = HorizontalAlignment.Center,
+			};
+			BackgroundColor = new Tizen.NUI.Color(0.1f, 0.1f, 0.1f, 0.5f);
+			var margin1 = (ushort)20d.ToPixel();
+			var margin2 = (ushort)10d.ToPixel();
+			var radius = 8d.ToPixel();
+
+			var content = new NView
+			{
+				CornerRadius = radius,
+				BoxShadow = new Shadow(20d.ToPixel(), TColor.Black.ToNative()),
+				Layout = new LinearLayout
+				{
+					VerticalAlignment = VerticalAlignment.Center,
+					HorizontalAlignment = HorizontalAlignment.Center,
+					LinearOrientation = LinearLayout.Orientation.Vertical
+				},
+				SizeWidth = (float)Window.Instance.WindowSize.Width * 0.8f,
+				BackgroundColor = Tizen.NUI.Color.White,
+			};
+
+			var title = new Label
+			{
+				Margin = new Extents(margin1, margin1, margin1, margin2),
+				HorizontalTextAlignment = NTextAlignment.Start,
+				WidthSpecification = LayoutParamPolicies.MatchParent,
+				VerticalTextAlignment = NTextAlignment.Center,
+				FontAttributes = NFontAttributes.Bold,
+				TextColor = TColor.FromHex("#000000"),
+				PixelSize = 21d.ToPixel(),
+			};
+			title.Text = _isTimePicker ? "Set Time" : "Set Date";
+			content.Add(title);
+
+			Control dateTimePicker = _isTimePicker ? new TimePicker
+			{
+				Time = _dateTime
+			} : new DatePicker
+			{
+				Date = _dateTime
+			};
+			dateTimePicker.Layout = new LinearLayout
+			{
+				VerticalAlignment = VerticalAlignment.Center,
+				HorizontalAlignment = HorizontalAlignment.Center,
+			};
+			dateTimePicker.Margin = new Extents(margin1, margin1, 0, 0);
+			dateTimePicker.HeightSpecification = LayoutParamPolicies.WrapContent;
+			dateTimePicker.SizeWidth = (float)Window.Instance.WindowSize.Width * 0.8f;
+
+			content.Add(dateTimePicker);
+
+			View hlayout = new View
+			{
+				Layout = new LinearLayout
+				{
+					VerticalAlignment = VerticalAlignment.Center,
+					HorizontalAlignment = HorizontalAlignment.End,
+					LinearOrientation = LinearLayout.Orientation.Horizontal
+				},
+				Margin = new Extents(margin1, margin1, margin2, margin1),
+				WidthSpecification = LayoutParamPolicies.MatchParent,
+				HeightSpecification = LayoutParamPolicies.WrapContent
+			};
+			content.Add(hlayout);
+
+			NButton cancelButton = new NButton
+			{
+				Text = "Cancel",
+				TextColor = TColor.Black,
+				BackgroundColor = TColor.Transparent.ToNative(),
+			};
+			cancelButton.TextLabel.PixelSize = 15d.ToPixel();
+			cancelButton.SizeWidth = cancelButton.TextLabel.NaturalSize.Width + 15d.ToPixel() * 2;
+			cancelButton.Clicked += delegate
+			{
+				Close();
+			};
+			hlayout.Add(cancelButton);
+
+			NButton okButton = new NButton
+			{
+				Text = "OK",
+				Margin = new Extents(margin2, 0, 0, 0),
+				TextColor = TColor.Black,
+				BackgroundColor = TColor.Transparent.ToNative(),
+			};
+			okButton.TextLabel.PixelSize = 15d.ToPixel();
+			okButton.SizeWidth = okButton.TextLabel.NaturalSize.Width + 15d.ToPixel() * 2;
+			okButton.Clicked += delegate
+			{		
+				if (dateTimePicker is TimePicker timePicker)
+				{
+					_dateTime = timePicker.Time;
+				}
+				else if (dateTimePicker is DatePicker datePicker)
+				{
+					_dateTime = datePicker.Date;
+				}
+
+				SendSubmit(_dateTime);
+			};
+			hlayout.Add(okButton);
+
+			return content;
+		}
+	}
+}