fix(docs): keep nb-fs-icon in tree-grid showcase only (#1330)

akveo · Mar 29, 2019 · 0e1f432 · 0e1f432
1 parent 84349ef
commit 0e1f432
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 29 deletions.
diff --git a/src/playground/with-layout/tree-grid/components/fs-icon.component.ts b/src/playground/with-layout/tree-grid/components/fs-icon.component.ts
diff --git a/src/playground/with-layout/tree-grid/tree-grid-basic.component.ts b/src/playground/with-layout/tree-grid/tree-grid-basic.component.ts
@@ -24,8 +24,14 @@ interface FSEntry {
 
  <ng-container [nbTreeGridColumnDef]="customColumn">
  <td nbTreeGridCell *nbTreeGridCellDef="let row">
- <nb-fs-icon [kind]="row.data.kind" [expanded]="row.expanded"></nb-fs-icon>
+
+ <nb-tree-grid-row-toggle
+ [expanded]="row.expanded"
+ *ngIf="row.data.kind === 'dir'">
+ </nb-tree-grid-row-toggle>
+
  {{row.data.name}}
+
  </td>
  </ng-container>
 

diff --git a/src/playground/with-layout/tree-grid/tree-grid-custom-node-structure.component.ts b/src/playground/with-layout/tree-grid/tree-grid-custom-node-structure.component.ts
@@ -22,8 +22,14 @@ interface FSEntry {
  <ng-container [nbTreeGridColumnDef]="customColumn">
  <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>{{customColumn}}</th>
  <td nbTreeGridCell *nbTreeGridCellDef="let row">
- <nb-fs-icon [kind]="row.data.kind" [expanded]="row.expanded"></nb-fs-icon>
+
+ <nb-tree-grid-row-toggle
+ [expanded]="row.expanded"
+ *ngIf="row.data.kind === 'dir'">
+ </nb-tree-grid-row-toggle>
+
  {{row.data[customColumn]}}
+
  </td>
  </ng-container>
 

diff --git a/src/playground/with-layout/tree-grid/tree-grid-disable-click-toggle.component.ts b/src/playground/with-layout/tree-grid/tree-grid-disable-click-toggle.component.ts
@@ -24,8 +24,14 @@ interface FSEntry {
 
  <ng-container [nbTreeGridColumnDef]="customColumn">
  <td nbTreeGridCell *nbTreeGridCellDef="let row">
- <nb-fs-icon [kind]="row.data.kind" [expanded]="row.expanded"></nb-fs-icon>
+
+ <nb-tree-grid-row-toggle
+ [expanded]="row.expanded"
+ *ngIf="row.data.kind === 'dir'">
+ </nb-tree-grid-row-toggle>
+
  {{row.data.name}}
+
  </td>
  </ng-container>
 

diff --git a/src/playground/with-layout/tree-grid/tree-grid-filterable.component.ts b/src/playground/with-layout/tree-grid/tree-grid-filterable.component.ts
@@ -33,8 +33,14 @@ interface FSEntry {
  </th>
 
  <td nbTreeGridCell *nbTreeGridCellDef="let row">
- <nb-fs-icon [kind]="row.data.kind" [expanded]="row.expanded"></nb-fs-icon>
+
+ <nb-tree-grid-row-toggle
+ [expanded]="row.expanded"
+ *ngIf="row.data.kind === 'dir'">
+ </nb-tree-grid-row-toggle>
+
  {{row.data.name}}
+
  </td>
  </ng-container>
 

diff --git a/src/playground/with-layout/tree-grid/tree-grid-responsive.component.ts b/src/playground/with-layout/tree-grid/tree-grid-responsive.component.ts
@@ -26,8 +26,14 @@ interface FSEntry {
  <ng-container nbTreeGridColumnDef="name">
  <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>name</th>
  <td nbTreeGridCell *nbTreeGridCellDef="let row">
- <nb-fs-icon [kind]="row.data.kind" [expanded]="row.expanded"></nb-fs-icon>
+
+ <nb-tree-grid-row-toggle
+ [expanded]="row.expanded"
+ *ngIf="row.data.kind === 'dir'">
+ </nb-tree-grid-row-toggle>
+
  {{row.data.name}}
+
  </td>
  </ng-container>
 

diff --git a/src/playground/with-layout/tree-grid/tree-grid-showcase.component.ts b/src/playground/with-layout/tree-grid/tree-grid-showcase.component.ts
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { NbSortDirection, NbSortRequest, NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from '@nebular/theme';
 
 interface TreeNode<T> {
@@ -101,3 +101,22 @@ export class TreeGridShowcaseComponent {
  return minWithForMultipleColumns + (nextColumnStep * index);
  }
 }
+
+@Component({
+ selector: 'nb-fs-icon',
+ template: `
+ <nb-tree-grid-row-toggle [expanded]="expanded" *ngIf="isDir(); else fileIcon">
+ </nb-tree-grid-row-toggle>
+ <ng-template #fileIcon>
+ <span class="nb-compose"></span>
+ </ng-template>
+ `,
+})
+export class FsIconComponent {
+ @Input() kind: string;
+ @Input() expanded: boolean;
+
+ isDir(): boolean {
+ return this.kind === 'dir';
+ }
+}
diff --git a/src/playground/with-layout/tree-grid/tree-grid-sortable.component.ts b/src/playground/with-layout/tree-grid/tree-grid-sortable.component.ts
@@ -30,8 +30,14 @@ interface FSEntry {
  </th>
 
  <td nbTreeGridCell *nbTreeGridCellDef="let row">
- <nb-fs-icon [kind]="row.data.kind" [expanded]="row.expanded"></nb-fs-icon>
+
+ <nb-tree-grid-row-toggle
+ [expanded]="row.expanded"
+ *ngIf="row.data.kind === 'dir'">
+ </nb-tree-grid-row-toggle>
+
  {{row.data.name}}
+
  </td>
  </ng-container>
 

diff --git a/src/playground/with-layout/tree-grid/tree-grid.module.ts b/src/playground/with-layout/tree-grid/tree-grid.module.ts
@@ -8,13 +8,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NbCardModule, NbInputModule, NbTreeGridModule } from '@nebular/theme';
 
-import { TreeGridShowcaseComponent } from './tree-grid-showcase.component';
+import { FsIconComponent, TreeGridShowcaseComponent } from './tree-grid-showcase.component';
 import { TreeGridRoutingModule } from './tree-grid-routing.module';
 import { TreeGridSortableComponent } from './tree-grid-sortable.component';
 import { TreeGridFilterableComponent } from './tree-grid-filterable.component';
 import { TreeGridBasicComponent } from './tree-grid-basic.component';
 import { TreeGridResponsiveComponent } from './tree-grid-responsive.component';
-import { FsIconComponent } from './components/fs-icon.component';
 import { TreeGridCustomIconsComponent } from './tree-grid-custom-icons.component';
 import { TreeGridDisableClickToggleComponent } from './tree-grid-disable-click-toggle.component';
 import { TreeGridCustomNodeStructureComponent } from './tree-grid-custom-node-structure.component';