Header cell with unit tests, styling, and new interfaces

src/HeaderCell.ts

@@ -0,0 +1,60 @@
+import WidgetBase from '@dojo/widget-core/WidgetBase';
+import { RegistryMixin } from '@dojo/widget-core/mixins/Registry';
+import { v } from '@dojo/widget-core/d';
+import { HasColumn, HasSortDetail, HasSortEvent } from './interfaces';
+import { ThemeableMixin, theme, ThemeableProperties } from '@dojo/widget-core/mixins/Themeable';
+
+import * as headerCellClasses from './styles/headerCell.css';
+
+export interface HeaderCellProperties extends ThemeableProperties, HasColumn, HasSortDetail, HasSortEvent { }
+
+export const HeaderCellBase = ThemeableMixin(RegistryMixin(WidgetBase));
+
+@theme(headerCellClasses)
+class HeaderCell extends HeaderCellBase<HeaderCellProperties> {
+	onSortRequest(): void {
+		const {
+			key = '',
+			column,
+			sortDetail,
+			onSortRequest
+		} = this.properties;
+
+		if (onSortRequest && (column.sortable || !column.hasOwnProperty('sortable'))) {
+			onSortRequest({
+				columnId: key,
+				descending: Boolean(sortDetail && sortDetail.columnId === key && !sortDetail.descending)
+			});
+		}
+	}
+
+	render() {
+		const {
+			key,
+			column,
+			sortDetail
+		} = this.properties;
+
+		const classes = [ headerCellClasses.headerCell, column.sortable !== false ? headerCellClasses.sortable : null ];
+
+		const sortClasses = [
+			sortDetail ? headerCellClasses.sortArrow : null,
+			sortDetail && sortDetail.descending ? headerCellClasses.sortArrowDown : null,
+			sortDetail && !sortDetail.descending ? headerCellClasses.sortArrowUp : null
+		];
+
+		return v('th', {
+			role: 'columnheader',
+			onclick: this.onSortRequest,
+			classes: this.classes(...classes)
+		}, [
+			v('span', [ column.label || column.id ]),
+			sortDetail && sortDetail.columnId === key ? v('div', {
+				role: 'presentation',
+				classes: this.classes(...sortClasses)
+			}) : null
+		]);
+	}
+}
+
+export default HeaderCell;

src/interfaces.ts

@@ -1,3 +1,8 @@
+export interface SortDetails {
+	columnId: string;
+	descending?: boolean;
+}
+
 export interface ItemProperties<T> {
 	id: string;
 	data: T;
@@ -14,6 +19,14 @@ export interface HasColumn {
 	column: Column<any>;
 }
 
+export interface HasSortDetail {
+	sortDetail: SortDetails;
+}
+
+export interface HasSortEvent {
+	onSortRequest(sortDetail: SortDetails): void;
+}
+
 export interface HasItem {
 	item: ItemProperties<any>;
 }

src/styles/dgrid.css

@@ -1 +1,2 @@
+@import 'headerCell.css';
 @import 'cell.css';

src/styles/headerCell.css

@@ -0,0 +1,25 @@
+.headerCell {
+    composes: cell from './shared/cell.css';
+    position: relative;
+}
+
+.sortable {
+    cursor: pointer;
+}
+
+.sortArrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 4px;
+}
+
+.sortArrowUp:after {
+    content: '▲';
+    display: block;
+}
+
+.sortArrowDown:after {
+    content: '▼';
+    display: block;
+}

src/styles/headerCell.css.d.ts

@@ -0,0 +1,5 @@
+export const headerCell: string;
+export const sortable: string;
+export const sortArrow: string;
+export const sortArrowUp: string;
+export const sortArrowDown: string;

tests/unit/HeaderCell.ts

@@ -0,0 +1,72 @@
+import * as registerSuite from 'intern/lib/interfaces/object';
+import { assert } from 'chai';
+import { VNode } from '@dojo/interfaces/vdom';
+import HeaderCell from '../../src/HeaderCell';
+
+registerSuite({
+	name: 'HeaderCell',
+	render: {
+		'renders sortable header cell with descending direction'() {
+			let clicked = false;
+			const properties = {
+				onSortRequest() { clicked = true; },
+				column: {
+					id: 'id',
+					label: 'foo',
+					sortable: true
+				},
+				sortDetail: {
+					columnId: 'id',
+					descending: true
+				},
+				key: 'id'
+			};
+			const headerCell = new HeaderCell();
+			headerCell.setProperties(properties);
+
+			const vnode = <VNode> headerCell.__render__();
+			vnode.properties!.onclick!.call(headerCell);
+
+			assert.strictEqual(vnode.vnodeSelector, 'th');
+			assert.isFunction(vnode.properties!.onclick);
+			assert.isTrue(clicked);
+			assert.equal(vnode.properties!['role'], 'columnheader');
+			assert.lengthOf(vnode.children, 2);
+			assert.equal(vnode.children![0].vnodeSelector, 'span');
+			assert.equal(vnode.children![0].text, 'foo');
+			assert.equal(vnode.children![1].vnodeSelector, 'div');
+			assert.equal(vnode.children![1].properties!['role'], 'presentation');
+		},
+		'renders sortable header cell with ascending direction'() {
+			let clicked = false;
+			const properties = {
+				onSortRequest() { clicked = true; },
+				column: {
+					id: 'id',
+					label: 'foo',
+					sortable: true
+				},
+				sortDetail: {
+					columnId: 'id',
+					descending: false
+				},
+				key: 'id'
+			};
+			const headerCell = new HeaderCell();
+			headerCell.setProperties(properties);
+
+			const vnode = <VNode> headerCell.__render__();
+			vnode.properties!.onclick!.call(headerCell);
+
+			assert.strictEqual(vnode.vnodeSelector, 'th');
+			assert.isFunction(vnode.properties!.onclick);
+			assert.isTrue(clicked);
+			assert.equal(vnode.properties!['role'], 'columnheader');
+			assert.lengthOf(vnode.children, 2);
+			assert.equal(vnode.children![0].vnodeSelector, 'span');
+			assert.equal(vnode.children![0].text, 'foo');
+			assert.equal(vnode.children![1].vnodeSelector, 'div');
+			assert.equal(vnode.children![1].properties!['role'], 'presentation');
+		}
+	}
+});

tests/unit/all.ts

@@ -1 +1,2 @@
+import './HeaderCell';
 import './Cell';

tslint.json

@@ -62,7 +62,7 @@
 			"variable-declaration": "onespace"
 		} ],
 		"use-strict": false,
-		"variable-name": [ true, "check-format", "allow-leading-underscore", "ban-keywords" ],
+		"variable-name": [ true, "check-format", "allow-leading-underscore", "ban-keywords", "allow-pascal-case" ],
 		"whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-module", "check-separator", "check-type", "check-typecast" ]
 	}
 }