diff --git a/README.md b/README.md
index b3cbf76..4a6ec51 100644
--- a/README.md
+++ b/README.md
@@ -122,7 +122,8 @@ options conform to the following interface:
```ts
export interface PickerOptions {
title?: string; // iOS ONLY: The title to display above the picker, default hidden.
- theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark and prominent.
+ theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark, prominent and overlay.
+ overlayAlpha?: number; // iOS ONLY: when theme is 'overlay', available options: 0.0 to 1.0
maxDate?: Date;
minDate?: Date;
startingHour?: number; // Ignored on pickDate()
diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
index 096b716..c1aefdf 100644
--- a/demo/app/main-page.xml
+++ b/demo/app/main-page.xml
@@ -5,10 +5,11 @@
+
-
+
-
\ No newline at end of file
+
diff --git a/demo/app/main-view-model.ts b/demo/app/main-view-model.ts
index d08e3b2..d8c5045 100644
--- a/demo/app/main-view-model.ts
+++ b/demo/app/main-view-model.ts
@@ -17,7 +17,6 @@ export class HelloWorldModel extends Observable {
theme: "light",
startingDate: new Date('2018-11-17'),
maxDate: new Date(),
-
minDate: new Date('2018-09-19')
}).then((result:any) => {
if (result) {
@@ -41,7 +40,6 @@ export class HelloWorldModel extends Observable {
theme: "light",
startingDate: new Date('2018-11-17'),
maxDate: new Date(),
-
minDate: new Date('2018-09-19')
}).then((result:any) => {
if (result) {
@@ -53,7 +51,7 @@ export class HelloWorldModel extends Observable {
.catch((error) => {
console.log("Error: " + error);
});
- };
+ }
selectDateSpinner() {
this.modalDatetimepicker.pickDate({
@@ -62,7 +60,25 @@ export class HelloWorldModel extends Observable {
startingDate: new Date('2018-11-17'),
datePickerMode: "spinner"
}).then((result:any) => {
+ if (result) {
+ this.set("date", "Date is: " + result.day + "-" + result.month + "-" + result.year);
+ } else {
+ this.set("date", false);
+ }
+ })
+ .catch((error) => {
+ console.log("Error: " + error);
+ });
+ }
+ selectDateOverlay() {
+ this.modalDatetimepicker.pickDate({
+ title: "Configurable Title",
+ theme: "overlay",
+ startingDate: new Date('2018-11-17'),
+ maxDate: new Date(),
+ minDate: new Date('2018-09-19')
+ }).then((result:any) => {
if (result) {
this.set("date", "Date is: " + result.day + "-" + result.month + "-" + result.year);
} else {
diff --git a/src/index.d.ts b/src/index.d.ts
index b26e505..4e90b5a 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -14,6 +14,7 @@ export interface PickerOptions {
type?: string;
title?: string;
theme?: string;
+ overlayAlpha?: number;
maxDate?: Date;
minDate?: Date;
startingDate?: Date;
diff --git a/src/modal-datetimepicker.ios.ts b/src/modal-datetimepicker.ios.ts
index 96a9b01..5fa4cdf 100644
--- a/src/modal-datetimepicker.ios.ts
+++ b/src/modal-datetimepicker.ios.ts
@@ -35,7 +35,8 @@ const buttonHandler = ButtonHandler.new();
let myResolve;
let window: UIWindow;
-let effectView: UIVisualEffectView; // this view blurs the background
+let effectView: UIVisualEffectView; // this view potentially blurs the background
+let overlayView: UIView; // this view potentially overlays the background
let pickerHolderView: UIView; // this is the view that holds the picker
let bottomContentContainer: UIView; // this view holds the picker and the action buttons.
// let topContentContainer: UIView; // this is the view the holds the title.
@@ -62,6 +63,7 @@ export class ModalDatetimepicker {
myResolve = resolve;
if (!options.type) options.type = "date";
if (!options.theme) options.theme = "dark";
+ if (!options.overlayAlpha) options.overlayAlpha = 0.7;
let startingDate = new Date();
if (options.type === "date") {
@@ -93,51 +95,71 @@ export class ModalDatetimepicker {
window = UIApplication.sharedApplication.keyWindow;
const containerBounds = window.bounds;
- // blur the background of the application.
- effectView = UIVisualEffectView.alloc().init();
- effectView.frame = CGRectMake(
- containerBounds.origin.x,
- containerBounds.origin.y,
- containerBounds.size.width,
- containerBounds.size.height + 20
- );
- effectView.autoresizingMask =
- UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
- window.addSubview(effectView);
- window.bringSubviewToFront(effectView);
- UIView.animateWithDurationAnimations(0.4, () => {
- let theme = UIBlurEffectStyle.Light;
- switch (options.theme) {
- case "extralight":
- theme = UIBlurEffectStyle.ExtraLight;
- break;
- case "light":
- theme = UIBlurEffectStyle.Light;
- break;
- case "regular":
- theme = UIBlurEffectStyle.Regular;
- break;
- case "dark":
- theme = UIBlurEffectStyle.Dark;
- break;
- case "extradark":
- theme = UIBlurEffectStyle.ExtraDark;
- break;
- case "prominent":
- theme = UIBlurEffectStyle.Prominent;
- break;
- default:
- theme = UIBlurEffectStyle.Light;
- break;
- }
+ if (options.theme === "overlay") {
+ // overlay the background of the application.
+ overlayView = UIView.alloc().init();
+ overlayView.frame = CGRectMake(
+ containerBounds.origin.x,
+ containerBounds.origin.y,
+ containerBounds.size.width,
+ containerBounds.size.height + 20
+ );
+ overlayView.autoresizingMask =
+ UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
+ window.addSubview(overlayView);
+ window.bringSubviewToFront(overlayView);
- // dont display if theme is none
- if (options.theme !== "none") {
- effectView.effect = UIBlurEffect.effectWithStyle(theme);
- } else {
- effectView.effect = null;
- }
- });
+ UIView.animateWithDurationAnimations(0.4, () => {
+ overlayView.backgroundColor = UIColor.blackColor.colorWithAlphaComponent(
+ options.overlayAlpha
+ );
+ });
+ } else {
+ // blur the background of the application.
+ effectView = UIVisualEffectView.alloc().init();
+ effectView.frame = CGRectMake(
+ containerBounds.origin.x,
+ containerBounds.origin.y,
+ containerBounds.size.width,
+ containerBounds.size.height + 20
+ );
+ effectView.autoresizingMask =
+ UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
+ window.addSubview(effectView);
+ window.bringSubviewToFront(effectView);
+ UIView.animateWithDurationAnimations(0.4, () => {
+ let theme = UIBlurEffectStyle.Light;
+ switch (options.theme) {
+ case "extralight":
+ theme = UIBlurEffectStyle.ExtraLight;
+ break;
+ case "light":
+ theme = UIBlurEffectStyle.Light;
+ break;
+ case "regular":
+ theme = UIBlurEffectStyle.Regular;
+ break;
+ case "dark":
+ theme = UIBlurEffectStyle.Dark;
+ break;
+ case "extradark":
+ theme = UIBlurEffectStyle.ExtraDark;
+ break;
+ case "prominent":
+ theme = UIBlurEffectStyle.Prominent;
+ break;
+ default:
+ break;
+ }
+
+ // dont display if theme is none
+ if (options.theme !== "none") {
+ effectView.effect = UIBlurEffect.effectWithStyle(theme);
+ } else {
+ effectView.effect = null;
+ }
+ });
+ }
bottomContentContainer = UIView.alloc().init();
bottomContentContainer.frame = CGRectMake(
@@ -200,7 +222,8 @@ export class ModalDatetimepicker {
40
);
cancelButton.setTitleColorForState(
- (options.cancelLabelColor && options.cancelLabelColor.ios) || UIColor.whiteColor,
+ (options.cancelLabelColor && options.cancelLabelColor.ios) ||
+ UIColor.whiteColor,
UIControlState.Normal
);
cancelButton.titleLabel.font = UIFont.systemFontOfSize(18);
@@ -234,7 +257,8 @@ export class ModalDatetimepicker {
40
);
doneButton.setTitleColorForState(
- (options.doneLabelColor && options.doneLabelColor.ios) || UIColor.colorWithRedGreenBlueAlpha(0, 0.6, 1, 1),
+ (options.doneLabelColor && options.doneLabelColor.ios) ||
+ UIColor.colorWithRedGreenBlueAlpha(0, 0.6, 1, 1),
UIControlState.Normal
);
doneButton.titleLabel.font = UIFont.boldSystemFontOfSize(18);
@@ -291,7 +315,6 @@ export class ModalDatetimepicker {
window.addSubview(bottomContentContainer);
window.bringSubviewToFront(bottomContentContainer);
- // let animationOptions: UIViewAnimationOptions;
UIView.animateWithDurationDelayOptionsAnimationsCompletion(
0.4,
0,
@@ -308,16 +331,18 @@ export class ModalDatetimepicker {
titleLabel.alpha = 1;
}
},
- () => {
- // console.dir("animation completed");
- }
+ () => {}
);
});
}
- private labelFactory(text, color, shadow, size) {
+ private labelFactory(
+ text: string,
+ color: UIColor,
+ shadow: boolean,
+ size: number
+ ) {
window = UIApplication.sharedApplication.keyWindow;
- const containerBounds = window.bounds;
const label = UILabel.alloc().init();
label.text = text;
label.font = UIFont.boldSystemFontOfSize(size);
@@ -352,12 +377,17 @@ export class ModalDatetimepicker {
this.close(response);
}
- public close(response?) {
+ public close(response?: any) {
if (!response) response = false;
UIView.animateWithDurationAnimationsCompletion(
0.3,
() => {
- effectView.effect = null;
+ if (effectView) {
+ effectView.effect = null;
+ }
+ if (overlayView) {
+ overlayView.backgroundColor = UIColor.clearColor;
+ }
bottomContentContainer.transform = CGAffineTransformMakeTranslation(
0,
320
@@ -368,7 +398,12 @@ export class ModalDatetimepicker {
}
},
() => {
- effectView.removeFromSuperview();
+ if (effectView) {
+ effectView.removeFromSuperview();
+ }
+ if (overlayView) {
+ overlayView.removeFromSuperview();
+ }
bottomContentContainer.removeFromSuperview();
if (titleLabel) {
titleLabel.removeFromSuperview();
@@ -385,6 +420,7 @@ export interface PickerOptions {
type?: string;
title?: string;
theme?: string;
+ overlayAlpha?: number;
maxDate?: Date;
minDate?: Date;
startingDate?: Date;
diff --git a/src/package.json b/src/package.json
index f8f10d1..c5bca46 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,6 +1,6 @@
{
"name": "nativescript-modal-datetimepicker",
- "version": "1.1.12",
+ "version": "1.1.13",
"description": "A nice looking modal date time picker.",
"main": "modal-datetimepicker",
"typings": "index.d.ts",
@@ -75,6 +75,11 @@
"name": "Brad Martin",
"email": "bradwaynemartin@gmail.com",
"url": "https://github.com/bradmartin"
+ },
+ {
+ "name": "Luke Curran",
+ "email": "luke@pepper.me",
+ "url": "https://github.com/MCurran16"
}
],
"repository": {