@ark-ui/react
Version:
A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.
74 lines (69 loc) • 2.59 kB
JavaScript
'use client';
;
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const react = require('react');
const useEvent = require('../../utils/use-event.cjs');
const listCollection = require('./list-collection.cjs');
function useListCollection(props) {
const { initialItems = [], filter, limit, ...collectionOptions } = props;
const create = (items) => {
return listCollection.createListCollection({ ...collectionOptions, items });
};
const [collection, setCollectionImpl] = react.useState(
() => create(limit != null ? initialItems.slice(0, limit) : initialItems)
);
const setCollection = useEvent.useEvent((collection2) => {
setCollectionImpl(limit == null ? collection2 : collection2.copy(collection2.items.slice(0, limit)));
});
return {
collection,
filter: (inputValue) => {
if (!filter) return;
const filtered = create(initialItems).filter((itemString) => filter(itemString, inputValue));
setCollection(filtered);
},
set: useEvent.useEvent((items) => {
setCollection(create(items));
}),
reset: useEvent.useEvent(() => {
setCollection(create(initialItems));
}),
clear: useEvent.useEvent(() => {
setCollection(create([]));
}),
insert: useEvent.useEvent((index, ...items) => {
setCollection(collection.insert(index, ...items));
}),
insertBefore: useEvent.useEvent((value, ...items) => {
setCollection(collection.insertBefore(value, ...items));
}),
insertAfter: useEvent.useEvent((value, ...items) => {
setCollection(collection.insertAfter(value, ...items));
}),
remove: useEvent.useEvent((...itemOrValues) => {
setCollection(collection.remove(...itemOrValues));
}),
move: useEvent.useEvent((value, to) => {
setCollection(collection.move(value, to));
}),
moveBefore: useEvent.useEvent((value, ...values) => {
setCollection(collection.moveBefore(value, ...values));
}),
moveAfter: useEvent.useEvent((value, ...values) => {
setCollection(collection.moveAfter(value, ...values));
}),
reorder: useEvent.useEvent((from, to) => {
setCollection(collection.reorder(from, to));
}),
append: useEvent.useEvent((...items) => {
setCollection(collection.append(...items));
}),
prepend: useEvent.useEvent((...items) => {
setCollection(collection.prepend(...items));
}),
update: useEvent.useEvent((value, item) => {
setCollection(collection.update(value, item));
})
};
}
exports.useListCollection = useListCollection;