Merge pull request #351 from youda97/skeleton-structured-list

feat(structured-list): Add skeleton state

Author: cal-smith

src/structured-list/list-column.component.ts

@@ -12,9 +12,14 @@ import { Component, HostBinding, Input } from "@angular/core";
  */
 @Component({
 	selector: "ibm-list-column",
-	template: `<ng-content></ng-content>`
+	template: `
+		<span *ngIf="skeleton"></span>
+		<ng-content></ng-content>
+	`
 })
 export class ListColumn {
+	@Input() skeleton = false;
+
 	@HostBinding("class.bx--structured-list-th") isHeaderColumn = true;
 	@HostBinding("class.bx--structured-list-td") isBodyColumn = true;
 	/**

src/structured-list/list-header.component.ts

@@ -3,7 +3,8 @@ import {
 	HostBinding,
 	ContentChildren,
 	QueryList,
-	AfterContentInit
+	AfterContentInit,
+	Input
 } from "@angular/core";
 import { ListColumn } from "./list-column.component";
 
@@ -31,17 +32,36 @@ import { ListColumn } from "./list-column.component";
 export class ListHeader implements AfterContentInit {
 	@HostBinding("class.bx--structured-list-thead") wrapper = true;
 
+	@Input()
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
+	get skeleton(): any {
+		return this._skeleton;
+	}
+
 	@ContentChildren(ListColumn) columns: QueryList<ListColumn>;
 
 	/**
 	 * Set by the containing `StructuredList`. Adds a dummy header for the selection column when set to true.
 	 */
 	selection = false;
 
+	protected _skeleton = false;
+
 	ngAfterContentInit() {
 		this.columns.forEach(column => {
 			column.isBodyColumn = false;
 			column.isHeaderColumn = true;
 		});
+		this.updateChildren();
+	}
+
+	protected updateChildren() {
+		if (this.columns) {
+			this.columns.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
 	}
 }

src/structured-list/structured-list.component.ts

@@ -58,7 +58,8 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 				'bx--structured-list--border': border,
 				'bx--structured-list--selection': selection,
 				'bx--structured-list--condensed': condensed,
-				'bx--structured-list-content--nowrap': nowrap
+				'bx--structured-list-content--nowrap': nowrap,
+				'bx--skeleton': skeleton
 			}">
 			<ng-content select="ibm-list-header"></ng-content>
 			<div class="bx--structured-list-tbody">
@@ -99,6 +100,23 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 	 * Used when `selection = true` as the row radio group `name`
 	 */
 	@Input() name = `structured-list-${StructuredList.listCount++}`;
+
+	/**
+	 * Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.
+	 */
+	@Input()
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
+	/**
+	 * Returns the skeleton value in the `StructuredList` if there is one.
+	 */
+	get skeleton(): any {
+		return this._skeleton;
+	}
+
 	/**
 	 * Emits an event when the row selection changes.
 	 *
@@ -116,6 +134,8 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 	@ContentChildren(ListRow) rows: QueryList<ListRow>;
 	@ContentChildren(ListHeader) headers: QueryList<ListHeader>;
 
+	protected _skeleton = false;
+
 	onChange = (_: any) => { };
 
 	onTouched = () => { };
@@ -138,6 +158,7 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 				this.onChange(row.value);
 			});
 		});
+		this.updateChildren();
 	}
 
 	writeValue(value: any) {
@@ -158,4 +179,10 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 	registerOnTouched(fn: any) {
 		this.onTouched = fn;
 	}
+
+	protected updateChildren() {
+		if (this.headers) {
+			this.headers.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
+	}
 }

src/structured-list/structured-list.stories.ts

@@ -134,5 +134,46 @@ storiesOf("Structured List", module).addDecorator(
 			condensed: boolean("condensed", false),
 			nowrap: boolean("nowrap", false)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 800px">
+			<ibm-structured-list skeleton="true">
+				<ibm-list-header>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+				</ibm-list-header>
+				<ibm-list-row>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+				</ibm-list-row>
+				<ibm-list-row>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+				</ibm-list-row>
+			</ibm-structured-list>
+
+			<ibm-structured-list skeleton="true" border="true">
+				<ibm-list-header>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+				</ibm-list-header>
+				<ibm-list-row>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+				</ibm-list-row>
+				<ibm-list-row>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+					<ibm-list-column></ibm-list-column>
+				</ibm-list-row>
+			</ibm-structured-list>
+		</div>
+		`
 	}));