From bd93060e8d811a1d5820f2a758d0c1ea23079476 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Sharghi?= Date: Sat, 26 Sep 2020 08:05:12 +0200 Subject: [PATCH] fix(ios): preferredDatePickerStyle (#8906) --- .../ui/date-picker/date-picker-common.ts | 8 ++++++++ nativescript-core/ui/date-picker/date-picker.d.ts | 11 +++++++++++ nativescript-core/ui/date-picker/date-picker.ios.ts | 7 +++---- .../ui/time-picker/time-picker-common.ts | 8 ++++++++ nativescript-core/ui/time-picker/time-picker.d.ts | 12 ++++++++++++ nativescript-core/ui/time-picker/time-picker.ios.ts | 7 +++---- 6 files changed, 45 insertions(+), 8 deletions(-) diff --git a/nativescript-core/ui/date-picker/date-picker-common.ts b/nativescript-core/ui/date-picker/date-picker-common.ts index 8faf3b923..ad994b90b 100644 --- a/nativescript-core/ui/date-picker/date-picker-common.ts +++ b/nativescript-core/ui/date-picker/date-picker-common.ts @@ -14,6 +14,7 @@ export class DatePickerBase extends View implements DatePickerDefinition { public maxDate: Date; public minDate: Date; public date: Date; + public iosPreferredDatePickerStyle: number; } DatePickerBase.prototype.recycleNativeView = "auto"; @@ -61,3 +62,10 @@ export const dateProperty = new Property({ valueConverter: v => new Date(v), }); dateProperty.register(DatePickerBase); + +export const iosPreferredDatePickerStyleProperty = new Property({ + name: 'iosPreferredDatePickerStyle', + defaultValue: 0, + valueConverter: (v) => parseInt(v), +}); +iosPreferredDatePickerStyleProperty.register(DatePickerBase); diff --git a/nativescript-core/ui/date-picker/date-picker.d.ts b/nativescript-core/ui/date-picker/date-picker.d.ts index 7a50808b6..298b25663 100644 --- a/nativescript-core/ui/date-picker/date-picker.d.ts +++ b/nativescript-core/ui/date-picker/date-picker.d.ts @@ -11,6 +11,7 @@ export const dayProperty: Property; export const dateProperty: Property; export const maxDate: Property; export const minDate: Property; +export const iosPreferredDatePickerStyleProperty: Property; /** * Represents an date picker. @@ -55,4 +56,14 @@ export class DatePicker extends View { * Gets or sets the min date. */ minDate: Date; + + /** + * Gets or set the UIDatePickerStyle of the date picker in iOS 13.4+. Defaults to 0. + * Valid values are numbers: + * - 0: automatic (system picks the concrete style based on the current platform and date picker mode) + * - 1: wheels (the date picker displays as a wheel picker) + * - 2: compact (the date picker displays as a label that when tapped displays a calendar-style editor) + * - 3: inline (the date pickers displays as an inline, editable field) + */ + iosPreferredDatePickerStyle: number; } diff --git a/nativescript-core/ui/date-picker/date-picker.ios.ts b/nativescript-core/ui/date-picker/date-picker.ios.ts index 7c04a8980..cef3bcbd9 100644 --- a/nativescript-core/ui/date-picker/date-picker.ios.ts +++ b/nativescript-core/ui/date-picker/date-picker.ios.ts @@ -5,9 +5,8 @@ import { import { device } from '../../platform'; export * from "./date-picker-common"; -const SUPPORT_DATE_PICKER_STYLE = parseFloat(device.os) >= 14.0; -const SUPPORT_TEXT_COLOR = parseFloat(device.os) < 14.0; -const DEFAULT_DATE_PICKER_STYLE = 1; +const SUPPORT_DATE_PICKER_STYLE = parseFloat(device.osVersion) >= 13.4; +const SUPPORT_TEXT_COLOR = parseFloat(device.osVersion) < 14.0; export class DatePicker extends DatePickerBase { private _changeHandler: NSObject; @@ -17,7 +16,7 @@ export class DatePicker extends DatePickerBase { const picker = UIDatePicker.new(); picker.datePickerMode = UIDatePickerMode.Date; if (SUPPORT_DATE_PICKER_STYLE) { - picker.preferredDatePickerStyle = DEFAULT_DATE_PICKER_STYLE; + picker.preferredDatePickerStyle = this.iosPreferredDatePickerStyle; } return picker; } diff --git a/nativescript-core/ui/time-picker/time-picker-common.ts b/nativescript-core/ui/time-picker/time-picker-common.ts index ad09c5b60..4880a3f71 100644 --- a/nativescript-core/ui/time-picker/time-picker-common.ts +++ b/nativescript-core/ui/time-picker/time-picker-common.ts @@ -99,6 +99,7 @@ export abstract class TimePickerBase extends View implements TimePickerDefinitio public maxHour: number; public minMinute: number; public maxMinute: number; + public iosPreferredDatePickerStyle: number; } TimePickerBase.prototype.recycleNativeView = "auto"; @@ -184,3 +185,10 @@ export const timeProperty = new Property({ } }); timeProperty.register(TimePickerBase); + +export const iosPreferredDatePickerStyleProperty = new Property({ + name: 'iosPreferredDatePickerStyle', + defaultValue: 0, + valueConverter: (v) => parseInt(v), +}); +iosPreferredDatePickerStyleProperty.register(TimePickerBase); \ No newline at end of file diff --git a/nativescript-core/ui/time-picker/time-picker.d.ts b/nativescript-core/ui/time-picker/time-picker.d.ts index 2dda072ef..6e290d2bb 100644 --- a/nativescript-core/ui/time-picker/time-picker.d.ts +++ b/nativescript-core/ui/time-picker/time-picker.d.ts @@ -58,6 +58,16 @@ export class TimePicker extends View { * Gets or sets the minute interval. */ minuteInterval: number; + + /** + * Gets or set the UIDatePickerStyle of the date picker in iOS 13.4+. Defaults to 0. + * Valid values are numbers: + * - 0: automatic (system picks the concrete style based on the current platform and date picker mode) + * - 1: wheels (the date picker displays as a wheel picker) + * - 2: compact (the date picker displays as a label that when tapped displays a calendar-style editor) + * - 3: inline (the date pickers displays as an inline, editable field) + */ + iosPreferredDatePickerStyle: number; } export const hourProperty: Property; @@ -70,3 +80,5 @@ export const minMinuteProperty: Property; export const timeProperty: Property; export const minuteIntervalProperty: Property; + +export const iosPreferredDatePickerStyleProperty: Property; diff --git a/nativescript-core/ui/time-picker/time-picker.ios.ts b/nativescript-core/ui/time-picker/time-picker.ios.ts index 7c44cf56a..bb4ae8526 100644 --- a/nativescript-core/ui/time-picker/time-picker.ios.ts +++ b/nativescript-core/ui/time-picker/time-picker.ios.ts @@ -6,9 +6,8 @@ import { import { device } from '../../platform'; export * from "./time-picker-common"; -const SUPPORT_DATE_PICKER_STYLE = parseFloat(device.os) >= 14.0; -const SUPPORT_TEXT_COLOR = parseFloat(device.os) < 14.0; -const DEFAULT_DATE_PICKER_STYLE = 1; +const SUPPORT_DATE_PICKER_STYLE = parseFloat(device.osVersion) >= 13.4; +const SUPPORT_TEXT_COLOR = parseFloat(device.osVersion) < 14.0; function getDate(hour: number, minute: number): Date { let components = NSDateComponents.alloc().init(); @@ -37,7 +36,7 @@ export class TimePicker extends TimePickerBase { const picker = UIDatePicker.new(); picker.datePickerMode = UIDatePickerMode.Time; if (SUPPORT_DATE_PICKER_STYLE) { - picker.preferredDatePickerStyle = DEFAULT_DATE_PICKER_STYLE; + picker.preferredDatePickerStyle = this.iosPreferredDatePickerStyle; } return picker; }