Merge pull request #50 from MCurran16/overlay-theme-ios

Add overlay "theme" for iOS
davecoffin · Apr 3, 2019 · baab8fc · baab8fc
2 parents 69a309c + 61bc136
commit baab8fc
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 66 deletions.
diff --git 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
@@ -5,10 +5,11 @@
             <Button text="Pick a Date" tap="{{ selectDate }}" style="margin-top: 100;" class="btn btn-primary btn-active"/>
             <Button text="Pick a Date (spinner mode)" tap="{{ selectDateSpinner }}" style="margin-top: 20;" class="btn btn-primary btn-active"/>
             <Button text="Pick a Time" tap="{{ selectTime }}" style="margin-top: 20; margin-bottom: 100;" class="btn btn-primary btn-active"/>
+            <Button text="Pick a Time (Overlay)" tap="{{ selectDateOverlay }}" style="margin-top: 20; margin-bottom: 100;" class="btn btn-primary btn-active"/>
             <Button text="Close programatically" tap="{{ closeProgramatically }}" style="margin-top: 20; margin-bottom: 100;" class="btn btn-primary btn-active"/>
             <Label visibility="{{ date ? 'visible' : 'collapsed' }}" text="{{date}}" style="color: white; text-align: center; font-size: 20; font-weight: bold;" />
             <Label visibility="{{ time ? 'visible' : 'collapsed' }}" text="{{time}}" style="color: white; text-align: center; font-size: 20; font-weight: bold;" />
-        </StackLayout>    
+        </StackLayout>
 
     </GridLayout>
-</Page>
+</Page>
diff --git 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(<PickerOptions>{
@@ -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(<PickerOptions>{
+            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
@@ -12,6 +12,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
@@ -1,8 +1,3 @@
-import * as application from "tns-core-modules/application";
-import * as frame from "tns-core-modules/ui/frame";
-import { Label } from "tns-core-modules/ui/label/";
-import { Page } from "tns-core-modules/ui/page";
-
 class ButtonHandler extends NSObject {
   public close(nativeButton: UIButton, nativeEvent: _UIEvent) {
     picker.close();
@@ -34,7 +29,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.
@@ -61,6 +57,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") {
@@ -92,51 +89,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(
@@ -290,7 +307,6 @@ export class ModalDatetimepicker {
 
       window.addSubview(bottomContentContainer);
       window.bringSubviewToFront(bottomContentContainer);
-      //   let animationOptions: UIViewAnimationOptions;
       UIView.animateWithDurationDelayOptionsAnimationsCompletion(
         0.4,
         0,
@@ -307,16 +323,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);
@@ -351,12 +369,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
@@ -367,7 +390,12 @@ export class ModalDatetimepicker {
         }
       },
       () => {
-        effectView.removeFromSuperview();
+        if (effectView) {
+          effectView.removeFromSuperview();
+        }
+        if (overlayView) {
+          overlayView.removeFromSuperview();
+        }
         bottomContentContainer.removeFromSuperview();
         if (titleLabel) {
           titleLabel.removeFromSuperview();
@@ -384,6 +412,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
@@ -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": "[email protected]",
       "url": "https://github.com/bradmartin"
+    },
+    {
+      "name": "Luke Curran",
+      "email": "[email protected]",
+      "url": "https://github.com/MCurran16"
     }
   ],
   "repository": {