remove scrollIntoActiveTime

SaeedDev94 · May 18, 2024 · 3398200 · 3398200
1 parent b6ac044
commit 3398200
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 53 deletions.
diff --git a/projects/ng-persian-datepicker/src/lib/ng-persian-datepicker.component.html b/projects/ng-persian-datepicker/src/lib/ng-persian-datepicker.component.html
@@ -186,11 +186,10 @@
              [style.border-top-color]="uiTheme.timeBorder"
              [style.border-bottom-color]="uiTheme.timeBorder">
           <div class="time-col hour-col">
-            <div class="item">
-              <div class="dp-btn disabled"
-                   [style.background-color]="uiTheme.disabledBackground"
-                   [style.color]="uiTheme.disabledText">
-                <span>--</span>
+            <div class="item"
+                 [style.border-bottom-color]="uiTheme.border">
+              <div class="dp-btn">
+                <span>{{ hour }}</span>
               </div>
             </div>
             <ng-container *ngIf="!timeMeridian">
@@ -253,20 +252,18 @@
                 </div>
               </div>
             </ng-container>
-            <div class="item">
-              <div class="dp-btn disabled"
-                   [style.background-color]="uiTheme.disabledBackground"
-                   [style.color]="uiTheme.disabledText">
-                <span>--</span>
+            <div class="item"
+                 [style.border-top-color]="uiTheme.border">
+              <div class="dp-btn">
+                <span>{{ hour }}</span>
               </div>
             </div>
           </div>
           <div class="time-col minute-col">
-            <div class="item">
-              <div class="dp-btn disabled"
-                   [style.background-color]="uiTheme.disabledBackground"
-                   [style.color]="uiTheme.disabledText">
-                <span>--</span>
+            <div class="item"
+                 [style.border-bottom-color]="uiTheme.border">
+              <div class="dp-btn">
+                <span>{{ minute }}</span>
               </div>
             </div>
             <div class="item"
@@ -291,21 +288,19 @@
                 <span>{{ i | number: '2.0' }}</span>
               </div>
             </div>
-            <div class="item">
-              <div class="dp-btn disabled"
-                   [style.background-color]="uiTheme.disabledBackground"
-                   [style.color]="uiTheme.disabledText">
-                <span>--</span>
+            <div class="item"
+                 [style.border-top-color]="uiTheme.border">
+              <div class="dp-btn">
+                <span>{{ minute }}</span>
               </div>
             </div>
           </div>
           <div *ngIf="timeShowSecond"
                class="time-col second-col">
-            <div class="item">
-              <div class="dp-btn disabled"
-                   [style.background-color]="uiTheme.disabledBackground"
-                   [style.color]="uiTheme.disabledText">
-                <span>--</span>
+            <div class="item"
+                 [style.border-bottom-color]="uiTheme.border">
+              <div class="dp-btn">
+                <span>{{ second }}</span>
               </div>
             </div>
             <div class="item"
@@ -330,11 +325,10 @@
                 <span>{{ i | number: '2.0' }}</span>
               </div>
             </div>
-            <div class="item">
-              <div class="dp-btn disabled"
-                   [style.background-color]="uiTheme.disabledBackground"
-                   [style.color]="uiTheme.disabledText">
-                <span>--</span>
+            <div class="item"
+                 [style.border-top-color]="uiTheme.border">
+              <div class="dp-btn">
+                <span>{{ second }}</span>
               </div>
             </div>
           </div>

diff --git a/projects/ng-persian-datepicker/src/lib/ng-persian-datepicker.component.scss b/projects/ng-persian-datepicker/src/lib/ng-persian-datepicker.component.scss
@@ -152,13 +152,20 @@
 
         .item {
           padding: 1px;
+          cursor: pointer;
 
           &:first-of-type {
             padding-top: 3px;
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            cursor: auto;
           }
 
           &:last-of-type {
             padding-bottom: 3px;
+            border-top-width: 1px;
+            border-top-style: solid;
+            cursor: auto;
           }
 
           .dp-btn {

diff --git a/projects/ng-persian-datepicker/src/lib/ng-persian-datepicker.component.ts b/projects/ng-persian-datepicker/src/lib/ng-persian-datepicker.component.ts
@@ -134,21 +134,18 @@ export class NgPersianDatepickerComponent implements OnInit, OnDestroy {
     this.timeEnable = value;
     if (!this.timeEnable && this.dateValueDefined()) this.onChangeSelectedDate(true);
     this.setTime();
-    this.scrollIntoActiveTime();
   }
 
   timeShowSecond: boolean = false;
   @Input('timeShowSecond')
   set _timeShowSecond(value: boolean) {
     this.timeShowSecond = value;
-    this.scrollIntoActiveTime();
   }
 
   timeMeridian: boolean = false;
   @Input('timeMeridian')
   set _timeMeridian(value: boolean) {
     this.timeMeridian = value;
-    this.scrollIntoActiveTime();
   }
 
   // ui
@@ -264,7 +261,6 @@ export class NgPersianDatepickerComponent implements OnInit, OnDestroy {
 
           this.setTime(date);
           this.changeSelectedDate(date, false);
-          this.scrollIntoActiveTime();
         }
       });
   }
@@ -849,24 +845,6 @@ export class NgPersianDatepickerComponent implements OnInit, OnDestroy {
     this.changeSelectedDate(this.selectedDate);
   }
 
-  scrollIntoActiveTime(): void {
-    if (!this.uiIsVisible || !this.timeEnable) {
-      return;
-    }
-
-    setTimeout(() => {
-      // Hour
-      const activeHour = this.elementRef.nativeElement?.querySelector('.time-col.hour-col .dp-btn.selected');
-      if (activeHour) activeHour.scrollIntoView({block: 'center'});
-      // Minute
-      const activeMinute = this.elementRef.nativeElement?.querySelector('.time-col.minute-col .dp-btn.selected');
-      if (activeMinute) activeMinute.scrollIntoView({block: 'center'});
-      // Second
-      const activeSecond = this.elementRef.nativeElement?.querySelector('.time-col.second-col .dp-btn.selected');
-      if (activeSecond) activeSecond.scrollIntoView({block: 'center'});
-    }, 10);
-  }
-
   @HostListener('click')
   onInsideClick(): void {
     this.wasInsideClick = true;
@@ -896,7 +874,6 @@ export class NgPersianDatepickerComponent implements OnInit, OnDestroy {
   private setUiIsVisible(value: boolean): void {
     this.uiIsVisible = value;
     this.uiIsVisibleChange.next(value);
-    this.scrollIntoActiveTime();
   }
 
 }