@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/sortable/reorderSortOrder.ts

@@ -1,126 +1,126 @@
-import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import type { DataObject } from "@olenbetong/appframe-data";
-
-import { DEFAULT_SORT_ORDER_SPACING, ensureNonZeroSortOrder } from "./sortOrder.js";
-import type { SortableRecord } from "./types.js";
-
-function hasDuplicateSortOrders<T extends SortableRecord>(records: T[]) {
-	if (records.length < 2) return false;
-	let values = new Set(records.map((record) => record.SortOrder ?? 0));
-	return values.size !== records.length;
-}
-
-export interface ReorderSortOrderOptions<T extends SortableRecord> {
-	/** Records in their current (sorted) order */
-	records: T[];
-	/** `PrimKey` of the record being moved */
-	sourcePrimKey: string;
-	/** `PrimKey` of the record it is dropped on */
-	targetPrimKey: string;
-	/** Which edge of the target it was dropped on. `"bottom"` places it after the target */
-	edge: Edge | null;
-	/** Spacing used when appending to the end of the list */
-	spacing?: number;
-	/**
-	 * Called when the list contains duplicate sort orders, which means there is
-	 * no free decimal slot to move an item into. Typically executes a stored
-	 * procedure that renumbers the list with even spacing.
-	 */
-	onNormalize?: () => Promise<void>;
-	/** Reloads the records after normalizing. Required for `onNormalize` to have an effect */
-	refreshRecords?: () => Promise<T[]>;
-	/** Data object holding the list records. Updated locally for an optimistic render */
-	listDataObject: DataObject<T>;
-	/** Data object used to persist the new sort order. Defaults to `listDataObject` */
-	updateDataObject: DataObject<any>;
-}
-
-/**
- * Moves a record to a new position by giving it a sort order between its new
- * neighbours, normalizing the list first if there is no room left.
- */
-export async function reorderSortOrder<T extends SortableRecord>({
-	records,
-	sourcePrimKey,
-	targetPrimKey,
-	edge,
-	spacing = DEFAULT_SORT_ORDER_SPACING,
-	onNormalize,
-	refreshRecords,
-	listDataObject,
-	updateDataObject,
-}: ReorderSortOrderOptions<T>) {
-	let currentRecords = records;
-	if (onNormalize && hasDuplicateSortOrders(currentRecords)) {
-		await onNormalize();
-		if (refreshRecords) {
-			currentRecords = await refreshRecords();
-		}
-	}
-
-	let from = currentRecords.findIndex((record) => record.PrimKey === sourcePrimKey);
-	let to = currentRecords.findIndex((record) => record.PrimKey === targetPrimKey);
-	if (from < 0 || to < 0) return;
-
-	let targetIndex = to;
-	if (edge === "bottom") {
-		targetIndex += 1;
-	}
-	if (targetIndex === from) return;
-
-	let existingSortOrders = currentRecords
-		.filter((_, idx) => idx !== from)
-		.map((record) => (record.SortOrder ?? 0) as number);
-
-	let newSort = currentRecords[from].SortOrder ?? spacing;
-	let beforeSort: number | null = null;
-	let afterSort: number | null = null;
-
-	if (targetIndex === 0) {
-		afterSort = currentRecords[0]?.SortOrder ?? null;
-		newSort = afterSort == null ? spacing : afterSort / 2;
-	} else if (targetIndex >= currentRecords.length) {
-		beforeSort = currentRecords[currentRecords.length - 1]?.SortOrder ?? null;
-		newSort = beforeSort == null ? spacing : beforeSort + spacing;
-	} else {
-		beforeSort = currentRecords[targetIndex - 1].SortOrder ?? null;
-		afterSort = currentRecords[targetIndex].SortOrder ?? null;
-		let beforeValue = beforeSort ?? spacing;
-		let afterValue = afterSort ?? spacing;
-		newSort = (beforeValue + afterValue) / 2;
-	}
-
-	newSort = ensureNonZeroSortOrder(newSort, {
-		before: beforeSort,
-		after: afterSort,
-		existing: existingSortOrders,
-		step: spacing,
-	});
-
-	let primKey = currentRecords[from].PrimKey;
-
-	let applyLocalSortOrder = <TRecord extends SortableRecord>(
-		dataObject: DataObject<TRecord>,
-		updated: Partial<TRecord>,
-	) => {
-		if (!updated.PrimKey) return;
-		let index = dataObject.findIndex((record) => record.PrimKey === updated.PrimKey);
-		if (index < 0) return;
-
-		dataObject.updateRow(index, updated);
-	};
-
-	let changes = { PrimKey: primKey, SortOrder: newSort } as Partial<T>;
-	applyLocalSortOrder(listDataObject, changes);
-	if (updateDataObject !== listDataObject) {
-		applyLocalSortOrder(updateDataObject, changes);
-	}
-
-	let updatedRow = await updateDataObject.dataHandler.update(changes);
-	if (updatedRow && typeof updatedRow === "object") {
-		applyLocalSortOrder(listDataObject, updatedRow);
-		if (updateDataObject !== listDataObject) {
-			applyLocalSortOrder(updateDataObject, updatedRow);
-		}
-	}
-}
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import type { DataObject } from "@olenbetong/appframe-data";
+
+import { DEFAULT_SORT_ORDER_SPACING, ensureNonZeroSortOrder } from "./sortOrder.js";
+import type { SortableRecord } from "./types.js";
+
+function hasDuplicateSortOrders<T extends SortableRecord>(records: T[]) {
+	if (records.length < 2) return false;
+	let values = new Set(records.map((record) => record.SortOrder ?? 0));
+	return values.size !== records.length;
+}
+
+export interface ReorderSortOrderOptions<T extends SortableRecord> {
+	/** Records in their current (sorted) order */
+	records: T[];
+	/** `PrimKey` of the record being moved */
+	sourcePrimKey: string;
+	/** `PrimKey` of the record it is dropped on */
+	targetPrimKey: string;
+	/** Which edge of the target it was dropped on. `"bottom"` places it after the target */
+	edge: Edge | null;
+	/** Spacing used when appending to the end of the list */
+	spacing?: number;
+	/**
+	 * Called when the list contains duplicate sort orders, which means there is
+	 * no free decimal slot to move an item into. Typically executes a stored
+	 * procedure that renumbers the list with even spacing.
+	 */
+	onNormalize?: () => Promise<void>;
+	/** Reloads the records after normalizing. Required for `onNormalize` to have an effect */
+	refreshRecords?: () => Promise<T[]>;
+	/** Data object holding the list records. Updated locally for an optimistic render */
+	listDataObject: DataObject<T>;
+	/** Data object used to persist the new sort order. Defaults to `listDataObject` */
+	updateDataObject: DataObject<any>;
+}
+
+/**
+ * Moves a record to a new position by giving it a sort order between its new
+ * neighbours, normalizing the list first if there is no room left.
+ */
+export async function reorderSortOrder<T extends SortableRecord>({
+	records,
+	sourcePrimKey,
+	targetPrimKey,
+	edge,
+	spacing = DEFAULT_SORT_ORDER_SPACING,
+	onNormalize,
+	refreshRecords,
+	listDataObject,
+	updateDataObject,
+}: ReorderSortOrderOptions<T>) {
+	let currentRecords = records;
+	if (onNormalize && hasDuplicateSortOrders(currentRecords)) {
+		await onNormalize();
+		if (refreshRecords) {
+			currentRecords = await refreshRecords();
+		}
+	}
+
+	let from = currentRecords.findIndex((record) => record.PrimKey === sourcePrimKey);
+	let to = currentRecords.findIndex((record) => record.PrimKey === targetPrimKey);
+	if (from < 0 || to < 0) return;
+
+	let targetIndex = to;
+	if (edge === "bottom") {
+		targetIndex += 1;
+	}
+	if (targetIndex === from) return;
+
+	let existingSortOrders = currentRecords
+		.filter((_, idx) => idx !== from)
+		.map((record) => (record.SortOrder ?? 0) as number);
+
+	let newSort = currentRecords[from].SortOrder ?? spacing;
+	let beforeSort: number | null = null;
+	let afterSort: number | null = null;
+
+	if (targetIndex === 0) {
+		afterSort = currentRecords[0]?.SortOrder ?? null;
+		newSort = afterSort == null ? spacing : afterSort / 2;
+	} else if (targetIndex >= currentRecords.length) {
+		beforeSort = currentRecords[currentRecords.length - 1]?.SortOrder ?? null;
+		newSort = beforeSort == null ? spacing : beforeSort + spacing;
+	} else {
+		beforeSort = currentRecords[targetIndex - 1].SortOrder ?? null;
+		afterSort = currentRecords[targetIndex].SortOrder ?? null;
+		let beforeValue = beforeSort ?? spacing;
+		let afterValue = afterSort ?? spacing;
+		newSort = (beforeValue + afterValue) / 2;
+	}
+
+	newSort = ensureNonZeroSortOrder(newSort, {
+		before: beforeSort,
+		after: afterSort,
+		existing: existingSortOrders,
+		step: spacing,
+	});
+
+	let primKey = currentRecords[from].PrimKey;
+
+	let applyLocalSortOrder = <TRecord extends SortableRecord>(
+		dataObject: DataObject<TRecord>,
+		updated: Partial<TRecord>,
+	) => {
+		if (!updated.PrimKey) return;
+		let index = dataObject.findIndex((record) => record.PrimKey === updated.PrimKey);
+		if (index < 0) return;
+
+		dataObject.updateRow(index, updated);
+	};
+
+	let changes = { PrimKey: primKey, SortOrder: newSort } as Partial<T>;
+	applyLocalSortOrder(listDataObject, changes);
+	if (updateDataObject !== listDataObject) {
+		applyLocalSortOrder(updateDataObject, changes);
+	}
+
+	let updatedRow = await updateDataObject.dataHandler.update(changes);
+	if (updatedRow && typeof updatedRow === "object") {
+		applyLocalSortOrder(listDataObject, updatedRow);
+		if (updateDataObject !== listDataObject) {
+			applyLocalSortOrder(updateDataObject, updatedRow);
+		}
+	}
+}

package/src/sortable/sortOrder.ts

@@ -1,101 +1,101 @@
-export const DEFAULT_SORT_ORDER_SPACING = 128;
-
-export interface EnsureSortOrderOptions {
-	before?: number | null;
-	after?: number | null;
-	existing?: number[];
-	step?: number;
-}
-
-function sanitizeExisting(values: number[] | undefined): number[] {
-	if (!values?.length) {
-		return [];
-	}
-
-	return values.map((value) => (typeof value === "number" && Number.isFinite(value) ? value : 0)).sort((a, b) => a - b);
-}
-
-/**
- * Zero is treated as "no sort order" by the database, so a computed sort order
- * of exactly zero must be nudged to a nearby free value.
- *
- * @param candidate The computed sort order
- * @param options Neighbouring and existing sort orders used to find a free slot
- * @returns A non-zero sort order that keeps the intended position
- */
-export function ensureNonZeroSortOrder(candidate: number, options: EnsureSortOrderOptions = {}): number {
-	if (candidate !== 0) {
-		return candidate;
-	}
-
-	let { before = null, after = null, existing, step = DEFAULT_SORT_ORDER_SPACING } = options;
-	let sanitizedExisting = sanitizeExisting(existing);
-
-	if (typeof before === "number" && before < 0) {
-		let adjusted = before / 2;
-		let attempts = 0;
-		while ((adjusted === 0 || sanitizedExisting.includes(adjusted)) && attempts < 10) {
-			adjusted /= 2;
-			attempts += 1;
-		}
-
-		if (adjusted !== 0 && !sanitizedExisting.includes(adjusted)) {
-			return adjusted;
-		}
-	}
-
-	if (before == null && typeof after === "number" && after > 0) {
-		let adjusted = -Math.abs(after) / 2;
-		let attempts = 0;
-		while ((adjusted === 0 || sanitizedExisting.includes(adjusted)) && attempts < 10) {
-			adjusted /= 2;
-			attempts += 1;
-		}
-
-		if (adjusted !== 0 && !sanitizedExisting.includes(adjusted)) {
-			return adjusted;
-		}
-	}
-
-	let negativeValues = sanitizedExisting.filter((value) => value < 0);
-	if (negativeValues.length > 0) {
-		let adjusted = negativeValues[negativeValues.length - 1] / 2;
-		let attempts = 0;
-		while ((adjusted === 0 || sanitizedExisting.includes(adjusted)) && attempts < 10) {
-			adjusted /= 2;
-			attempts += 1;
-		}
-
-		if (adjusted !== 0 && !sanitizedExisting.includes(adjusted)) {
-			return adjusted;
-		}
-	}
-
-	let minValue = sanitizedExisting.length ? sanitizedExisting[0] : 0;
-	let adjusted = minValue <= 0 ? minValue - step : -step;
-	while (adjusted === 0 || sanitizedExisting.includes(adjusted)) {
-		adjusted -= step;
-	}
-
-	return adjusted;
-}
-
-/**
- * Computes the sort order to use for a new item appended to the end of a list.
- * The next sort order is the highest existing sort order plus the default
- * spacing, or the default spacing if the list is empty. The result is
- * guaranteed to be non-zero, since zero is used as "no sort order" in the
- * database.
- *
- * @param existingSortOrders Sort orders of the items already in the list
- * @returns The sort order to assign to the new item
- */
-export function getNextSortOrder(existingSortOrders: (number | null | undefined)[]): number {
-	let sortOrders = existingSortOrders
-		.map((value) => (typeof value === "number" && Number.isFinite(value) ? value : 0))
-		.sort((a, b) => a - b);
-	let beforeSort = sortOrders.length > 0 ? sortOrders[sortOrders.length - 1] : null;
-	let newSort = beforeSort == null ? DEFAULT_SORT_ORDER_SPACING : beforeSort + DEFAULT_SORT_ORDER_SPACING;
-
-	return ensureNonZeroSortOrder(newSort, { after: beforeSort, existing: sortOrders });
-}
+export const DEFAULT_SORT_ORDER_SPACING = 128;
+
+export interface EnsureSortOrderOptions {
+	before?: number | null;
+	after?: number | null;
+	existing?: number[];
+	step?: number;
+}
+
+function sanitizeExisting(values: number[] | undefined): number[] {
+	if (!values?.length) {
+		return [];
+	}
+
+	return values.map((value) => (typeof value === "number" && Number.isFinite(value) ? value : 0)).sort((a, b) => a - b);
+}
+
+/**
+ * Zero is treated as "no sort order" by the database, so a computed sort order
+ * of exactly zero must be nudged to a nearby free value.
+ *
+ * @param candidate The computed sort order
+ * @param options Neighbouring and existing sort orders used to find a free slot
+ * @returns A non-zero sort order that keeps the intended position
+ */
+export function ensureNonZeroSortOrder(candidate: number, options: EnsureSortOrderOptions = {}): number {
+	if (candidate !== 0) {
+		return candidate;
+	}
+
+	let { before = null, after = null, existing, step = DEFAULT_SORT_ORDER_SPACING } = options;
+	let sanitizedExisting = sanitizeExisting(existing);
+
+	if (typeof before === "number" && before < 0) {
+		let adjusted = before / 2;
+		let attempts = 0;
+		while ((adjusted === 0 || sanitizedExisting.includes(adjusted)) && attempts < 10) {
+			adjusted /= 2;
+			attempts += 1;
+		}
+
+		if (adjusted !== 0 && !sanitizedExisting.includes(adjusted)) {
+			return adjusted;
+		}
+	}
+
+	if (before == null && typeof after === "number" && after > 0) {
+		let adjusted = -Math.abs(after) / 2;
+		let attempts = 0;
+		while ((adjusted === 0 || sanitizedExisting.includes(adjusted)) && attempts < 10) {
+			adjusted /= 2;
+			attempts += 1;
+		}
+
+		if (adjusted !== 0 && !sanitizedExisting.includes(adjusted)) {
+			return adjusted;
+		}
+	}
+
+	let negativeValues = sanitizedExisting.filter((value) => value < 0);
+	if (negativeValues.length > 0) {
+		let adjusted = negativeValues[negativeValues.length - 1] / 2;
+		let attempts = 0;
+		while ((adjusted === 0 || sanitizedExisting.includes(adjusted)) && attempts < 10) {
+			adjusted /= 2;
+			attempts += 1;
+		}
+
+		if (adjusted !== 0 && !sanitizedExisting.includes(adjusted)) {
+			return adjusted;
+		}
+	}
+
+	let minValue = sanitizedExisting.length ? sanitizedExisting[0] : 0;
+	let adjusted = minValue <= 0 ? minValue - step : -step;
+	while (adjusted === 0 || sanitizedExisting.includes(adjusted)) {
+		adjusted -= step;
+	}
+
+	return adjusted;
+}
+
+/**
+ * Computes the sort order to use for a new item appended to the end of a list.
+ * The next sort order is the highest existing sort order plus the default
+ * spacing, or the default spacing if the list is empty. The result is
+ * guaranteed to be non-zero, since zero is used as "no sort order" in the
+ * database.
+ *
+ * @param existingSortOrders Sort orders of the items already in the list
+ * @returns The sort order to assign to the new item
+ */
+export function getNextSortOrder(existingSortOrders: (number | null | undefined)[]): number {
+	let sortOrders = existingSortOrders
+		.map((value) => (typeof value === "number" && Number.isFinite(value) ? value : 0))
+		.sort((a, b) => a - b);
+	let beforeSort = sortOrders.length > 0 ? sortOrders[sortOrders.length - 1] : null;
+	let newSort = beforeSort == null ? DEFAULT_SORT_ORDER_SPACING : beforeSort + DEFAULT_SORT_ORDER_SPACING;
+
+	return ensureNonZeroSortOrder(newSort, { after: beforeSort, existing: sortOrders });
+}

package/src/sortable/types.ts

@@ -1,9 +1,9 @@
-/**
- * Minimum shape a record must have to take part in a sortable list.
- *
- * `PrimKey` is the `uniqueidentifier` primary key every Appframe table has,
- * and `SortOrder` is a `decimal(18, 6)` column. Because the sort order is a
- * decimal, items can be moved by placing them halfway between their new
- * neighbours instead of renumbering the whole list.
- */
-export type SortableRecord = { PrimKey: string; SortOrder?: number | null };
+/**
+ * Minimum shape a record must have to take part in a sortable list.
+ *
+ * `PrimKey` is the `uniqueidentifier` primary key every Appframe table has,
+ * and `SortOrder` is a `decimal(18, 6)` column. Because the sort order is a
+ * decimal, items can be moved by placing them halfway between their new
+ * neighbours instead of renumbering the whole list.
+ */
+export type SortableRecord = { PrimKey: string; SortOrder?: number | null };

package/src/sortable/useSortableContainer.ts

@@ -1,53 +1,53 @@
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
-import { type Edge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { useEffect, useRef } from "react";
-
-import type { SortableRecord } from "./types.js";
-
-export type SortableDragData<T extends SortableRecord> = { type: string; record: T };
-
-export function isSortableDragData<T extends SortableRecord>(value: any, type: string): value is SortableDragData<T> {
-	return value?.type === type;
-}
-
-export interface UseSortableContainerOptions<T extends SortableRecord> {
-	/** Identifies the list. Only items sharing the same type can be dropped on each other */
-	type: string;
-	enabled?: boolean;
-	onDrop: (args: { source: T; target: T; edge: Edge | null }) => void;
-}
-
-/**
- * Monitors drops for a sortable list and reports which record was dropped
- * where. Use together with {@link useSortableItem}.
- */
-export function useSortableContainer<T extends SortableRecord>({
-	type,
-	enabled = true,
-	onDrop,
-}: UseSortableContainerOptions<T>) {
-	let onDropRef = useRef(onDrop);
-	onDropRef.current = onDrop;
-
-	useEffect(() => {
-		if (!enabled) return;
-
-		return monitorForElements({
-			canMonitor({ source }) {
-				return isSortableDragData<T>(source.data, type);
-			},
-			onDrop({ location, source }) {
-				let target = location.current.dropTargets[0];
-				if (!target) return;
-
-				let sourceData = source.data;
-				let targetData = target.data;
-
-				if (isSortableDragData<T>(sourceData, type) && isSortableDragData<T>(targetData, type)) {
-					let edge = extractClosestEdge(targetData);
-					onDropRef.current({ source: sourceData.record, target: targetData.record, edge });
-				}
-			},
-		});
-	}, [enabled, type]);
-}
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
+import { type Edge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { useEffect, useRef } from "react";
+
+import type { SortableRecord } from "./types.js";
+
+export type SortableDragData<T extends SortableRecord> = { type: string; record: T };
+
+export function isSortableDragData<T extends SortableRecord>(value: any, type: string): value is SortableDragData<T> {
+	return value?.type === type;
+}
+
+export interface UseSortableContainerOptions<T extends SortableRecord> {
+	/** Identifies the list. Only items sharing the same type can be dropped on each other */
+	type: string;
+	enabled?: boolean;
+	onDrop: (args: { source: T; target: T; edge: Edge | null }) => void;
+}
+
+/**
+ * Monitors drops for a sortable list and reports which record was dropped
+ * where. Use together with {@link useSortableItem}.
+ */
+export function useSortableContainer<T extends SortableRecord>({
+	type,
+	enabled = true,
+	onDrop,
+}: UseSortableContainerOptions<T>) {
+	let onDropRef = useRef(onDrop);
+	onDropRef.current = onDrop;
+
+	useEffect(() => {
+		if (!enabled) return;
+
+		return monitorForElements({
+			canMonitor({ source }) {
+				return isSortableDragData<T>(source.data, type);
+			},
+			onDrop({ location, source }) {
+				let target = location.current.dropTargets[0];
+				if (!target) return;
+
+				let sourceData = source.data;
+				let targetData = target.data;
+
+				if (isSortableDragData<T>(sourceData, type) && isSortableDragData<T>(targetData, type)) {
+					let edge = extractClosestEdge(targetData);
+					onDropRef.current({ source: sourceData.record, target: targetData.record, edge });
+				}
+			},
+		});
+	}, [enabled, type]);
+}