Skip to content

fix(ios): preferredDatePickerStyle property #8899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 26, 2020
Merged

fix(ios): preferredDatePickerStyle property #8899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21d56cf
fix(ios): preferredDatePickerStyle property
asharghi Sep 25, 2020
4f1a51f
fix(ios): datetime preferredDatePickerStyle
asharghi Sep 25, 2020
118c58d
fix(ios): iosPreferredDatePickerStyle parseInt
asharghi Sep 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/core/ui/date-picker/date-picker-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export class DatePickerBase extends View implements DatePickerDefinition {
public maxDate: Date;
public minDate: Date;
public date: Date;
public iosPreferredDatePickerStyle: number;
}

DatePickerBase.prototype.recycleNativeView = 'auto';
Expand Down Expand Up @@ -60,3 +61,10 @@ export const dateProperty = new Property<DatePickerBase, Date>({
valueConverter: (v) => new Date(v),
});
dateProperty.register(DatePickerBase);

export const iosPreferredDatePickerStyleProperty = new Property<DatePickerBase, number>({
name: 'iosPreferredDatePickerStyle',
defaultValue: 0,
valueConverter: (v) => parseInt(v),
});
iosPreferredDatePickerStyleProperty.register(DatePickerBase);
11 changes: 11 additions & 0 deletions packages/core/ui/date-picker/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const dayProperty: Property<DatePicker, number>;
export const dateProperty: Property<DatePicker, Date>;
export const maxDate: Property<DatePicker, Date>;
export const minDate: Property<DatePicker, Date>;
export const iosPreferredDatePickerStyleProperty: Property<DatePicker, number>;

/**
* Represents an date picker.
Expand Down Expand Up @@ -51,4 +52,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;
}
7 changes: 3 additions & 4 deletions packages/core/ui/date-picker/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ 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;
Expand All @@ -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;
}
Expand Down
12 changes: 12 additions & 0 deletions packages/core/ui/time-picker/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,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<TimePicker, number>;
Expand All @@ -66,3 +76,5 @@ export const minMinuteProperty: Property<TimePicker, number>;

export const timeProperty: Property<TimePicker, Date>;
export const minuteIntervalProperty: Property<TimePicker, number>;

export const iosPreferredDatePickerStyleProperty: Property<TimePicker, number>;
7 changes: 3 additions & 4 deletions packages/core/ui/time-picker/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ 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();
Expand Down Expand Up @@ -36,7 +35,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;
}
Expand Down
8 changes: 8 additions & 0 deletions packages/core/ui/time-picker/time-picker-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export abstract class TimePickerBase extends View implements TimePickerDefinitio
public maxHour: number;
public minMinute: number;
public maxMinute: number;
public iosPreferredDatePickerStyle: number;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be iosPreferredTimePickerStyle instead of iosPreferredDatePickerStyle. Because this is the time-picker component and not the date-picker component

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's named after what Apple has called it https://developer.apple.com/documentation/uikit/uidatepicker/3526124-preferreddatepickerstyle

Copy link

@DepickereSven DepickereSven Oct 25, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, then I understand it. First I thought huh is this a mistake? Because it's a time picker component and not a date picker component. But now I understand why it's that name. Thanks for explaining

}

TimePickerBase.prototype.recycleNativeView = 'auto';
Expand Down Expand Up @@ -204,3 +205,10 @@ export const timeProperty = new Property<TimePickerBase, Date>({
},
});
timeProperty.register(TimePickerBase);

export const iosPreferredDatePickerStyleProperty = new Property<TimePickerBase, number>({
name: 'iosPreferredDatePickerStyle',
defaultValue: 0,
valueConverter: (v) => parseInt(v),
});
iosPreferredDatePickerStyleProperty.register(TimePickerBase);