chore(module:slider): refactor (NG-ZORRO#4730)

* chore(module:slider): refactor slider

fix: test

fix: remove redundant code

feat(module:slider): support change value through keyboard event

test: add test

chore: hide internal implementation

fix: fix import path

fix: fix import path

fix(module:slider): fix property type

close NG-ZORRO#4749

chore(module:slider): refactor slider

fix: test

fix: remove redundant code

feat(module:slider): support change value through keyboard event

test: add test

chore: hide internal implementation

fix: fix import path

fix: fix import path

fix(module:slider): fix property type

close NG-ZORRO#4749

* fix: fix no step situation

components/slider/nz-slider-handle.component.ts → components/slider/handle.component.ts

@@ -10,94 +10,106 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   Input,
   OnChanges,
-  OnDestroy,
   SimpleChanges,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { Subscription } from 'rxjs';
 
 import { InputBoolean, NgStyleInterface } from 'ng-zorro-antd/core';
 import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
-import { SliderShowTooltip } from './nz-slider-definitions';
-import { NzSliderComponent } from './nz-slider.component';
+import { NzSliderService } from './slider.service';
+import { NzSliderShowTooltip } from './typings';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-slider-handle',
   exportAs: 'nzSliderHandle',
   preserveWhitespaces: false,
-  templateUrl: './nz-slider-handle.component.html',
+  template: `
+    <div
+      #handle
+      class="ant-slider-handle"
+      tabindex="0"
+      nz-tooltip
+      [ngStyle]="style"
+      [nzTooltipTitle]="tooltipFormatter === null || tooltipVisible === 'never' ? null : tooltipTitle"
+      [nzTooltipTrigger]="null"
+      [nzTooltipPlacement]="tooltipPlacement"
+    ></div>
+  `,
   host: {
     '(mouseenter)': 'enterHandle()',
     '(mouseleave)': 'leaveHandle()'
   }
 })
-export class NzSliderHandleComponent implements OnChanges, OnDestroy {
+export class NzSliderHandleComponent implements OnChanges {
+  @ViewChild('handle', { static: false }) handleEl: ElementRef;
   @ViewChild(NzTooltipDirective, { static: false }) tooltip: NzTooltipDirective;
 
-  @Input() nzVertical: string;
-  @Input() nzOffset: number;
-  @Input() nzValue: number;
-  @Input() nzTooltipVisible: SliderShowTooltip = 'default';
-  @Input() nzTooltipPlacement: string;
-  @Input() nzTipFormatter: (value: number) => string;
-  @Input() @InputBoolean() nzActive = false;
+  @Input() vertical: string;
+  @Input() offset: number;
+  @Input() value: number;
+  @Input() tooltipVisible: NzSliderShowTooltip = 'default';
+  @Input() tooltipPlacement: string;
+  @Input() tooltipFormatter: (value: number) => string;
+  @Input() @InputBoolean() active = false;
 
   tooltipTitle: string;
   style: NgStyleInterface = {};
 
-  private hovers_ = new Subscription();
-
-  constructor(private sliderComponent: NzSliderComponent, private cdr: ChangeDetectorRef) {}
+  constructor(private sliderService: NzSliderService, private cdr: ChangeDetectorRef) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzOffset, nzValue, nzActive, nzTooltipVisible } = changes;
+    const { offset, value, active, tooltipVisible } = changes;
 
-    if (nzOffset) {
+    if (offset) {
       this.updateStyle();
     }
-    if (nzValue) {
+
+    if (value) {
       this.updateTooltipTitle();
       this.updateTooltipPosition();
     }
-    if (nzActive) {
-      if (nzActive.currentValue) {
+
+    if (active) {
+      if (active.currentValue) {
         this.toggleTooltip(true);
       } else {
         this.toggleTooltip(false);
       }
     }
-    if (nzTooltipVisible && nzTooltipVisible.currentValue === 'always') {
+
+    if (tooltipVisible && tooltipVisible.currentValue === 'always') {
       Promise.resolve().then(() => this.toggleTooltip(true, true));
     }
   }
 
-  ngOnDestroy(): void {
-    this.hovers_.unsubscribe();
-  }
-
   enterHandle = () => {
-    if (!this.sliderComponent.isDragging) {
+    if (!this.sliderService.isDragging) {
       this.toggleTooltip(true);
       this.updateTooltipPosition();
       this.cdr.detectChanges();
     }
   };
 
   leaveHandle = () => {
-    if (!this.sliderComponent.isDragging) {
+    if (!this.sliderService.isDragging) {
       this.toggleTooltip(false);
       this.cdr.detectChanges();
     }
   };
 
+  focus(): void {
+    this.handleEl.nativeElement.focus();
+  }
+
   private toggleTooltip(show: boolean, force: boolean = false): void {
-    if (!force && (this.nzTooltipVisible !== 'default' || !this.tooltip)) {
+    if (!force && (this.tooltipVisible !== 'default' || !this.tooltip)) {
       return;
     }
 
@@ -109,7 +121,7 @@ export class NzSliderHandleComponent implements OnChanges, OnDestroy {
   }
 
   private updateTooltipTitle(): void {
-    this.tooltipTitle = this.nzTipFormatter ? this.nzTipFormatter(this.nzValue) : `${this.nzValue}`;
+    this.tooltipTitle = this.tooltipFormatter ? this.tooltipFormatter(this.value) : `${this.value}`;
   }
 
   private updateTooltipPosition(): void {
@@ -119,7 +131,10 @@ export class NzSliderHandleComponent implements OnChanges, OnDestroy {
   }
 
   private updateStyle(): void {
-    this.style[this.nzVertical ? 'bottom' : 'left'] = `${this.nzOffset}%`;
+    this.style = {
+      [this.vertical ? 'bottom' : 'left']: `${this.offset}%`,
+      transform: this.vertical ? null : 'translateX(-50%)'
+    };
     this.cdr.markForCheck();
   }
 }

components/slider/marks.component.ts

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+
+import { InputBoolean, NgStyleInterface } from 'ng-zorro-antd/core';
+
+import { NzDisplayedMark, NzExtendedMark, NzMark, NzMarkObj } from './typings';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  selector: 'nz-slider-marks',
+  exportAs: 'nzSliderMarks',
+  template: `
+    <div class="ant-slider-mark">
+      <span
+        class="ant-slider-mark-text"
+        *ngFor="let attr of marks; trackBy: trackById"
+        [class.ant-slider-mark-active]="attr.active"
+        [ngStyle]="attr.style"
+        [innerHTML]="attr.label"
+      >
+      </span>
+    </div>
+  `
+})
+export class NzSliderMarksComponent implements OnChanges {
+  @Input() lowerBound: number | null = null;
+  @Input() upperBound: number | null = null;
+  @Input() marksArray: NzExtendedMark[];
+  @Input() min: number;
+  @Input() max: number;
+  @Input() @InputBoolean() vertical = false;
+  @Input() @InputBoolean() included = false;
+
+  marks: NzDisplayedMark[];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { marksArray, lowerBound, upperBound } = changes;
+
+    if (marksArray) {
+      this.buildMarks();
+    }
+
+    if (marksArray || lowerBound || upperBound) {
+      this.togglePointActive();
+    }
+  }
+
+  trackById(_index: number, mark: NzDisplayedMark): number {
+    return mark.value;
+  }
+
+  private buildMarks(): void {
+    const range = this.max - this.min;
+
+    this.marks = this.marksArray.map(mark => {
+      const { value, offset, config } = mark;
+      const style = this.getMarkStyles(value, range, config);
+      const label = isConfigObject(config) ? config.label : config;
+
+      return {
+        label,
+        offset,
+        style,
+        value,
+        config,
+        active: false
+      };
+    });
+  }
+
+  private getMarkStyles(value: number, range: number, config: NzMark): NgStyleInterface {
+    let style;
+
+    if (this.vertical) {
+      style = {
+        marginBottom: '-50%',
+        bottom: `${((value - this.min) / range) * 100}%`
+      };
+    } else {
+      style = {
+        transform: `translate3d(-50%, 0, 0)`,
+        left: `${((value - this.min) / range) * 100}%`
+      };
+    }
+
+    if (isConfigObject(config) && config.style) {
+      style = { ...style, ...config.style };
+    }
+
+    return style;
+  }
+
+  private togglePointActive(): void {
+    if (this.marks && this.lowerBound !== null && this.upperBound !== null) {
+      this.marks.forEach(mark => {
+        const value = mark.value;
+        const isActive =
+          (!this.included && value === this.upperBound) || (this.included && value <= this.upperBound! && value >= this.lowerBound!);
+
+        mark.active = isActive;
+      });
+    }
+  }
+}
+
+function isConfigObject(config: NzMark): config is NzMarkObj {
+  return typeof config !== 'string';
+}