updated to support append-to-body

Gillardo · Jul 1, 2018 · e6dcebb · e6dcebb
1 parent 4b107fc
commit e6dcebb
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -48,7 +48,7 @@ Since i dont really like the style of the ngx-bootstrap datePicker, you can over
 This css also overrides the glyphicon icons that are no longer used in bootstrap 4.
 
 ```
-datetime-popup > .dropdown .glyphicon {
+datetime-popup.dropdown .glyphicon {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;
     font-size: inherit;
@@ -57,46 +57,46 @@ datetime-popup > .dropdown .glyphicon {
     -moz-osx-font-smoothing: grayscale;
 }
 
-datetime-popup > .dropdown timepicker {
+datetime-popup.dropdown timepicker {
     display: flex;
     justify-content: center;
 }
 
-datetime-popup > .dropdown .bg-faded {
+datetime-popup.dropdown .bg-faded {
     border:0;
     background-color: #fff;
 }
 
-datetime-popup > .dropdown datepicker button {
+datetime-popup.dropdown datepicker button {
     border:0;
     background-color: #fff;
 }
 
-datetime-popup > .dropdown datepicker button.active {
+datetime-popup.dropdown datepicker button.active {
     background-color: #ddd;
 }
 
-datetime-popup > .dropdown .glyphicon.glyphicon-remove-circle:before {
+datetime-popup.dropdown .glyphicon.glyphicon-remove-circle:before {
     content: "\f05c";
 }
 
-datetime-popup > .dropdown .glyphicon.glyphicon-chevron-down:before {
+datetime-popup.dropdown .glyphicon.glyphicon-chevron-down:before {
     content: "\f078";
 }
 
-datetime-popup > .dropdown .glyphicon.glyphicon-chevron-up:before {
+datetime-popup.dropdown .glyphicon.glyphicon-chevron-up:before {
     content: "\f077";
 }
 
-datetime-popup > .dropdown .glyphicon.glyphicon-chevron-left:before {
+datetime-popup.dropdown .glyphicon.glyphicon-chevron-left:before {
     content: "\f053";
 }
 
-datetime-popup > .dropdown .glyphicon.glyphicon-chevron-right:before {
+datetime-popup.dropdown .glyphicon.glyphicon-chevron-right:before {
     content: "\f054";
 }
 
-datetime-popup > .dropdown .glyphicon.hidden {
+datetime-popup.dropdown .glyphicon.hidden {
     display: none !important;
 }
 ```

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap-datetime-popup",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Datetime popup using ngx-bootstrap",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",

diff --git a/src/components/datetime-popup/datetime-popup.component.html b/src/components/datetime-popup/datetime-popup.component.html
@@ -1,5 +1,5 @@
-<div class="dropdown" [ngClass]="{ 'show': showPopup === true }" (offClick)="offClick()">
-  <ul class="dropdown-menu" role="menu" [ngClass]="{ 'show': showPopup === true }">
+<div dropdown #dropdown="bs-dropdown" container="body" (isOpenChange)="onOpenChange($event)" (onHidden)="onHidden()">
+  <ul class="datetime-popup dropdown-menu" role="menu" *dropdownMenu (offClick)="onClose()">
     <li class="my-2 mx-2">
       <datepicker *ngIf="showDate"
                   [(ngModel)]="localValue"
@@ -17,15 +17,18 @@
     </li>
     <li class="mx-2 mb-2">
       <span class="btn-group pull-left">
-          <button type="button" (click)="onNow()"
+          <button type="button"
+                  (click)="onNow()"
                   *ngIf="nowButton.show"
                   [ngClass]="nowButton.cssClass">{{ nowButton.label }}</button>
-          <button type="button" (click)="onClear()"
+          <button type="button"
+                  (click)="onClear()"
                   *ngIf="clearButton.show"
                   [ngClass]="clearButton.cssClass">{{ clearButton.label }}</button>
       </span>
       <span class="btn-group pull-right">
-          <button type="button" (click)="offClick()"
+          <button type="button"
+                  (click)="onClose()"
                   *ngIf="closeButton.show"
                   [ngClass]="closeButton.cssClass">{{ closeButton.label }}</button>
       </span>

diff --git a/src/components/datetime-popup/datetime-popup.component.ts b/src/components/datetime-popup/datetime-popup.component.ts
@@ -1,5 +1,14 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges, OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import { IDatetimePopupButtonOptions } from '../../interfaces/button-options';
+import { BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 
 @Component({
   selector: 'datetime-popup',
@@ -8,6 +17,9 @@ import { IDatetimePopupButtonOptions } from '../../interfaces/button-options';
 
 export class DatetimePopupComponent implements OnChanges {
 
+  @ViewChild('dropdown')
+  public dropdown: BsDropdownDirective;
+
   @Input()
   public value: Date;
 
@@ -54,6 +66,11 @@ export class DatetimePopupComponent implements OnChanges {
   public closeButton: IDatetimePopupButtonOptions;
 
   public localValue: Date = null;
+  public isOpening = false;
+
+  constructor(private elementRef: ElementRef) {
+
+  }
 
   public ngOnChanges(changes: any) {
     if (!this.nowButton) {
@@ -77,9 +94,23 @@ export class DatetimePopupComponent implements OnChanges {
     } else if (this.value) {
       this.localValue = this.value;
     }
+
+    // toggle if open
+    if (changes.showPopup) {
+      if (changes.showPopup.currentValue === true) {
+        this.dropdown.show();
+      } else {
+        this.dropdown.hide();
+      }
+    }
   }
 
-  public offClick() {
+  public onOpenChange() {
+    this.isOpening = true;
+    setTimeout(() => this.isOpening = false, 250);
+  }
+
+  public onHidden() {
     this.showPopup = false;
     this.showPopupChange.emit(false);
   }
@@ -93,12 +124,20 @@ export class DatetimePopupComponent implements OnChanges {
     this.valueChange.emit(null);
   }
 
+  public onClose() {
+    this.showPopup = false;
+    this.showPopupChange.emit(false);
+  }
+
   public onPickerChange() {
+    if (this.isOpening === true) {
+      return;
+    }
+
     this.valueChange.emit(this.localValue);
 
-    // close when value changed if only using date
     if (this.showDate === true && this.showTime === false) {
-      this.offClick();
+      this.onHidden();
     }
   }
 }
diff --git a/src/datetime-popup.module.ts b/src/datetime-popup.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DatepickerModule, DatepickerConfig } from 'ngx-bootstrap/datepicker';
 import { TimepickerModule, TimepickerConfig, TimepickerActions } from 'ngx-bootstrap/timepicker';
+import { BsDropdownModule, BsDropdownConfig, BsDropdownState } from 'ngx-bootstrap/dropdown';
 
 import { DatetimePopupComponent, OffClickDirective } from './components';
 
@@ -11,7 +12,8 @@ import { DatetimePopupComponent, OffClickDirective } from './components';
     CommonModule,
     FormsModule,
     DatepickerModule,
-    TimepickerModule
+    TimepickerModule,
+    BsDropdownModule
   ],
   declarations: [
     DatetimePopupComponent,
@@ -26,7 +28,9 @@ import { DatetimePopupComponent, OffClickDirective } from './components';
   providers: [
     DatepickerConfig,
     TimepickerConfig,
-    TimepickerActions
+    TimepickerActions,
+    BsDropdownConfig,
+    BsDropdownState
   ]
 })