From 11fd7e0badbf01bf427b9cfb577a1b3a45cbeee7 Mon Sep 17 00:00:00 2001 From: Kevin Beckers Date: Tue, 16 Oct 2018 21:13:23 +0200 Subject: [PATCH] Added IOS theme's, Added hide option for title and blur --- README.md | 4 +- demo/app/main-view-model.ts | 8 +-- src/modal-datetimepicker.ios.ts | 108 ++++++++++++++++++++------------ 3 files changed, 74 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index b2062f8..3d393de 100644 --- a/README.md +++ b/README.md @@ -117,8 +117,8 @@ options conform to the following interface: ```ts export interface PickerOptions { - title?: string; // iOS ONLY: The title to display above the picker, defaults to "Choose A Time" or "Choose A Date" - theme?: string; // iOS ONLY: light for a light blurry effect, dark for a dark blurry effect - defaults to dark + 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. maxDate?: Date; minDate?: Date; startingHour?: number; // Ignored on pickDate() diff --git a/demo/app/main-view-model.ts b/demo/app/main-view-model.ts index 8c9a1ec..e7dc6ef 100644 --- a/demo/app/main-view-model.ts +++ b/demo/app/main-view-model.ts @@ -18,7 +18,7 @@ export class HelloWorldModel extends Observable { startingDate: new Date('2017-10-01'), maxDate: new Date(), minDate: new Date('2017-09-19') - }).then((result:any) => { + }).then((result: any) => { if (result) { this.set("date", "Date is: " + result.day + "-" + result.month + "-" + result.year); } else { @@ -28,7 +28,7 @@ export class HelloWorldModel extends Observable { .catch((error) => { console.log("Error: " + error); }); - }; + } selectTime() { this.modalDatetimepicker.pickTime({ @@ -41,7 +41,7 @@ export class HelloWorldModel extends Observable { hour: 15, minute: 30 } - }).then((result:any) => { + }).then((result: any) => { if (result) { this.set("time", "Time is: " + result.hour + ":" + result.minute); } else { @@ -51,5 +51,5 @@ export class HelloWorldModel extends Observable { .catch((error) => { console.log("Error: " + error); }); - }; + } } diff --git a/src/modal-datetimepicker.ios.ts b/src/modal-datetimepicker.ios.ts index f336051..5cb439b 100644 --- a/src/modal-datetimepicker.ios.ts +++ b/src/modal-datetimepicker.ios.ts @@ -61,13 +61,6 @@ export class ModalDatetimepicker { myResolve = resolve; if (!options.type) options.type = "date"; if (!options.theme) options.theme = "dark"; - if (!options.title) { - if (options.type === "date") { - options.title = "Choose A Date"; - } else { - options.title = "Choose A Time"; - } - } let startingDate = new Date(); if (options.type === "date") { @@ -83,7 +76,10 @@ export class ModalDatetimepicker { if (options.startingHour !== undefined && options.startingHour >= 0) { startingDate.setHours(options.startingHour); } - if (options.startingMinute !== undefined && options.startingMinute >= 0) { + if ( + options.startingMinute !== undefined && + options.startingMinute >= 0 + ) { startingDate.setMinutes(options.startingMinute); } } @@ -109,11 +105,37 @@ export class ModalDatetimepicker { window.addSubview(effectView); window.bringSubviewToFront(effectView); UIView.animateWithDurationAnimations(0.4, () => { - effectView.effect = UIBlurEffect.effectWithStyle( - options.theme === "light" - ? UIBlurEffectStyle.Light - : UIBlurEffectStyle.Dark - ); + 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; + } + + // dont display if theme is none + if (options.theme !== "none") { + effectView.effect = UIBlurEffect.effectWithStyle(theme); + } else { + effectView.effect = null; + } }); bottomContentContainer = UIView.alloc().init(); @@ -237,32 +259,34 @@ export class ModalDatetimepicker { bottomContentContainer.addSubview(pickerHolderView); bottomContentContainer.bringSubviewToFront(pickerHolderView); - titleLabel = this.labelFactory( - options.title, - UIColor.whiteColor, - true, - 25 - ); - titleLabel.textAlignment = NSTextAlignment.Center; - titleLabel.frame = CGRectMake( - 0, - 20, - containerBounds.size.width, - containerBounds.size.height - 360 - ); - - titleLabel.transform = CGAffineTransformMakeScale(0.8, 0.8); - titleLabel.adjustsFontForContentSizeCategory = true; - titleLabel.adjustsFontSizeToFitWidth = true; - titleLabel.layer.masksToBounds = false; - titleLabel.alpha = 0; - titleLabel.autoresizingMask = - UIViewAutoresizing.FlexibleHeight | - UIViewAutoresizing.FlexibleTopMargin | - UIViewAutoresizing.FlexibleWidth; + // Only if title is set + if (options.title) { + titleLabel = this.labelFactory( + options.title, + UIColor.whiteColor, + true, + 25 + ); + titleLabel.textAlignment = NSTextAlignment.Center; + titleLabel.frame = CGRectMake( + 0, + 20, + containerBounds.size.width, + containerBounds.size.height - 360 + ); - window.addSubview(titleLabel); - window.bringSubviewToFront(titleLabel); + titleLabel.transform = CGAffineTransformMakeScale(0.8, 0.8); + titleLabel.adjustsFontForContentSizeCategory = true; + titleLabel.adjustsFontSizeToFitWidth = true; + titleLabel.layer.masksToBounds = false; + titleLabel.alpha = 0; + titleLabel.autoresizingMask = + UIViewAutoresizing.FlexibleHeight | + UIViewAutoresizing.FlexibleTopMargin | + UIViewAutoresizing.FlexibleWidth; + window.addSubview(titleLabel); + window.bringSubviewToFront(titleLabel); + } window.addSubview(bottomContentContainer); window.bringSubviewToFront(bottomContentContainer); @@ -276,8 +300,12 @@ export class ModalDatetimepicker { 0, 0 ); - titleLabel.transform = CGAffineTransformMakeScale(1, 1); - titleLabel.alpha = 1; + + // Only if title is set + if (options.title) { + titleLabel.transform = CGAffineTransformMakeScale(1, 1); + titleLabel.alpha = 1; + } }, () => { // console.dir("animation completed");