73 lines
3.0 KiB
JavaScript
73 lines
3.0 KiB
JavaScript
"use client";
|
|
|
|
// packages/react/collection/src/Collection.tsx
|
|
import React from "react";
|
|
import { createContextScope } from "@radix-ui/react-context";
|
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
import { Slot } from "@radix-ui/react-slot";
|
|
import { jsx } from "react/jsx-runtime";
|
|
function createCollection(name) {
|
|
const PROVIDER_NAME = name + "CollectionProvider";
|
|
const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
|
|
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
|
|
PROVIDER_NAME,
|
|
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
|
|
);
|
|
const CollectionProvider = (props) => {
|
|
const { scope, children } = props;
|
|
const ref = React.useRef(null);
|
|
const itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
|
|
return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
|
|
};
|
|
CollectionProvider.displayName = PROVIDER_NAME;
|
|
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
const CollectionSlot = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { scope, children } = props;
|
|
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
return /* @__PURE__ */ jsx(Slot, { ref: composedRefs, children });
|
|
}
|
|
);
|
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
|
|
const ITEM_DATA_ATTR = "data-radix-collection-item";
|
|
const CollectionItemSlot = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { scope, children, ...itemData } = props;
|
|
const ref = React.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
|
|
React.useEffect(() => {
|
|
context.itemMap.set(ref, { ref, ...itemData });
|
|
return () => void context.itemMap.delete(ref);
|
|
});
|
|
return /* @__PURE__ */ jsx(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
}
|
|
);
|
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
function useCollection(scope) {
|
|
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
const getItems = React.useCallback(() => {
|
|
const collectionNode = context.collectionRef.current;
|
|
if (!collectionNode) return [];
|
|
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
|
|
const items = Array.from(context.itemMap.values());
|
|
const orderedItems = items.sort(
|
|
(a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
|
|
);
|
|
return orderedItems;
|
|
}, [context.collectionRef, context.itemMap]);
|
|
return getItems;
|
|
}
|
|
return [
|
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
useCollection,
|
|
createCollectionScope
|
|
];
|
|
}
|
|
export {
|
|
createCollection
|
|
};
|
|
//# sourceMappingURL=index.mjs.map
|