@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
77 lines (76 loc) • 2.42 kB
JavaScript
"use client";
import { useCallback, useMemo, useState } from "react";
//#region packages/@mantine/hooks/src/use-list-state/use-list-state.ts
function useListState(initialValue = []) {
const [state, setState] = useState(initialValue);
const append = useCallback((...items) => setState((current) => [...current, ...items]), []);
const prepend = useCallback((...items) => setState((current) => [...items, ...current]), []);
const insert = useCallback((index, ...items) => setState((current) => [
...current.slice(0, index),
...items,
...current.slice(index)
]), []);
const apply = useCallback((fn) => setState((current) => current.map((item, index) => fn(item, index))), []);
const remove = useCallback((...indices) => setState((current) => current.filter((_, index) => !indices.includes(index))), []);
const pop = useCallback(() => setState((current) => {
const cloned = [...current];
cloned.pop();
return cloned;
}), []);
const shift = useCallback(() => setState((current) => {
const cloned = [...current];
cloned.shift();
return cloned;
}), []);
const reorder = useCallback(({ from, to }) => setState((current) => {
const cloned = [...current];
const item = current[from];
cloned.splice(from, 1);
cloned.splice(to, 0, item);
return cloned;
}), []);
const swap = useCallback(({ from, to }) => setState((current) => {
const cloned = [...current];
const fromItem = cloned[from];
const toItem = cloned[to];
cloned.splice(to, 1, fromItem);
cloned.splice(from, 1, toItem);
return cloned;
}), []);
const setItem = useCallback((index, item) => setState((current) => {
const cloned = [...current];
cloned[index] = item;
return cloned;
}), []);
const setItemProp = useCallback((index, prop, value) => setState((current) => {
const cloned = [...current];
cloned[index] = {
...cloned[index],
[prop]: value
};
return cloned;
}), []);
const applyWhere = useCallback((condition, fn) => setState((current) => current.map((item, index) => condition(item, index) ? fn(item, index) : item)), []);
const filter = useCallback((fn) => {
setState((current) => current.filter(fn));
}, []);
return [state, useMemo(() => ({
setState,
append,
prepend,
insert,
pop,
shift,
apply,
applyWhere,
remove,
reorder,
swap,
setItem,
setItemProp,
filter
}), [])];
}
//#endregion
export { useListState };
//# sourceMappingURL=use-list-state.mjs.map