refactor(module:comment): refactor and aync Ant Design 4 (NG-ZORRO#4664)

ref NG-ZORRO#4634
hsuanxyz · Mar 2, 2020 · 802f244 · 802f244
1 parent bc5dbb5
commit 802f244
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 73 deletions.
diff --git a/components/comment/nz-comment-cells.ts → components/comment/comment-cells.ts b/components/comment/nz-comment-cells.ts → components/comment/comment-cells.ts
diff --git a/components/comment/comment.component.ts b/components/comment/comment.component.ts
@@ -0,0 +1,65 @@
+/**
+ * @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, ContentChildren, Input, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+import { NzCommentActionComponent as CommentAction } from './comment-cells';
+
+@Component({
+  selector: 'nz-comment',
+  exportAs: 'nzComment',
+  template: `
+    <div class="ant-comment-inner">
+      <div class="ant-comment-avatar">
+        <ng-content select="nz-avatar[nz-comment-avatar]"></ng-content>
+      </div>
+      <div class="ant-comment-content">
+        <div class="ant-comment-content-author">
+          <span *ngIf="nzAuthor" class="ant-comment-content-author-name">
+            <ng-container *nzStringTemplateOutlet="nzAuthor">{{ nzAuthor }}</ng-container>
+          </span>
+          <span *ngIf="nzDatetime" class="ant-comment-content-author-time">
+            <ng-container *nzStringTemplateOutlet="nzDatetime">{{ nzDatetime }}</ng-container>
+          </span>
+        </div>
+        <ng-content select="nz-comment-content"></ng-content>
+        <ul class="ant-comment-actions" *ngIf="actions?.length">
+          <li *ngFor="let action of actions">
+            <span><ng-template [nzCommentActionHost]="action.content"></ng-template></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="ant-comment-nested">
+      <ng-content></ng-content>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'ant-comment'
+  },
+  styles: [
+    `
+      nz-comment {
+        display: block;
+      }
+
+      nz-comment-content {
+        display: block;
+      }
+    `
+  ]
+})
+export class NzCommentComponent {
+  @Input() nzAuthor: string | TemplateRef<void>;
+  @Input() nzDatetime: string | TemplateRef<void>;
+
+  @ContentChildren(CommentAction) actions: QueryList<CommentAction>;
+  constructor() {}
+}
diff --git a/components/comment/nz-comment.module.ts → components/comment/comment.module.ts b/components/comment/nz-comment.module.ts → components/comment/comment.module.ts
@@ -16,8 +16,8 @@ import {
   NzCommentActionHostDirective,
   NzCommentAvatarDirective,
   NzCommentContentDirective
-} from './nz-comment-cells';
-import { NzCommentComponent } from './nz-comment.component';
+} from './comment-cells';
+import { NzCommentComponent } from './comment.component';
 
 const NZ_COMMENT_CELLS = [NzCommentAvatarDirective, NzCommentContentDirective, NzCommentActionComponent, NzCommentActionHostDirective];
 

diff --git a/components/comment/nz-comment.spec.ts → components/comment/comment.spec.ts b/components/comment/nz-comment.spec.ts → components/comment/comment.spec.ts
@@ -7,8 +7,8 @@ import { NzDemoCommentEditorComponent } from './demo/editor';
 import { NzDemoCommentListComponent } from './demo/list';
 import { NzDemoCommentNestedComponent } from './demo/nested';
 
-import { NzCommentComponent } from './nz-comment.component';
-import { NzCommentModule } from './nz-comment.module';
+import { NzCommentComponent } from './comment.component';
+import { NzCommentModule } from './comment.module';
 
 describe('NzCommentComponent', () => {
   beforeEach(async(() => {

diff --git a/components/comment/demo/basic.ts b/components/comment/demo/basic.ts
@@ -13,11 +13,11 @@ import { distanceInWords } from 'date-fns';
         </p>
       </nz-comment-content>
       <nz-comment-action>
-        <i nz-tooltip nzTitle="Like" nz-icon nzType="like" [theme]="likes > 0 ? 'twotone' : 'outline'" (click)="like()"></i>
+        <i nz-tooltip nzTitle="Like" nz-icon nzType="like" [nzTheme]="likes > 0 ? 'twotone' : 'outline'" (click)="like()"></i>
         <span class="count like">{{ likes }}</span>
       </nz-comment-action>
       <nz-comment-action>
-        <i nz-tooltip nzTitle="Dislike" nz-icon nzType="dislike" [theme]="dislikes > 0 ? 'twotone' : 'outline'" (click)="dislike()"></i>
+        <i nz-tooltip nzTitle="Dislike" nz-icon nzType="dislike" [nzTheme]="dislikes > 0 ? 'twotone' : 'outline'" (click)="dislike()"></i>
         <span class="count dislike">{{ dislikes }}</span>
       </nz-comment-action>
       <nz-comment-action>Reply to</nz-comment-action>

diff --git a/components/comment/nz-comment.component.html b/components/comment/nz-comment.component.html
diff --git a/components/comment/nz-comment.component.ts b/components/comment/nz-comment.component.ts
diff --git a/components/comment/public-api.ts b/components/comment/public-api.ts
@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-comment.module';
-export * from './nz-comment.component';
-export * from './nz-comment-cells';
+export * from './comment.module';
+export * from './comment.component';
+export * from './comment-cells';