Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x | import { anchor, type LinkableSchema, type StateOptions } from '@anchorlib/core';
import { useVariable } from './ref.js';
import type { AnchorState } from './types.js';
/**
* Creates a reactive ordered list state using Anchor's state management.
*
* This hook provides a way to manage an array state where the order of elements
* is maintained according to a custom comparison function. The list will automatically
* sort itself when elements are added, removed, or modified.
*
* @template T - The type of the array elements
* @template S - The schema type for linkable state (defaults to LinkableSchema)
*
* @param init - The initial array state
* @param compare - A comparison function that defines the sort order
* - Should return a negative value if the first argument is less than the second
* - Should return zero if the arguments are equal
* - Should return a positive value if the first argument is greater than the second
* @param options - Optional state configuration options
*
* @returns A reactive state object with methods to interact with the ordered list
*/
export function useOrderedList<T extends unknown[], S extends LinkableSchema = LinkableSchema>(
init: T,
compare: (a: T[number], b: T[number]) => number,
options?: StateOptions<S>
): AnchorState<T> {
const [state, setState] = useVariable<T>(
(newValue) => {
return anchor.ordered(newValue ?? init, compare, options);
},
[init, options]
);
return [state.value, state, setState];
}
/**
* Creates a reactive flat list state using Anchor's state management.
*
* This hook provides a way to manage an array state that only reacts to array mutations while maintain the
* reactivity recursively.
*
* @template T - The type of the array elements
* @template S - The schema type for linkable state (defaults to LinkableSchema)
*
* @param init - The initial array state
* @param options - Optional state configuration options
*
* @returns A reactive state object with methods to interact with the flat list
*/
export function useFlatList<T extends unknown[], S extends LinkableSchema = LinkableSchema>(
init: T,
options?: StateOptions<S>
): AnchorState<T> {
const [state, setState] = useVariable<T>(
(newValue) => {
return anchor.flat(newValue ?? init, options);
},
[init, options]
);
return [state.value, state, setState];
}
|