feat(cosmoz-data-nav-pure): haunted implementation

I decided to have a whack at a more declarative data-nav. The result is a very reliable data-nav that does away with all of the complexity of keeping an item cache and mutable data. It relies on immutable data being passed from the component above. It keeps the maintain selection and need-data behaviour.

The only thing missing is the transition animation, which I will add in a follow-up PR.

This is meant to be used only with renderItem functions that render haunted views. This is not tested with polymer views and will likely cause bugs, due to polymer's use of mutable state.

Author: cristinecula

cosmoz-data-nav-pure.js

@@ -0,0 +1,40 @@
+import {
+	component, useState, useCallback
+} from 'haunted';
+
+import { useNotifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
+import { useMaintainSelection } from './lib/use-maintain-selection';
+import { useTriggerPreload } from './lib/use-trigger-preload';
+
+const
+	useCosmozDataNav = host => {
+		const
+			{
+				items,
+				renderItem,
+				maintainSelection
+			} = host,
+			[selected, setSelected] = useState(0);
+
+		useTriggerPreload(host, items, selected);
+		useMaintainSelection(items, selected, maintainSelection, setSelected);
+		useNotifyProperty('selected', selected);
+
+		return {
+			items,
+			renderItem,
+			selected,
+			advance: useCallback(n => setSelected(selected => selected + n), [])
+		};
+	},
+
+	renderCosmozDataNav = ({
+		items,
+		renderItem,
+		selected,
+		advance
+	}) => items[selected] && renderItem(items[selected], selected, items, advance),
+
+	CosmozDataNavPure = host => renderCosmozDataNav(useCosmozDataNav(host));
+
+customElements.define('cosmoz-data-nav-pure', component(CosmozDataNavPure, { useShadowDOM: false }));

lib/use-maintain-selection.js

@@ -0,0 +1,31 @@
+import {
+	useState, useEffect
+} from 'haunted';
+
+export const useMaintainSelection = (items, selected, maintainSelection, setSelected) => {
+	const [selectedItem, setSelectedItem] = useState(items?.[selected]);
+
+	useEffect(() => {
+		setSelectedItem(items?.[selected]);
+	}, [items, selected]);
+
+	useEffect(() => {
+		if (maintainSelection === false) {
+			setSelected(0);
+			return;
+		}
+
+		const index = items.findIndex(item => (item?.id || item) === (selectedItem?.id || selectedItem));
+
+		if (index === -1) {
+			setSelected(0);
+			return;
+		}
+
+		if (index === selected) {
+			return;
+		}
+
+		setSelected(index);
+	}, [items]); // We intentionally only run this code when `items` changes.
+};

lib/use-trigger-preload.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'haunted';
+
+const needData = (host, item) => item != null && typeof item !== 'object' && host.dispatchEvent(new CustomEvent('need-data', { detail: { id: item }}));
+
+export const useTriggerPreload = (host, items, selected) =>
+	useEffect(() => {
+		if (items.length === 0) {
+			return;
+		}
+
+		needData(host, items[selected - 1]);
+		needData(host, items[selected]);
+		needData(host, items[selected + 1]);
+	}, [items, selected]);