@oscarpalmer/tabela 0.13.0 → 0.15.0

package/src/managers/render.manager.ts

@@ -1,19 +1,24 @@
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {GroupComponent, renderGroup} from '../components/group.component';
+import {renderGroup} from '../components/group.component';
 import {removeRow, renderRow} from '../components/row.component';
-import type {DataItem} from '../models/data.model';
-import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
+import {isGroupKey} from '../helpers/misc.helpers';
+import type {
+	RenderElementPool,
+	RenderRange,
+	RenderState,
+	RenderVisible,
+} from '../models/render.model';
 import type {State} from '../models/tabela.model';
 
 function getRange(state: State, down: boolean): RenderRange {
 	const {element, managers, options} = state;
 	const {clientHeight, scrollTop} = element;
 
-	const {items} = managers.data;
+	const {keys} = managers.data;
 
 	const firstIndex = Math.floor(scrollTop / options.rowHeight);
-	const lastIndex = items.length - managers.group.collapsed.size - 1;
+	const lastIndex = keys.length - managers.group.collapsed.size - 1;
 
 	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
 
@@ -57,7 +62,10 @@ export class RenderManager {
 
 	state: RenderState;
 
-	visible = new Map<number, DataItem>();
+	visible: RenderVisible = {
+		indiced: new Map(),
+		keys: new Set(),
+	};
 
 	constructor(state: State) {
 		this.listener = on(state.element, 'scroll', onScroll.bind(this));
@@ -73,7 +81,9 @@ export class RenderManager {
 		const {listener, pool, visible} = this;
 
 		listener();
-		visible.clear();
+
+		visible.indiced.clear();
+		visible.keys.clear();
 
 		const cells = Object.values(pool.cells).flat();
 
@@ -99,16 +109,16 @@ export class RenderManager {
 		this.visible = undefined as never;
 	}
 
-	removeCells(fields: string[]): void {
+	removeCells(keys: string[]): void {
 		const {pool, state, visible} = this;
-		const {length} = fields;
+		const {length} = keys;
 
 		for (let index = 0; index < length; index += 1) {
-			delete pool.cells[fields[index]];
+			delete pool.cells[keys[index]];
 		}
 
-		for (const [, key] of visible) {
-			if (key instanceof GroupComponent) {
+		for (const [, key] of visible.indiced) {
+			if (isGroupKey(key)) {
 				continue;
 			}
 
@@ -119,11 +129,11 @@ export class RenderManager {
 			}
 
 			for (let index = 0; index < length; index += 1) {
-				row.cells[fields[index]].innerHTML = '';
+				row.cells[keys[index]].innerHTML = '';
 
-				row.cells[fields[index]].remove();
+				row.cells[keys[index]].remove();
 
-				delete row.cells[fields[index]];
+				delete row.cells[keys[index]];
 			}
 		}
 	}
@@ -152,12 +162,13 @@ export class RenderManager {
 
 		let remove = rerender ?? false;
 
-		for (const [index, key] of visible) {
-			if (key instanceof GroupComponent) {
+		for (const [index, key] of visible.indiced) {
+			if (isGroupKey(key)) {
 				if (remove || !indices.has(index)) {
-					visible.delete(index);
+					visible.indiced.delete(index);
+					visible.keys.delete(key);
 
-					key.element?.remove();
+					state.managers.group.getForKey(key as string)?.element?.remove();
 				}
 
 				continue;
@@ -166,7 +177,8 @@ export class RenderManager {
 			const row = managers.row.get(key, false);
 
 			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
-				visible.delete(index);
+				visible.indiced.delete(index);
+				visible.keys.delete(key);
 
 				if (row != null) {
 					removeRow(pool, row);
@@ -176,41 +188,48 @@ export class RenderManager {
 
 		const fragment = this.getFragment();
 
-		const {items} = managers.data;
+		const {keys} = managers.data;
 
 		let count = 0;
 		let offset = 0;
 
 		for (let index = range.start; index <= range.end + offset; index += 1) {
-			if (visible.has(index)) {
+			if (visible.indiced.has(index)) {
 				continue;
 			}
 
-			const item = items[index];
+			const key = keys[index];
+
+			if (isGroupKey(key)) {
+				const group = managers.group.getForKey(key as string);
+
+				if (group == null) {
+					continue;
+				}
 
-			if (item instanceof GroupComponent) {
 				count += 1;
 
-				renderGroup(state, item);
+				renderGroup(state, group);
 
-				visible.set(index, item);
+				visible.indiced.set(index, group.key);
+				visible.keys.add(group.key);
 
-				if (item.element != null) {
-					item.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+				if (group.element != null) {
+					group.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 
-					fragment.append(item.element);
+					fragment.append(group.element);
 				}
 
 				continue;
 			}
 
-			const row = managers.row.get(item, true);
+			const row = managers.row.get(key, true);
 
 			if (row == null) {
 				continue;
 			}
 
-			if (managers.group.collapsed.has(item)) {
+			if (managers.group.collapsed.has(key)) {
 				offset += 1;
 
 				continue;
@@ -220,7 +239,8 @@ export class RenderManager {
 
 			renderRow(state, row);
 
-			visible.set(index, item);
+			visible.indiced.set(index, key);
+			visible.keys.add(key);
 
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
@@ -229,8 +249,14 @@ export class RenderManager {
 			}
 		}
 
-		if (count > 0) {
-			components.body.elements.group[down ? 'append' : 'prepend'](fragment);
+		if (count === 0) {
+			return;
+		}
+
+		if (down) {
+			components.body.elements.group.append(fragment);
+		} else {
+			components.body.elements.group.prepend(fragment);
 		}
 	}
 }

package/src/managers/row.manager.ts

@@ -62,7 +62,7 @@ export class RowManager {
 	update(key: Key): void {
 		const row = this.components.get(key);
 
-		if (row != null) {
+		if (row?.element != null) {
 			renderRow(this.state, row);
 		}
 	}

package/src/managers/selection.manager.ts

@@ -4,26 +4,22 @@ import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import type {EventPosition} from '@oscarpalmer/toretto/models';
-import {GroupComponent} from '../components/group.component';
 import {createElement} from '../helpers/dom.helpers';
-import {getKey} from '../helpers/misc.helpers';
+import {getKey, isGroupKey} from '../helpers/misc.helpers';
 import {preventSelection} from '../helpers/style.helper';
+import {ARIA_SELECTED, ATTRIBUTE_DATA_KEY, ELEMENT_DIV} from '../models/dom.model';
 import type {TabelaSelection} from '../models/selection.model';
-import {
-	CSS_TABELA_ROW_BODY,
-	CSS_TABELA_ROW_SELECTED,
-	CSS_TABELA_SELECTION,
-} from '../models/style.model';
+import {CSS_ROW_BODY, CSS_ROW_SELECTED, CSS_SELECTION, CSS_TABLE} from '../models/style.model';
 import type {State} from '../models/tabela.model';
 
 export class SelectionManager {
-	handlers = Object.freeze({
+	handlers: TabelaSelection = {
 		add: keys => this.add(keys),
 		clear: () => this.clear(),
 		remove: keys => this.remove(keys),
 		set: keys => this.set(keys),
 		toggle: () => this.toggle(),
-	} satisfies TabelaSelection);
+	};
 
 	items = new Set<Key>();
 
@@ -75,7 +71,7 @@ export class SelectionManager {
 	}
 
 	handle(event: MouseEvent, target: HTMLElement): void {
-		const key = getKey(target.getAttribute('data-key'));
+		const key = getKey(target.getAttribute(ATTRIBUTE_DATA_KEY));
 
 		if (key == null) {
 			return;
@@ -115,14 +111,19 @@ export class SelectionManager {
 
 		const keyed = isKey(from) && isKey(to);
 
-		const fromKey = keyed ? (from as Key) : getKey((from as HTMLElement).getAttribute('data-key'))!;
-		const toKey = keyed ? (to as Key) : getKey((to as HTMLElement).getAttribute('data-key'))!;
+		const fromKey = keyed
+			? (from as Key)
+			: getKey((from as HTMLElement).getAttribute(ATTRIBUTE_DATA_KEY))!;
+
+		const toKey = keyed
+			? (to as Key)
+			: getKey((to as HTMLElement).getAttribute(ATTRIBUTE_DATA_KEY))!;
 
 		if (fromKey === toKey) {
 			return;
 		}
 
-		const {items} = state.managers.data;
+		const {keys} = state.managers.data;
 
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
@@ -136,10 +137,10 @@ export class SelectionManager {
 		const selected: Key[] = [];
 
 		for (let index = start; index <= end; index += 1) {
-			const item = items[index];
+			const key = keys[index];
 
-			if (!(item instanceof GroupComponent)) {
-				selected.push(item as Key);
+			if (!isGroupKey(key)) {
+				selected.push(key);
 			}
 		}
 
@@ -189,12 +190,12 @@ export class SelectionManager {
 
 	toggle(): void {
 		const {items, state} = this;
-		const data = state.managers.data.items;
+		const {keys} = state.managers.data;
 
-		if (items.size === data.length - state.managers.group.items.length) {
+		if (items.size === keys.length - state.managers.group.items.length) {
 			this.clear();
 		} else {
-			this.set(data.filter(key => !(key instanceof GroupComponent)) as Key[]);
+			this.set(keys.filter(key => !isGroupKey(key)));
 		}
 	}
 
@@ -217,33 +218,28 @@ export class SelectionManager {
 				continue;
 			}
 
-			setAttribute(element, 'aria-selected', String(!removed));
+			setAttribute(element, ARIA_SELECTED, String(!removed));
 
 			if (removed) {
-				element.classList.remove(CSS_TABELA_ROW_SELECTED);
+				element.classList.remove(CSS_ROW_SELECTED);
 			} else {
-				element.classList.add(CSS_TABELA_ROW_SELECTED);
+				element.classList.add(CSS_ROW_SELECTED);
 			}
 		}
 	}
 }
 
 function getPlaceholder(): HTMLElement {
-	placeholder ??= createElement(
-		'div',
-		{
-			className: CSS_TABELA_SELECTION,
-		},
-		{},
-		{},
-	);
+	placeholder ??= createElement(ELEMENT_DIV, {
+		className: CSS_SELECTION,
+	});
 
 	return placeholder;
 }
 
 function onMouseDown(event: MouseEvent): void {
 	if (shifted) {
-		const row = findAncestor(event.target as HTMLElement, `.${CSS_TABELA_ROW_BODY}`);
+		const row = findAncestor(event.target as HTMLElement, `.${CSS_ROW_BODY}`);
 
 		if (!(row instanceof HTMLElement)) {
 			return;
@@ -298,13 +294,13 @@ function onMouseUp(event: MouseEvent): void {
 
 	getPlaceholder().remove();
 
-	const row = findAncestor(event.target as HTMLElement, '.tabela__row--body');
+	const row = findAncestor(event.target as HTMLElement, bodyRowSelector);
 
 	if (row instanceof HTMLElement) {
 		endElement = row;
 
-		const endTable = findAncestor(endElement, '.tabela__table');
-		const startTable = findAncestor(startElement, '.tabela__table');
+		const endTable = findAncestor(endElement, tableSelector);
+		const startTable = findAncestor(startElement, tableSelector);
 
 		if (startTable != null && startTable === endTable) {
 			mapped.get(startTable)?.range(startElement, endElement);
@@ -317,7 +313,7 @@ function onMouseUp(event: MouseEvent): void {
 }
 
 function onShift(event: KeyboardEvent, value: boolean): void {
-	if (event.key === 'Shift') {
+	if (event.key === KEY_SHIFT) {
 		shifted = value;
 	}
 }
@@ -330,8 +326,14 @@ function onShiftUp(event: KeyboardEvent): void {
 	onShift(event, false);
 }
 
+const KEY_SHIFT = 'Shift';
+
 const mapped = new WeakMap<Element, SelectionManager>();
 
+const bodyRowSelector = `.${CSS_ROW_BODY}`;
+
+const tableSelector = `.${CSS_TABLE}`;
+
 let shifted = false;
 
 let endElement: HTMLElement | undefined;