index.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. var $hnlpS$react = require("react");
  2. var $hnlpS$radixuireactcontext = require("@radix-ui/react-context");
  3. var $hnlpS$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
  4. var $hnlpS$radixuireactslot = require("@radix-ui/react-slot");
  5. function $parcel$export(e, n, v, s) {
  6. Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
  7. }
  8. function $parcel$interopDefault(a) {
  9. return a && a.__esModule ? a.default : a;
  10. }
  11. $parcel$export(module.exports, "createCollection", () => $1a96635ec239608b$export$c74125a8e3af6bb2);
  12. // We have resorted to returning slots directly rather than exposing primitives that can then
  13. // be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
  14. // This is because we encountered issues with generic types that cannot be statically analysed
  15. // due to creating them dynamically via createCollection.
  16. function $1a96635ec239608b$export$c74125a8e3af6bb2(name) {
  17. /* -----------------------------------------------------------------------------------------------
  18. * CollectionProvider
  19. * ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
  20. const [createCollectionContext, createCollectionScope] = $hnlpS$radixuireactcontext.createContextScope(PROVIDER_NAME);
  21. const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
  22. collectionRef: {
  23. current: null
  24. },
  25. itemMap: new Map()
  26. });
  27. const CollectionProvider = (props)=>{
  28. const { scope: scope , children: children } = props;
  29. const ref = ($parcel$interopDefault($hnlpS$react)).useRef(null);
  30. const itemMap = ($parcel$interopDefault($hnlpS$react)).useRef(new Map()).current;
  31. return /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).createElement(CollectionProviderImpl, {
  32. scope: scope,
  33. itemMap: itemMap,
  34. collectionRef: ref
  35. }, children);
  36. };
  37. /*#__PURE__*/ Object.assign(CollectionProvider, {
  38. displayName: PROVIDER_NAME
  39. });
  40. /* -----------------------------------------------------------------------------------------------
  41. * CollectionSlot
  42. * ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
  43. const CollectionSlot = /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).forwardRef((props, forwardedRef)=>{
  44. const { scope: scope , children: children } = props;
  45. const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
  46. const composedRefs = $hnlpS$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.collectionRef);
  47. return /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).createElement($hnlpS$radixuireactslot.Slot, {
  48. ref: composedRefs
  49. }, children);
  50. });
  51. /*#__PURE__*/ Object.assign(CollectionSlot, {
  52. displayName: COLLECTION_SLOT_NAME
  53. });
  54. /* -----------------------------------------------------------------------------------------------
  55. * CollectionItem
  56. * ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
  57. const ITEM_DATA_ATTR = 'data-radix-collection-item';
  58. const CollectionItemSlot = /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).forwardRef((props, forwardedRef)=>{
  59. const { scope: scope , children: children , ...itemData } = props;
  60. const ref = ($parcel$interopDefault($hnlpS$react)).useRef(null);
  61. const composedRefs = $hnlpS$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
  62. const context = useCollectionContext(ITEM_SLOT_NAME, scope);
  63. ($parcel$interopDefault($hnlpS$react)).useEffect(()=>{
  64. context.itemMap.set(ref, {
  65. ref: ref,
  66. ...itemData
  67. });
  68. return ()=>void context.itemMap.delete(ref)
  69. ;
  70. });
  71. return /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).createElement($hnlpS$radixuireactslot.Slot, {
  72. [ITEM_DATA_ATTR]: '',
  73. ref: composedRefs
  74. }, children);
  75. });
  76. /*#__PURE__*/ Object.assign(CollectionItemSlot, {
  77. displayName: ITEM_SLOT_NAME
  78. });
  79. /* -----------------------------------------------------------------------------------------------
  80. * useCollection
  81. * ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
  82. const context = useCollectionContext(name + 'CollectionConsumer', scope);
  83. const getItems = ($parcel$interopDefault($hnlpS$react)).useCallback(()=>{
  84. const collectionNode = context.collectionRef.current;
  85. if (!collectionNode) return [];
  86. const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
  87. const items = Array.from(context.itemMap.values());
  88. const orderedItems = items.sort((a, b)=>orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
  89. );
  90. return orderedItems;
  91. }, [
  92. context.collectionRef,
  93. context.itemMap
  94. ]);
  95. return getItems;
  96. }
  97. return [
  98. {
  99. Provider: CollectionProvider,
  100. Slot: CollectionSlot,
  101. ItemSlot: CollectionItemSlot
  102. },
  103. useCollection,
  104. createCollectionScope
  105. ];
  106. }
  107. //# sourceMappingURL=index.js.map