feat(module:slider): support nzTooltipVisible (#2930)

* feat(module:slider): support nzTooltipVisible

close #2373

test: add test

fix: fix hover handles

rebase

* fix: remove redundant class

fix setting to always wouldn't take effect

* fix: fix test

components/cascader/nz-cascader.component.ts

@@ -21,7 +21,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { slideMotion } from '../core/animation/slide';
 import { DEFAULT_CASCADER_POSITIONS } from '../core/overlay/overlay-position';
 import { NgClassType } from '../core/types/ng-class';
-import { arrayEquals, toArray } from '../core/util/array';
+import { arraysEqual, toArray } from '../core/util/array';
 import { InputBoolean } from '../core/util/convert';
 
 import {
@@ -355,7 +355,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
   }
 
   private setColumnData(options: CascaderOption[], columnIndex: number): void {
-    if (!arrayEquals(this.columns[ columnIndex ], options)) {
+    if (!arraysEqual(this.columns[ columnIndex ], options)) {
       this.columns[ columnIndex ] = options;
       if (columnIndex < this.columns.length - 1) {
         this.columns = this.columns.slice(0, columnIndex + 1);
@@ -390,7 +390,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
 
   private onValueChange(): void {
     const value = this.getSubmitValue();
-    if (!arrayEquals(this.value, value)) {
+    if (!arraysEqual(this.value, value)) {
       this.defaultValue = null;
       this.value = value;
       this.onChange(value);
@@ -410,7 +410,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
 
   //#endregion
 
-  //#region Mouse and keyboard event handlers, view children
+  //#region Mouse and keyboard event handles, view children
 
   focus(): void {
     if (!this.isFocused) {

components/core/util/array.ts

@@ -10,7 +10,7 @@ export function toArray<T>(value: T | T[]): T[] {
   return ret;
 }
 
-export function arrayEquals<T>(array1: T[], array2: T[]): boolean {
+export function arraysEqual<T>(array1: T[], array2: T[]): boolean {
   if (!array1 || !array2 || array1.length !== array2.length) {
     return false;
   }
@@ -23,3 +23,7 @@ export function arrayEquals<T>(array1: T[], array2: T[]): boolean {
   }
   return true;
 }
+
+export function shallowCopyArray<T>(source: T[]): T[] {
+  return source.slice();
+}

components/core/util/check.ts

@@ -5,7 +5,9 @@ export function isNotNil(value: any): boolean {
   return (typeof(value) !== 'undefined') && value !== null;
 }
 
-/** 校验对象是否相等 */
+/**
+ * Examine if two objects are shallowly equaled.
+ */
 export function shallowEqual(objA: {}, objB: {}): boolean {
   if (objA === objB) {
     return true;

components/core/util/dom.ts

@@ -1,5 +1,28 @@
+import { Observable } from 'rxjs';
+
 import { filterNotEmptyNode } from './check';
 
+/**
+ * Silent an event by stopping and preventing it.
+ */
+export function silentEvent(e: Event): void {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+export function getElementOffset(elem: HTMLElement): { top: number, left: number } {
+  if (!elem.getClientRects().length) {
+    return { top: 0, left: 0 };
+  }
+
+  const rect = elem.getBoundingClientRect();
+  const win = elem.ownerDocument.defaultView;
+  return {
+    top : rect.top + win.pageYOffset,
+    left: rect.left + win.pageXOffset
+  };
+}
+
 export function findFirstNotEmptyNode(element: HTMLElement): Node {
   const children = element.childNodes;
   for (let i = 0; i < children.length; i++) {
@@ -20,4 +43,29 @@ export function findLastNotEmptyNode(element: HTMLElement): Node {
     }
   }
   return null;
-}
+}
+
+export function reverseChildNodes(parent: HTMLElement): void {
+  const children = parent.childNodes;
+  let length = children.length;
+  if (length) {
+    const nodes: Node[] = [];
+    children.forEach((node, i) => nodes[ i ] = node);
+    while (length--) {
+      parent.appendChild(nodes[ length ]);
+    }
+  }
+}
+
+export interface MouseTouchObserverConfig {
+  end: string;
+  move: string;
+  pluckKey: string[];
+  start: string;
+
+  end$?: Observable<Event>;
+  moveResolved$?: Observable<number>;
+  startPlucked$?: Observable<number>;
+
+  filter?(e: Event): boolean;
+}

components/core/util/getMentions.ts

@@ -1,4 +1,3 @@
-
 export function getRegExp(prefix: string | string[]): RegExp {
   const prefixArray = Array.isArray(prefix) ? prefix : [prefix];
   let prefixToken = prefixArray.join('').replace(/(\$|\^)/g, '\\$1');

components/core/util/number.ts

@@ -0,0 +1,19 @@
+export function getPercent(min: number, max: number, value: number): number {
+  return (value - min) / (max - min) * 100;
+}
+
+export function getPrecision(num: number): number {
+  const numStr = num.toString();
+  const dotIndex = numStr.indexOf('.');
+  return dotIndex >= 0 ? numStr.length - dotIndex - 1 : 0;
+}
+
+export function ensureNumberInRange(num: number, min: number, max: number): number {
+  if (isNaN(num) || num < min) {
+    return min;
+  } else if (num > max) {
+    return max;
+  } else {
+    return num;
+  }
+}

components/slider/demo/basic.md

@@ -7,13 +7,11 @@ title:
 
 ## zh-CN
 
-基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。
+基本滑动条。当 `nzRange` 为 `true` 时，渲染为双滑块。当 `nzDisabled` 为 `true` 时，滑块处于不可用状态。
 
 ## en-US
 
-Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
+Basic slider. When `nzRange` is `true`, display as dual thumb mode. When `nzDisabled` is `true`, the slider will not be interactive.
+
 
 
-<style>
-.code-box-demo 
-</style>

components/slider/demo/event.md

@@ -7,9 +7,8 @@ title:
 
 ## zh-CN
 
-当 Slider 的值发生改变时，会触发 `onChange` 事件，并把改变后的值作为参数传入。在 `onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。
+当 Slider 的值发生改变时，会触发 `nzOnChange` 事件，并把改变后的值作为参数传入。在 `onmouseup` 时，会触发 `nzOnAfterChange` 事件，并把当前值作为参数传入。
 
 ## en-US
 
-The `onChange` callback function will fire when the user changes the slider's value.
-The `onAfterChange` callback function will fire when `onmouseup` fired.
+The `nzOnChange` callback function will fire when the user changes the slider's value. The `nzOnAfterChange` callback function will fire when `onmouseup` fired.

components/slider/demo/mark.md

@@ -7,21 +7,10 @@ title:
 
 ## zh-CN
 
-使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时，表明不同标记间为并列关系。当 `step=null` 时，Slider 的可选值仅有 `marks` 标出来的部分。
+使用 `nzMarks` 属性标注分段式滑块，使用 `nzValue` / `nzDefaultValue` 指定滑块位置。当 `nzIncluded = false` 时，表明不同标记间为并列关系。当 `nzStep = null` 时，Slider 的可选值仅有 `nzMarks` 标出来的部分。
 
 ## en-US
 
-Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb.
-When `included` is false, means that different thumbs are coordinative.
-when `step` is null, users can only slide the thumbs onto marks.
+Using `nzMarks` property to mark a graduated slider, use `nzValue` or `nzDefaultValue` to specify the position of thumb. When `nzIncluded` is false, means that different thumbs are coordinated. When `nzStep` is null, users can only slide the thumbs onto marks.
 
 
-
-<style>
-#components-slider-demo-mark h4 {
-  margin: 0 0 16px;
-}
-#components-slider-demo-mark .ant-slider-with-marks {
-  margin-bottom: 44px;
-}
-</style>

components/slider/demo/tip-formatter.md

@@ -7,10 +7,10 @@ title:
 
 ## zh-CN
 
-使用 `tipFormatter` 可以格式化 `Tooltip` 的内容，设置 `tipFormatter={null}`，则隐藏 `Tooltip`。
+使用 `nzTipFormatter` 可以格式化 `Tooltip` 的内容，设置 `nzTipFormatter = null`，则隐藏 `Tooltip`。
 
 ## en-US
 
-Use `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it.
+Use `nzTipFormatter` to format content of `Toolip`. If `nzTipFormatter` is null, hide it.
 
 

components/slider/demo/tooltip.md

@@ -0,0 +1,16 @@
+---
+order: 7
+title:
+  zh-CN: 控制 Tooltip 的显示
+  en-US: Control visibility of Tooltip
+---
+
+## zh-CN
+
+当 `nzTooltipVisible` 为 `always` 时，将始终显示 ToolTip，为 `never` 时反之则始终不显示，即使在拖动、移入时也是如此。
+
+## en-US
+
+When `nzTooltipVisible` is `always`, Tooltip will show always. And set to `never`, tooltip would never show, even when user is dragging or hovering.
+
+

components/slider/demo/tooltip.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-slider-tooltip',
+  template: `
+    <nz-slider [nzTooltipVisible]="'always'"></nz-slider>
+    <nz-slider [nzTooltipVisible]="'never'"></nz-slider>
+  `
+})
+export class NzDemoSliderTooltipComponent {
+}

components/slider/doc/index.en-US.md

@@ -28,5 +28,6 @@ To input a value in a range.
 | `[nzTipFormatter]` | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | `(value: number) => string` | - |
 | `[ngModel]` | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number｜number[]` | - |
 | `[nzVertical]` | If true, the slider will be vertical. | `boolean` | `false` |
+| `[nzTooltipVisible]` | When set to `always` tooltips are always displayed. When set to `never` they are never displayed | `'default'｜'always'｜'never'` | `default` |
 | `(nzOnAfterChange)` | Fire when `onmouseup` is fired. | `EventEmitter<number[] ｜ number>` | - |
 | `(ngModelChange)` | Callback function that is fired when the user changes the slider's value. | `EventEmitter<number[] ｜ number>` | - |

components/slider/doc/index.zh-CN.md

@@ -29,5 +29,6 @@ title: Slider
 | `[nzTipFormatter]` | Slider 会把当前值传给 `nzTipFormatter`，并在 Tooltip 中显示 `nzTipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | `(value: number) => string` | - |
 | `[ngModel]` | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number｜number[]` | - |
 | `[nzVertical]` | 值为 `true` 时，Slider 为垂直方向 | `boolean` | `false` |
+| `[nzTooltipVisible]` | 值为 `always` 时总是显示，值为 `never` 时在任何情况下都不显示 | `'default'｜'always'｜'never'` | `default` |
 | `(nzOnAfterChange)` | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | `EventEmitter<number[] ｜ number>` | - |
 | `(ngModelChange)` | 当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。 | `EventEmitter<number[] ｜ number>>` | - |

components/slider/nz-slider-definitions.ts

@@ -0,0 +1,58 @@
+export type Mark = string | MarkObj;
+
+export interface MarkObj {
+  style?: object;
+  label: string;
+}
+
+export class Marks {
+  [ key: number ]: Mark;
+}
+
+/**
+ * Processed steps that would be passed to sub components.
+ */
+export interface ExtendedMark {
+  value: number;
+  offset: number;
+  config: Mark;
+}
+
+/**
+ * Marks that would be rendered.
+ */
+export interface DisplayedMark extends ExtendedMark {
+  active: boolean;
+  label: string;
+  style?: object;
+}
+
+/**
+ * Steps that would be rendered.
+ */
+export interface DisplayedStep extends ExtendedMark {
+  active: boolean;
+  style?: object;
+}
+
+export type SliderShowTooltip = 'always' | 'never' | 'default';
+
+export type SliderValue = number[] | number;
+
+export interface SliderHandler {
+  offset: number;
+  value: number;
+  active: boolean;
+}
+
+export function isValueARange(value: SliderValue): value is number[] {
+  if (value instanceof Array) {
+    return value.length === 2;
+  } else {
+    return false;
+  }
+}
+
+export function isConfigAObject(config: Mark): config is MarkObj {
+  return config instanceof Object;
+}

components/slider/nz-slider-error.ts

@@ -0,0 +1,3 @@
+export function getValueTypeNotMatchError(): Error {
+  return new Error(`The "nzRange" can't match the "nzValue"'s type, please check these properties: "nzRange", "nzValue", "nzDefaultValue".`);
+}

components/slider/nz-slider-handle.component.html

@@ -1,4 +1,7 @@
-<nz-tooltip *ngIf="nzTipFormatter !== null" #tooltip [nzTitle]="tooltipTitle" [nzTrigger]="null">
-  <div nz-tooltip [class]="nzClassName" [ngStyle]="style"></div>
+<nz-tooltip
+  *ngIf="nzTipFormatter !== null && nzTooltipVisible !== 'never'"
+  [nzTitle]="tooltipTitle"
+  [nzTrigger]="null">
+  <div nz-tooltip class="ant-slider-handle" [ngStyle]="style"></div>
 </nz-tooltip>
-<div *ngIf="nzTipFormatter === null" [class]="nzClassName" [ngStyle]="style"></div>
+<div *ngIf="nzTipFormatter === null || nzTooltipVisible === 'never'" class="ant-slider-handle" [ngStyle]="style"></div>