chore(core): monorepo, esm targeting, improved management (#8707)

packages/core/ui/date-picker/date-picker-common.ts

@@ -0,0 +1,62 @@
+import { DatePicker as DatePickerDefinition } from '.';
+import { View, CSSType } from '../core/view';
+import { Property } from '../core/properties';
+
+const defaultDate = new Date();
+const dateComparer = (x: Date, y: Date): boolean => x <= y && x >= y;
+
+@CSSType('DatePicker')
+export class DatePickerBase extends View implements DatePickerDefinition {
+	public year: number;
+	public month: number;
+	public day: number;
+	public maxDate: Date;
+	public minDate: Date;
+	public date: Date;
+}
+
+DatePickerBase.prototype.recycleNativeView = 'auto';
+
+export const yearProperty = new Property<DatePickerBase, number>({
+	name: 'year',
+	defaultValue: defaultDate.getFullYear(),
+	valueConverter: (v) => parseInt(v),
+});
+yearProperty.register(DatePickerBase);
+
+export const monthProperty = new Property<DatePickerBase, number>({
+	name: 'month',
+	defaultValue: defaultDate.getMonth() + 1,
+	valueConverter: (v) => parseInt(v),
+});
+monthProperty.register(DatePickerBase);
+
+export const dayProperty = new Property<DatePickerBase, number>({
+	name: 'day',
+	defaultValue: defaultDate.getDate(),
+	valueConverter: (v) => parseInt(v),
+});
+dayProperty.register(DatePickerBase);
+
+// TODO: Make CoercibleProperties
+export const maxDateProperty = new Property<DatePickerBase, Date>({
+	name: 'maxDate',
+	equalityComparer: dateComparer,
+	valueConverter: (v) => new Date(v),
+});
+maxDateProperty.register(DatePickerBase);
+
+export const minDateProperty = new Property<DatePickerBase, Date>({
+	name: 'minDate',
+	equalityComparer: dateComparer,
+	valueConverter: (v) => new Date(v),
+});
+minDateProperty.register(DatePickerBase);
+
+export const dateProperty = new Property<DatePickerBase, Date>({
+	name: 'date',
+	defaultValue: defaultDate,
+	equalityComparer: dateComparer,
+	valueConverter: (v) => new Date(v),
+});
+dateProperty.register(DatePickerBase);

packages/core/ui/date-picker/index.android.ts

@@ -0,0 +1,124 @@
+import { DatePickerBase, yearProperty, monthProperty, dayProperty, dateProperty, maxDateProperty, minDateProperty } from './date-picker-common';
+
+export * from './date-picker-common';
+
+interface DateChangedListener {
+	new (owner: DatePicker): android.widget.DatePicker.OnDateChangedListener;
+}
+
+let DateChangedListener: DateChangedListener;
+
+function initializeDateChangedListener(): void {
+	if (DateChangedListener) {
+		return;
+	}
+
+	@NativeClass
+	@Interfaces([android.widget.DatePicker.OnDateChangedListener])
+	class DateChangedListenerImpl extends java.lang.Object implements android.widget.DatePicker.OnDateChangedListener {
+		constructor(public owner: DatePicker) {
+			super();
+
+			return global.__native(this);
+		}
+
+		onDateChanged(picker: android.widget.DatePicker, year: number, month: number, day: number) {
+			const owner = this.owner;
+			let dateChanged = false;
+			if (year !== owner.year) {
+				yearProperty.nativeValueChange(owner, year);
+				dateChanged = true;
+			}
+
+			if (month !== owner.month - 1) {
+				monthProperty.nativeValueChange(owner, month + 1);
+				dateChanged = true;
+			}
+
+			if (day !== owner.day) {
+				dayProperty.nativeValueChange(owner, day);
+				dateChanged = true;
+			}
+
+			if (dateChanged) {
+				dateProperty.nativeValueChange(owner, new Date(year, month, day));
+			}
+		}
+	}
+
+	DateChangedListener = DateChangedListenerImpl;
+}
+
+export class DatePicker extends DatePickerBase {
+	nativeViewProtected: android.widget.DatePicker;
+
+	public createNativeView() {
+		const picker = new android.widget.DatePicker(this._context);
+		picker.setCalendarViewShown(false);
+
+		return picker;
+	}
+
+	public initNativeView(): void {
+		super.initNativeView();
+		initializeDateChangedListener();
+		const nativeView = this.nativeViewProtected;
+		const listener = new DateChangedListener(this);
+		nativeView.init(this.year, this.month - 1, this.day, listener);
+		(<any>nativeView).listener = listener;
+	}
+
+	public disposeNativeView() {
+		(<any>this.nativeViewProtected).listener.owner = null;
+		super.disposeNativeView();
+	}
+
+	private updateNativeDate(): void {
+		const nativeView = this.nativeViewProtected;
+		const year = typeof this.year === 'number' ? this.year : nativeView.getYear();
+		const month = typeof this.month === 'number' ? this.month - 1 : nativeView.getMonth();
+		const day = typeof this.day === 'number' ? this.day : nativeView.getDayOfMonth();
+		this.date = new Date(year, month, day);
+	}
+
+	[yearProperty.setNative](value: number) {
+		if (this.nativeViewProtected.getYear() !== value) {
+			this.updateNativeDate();
+		}
+	}
+
+	[monthProperty.setNative](value: number) {
+		if (this.nativeViewProtected.getMonth() !== value - 1) {
+			this.updateNativeDate();
+		}
+	}
+
+	[dayProperty.setNative](value: number) {
+		if (this.nativeViewProtected.getDayOfMonth() !== value) {
+			this.updateNativeDate();
+		}
+	}
+
+	[dateProperty.setNative](value: Date) {
+		const nativeView = this.nativeViewProtected;
+		if (nativeView.getDayOfMonth() !== value.getDate() || nativeView.getMonth() !== value.getMonth() || nativeView.getYear() !== value.getFullYear()) {
+			nativeView.updateDate(value.getFullYear(), value.getMonth(), value.getDate());
+		}
+	}
+
+	[maxDateProperty.getDefault](): number {
+		return this.nativeViewProtected.getMaxDate();
+	}
+	[maxDateProperty.setNative](value: Date | number) {
+		const newValue = value instanceof Date ? value.getTime() : value;
+		this.nativeViewProtected.setMaxDate(newValue);
+	}
+
+	[minDateProperty.getDefault](): number {
+		return this.nativeViewProtected.getMinDate();
+	}
+	[minDateProperty.setNative](value: Date | number) {
+		const newValue = value instanceof Date ? value.getTime() : value;
+		this.nativeViewProtected.setMinDate(newValue);
+	}
+}

packages/core/ui/date-picker/index.d.ts

@@ -0,0 +1,54 @@
+import { View } from '../core/view';
+import { Property } from '../core/properties';
+
+export const yearProperty: Property<DatePicker, number>;
+export const monthProperty: Property<DatePicker, number>;
+export const dayProperty: Property<DatePicker, number>;
+export const dateProperty: Property<DatePicker, Date>;
+export const maxDate: Property<DatePicker, Date>;
+export const minDate: Property<DatePicker, Date>;
+
+/**
+ * Represents an date picker.
+ */
+export class DatePicker extends View {
+	/**
+	 * Gets the native [android.widget.DatePicker](http://developer.android.com/reference/android/widget/DatePicker.html) that represents the user interface for this component. Valid only when running on Android OS.
+	 */
+	android: any /* android.widget.DatePicker */;
+
+	/**
+	 * Gets the native iOS [UIDatePicker](http://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIDatePicker_Class/index.html) that represents the user interface for this component. Valid only when running on iOS.
+	 */
+	ios: any /* UIDatePicker */;
+
+	/**
+	 * Gets or sets the year.
+	 */
+	year: number;
+
+	/**
+	 * Gets or sets the month. The months start from 1.
+	 */
+	month: number;
+
+	/**
+	 * Gets or sets the day. The days start from 1.
+	 */
+	day: number;
+
+	/**
+	 * Gets or sets the entire date.
+	 */
+	date: Date;
+
+	/**
+	 * Gets or sets the max date.
+	 */
+	maxDate: Date;
+
+	/**
+	 * Gets or sets the min date.
+	 */
+	minDate: Date;
+}

packages/core/ui/date-picker/index.ios.ts

@@ -0,0 +1,128 @@
+import { DatePickerBase, yearProperty, monthProperty, dayProperty, dateProperty, maxDateProperty, minDateProperty } from './date-picker-common';
+import { colorProperty } from '../styling/style-properties';
+import { Color } from '../../color';
+
+export * from './date-picker-common';
+
+export class DatePicker extends DatePickerBase {
+	private _changeHandler: NSObject;
+	public nativeViewProtected: UIDatePicker;
+
+	public createNativeView() {
+		const picker = UIDatePicker.new();
+		picker.datePickerMode = UIDatePickerMode.Date;
+
+		return picker;
+	}
+
+	public initNativeView(): void {
+		super.initNativeView();
+		const nativeView = this.nativeViewProtected;
+		this._changeHandler = UIDatePickerChangeHandlerImpl.initWithOwner(new WeakRef(this));
+		nativeView.addTargetActionForControlEvents(this._changeHandler, 'valueChanged', UIControlEvents.ValueChanged);
+	}
+
+	public disposeNativeView() {
+		this._changeHandler = null;
+		super.disposeNativeView();
+	}
+
+	get ios(): UIDatePicker {
+		return this.nativeViewProtected;
+	}
+
+	[yearProperty.setNative](value: number) {
+		this.date = new Date(value, this.month - 1, this.day);
+	}
+
+	[monthProperty.setNative](value: number) {
+		this.date = new Date(this.year, value - 1, this.day);
+	}
+
+	[dayProperty.setNative](value: number) {
+		this.date = new Date(this.year, this.month - 1, value);
+	}
+
+	[dateProperty.setNative](value: Date) {
+		const picker = this.nativeViewProtected;
+		const comps = NSCalendar.currentCalendar.componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, picker.date);
+		comps.year = value.getFullYear();
+		comps.month = value.getMonth() + 1;
+		comps.day = value.getDate();
+		this.year = comps.year;
+		this.month = comps.month;
+		this.day = comps.day;
+		picker.setDateAnimated(NSCalendar.currentCalendar.dateFromComponents(comps), false);
+	}
+
+	[maxDateProperty.getDefault](): Date {
+		return this.nativeViewProtected.maximumDate;
+	}
+	[maxDateProperty.setNative](value: Date) {
+		const picker = this.nativeViewProtected;
+		const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
+		picker.maximumDate = <any>nsDate;
+	}
+
+	[minDateProperty.getDefault](): Date {
+		return this.nativeViewProtected.minimumDate;
+	}
+	[minDateProperty.setNative](value: Date) {
+		const picker = this.nativeViewProtected;
+		const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
+		picker.minimumDate = <any>nsDate;
+	}
+
+	[colorProperty.getDefault](): UIColor {
+		return this.nativeViewProtected.valueForKey('textColor');
+	}
+	[colorProperty.setNative](value: Color | UIColor) {
+		const picker = this.nativeViewProtected;
+		picker.setValueForKey(value instanceof Color ? value.ios : value, 'textColor');
+	}
+}
+
+@NativeClass
+class UIDatePickerChangeHandlerImpl extends NSObject {
+	private _owner: WeakRef<DatePicker>;
+
+	public static initWithOwner(owner: WeakRef<DatePicker>): UIDatePickerChangeHandlerImpl {
+		const impl = <UIDatePickerChangeHandlerImpl>UIDatePickerChangeHandlerImpl.new();
+		impl._owner = owner;
+
+		return impl;
+	}
+
+	public valueChanged(sender: UIDatePicker) {
+		const comps = NSCalendar.currentCalendar.componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay, sender.date);
+
+		const owner = this._owner.get();
+		if (!owner) {
+			return;
+		}
+
+		let dateChanged = false;
+		if (comps.year !== owner.year) {
+			yearProperty.nativeValueChange(owner, comps.year);
+			dateChanged = true;
+		}
+
+		if (comps.month !== owner.month) {
+			monthProperty.nativeValueChange(owner, comps.month);
+			dateChanged = true;
+		}
+
+		if (comps.day !== owner.day) {
+			dayProperty.nativeValueChange(owner, comps.day);
+			dateChanged = true;
+		}
+
+		if (dateChanged) {
+			dateProperty.nativeValueChange(owner, new Date(comps.year, comps.month - 1, comps.day));
+		}
+	}
+
+	public static ObjCExposedMethods = {
+		valueChanged: { returns: interop.types.void, params: [UIDatePicker] },
+	};
+}