@oscarpalmer/tabela 0.9.0 → 0.11.0

package/src/managers/filter.manager.ts

@@ -4,7 +4,7 @@ import {getString} from '@oscarpalmer/atoms/string';
 import {endsWith, includes, startsWith} from '@oscarpalmer/atoms/string/match';
 import {equal} from '@oscarpalmer/atoms/value/equal';
 import type {FilterComparison, FilterItem} from '../models/filter.model';
-import type {TabelaFilter, TabelaManagers} from '../models/tabela.model';
+import type {TabelaFilter, TabelaState} from '../models/tabela.model';
 
 export class FilterManager {
 	handlers = Object.freeze({
@@ -16,7 +16,7 @@ export class FilterManager {
 
 	items: Record<string, FilterItem[]> = {};
 
-	constructor(readonly managers: TabelaManagers) {}
+	constructor(public state: TabelaState) {}
 
 	add(item: FilterItem): void {
 		if (this.items[item.field] == null) {
@@ -44,20 +44,21 @@ export class FilterManager {
 
 	destroy(): void {
 		this.handlers = undefined as never;
-		this.items = {};
+		this.items = undefined as never;
+		this.state = undefined as never;
 	}
 
 	filter(): void {
-		const {managers} = this;
+		const {state} = this;
 
 		const filtered: Key[] = [];
 		const filters = Object.entries(this.items);
 
-		const keysLength = managers.data.values.keys.original.length;
+		const keysLength = state.managers.data.values.keys.original.length;
 
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = managers.data.values.keys.original[keyIndex];
-			const row = managers.data.values.objects.mapped.get(key);
+			const key = state.managers.data.values.keys.original[keyIndex];
+			const row = state.managers.data.values.objects.mapped.get(key);
 
 			if (row == null) {
 				continue;
@@ -82,12 +83,12 @@ export class FilterManager {
 			filtered.push(key);
 		}
 
-		managers.data.values.keys.active = filtered;
+		state.managers.data.values.keys.active = filtered;
 
-		if (managers.sort.items.length > 0) {
-			managers.sort.sort();
+		if (state.managers.sort.items.length > 0) {
+			state.managers.sort.sort();
 		} else {
-			managers.virtualization.update(true, true);
+			state.managers.render.update(true, true);
 		}
 	}
 

package/src/managers/navigation.manager.ts

@@ -0,0 +1,145 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import type {Key} from '@oscarpalmer/atoms/models';
+import {clamp} from '@oscarpalmer/atoms/number';
+import {getKey} from '../helpers/misc.helpers';
+import type {TabelaState} from '../models/tabela.model';
+
+export class NavigationManager {
+	active: Key | undefined;
+
+	constructor(public state: TabelaState) {}
+
+	destroy(): void {
+		this.state = undefined as never;
+	}
+
+	handle(event: KeyboardEvent): void {
+		if (!allKeys.has(event.key)) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const {components, id, managers} = this.state;
+
+		const activeDescendant = components.body.elements.group.getAttribute('aria-activedescendant');
+
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const {length} = keys;
+
+		let next: number;
+
+		if (isNullableOrWhitespace(activeDescendant)) {
+			next = getDefaultIndex(event.key, length);
+		} else {
+			next = getIndex(event, activeDescendant, id, keys)!;
+		}
+
+		if (next != null) {
+			this.setActive(keys.at(next)!);
+		}
+	}
+
+	setActive(key: Key | undefined, scroll?: boolean): void {
+		const {components, managers, options} = this.state;
+
+		this.active = key;
+
+		const active = components.body.elements.group.querySelectorAll('[data-active="true"]');
+
+		for (const item of active) {
+			item.setAttribute('data-active', 'false');
+		}
+
+		const row = managers.row.get(key!);
+
+		if (row != null) {
+			row.element?.setAttribute('data-active', 'true');
+
+			if (scroll ?? true) {
+				if (row.element == null) {
+					components.body.elements.group.scrollTo({
+						top: managers.data.getIndex(key!) * options.rowHeight,
+						behavior: 'smooth',
+					});
+				} else {
+					row.element.scrollIntoView({
+						block: 'nearest',
+					});
+				}
+			}
+		}
+
+		components.body.elements.group.setAttribute(
+			'aria-activedescendant',
+			row == null ? '' : `tabela_${this.state.id}_row_${key}`,
+		);
+	}
+}
+
+function getDefaultIndex(key: string, max: number): number {
+	switch (true) {
+		case negativeDefaultKeys.has(key):
+			return -1;
+
+		case key === 'PageDown':
+			return Math.min(9, max - 1);
+
+		case key === 'PageUp':
+			return max < 10 ? 0 : max - 10;
+
+		default:
+			return 0;
+	}
+}
+
+function getIndex(
+	event: KeyboardEvent,
+	active: string,
+	id: number,
+	keys: Key[],
+): number | undefined {
+	const key = getKey(active.replace(`tabela_${id}_row_`, ''));
+
+	if (key == null) {
+		return;
+	}
+
+	if (absoluteKeys.has(event.key)) {
+		return event.key === 'Home' ? 0 : keys.length - 1;
+	}
+
+	const index = keys.indexOf(key);
+	const offset = getOffset(event.key);
+
+	return clamp(index + offset, 0, keys.length - 1, true);
+}
+
+function getOffset(key: string): number {
+	switch (key) {
+		case 'ArrowDown':
+			return 1;
+
+		case 'ArrowUp':
+			return -1;
+
+		case 'PageDown':
+			return 10;
+
+		case 'PageUp':
+			return -10;
+
+		default:
+			return 0;
+	}
+}
+
+const absoluteKeys = new Set(['End', 'Home']);
+
+const arrowKeys = new Set(['ArrowDown', 'ArrowUp']);
+
+const negativeDefaultKeys = new Set(['ArrowUp', 'End']);
+
+const pageKeys = new Set(['PageDown', 'PageUp']);
+
+const allKeys = new Set([...absoluteKeys, ...arrowKeys, ...pageKeys]);

package/src/managers/render.manager.ts

@@ -0,0 +1,184 @@
+import type {Key} from '@oscarpalmer/atoms/models';
+import {on} from '@oscarpalmer/toretto/event';
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {removeRow, renderRow} from '../components/row.component';
+import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
+import type {TabelaState} from '../models/tabela.model';
+
+function getRange(this: RenderManager, down: boolean): RenderRange {
+	const {components, managers, options} = this.state;
+	const {clientHeight, scrollTop} = components.body.elements.group;
+
+	const first = Math.floor(scrollTop / options.rowHeight);
+
+	const last = Math.min(
+		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
+		Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1,
+	);
+
+	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
+	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
+
+	const start = Math.max(0, first - before);
+
+	const end = Math.min(
+		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
+		last + after,
+	);
+
+	return {end, start};
+}
+
+function onScroll(this: RenderManager): void {
+	const {state} = this;
+
+	if (!state.active) {
+		requestAnimationFrame(() => {
+			const top = state.components.body.elements.group.scrollTop;
+
+			this.update(top > state.top);
+
+			state.active = false;
+			state.top = top;
+		});
+
+		state.active = true;
+	}
+}
+
+export class RenderManager {
+	fragment!: DocumentFragment;
+
+	listener: RemovableEventListener;
+
+	pool: RenderElementPool = {
+		cells: {},
+		rows: [],
+	};
+
+	state: RenderState;
+
+	visible = new Map<number, Key>();
+
+	constructor(state: TabelaState) {
+		this.listener = on(state.components.body.elements.group, 'scroll', onScroll.bind(this));
+
+		this.state = {
+			...state,
+			active: false,
+			top: 0,
+		};
+	}
+
+	destroy(): void {
+		const {listener, pool, visible} = this;
+
+		listener();
+		visible.clear();
+
+		pool.cells = {};
+		pool.rows = [];
+
+		this.fragment = undefined as never;
+		this.listener = undefined as never;
+		this.pool = undefined as never;
+		this.state = undefined as never;
+		this.visible = undefined as never;
+	}
+
+	removeCells(fields: string[]): void {
+		const {pool, state, visible} = this;
+		const {length} = fields;
+
+		for (let index = 0; index < length; index += 1) {
+			delete pool.cells[fields[index]];
+		}
+
+		for (const [, key] of visible) {
+			const row = state.managers.row.get(key);
+
+			if (row == null || row.element == null) {
+				continue;
+			}
+
+			for (let index = 0; index < length; index += 1) {
+				row.cells[fields[index]].innerHTML = '';
+
+				row.cells[fields[index]].remove();
+
+				delete row.cells[fields[index]];
+			}
+		}
+	}
+
+	getFragment(): DocumentFragment {
+		this.fragment ??= document.createDocumentFragment();
+
+		this.fragment.replaceChildren();
+
+		return this.fragment;
+	}
+
+	update(down: boolean, rerender?: boolean): void {
+		const {state, pool, visible} = this;
+		const {components, managers, options} = state;
+
+		components.body.elements.faker.style.height = `${managers.data.size * options.rowHeight}px`;
+
+		const indices = new Set<number>();
+		const range = getRange.call(this, down);
+
+		for (let index = range.start; index <= range.end; index += 1) {
+			indices.add(index);
+		}
+
+		let remove = rerender ?? false;
+
+		for (const [index, key] of visible) {
+			const row = managers.row.get(key);
+
+			if (remove || row == null || !indices.has(index)) {
+				visible.delete(index);
+
+				if (row != null) {
+					removeRow(pool, row);
+				}
+			}
+		}
+
+		const fragment = this.getFragment();
+
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+
+		let count = 0;
+
+		for (let index = range.start; index <= range.end; index += 1) {
+			if (visible.has(index)) {
+				continue;
+			}
+
+			const key = keys[index];
+			const row = managers.row.get(key);
+
+			if (row == null) {
+				continue;
+			}
+
+			count += 1;
+
+			renderRow(state, row);
+
+			visible.set(index, key);
+
+			if (row.element != null) {
+				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
+
+				fragment.append(row.element);
+			}
+		}
+
+		if (count > 0) {
+			components.body.elements.group[down ? 'append' : 'prepend'](fragment);
+		}
+	}
+}

package/src/managers/row.manager.ts

@@ -1,29 +1,24 @@
 import type {Key} from '@oscarpalmer/atoms/models';
 import {removeRow, renderRow, RowComponent} from '../components/row.component';
-import type {TabelaManagers} from '../models/tabela.model';
+import type {TabelaState} from '../models/tabela.model';
 
 export class RowManager {
-	readonly components: Map<Key, RowComponent> = new Map();
+	components = new Map<Key, RowComponent>();
 
-	readonly height: number;
-
-	constructor(
-		readonly managers: TabelaManagers,
-		rowHeight: number,
-	) {
-		this.height = rowHeight;
-	}
+	constructor(public state: TabelaState) {}
 
 	destroy(): void {
 		const components = [...this.components.values()];
-
 		const {length} = components;
 
 		for (let index = 0; index < length; index += 1) {
-			removeRow(this.managers.virtualization.pool, components[index]);
+			removeRow(this.state.managers.render.pool, components[index]);
 		}
 
 		this.components.clear();
+
+		this.components = undefined as never;
+		this.state = undefined as never;
 	}
 
 	get(key: Key): RowComponent | undefined {
@@ -46,7 +41,7 @@ export class RowManager {
 		const row = this.components.get(key);
 
 		if (row != null) {
-			removeRow(this.managers.virtualization.pool, row);
+			removeRow(this.state.managers.render.pool, row);
 
 			this.components.delete(key);
 		}
@@ -56,7 +51,7 @@ export class RowManager {
 		const row = this.components.get(key);
 
 		if (row != null) {
-			renderRow(this.managers, row);
+			renderRow(this.state, row);
 		}
 	}
 }