@tamagui/collection 1.7.10 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Collection.js +3 -0
- package/dist/cjs/Collection.js.map +2 -2
- package/dist/esm/Collection.js +4 -1
- package/dist/esm/Collection.js.map +2 -2
- package/dist/esm/Collection.mjs +4 -1
- package/dist/esm/Collection.mjs.map +2 -2
- package/dist/jsx/Collection.js +4 -1
- package/dist/jsx/Collection.js.map +2 -2
- package/dist/jsx/Collection.mjs +4 -1
- package/dist/jsx/Collection.mjs.map +2 -2
- package/package.json +8 -8
- package/src/Collection.tsx +12 -5
- package/types/Collection.d.ts +3 -3
- package/types/Collection.d.ts.map +1 -1
package/dist/cjs/Collection.js
CHANGED
|
@@ -79,6 +79,9 @@ function createCollection(name) {
|
|
|
79
79
|
function useCollection(scope) {
|
|
80
80
|
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
81
81
|
const getItems = import_react.default.useCallback(() => {
|
|
82
|
+
if (!import_core.isWeb) {
|
|
83
|
+
return [];
|
|
84
|
+
}
|
|
82
85
|
const collectionNode = context.collectionRef.current;
|
|
83
86
|
if (!collectionNode)
|
|
84
87
|
return [];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot, TamaguiElement, isWeb } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = TamaguiElement\ninterface CollectionProps extends SlotProps {\n scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends TamaguiElement, ItemData = {}>(\n name: string\n) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider'\n const [createCollectionContext, createCollectionScope] =\n createContextScope(PROVIDER_NAME)\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>\n itemMap: Map<\n React.RefObject<ItemElement>,\n { ref: React.RefObject<ItemElement> } & ItemData\n >\n }\n\n const [CollectionProviderImpl, useCollectionContext] =\n createCollectionContext<ContextValue>(PROVIDER_NAME, {\n collectionRef: { current: null },\n itemMap: new Map(),\n })\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n props\n ) => {\n const { scope, children } = props\n const ref = React.useRef<CollectionElement>(null)\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n return (\n <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n {children}\n </CollectionProviderImpl>\n )\n }\n\n CollectionProvider.displayName = PROVIDER_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { scope, children } = props\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n return <Slot ref={composedRefs}>{children}</Slot>\n }\n )\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n const ITEM_DATA_ATTR = 'data-collection-item'\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode\n scope: any\n }\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props\n const ref = React.useRef<ItemElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n return () => void context.itemMap.delete(ref)\n })\n\n return (\n <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n {children}\n </Slot>\n )\n }\n )\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n const getItems = React.useCallback(() => {\n if (!isWeb) {\n return []\n }\n\n const collectionNode = context.collectionRef.current as HTMLElement\n if (!collectionNode) return []\n const orderedNodes = Array.from(\n collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n )\n const items = Array.from(context.itemMap.values())\n const orderedItems = items.sort(\n (a, b) =>\n orderedNodes.indexOf(a.ref.current! as HTMLElement) -\n orderedNodes.indexOf(b.ref.current! as HTMLElement)\n )\n return orderedItems\n }, [context.collectionRef, context.itemMap])\n\n return getItems\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDM;AAhDN,0BAAgC;AAChC,kBAA4C;AAC5C,4BAAmC;AACnC,mBAAkB;AAalB,SAAS,iBACP,MACA;AAKA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,QACnD,0CAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,aAAAA,QAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,aAAAA,QAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,4CAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,mBAAe,qCAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,4CAAC,oBAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,aAAAA,QAAM,OAAoB,IAAI;AAC1C,YAAM,mBAAe,qCAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,mBAAAA,QAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,4CAAC,oBAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,aAAAA,QAAM,YAAY,MAAM;AACvC,UAAI,CAAC,mBAAO;AACV,eAAO,CAAC;AAAA,MACV;AAEA,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/Collection.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
-
import { Slot } from "@tamagui/core";
|
|
3
|
+
import { Slot, isWeb } from "@tamagui/core";
|
|
4
4
|
import { createContextScope } from "@tamagui/create-context";
|
|
5
5
|
import React from "react";
|
|
6
6
|
function createCollection(name) {
|
|
@@ -46,6 +46,9 @@ function createCollection(name) {
|
|
|
46
46
|
function useCollection(scope) {
|
|
47
47
|
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
48
48
|
const getItems = React.useCallback(() => {
|
|
49
|
+
if (!isWeb) {
|
|
50
|
+
return [];
|
|
51
|
+
}
|
|
49
52
|
const collectionNode = context.collectionRef.current;
|
|
50
53
|
if (!collectionNode)
|
|
51
54
|
return [];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement =
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot, TamaguiElement, isWeb } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = TamaguiElement\ninterface CollectionProps extends SlotProps {\n scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends TamaguiElement, ItemData = {}>(\n name: string\n) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider'\n const [createCollectionContext, createCollectionScope] =\n createContextScope(PROVIDER_NAME)\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>\n itemMap: Map<\n React.RefObject<ItemElement>,\n { ref: React.RefObject<ItemElement> } & ItemData\n >\n }\n\n const [CollectionProviderImpl, useCollectionContext] =\n createCollectionContext<ContextValue>(PROVIDER_NAME, {\n collectionRef: { current: null },\n itemMap: new Map(),\n })\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n props\n ) => {\n const { scope, children } = props\n const ref = React.useRef<CollectionElement>(null)\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n return (\n <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n {children}\n </CollectionProviderImpl>\n )\n }\n\n CollectionProvider.displayName = PROVIDER_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { scope, children } = props\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n return <Slot ref={composedRefs}>{children}</Slot>\n }\n )\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n const ITEM_DATA_ATTR = 'data-collection-item'\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode\n scope: any\n }\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props\n const ref = React.useRef<ItemElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n return () => void context.itemMap.delete(ref)\n })\n\n return (\n <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n {children}\n </Slot>\n )\n }\n )\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n const getItems = React.useCallback(() => {\n if (!isWeb) {\n return []\n }\n\n const collectionNode = context.collectionRef.current as HTMLElement\n if (!collectionNode) return []\n const orderedNodes = Array.from(\n collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n )\n const items = Array.from(context.itemMap.values())\n const orderedItems = items.sort(\n (a, b) =>\n orderedNodes.indexOf(a.ref.current! as HTMLElement) -\n orderedNodes.indexOf(b.ref.current! as HTMLElement)\n )\n return orderedItems\n }, [context.collectionRef, context.itemMap])\n\n return getItems\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
|
|
5
|
+
"mappings": "AAgDM;AAhDN,SAAS,uBAAuB;AAChC,SAAS,MAAsB,aAAa;AAC5C,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBACP,MACA;AAKA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,oBAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,oBAAC,QAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,oBAAC,QAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC,OAAO;AACV,eAAO,CAAC;AAAA,MACV;AAEA,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Collection.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
-
import { Slot } from "@tamagui/core";
|
|
3
|
+
import { Slot, isWeb } from "@tamagui/core";
|
|
4
4
|
import { createContextScope } from "@tamagui/create-context";
|
|
5
5
|
import React from "react";
|
|
6
6
|
function createCollection(name) {
|
|
@@ -46,6 +46,9 @@ function createCollection(name) {
|
|
|
46
46
|
function useCollection(scope) {
|
|
47
47
|
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
48
48
|
const getItems = React.useCallback(() => {
|
|
49
|
+
if (!isWeb) {
|
|
50
|
+
return [];
|
|
51
|
+
}
|
|
49
52
|
const collectionNode = context.collectionRef.current;
|
|
50
53
|
if (!collectionNode)
|
|
51
54
|
return [];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement =
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot, TamaguiElement, isWeb } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = TamaguiElement\ninterface CollectionProps extends SlotProps {\n scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends TamaguiElement, ItemData = {}>(\n name: string\n) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider'\n const [createCollectionContext, createCollectionScope] =\n createContextScope(PROVIDER_NAME)\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>\n itemMap: Map<\n React.RefObject<ItemElement>,\n { ref: React.RefObject<ItemElement> } & ItemData\n >\n }\n\n const [CollectionProviderImpl, useCollectionContext] =\n createCollectionContext<ContextValue>(PROVIDER_NAME, {\n collectionRef: { current: null },\n itemMap: new Map(),\n })\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n props\n ) => {\n const { scope, children } = props\n const ref = React.useRef<CollectionElement>(null)\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n return (\n <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n {children}\n </CollectionProviderImpl>\n )\n }\n\n CollectionProvider.displayName = PROVIDER_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { scope, children } = props\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n return <Slot ref={composedRefs}>{children}</Slot>\n }\n )\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n const ITEM_DATA_ATTR = 'data-collection-item'\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode\n scope: any\n }\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props\n const ref = React.useRef<ItemElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n return () => void context.itemMap.delete(ref)\n })\n\n return (\n <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n {children}\n </Slot>\n )\n }\n )\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n const getItems = React.useCallback(() => {\n if (!isWeb) {\n return []\n }\n\n const collectionNode = context.collectionRef.current as HTMLElement\n if (!collectionNode) return []\n const orderedNodes = Array.from(\n collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n )\n const items = Array.from(context.itemMap.values())\n const orderedItems = items.sort(\n (a, b) =>\n orderedNodes.indexOf(a.ref.current! as HTMLElement) -\n orderedNodes.indexOf(b.ref.current! as HTMLElement)\n )\n return orderedItems\n }, [context.collectionRef, context.itemMap])\n\n return getItems\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
|
|
5
|
+
"mappings": "AAgDM;AAhDN,SAAS,uBAAuB;AAChC,SAAS,MAAsB,aAAa;AAC5C,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBACP,MACA;AAKA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,oBAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,oBAAC,QAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,oBAAC,QAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC,OAAO;AACV,eAAO,CAAC;AAAA,MACV;AAEA,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Collection.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
|
-
import { Slot } from "@tamagui/core";
|
|
2
|
+
import { Slot, isWeb } from "@tamagui/core";
|
|
3
3
|
import { createContextScope } from "@tamagui/create-context";
|
|
4
4
|
import React from "react";
|
|
5
5
|
function createCollection(name) {
|
|
@@ -45,6 +45,9 @@ function createCollection(name) {
|
|
|
45
45
|
function useCollection(scope) {
|
|
46
46
|
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
47
47
|
const getItems = React.useCallback(() => {
|
|
48
|
+
if (!isWeb) {
|
|
49
|
+
return [];
|
|
50
|
+
}
|
|
48
51
|
const collectionNode = context.collectionRef.current;
|
|
49
52
|
if (!collectionNode)
|
|
50
53
|
return [];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement =
|
|
5
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot, TamaguiElement, isWeb } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = TamaguiElement\ninterface CollectionProps extends SlotProps {\n scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends TamaguiElement, ItemData = {}>(\n name: string\n) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider'\n const [createCollectionContext, createCollectionScope] =\n createContextScope(PROVIDER_NAME)\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>\n itemMap: Map<\n React.RefObject<ItemElement>,\n { ref: React.RefObject<ItemElement> } & ItemData\n >\n }\n\n const [CollectionProviderImpl, useCollectionContext] =\n createCollectionContext<ContextValue>(PROVIDER_NAME, {\n collectionRef: { current: null },\n itemMap: new Map(),\n })\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n props\n ) => {\n const { scope, children } = props\n const ref = React.useRef<CollectionElement>(null)\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n return (\n <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n {children}\n </CollectionProviderImpl>\n )\n }\n\n CollectionProvider.displayName = PROVIDER_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { scope, children } = props\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n return <Slot ref={composedRefs}>{children}</Slot>\n }\n )\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n const ITEM_DATA_ATTR = 'data-collection-item'\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode\n scope: any\n }\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props\n const ref = React.useRef<ItemElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n return () => void context.itemMap.delete(ref)\n })\n\n return (\n <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n {children}\n </Slot>\n )\n }\n )\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n const getItems = React.useCallback(() => {\n if (!isWeb) {\n return []\n }\n\n const collectionNode = context.collectionRef.current as HTMLElement\n if (!collectionNode) return []\n const orderedNodes = Array.from(\n collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n )\n const items = Array.from(context.itemMap.values())\n const orderedItems = items.sort(\n (a, b) =>\n orderedNodes.indexOf(a.ref.current! as HTMLElement) -\n orderedNodes.indexOf(b.ref.current! as HTMLElement)\n )\n return orderedItems\n }, [context.collectionRef, context.itemMap])\n\n return getItems\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,MAAsB,aAAa;AAC5C,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBACP,MACA;AAKA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,CAAC,uBAAuB,OAAO,OAAO,SAAS,SAAS,eAAe,MACpE,SACH,EAFC;AAAA,EAIL;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,CAAC,KAAK,KAAK,eAAe,SAAS,EAAlC;AAAA,IACV;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,CAAC,SAAS,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,eACtC,SACH,EAFC;AAAA,IAIL;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC,OAAO;AACV,eAAO,CAAC;AAAA,MACV;AAEA,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Collection.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
|
-
import { Slot } from "@tamagui/core";
|
|
2
|
+
import { Slot, isWeb } from "@tamagui/core";
|
|
3
3
|
import { createContextScope } from "@tamagui/create-context";
|
|
4
4
|
import React from "react";
|
|
5
5
|
function createCollection(name) {
|
|
@@ -45,6 +45,9 @@ function createCollection(name) {
|
|
|
45
45
|
function useCollection(scope) {
|
|
46
46
|
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
47
47
|
const getItems = React.useCallback(() => {
|
|
48
|
+
if (!isWeb) {
|
|
49
|
+
return [];
|
|
50
|
+
}
|
|
48
51
|
const collectionNode = context.collectionRef.current;
|
|
49
52
|
if (!collectionNode)
|
|
50
53
|
return [];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement =
|
|
5
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot, TamaguiElement, isWeb } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = TamaguiElement\ninterface CollectionProps extends SlotProps {\n scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends TamaguiElement, ItemData = {}>(\n name: string\n) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider'\n const [createCollectionContext, createCollectionScope] =\n createContextScope(PROVIDER_NAME)\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>\n itemMap: Map<\n React.RefObject<ItemElement>,\n { ref: React.RefObject<ItemElement> } & ItemData\n >\n }\n\n const [CollectionProviderImpl, useCollectionContext] =\n createCollectionContext<ContextValue>(PROVIDER_NAME, {\n collectionRef: { current: null },\n itemMap: new Map(),\n })\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n props\n ) => {\n const { scope, children } = props\n const ref = React.useRef<CollectionElement>(null)\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n return (\n <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n {children}\n </CollectionProviderImpl>\n )\n }\n\n CollectionProvider.displayName = PROVIDER_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { scope, children } = props\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n return <Slot ref={composedRefs}>{children}</Slot>\n }\n )\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n const ITEM_DATA_ATTR = 'data-collection-item'\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode\n scope: any\n }\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props\n const ref = React.useRef<ItemElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n return () => void context.itemMap.delete(ref)\n })\n\n return (\n <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n {children}\n </Slot>\n )\n }\n )\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n const getItems = React.useCallback(() => {\n if (!isWeb) {\n return []\n }\n\n const collectionNode = context.collectionRef.current as HTMLElement\n if (!collectionNode) return []\n const orderedNodes = Array.from(\n collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n )\n const items = Array.from(context.itemMap.values())\n const orderedItems = items.sort(\n (a, b) =>\n orderedNodes.indexOf(a.ref.current! as HTMLElement) -\n orderedNodes.indexOf(b.ref.current! as HTMLElement)\n )\n return orderedItems\n }, [context.collectionRef, context.itemMap])\n\n return getItems\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,MAAsB,aAAa;AAC5C,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBACP,MACA;AAKA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,CAAC,uBAAuB,OAAO,OAAO,SAAS,SAAS,eAAe,MACpE,SACH,EAFC;AAAA,EAIL;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,CAAC,KAAK,KAAK,eAAe,SAAS,EAAlC;AAAA,IACV;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,CAAC,SAAS,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,eACtC,SACH,EAFC;AAAA,IAIL;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC,OAAO;AACV,eAAO,CAAC;AAAA,MACV;AAEA,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/collection",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@tamagui/compose-refs": "1.
|
|
31
|
-
"@tamagui/core": "1.
|
|
32
|
-
"@tamagui/create-context": "1.
|
|
33
|
-
"@tamagui/polyfill-dev": "1.
|
|
34
|
-
"@tamagui/stacks": "1.
|
|
35
|
-
"@tamagui/use-controllable-state": "1.
|
|
30
|
+
"@tamagui/compose-refs": "1.8.0",
|
|
31
|
+
"@tamagui/core": "1.8.0",
|
|
32
|
+
"@tamagui/create-context": "1.8.0",
|
|
33
|
+
"@tamagui/polyfill-dev": "1.8.0",
|
|
34
|
+
"@tamagui/stacks": "1.8.0",
|
|
35
|
+
"@tamagui/use-controllable-state": "1.8.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": "*"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "1.
|
|
41
|
+
"@tamagui/build": "1.8.0",
|
|
42
42
|
"react": "^18.2.0"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|
package/src/Collection.tsx
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useComposedRefs } from '@tamagui/compose-refs'
|
|
2
|
-
import { Slot } from '@tamagui/core'
|
|
2
|
+
import { Slot, TamaguiElement, isWeb } from '@tamagui/core'
|
|
3
3
|
import { createContextScope } from '@tamagui/create-context'
|
|
4
4
|
import React from 'react'
|
|
5
5
|
|
|
6
6
|
type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>
|
|
7
|
-
type CollectionElement =
|
|
7
|
+
type CollectionElement = TamaguiElement
|
|
8
8
|
interface CollectionProps extends SlotProps {
|
|
9
9
|
scope: any
|
|
10
10
|
}
|
|
@@ -14,7 +14,9 @@ interface CollectionProps extends SlotProps {
|
|
|
14
14
|
// This is because we encountered issues with generic types that cannot be statically analysed
|
|
15
15
|
// due to creating them dynamically via createCollection.
|
|
16
16
|
|
|
17
|
-
function createCollection<ItemElement extends
|
|
17
|
+
function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(
|
|
18
|
+
name: string
|
|
19
|
+
) {
|
|
18
20
|
/* -----------------------------------------------------------------------------------------------
|
|
19
21
|
* CollectionProvider
|
|
20
22
|
* ---------------------------------------------------------------------------------------------*/
|
|
@@ -111,7 +113,11 @@ function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name:
|
|
|
111
113
|
const context = useCollectionContext(name + 'CollectionConsumer', scope)
|
|
112
114
|
|
|
113
115
|
const getItems = React.useCallback(() => {
|
|
114
|
-
|
|
116
|
+
if (!isWeb) {
|
|
117
|
+
return []
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
const collectionNode = context.collectionRef.current as HTMLElement
|
|
115
121
|
if (!collectionNode) return []
|
|
116
122
|
const orderedNodes = Array.from(
|
|
117
123
|
collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
|
|
@@ -119,7 +125,8 @@ function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name:
|
|
|
119
125
|
const items = Array.from(context.itemMap.values())
|
|
120
126
|
const orderedItems = items.sort(
|
|
121
127
|
(a, b) =>
|
|
122
|
-
orderedNodes.indexOf(a.ref.current!) -
|
|
128
|
+
orderedNodes.indexOf(a.ref.current! as HTMLElement) -
|
|
129
|
+
orderedNodes.indexOf(b.ref.current! as HTMLElement)
|
|
123
130
|
)
|
|
124
131
|
return orderedItems
|
|
125
132
|
}, [context.collectionRef, context.itemMap])
|
package/types/Collection.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { Slot } from '@tamagui/core';
|
|
1
|
+
import { Slot, TamaguiElement } from '@tamagui/core';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;
|
|
4
4
|
interface CollectionProps extends SlotProps {
|
|
5
5
|
scope: any;
|
|
6
6
|
}
|
|
7
|
-
declare function createCollection<ItemElement extends
|
|
7
|
+
declare function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(name: string): readonly [{
|
|
8
8
|
readonly Provider: React.FC<{
|
|
9
9
|
children?: React.ReactNode;
|
|
10
10
|
scope: any;
|
|
11
11
|
}>;
|
|
12
|
-
readonly Slot: React.ForwardRefExoticComponent<CollectionProps & React.RefAttributes<
|
|
12
|
+
readonly Slot: React.ForwardRefExoticComponent<CollectionProps & React.RefAttributes<TamaguiElement>>;
|
|
13
13
|
readonly ItemSlot: React.ForwardRefExoticComponent<React.PropsWithoutRef<ItemData & {
|
|
14
14
|
children: React.ReactNode;
|
|
15
15
|
scope: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../src/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../src/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAS,MAAM,eAAe,CAAA;AAE3D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAA;AAE5D,UAAU,eAAgB,SAAQ,SAAS;IACzC,KAAK,EAAE,GAAG,CAAA;CACX;AAOD,iBAAS,gBAAgB,CAAC,WAAW,SAAS,cAAc,EAAE,QAAQ,GAAG,EAAE,EACzE,IAAI,EAAE,MAAM;;mBAwBoC,MAAM,SAAS;eAAS,GAAG;;;;kBAwC/D,MAAM,SAAS;eAClB,GAAG;;WA6BkB,GAAG;SAhFtB,MAAM,SAAS,CAAC,WAAW,CAAC;gEA8GxC;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAC3B,YAAY,EAAE,eAAe,EAAE,CAAA"}
|