Zhenyun fix branch (NG-ZORRO#16)

* feat(module:input-item and slider ):input-item and slider rm classname; * feat(module:steps):remove steps classname * fix(module:steps):fix build false
fisherspy · Oct 9, 2018 · ba9917d · ba9917d
1 parent 2cfda8d
commit ba9917d
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 47 deletions.
diff --git a/components/steps/step/step.component.html b/components/steps/step/step.component.html
@@ -1,20 +1,22 @@
-<div class="{{prefixCls}}-item-tail">
-  {{tailContent}}
-</div>
-<div class="{{prefixCls}}-item-icon">
-  <span *ngIf="!isIconString" [ngClass]="iconCls">
-    <ng-template [ngTemplateOutlet]="icon"></ng-template>
-  </span>
-  <span *ngIf="isIconString && (status=== 'error' || status==='finish' || status==='wait' )" [ngClass]="iconCls">
-    <Icon [type]="icon" [size]="iconSize">
-    </Icon>
-  </span>
-  <span *ngIf="isIconString && !(status=== 'error' || status==='finish' || status==='wait')" [ngClass]="iconCls">{{stepNumber}}
-  </span>
-</div>
-<div class="{{prefixCls}}-item-content">
-  <div class="{{prefixCls}}-item-title">
-    {{title}}
+<div [ngClass]="stepItemCls">
+  <div class="{{prefixCls}}-item-tail">
+    {{tailContent}}
+  </div>
+  <div class="{{prefixCls}}-item-icon">
+    <span *ngIf="!isIconString" [ngClass]="iconCls">
+      <ng-template [ngTemplateOutlet]="icon"></ng-template>
+    </span>
+    <span *ngIf="isIconString && (status=== 'error' || status==='finish' || status==='wait' )" [ngClass]="iconCls">
+      <Icon [type]="icon" [size]="iconSize">
+      </Icon>
+    </span>
+    <span *ngIf="isIconString && !(status=== 'error' || status==='finish' || status==='wait')" [ngClass]="iconCls">{{stepNumber}}
+    </span>
+  </div>
+  <div class="{{prefixCls}}-item-content">
+    <div class="{{prefixCls}}-item-title">
+      {{title}}
+    </div>
+    <div *ngIf="description" class="{{prefixCls}}-item-description">{{description}}</div>
   </div>
-  <div *ngIf="description" class="{{prefixCls}}-item-description">{{description}}</div>
 </div>
diff --git a/components/steps/step/step.component.ts b/components/steps/step/step.component.ts
@@ -9,7 +9,6 @@ import {
   HostBinding
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-const classnames = require('classnames');
 
 @Component({
   selector: 'Step, nzm-step',
@@ -25,7 +24,7 @@ const classnames = require('classnames');
 })
 export class Step implements OnInit {
   prefixCls = 'am-steps';
-  stepItemCls: object;
+  stepItemCls = {};
   iconCls: object;
   tailContent: string;
   stepNumber: number;
@@ -74,27 +73,24 @@ export class Step implements OnInit {
     }
   }
 
-  @HostBinding('class')
-  get class(): string {
-    return 'am-steps-item ' + this.stepItemCls;
-  }
+  @HostBinding('class.am-steps-item')
+  clsStepItem: boolean = true;
 
   constructor(private _el: ElementRef) {}
 
   setClass() {
     this.iconCls = {
       [`${this.prefixCls}-icon`]: true
     };
-    setTimeout(() => {
-      this.stepItemCls = classnames(this.stepItemCls, {
-        [`${this.prefixCls}-item-${this._status}`]: true,
-        [`${this.prefixCls}-item-custom`]: this._icon
-      });
-    }, 0);
+    this.stepItemCls = Object.assign(this.stepItemCls,
+      {
+        [`${this.prefixCls}-item-${this.status}`]: true,
+        [`${this.prefixCls}-item-custom`]: this.icon
+      }
+    );
   }
 
   ngOnInit() {
-    this.setClass();
   }
 }
 

diff --git a/components/steps/steps.component.ts b/components/steps/steps.component.ts
@@ -1,7 +1,16 @@
-import { Component, OnInit, Input, ContentChildren, QueryList, AfterContentInit, HostBinding } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  HostBinding,
+  Renderer2,
+  ElementRef
+} from '@angular/core';
 import { StatusEnum, DirectionEnum } from './step/step.component';
 import { Step } from './step/step.component';
-const classnames = require('classnames');
 
 @Component({
   selector: 'Steps,nzm-steps',
@@ -43,12 +52,18 @@ export class Steps implements OnInit, AfterContentInit {
     this.setCls();
   }
 
-  @HostBinding('class')
-  get class(): string {
-    return 'am-steps ' + this._stepsCls;
-  }
+  @HostBinding('class.am-steps')
+  clsSteps: boolean = true;
+  @HostBinding('class.am-steps-small')
+  clsStepsSmall: boolean;
+  @HostBinding('class.am-steps-label-vertical')
+  clsStepsLabelVtl: boolean;
+  @HostBinding('class.am-steps-vertical')
+  clsStepsVtl: boolean;
+  @HostBinding('class.am-steps-horizontal')
+  clsStepsHztl: boolean;
 
-  constructor() {}
+  constructor(private _elf: ElementRef, private _render: Renderer2) {}
 
   setStepStyle() {
     const itemCount = this.stepItems.length;
@@ -57,7 +72,9 @@ export class Steps implements OnInit, AfterContentInit {
       const step = itemArr[index];
       step.stepNumber = index + 1;
       if (index < itemCount - 1 && itemArr[index + 1].status === StatusEnum.ERROR) {
-        step.stepItemCls = classnames(step.stepItemCls, { 'error-tail': true });
+        step.stepItemCls = step.stepItemCls
+          ? Object.assign(step.stepItemCls, { 'error-tail': true })
+          : { 'error-tail': true };
       }
       let icon = step.icon;
       if (!step.status) {
@@ -74,7 +91,9 @@ export class Steps implements OnInit, AfterContentInit {
           icon = 'check-circle-o';
         } else if (index > this._current) {
           icon = 'ellipsis';
-          step.stepItemCls = classnames(step.stepItemCls, { 'ellipsis-item': true });
+          step.stepItemCls = step.stepItemCls
+            ? Object.assign(step.stepItemCls, { 'ellipsis-item': true })
+            : { 'ellipsis-item': true };
         }
         if ((this._status === StatusEnum.ERROR && index === this._current) || step.status === StatusEnum.ERROR) {
           icon = 'cross-circle-o';
@@ -87,11 +106,19 @@ export class Steps implements OnInit, AfterContentInit {
   }
 
   setCls() {
-    this._stepsCls = classnames({
-      [`${this.prefixCls}-${this._size}`]: this._size === 'small',
-      [`${this.prefixCls}-${this._direction}`]: true,
-      [`${this.prefixCls}-label-vertical`]: this._direction === DirectionEnum.HORIZONTAL
-    });
+    if (this._direction === DirectionEnum.HORIZONTAL) {
+      this.clsStepsLabelVtl = true;
+      this.clsStepsHztl = true;
+      this.clsStepsVtl = false;
+    } else if (this._direction === DirectionEnum.VERTICAL) {
+      this.clsStepsVtl = true;
+      this.clsStepsHztl = false;
+    }
+    if (this._size === 'small') {
+      this.clsStepsSmall = true;
+    } else {
+      this.clsStepsSmall = false;
+    }
   }
 
   ngOnInit() {

diff --git a/components/steps/style/index.less b/components/steps/style/index.less
@@ -108,11 +108,11 @@
   .step-item-status(finish);
   .step-item-status(error);
 
-  &.@{stepsPrefixCls}-next-error .@{stepsPrefixCls}-item-title:after {
+  & .@{stepsPrefixCls}-next-error .@{stepsPrefixCls}-item-title:after {
     background: @brand-error;
   }
 
-  &.@{errorTailCls} .@{stepsPrefixCls}-item-tail:after {
+  & .@{errorTailCls} .@{stepsPrefixCls}-item-tail:after {
     background-color: @brand-error;
   }
 }