@tamagui/collection 1.69.3 → 1.71.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 +24 -21
- package/dist/cjs/Collection.js.map +1 -1
- package/dist/cjs/Collection.native.js +24 -21
- package/dist/cjs/Collection.native.js.map +1 -1
- package/dist/esm/Collection.js +28 -22
- package/dist/esm/Collection.js.map +1 -1
- package/dist/jsx/Collection.js +24 -22
- package/dist/jsx/Collection.js.map +1 -1
- package/dist/jsx/Collection.native.js +24 -22
- package/dist/jsx/Collection.native.js.map +1 -1
- package/package.json +8 -8
- package/src/Collection.tsx +57 -47
- package/types/Collection.d.ts +9 -9
- package/types/Collection.d.ts.map +1 -1
package/dist/cjs/Collection.js
CHANGED
|
@@ -25,32 +25,36 @@ __export(Collection_exports, {
|
|
|
25
25
|
createCollection: () => createCollection
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(Collection_exports);
|
|
28
|
-
var import_compose_refs = require("@tamagui/compose-refs"), import_core = require("@tamagui/core"),
|
|
28
|
+
var import_compose_refs = require("@tamagui/compose-refs"), import_core = require("@tamagui/core"), import_react = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
|
|
29
29
|
function createCollection(name) {
|
|
30
|
-
const
|
|
30
|
+
const { Provider: CollectionProviderImpl, useStyledContext: useCollectionContext } = (0, import_core.createStyledContext)({
|
|
31
31
|
collectionRef: { current: null },
|
|
32
32
|
itemMap: /* @__PURE__ */ new Map()
|
|
33
33
|
}), CollectionProvider = (props) => {
|
|
34
|
-
const {
|
|
35
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
34
|
+
const { __scopeCollection, children } = props, ref = import_react.default.useRef(null), itemMap = import_react.default.useRef(/* @__PURE__ */ new Map()).current;
|
|
35
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
36
|
+
CollectionProviderImpl,
|
|
37
|
+
{
|
|
38
|
+
scope: __scopeCollection,
|
|
39
|
+
itemMap,
|
|
40
|
+
collectionRef: ref,
|
|
41
|
+
children
|
|
42
|
+
}
|
|
43
|
+
);
|
|
36
44
|
};
|
|
37
|
-
CollectionProvider.displayName =
|
|
38
|
-
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = import_react.default.forwardRef(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
);
|
|
45
|
+
CollectionProvider.displayName = "CollectionProvider";
|
|
46
|
+
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = import_react.default.forwardRef((props, forwardedRef) => {
|
|
47
|
+
const { __scopeCollection, children } = props, context = useCollectionContext(__scopeCollection), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.collectionRef);
|
|
48
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Slot, { ref: composedRefs, children });
|
|
49
|
+
});
|
|
44
50
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
45
|
-
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = import_react.default.forwardRef(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
);
|
|
51
|
+
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = import_react.default.forwardRef((props, forwardedRef) => {
|
|
52
|
+
const { __scopeCollection, children, ...itemData } = props, ref = import_react.default.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), context = useCollectionContext(__scopeCollection);
|
|
53
|
+
return import_react.default.useEffect(() => (context.itemMap.set(ref, { ref, ...itemData }), () => void context.itemMap.delete(ref))), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Slot, { [ITEM_DATA_ATTR]: "", ref: composedRefs, children });
|
|
54
|
+
});
|
|
51
55
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
52
|
-
function useCollection(
|
|
53
|
-
const context = useCollectionContext(
|
|
56
|
+
function useCollection(__scopeCollection) {
|
|
57
|
+
const context = useCollectionContext(__scopeCollection);
|
|
54
58
|
return import_react.default.useCallback(() => {
|
|
55
59
|
if (!import_core.isWeb)
|
|
56
60
|
return [];
|
|
@@ -67,8 +71,7 @@ function createCollection(name) {
|
|
|
67
71
|
}
|
|
68
72
|
return [
|
|
69
73
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
70
|
-
useCollection
|
|
71
|
-
createCollectionScope
|
|
74
|
+
useCollection
|
|
72
75
|
];
|
|
73
76
|
}
|
|
74
77
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAgC,kCAChC,
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAgC,kCAChC,cAMO,0BACP,eAAkB,2BA8CZ;AAnCN,SAAS,iBACP,MACA;AAmBA,QAAM,EAAE,UAAU,wBAAwB,kBAAkB,qBAAqB,QAC/E,iCAAkC;AAAA,IAChC,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC,GAEG,qBAGD,CAAC,UAAU;AACd,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,MAAM,aAAAA,QAAM,OAA0B,IAAI,GAC1C,UAAU,aAAAA,QAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO,kBAE9B,iBAAiB,aAAAA,QAAM,WAG3B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,UAAU,qBAAqB,iBAAiB,GAChD,mBAAe,qCAAgB,cAAc,QAAQ,aAAa;AACxE,WAAO,4CAAC,oBAAK,KAAK,cAAe,UAAS;AAAA,EAC5C,CAAC;AAED,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO,sBACxB,iBAAiB,wBAMjB,qBAAqB,aAAAA,QAAM,WAG/B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,UAAU,GAAG,SAAS,IAAI,OAC/C,MAAM,aAAAA,QAAM,OAAoB,IAAI,GACpC,mBAAe,qCAAgB,cAAc,GAAG,GAChD,UAAU,qBAAqB,iBAAiB;AAEtD,wBAAAA,QAAM,UAAU,OACd,QAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC,GAC/D,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG,EAC7C,GAGC,4CAAC,oBAAW,CAAC,cAAc,GAAG,IAAM,KAAK,cACtC,UACH;AAAA,EAEJ,CAAC;AAED,qBAAmB,cAAc;AAMjC,WAAS,cAAc,mBAAwB;AAC7C,UAAM,UAAU,qBAAqB,iBAAiB;AAqBtD,WAnBiB,aAAAA,QAAM,YAAY,MAAM;AACvC,UAAI,CAAC;AACH,eAAO,CAAC;AAGV,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,cAAc,GAAG;AAAA,MACvD;AAOA,aANc,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC,EACtB;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AAAA,IAEF,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAAA,EAG7C;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,EACF;AACF;",
|
|
5
5
|
"names": ["React"]
|
|
6
6
|
}
|
|
@@ -26,32 +26,36 @@ __export(Collection_exports, {
|
|
|
26
26
|
createCollection: () => createCollection
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(Collection_exports);
|
|
29
|
-
var import_compose_refs = require("@tamagui/compose-refs"), import_core = require("@tamagui/core"),
|
|
29
|
+
var import_compose_refs = require("@tamagui/compose-refs"), import_core = require("@tamagui/core"), import_react = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
|
|
30
30
|
function createCollection(name) {
|
|
31
|
-
const
|
|
31
|
+
const { Provider: CollectionProviderImpl, useStyledContext: useCollectionContext } = (0, import_core.createStyledContext)({
|
|
32
32
|
collectionRef: { current: null },
|
|
33
33
|
itemMap: /* @__PURE__ */ new Map()
|
|
34
34
|
}), CollectionProvider = (props) => {
|
|
35
|
-
const {
|
|
36
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
35
|
+
const { __scopeCollection, children } = props, ref = import_react.default.useRef(null), itemMap = import_react.default.useRef(/* @__PURE__ */ new Map()).current;
|
|
36
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
37
|
+
CollectionProviderImpl,
|
|
38
|
+
{
|
|
39
|
+
scope: __scopeCollection,
|
|
40
|
+
itemMap,
|
|
41
|
+
collectionRef: ref,
|
|
42
|
+
children
|
|
43
|
+
}
|
|
44
|
+
);
|
|
37
45
|
};
|
|
38
|
-
CollectionProvider.displayName =
|
|
39
|
-
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = import_react.default.forwardRef(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
);
|
|
46
|
+
CollectionProvider.displayName = "CollectionProvider";
|
|
47
|
+
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = import_react.default.forwardRef((props, forwardedRef) => {
|
|
48
|
+
const { __scopeCollection, children } = props, context = useCollectionContext(__scopeCollection), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.collectionRef);
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Slot, { ref: composedRefs, children });
|
|
50
|
+
});
|
|
45
51
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
46
|
-
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = import_react.default.forwardRef(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
);
|
|
52
|
+
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = import_react.default.forwardRef((props, forwardedRef) => {
|
|
53
|
+
const { __scopeCollection, children, ...itemData } = props, ref = import_react.default.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), context = useCollectionContext(__scopeCollection);
|
|
54
|
+
return import_react.default.useEffect(() => (context.itemMap.set(ref, { ref, ...itemData }), () => void context.itemMap.delete(ref))), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Slot, { [ITEM_DATA_ATTR]: "", ref: composedRefs, children });
|
|
55
|
+
});
|
|
52
56
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
53
|
-
function useCollection(
|
|
54
|
-
const context = useCollectionContext(
|
|
57
|
+
function useCollection(__scopeCollection) {
|
|
58
|
+
const context = useCollectionContext(__scopeCollection);
|
|
55
59
|
return import_react.default.useCallback(() => {
|
|
56
60
|
if (!import_core.isWeb)
|
|
57
61
|
return [];
|
|
@@ -68,8 +72,7 @@ function createCollection(name) {
|
|
|
68
72
|
}
|
|
69
73
|
return [
|
|
70
74
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
71
|
-
useCollection
|
|
72
|
-
createCollectionScope
|
|
75
|
+
useCollection
|
|
73
76
|
];
|
|
74
77
|
}
|
|
75
78
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAgC,kCAChC,
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAgC,kCAChC,cAMO,0BACP,eAAkB,2BA8CZ;AAnCN,SAAS,iBACP,MACA;AAmBA,QAAM,EAAE,UAAU,wBAAwB,kBAAkB,qBAAqB,QAC/E,iCAAkC;AAAA,IAChC,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC,GAEG,qBAGD,CAAC,UAAU;AACd,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,MAAM,aAAAA,QAAM,OAA0B,IAAI,GAC1C,UAAU,aAAAA,QAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO,kBAE9B,iBAAiB,aAAAA,QAAM,WAG3B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,UAAU,qBAAqB,iBAAiB,GAChD,mBAAe,qCAAgB,cAAc,QAAQ,aAAa;AACxE,WAAO,4CAAC,oBAAK,KAAK,cAAe,UAAS;AAAA,EAC5C,CAAC;AAED,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO,sBACxB,iBAAiB,wBAMjB,qBAAqB,aAAAA,QAAM,WAG/B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,UAAU,GAAG,SAAS,IAAI,OAC/C,MAAM,aAAAA,QAAM,OAAoB,IAAI,GACpC,mBAAe,qCAAgB,cAAc,GAAG,GAChD,UAAU,qBAAqB,iBAAiB;AAEtD,wBAAAA,QAAM,UAAU,OACd,QAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC,GAC/D,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG,EAC7C,GAGC,4CAAC,oBAAW,CAAC,cAAc,GAAG,IAAM,KAAK,cACtC,UACH;AAAA,EAEJ,CAAC;AAED,qBAAmB,cAAc;AAMjC,WAAS,cAAc,mBAAwB;AAC7C,UAAM,UAAU,qBAAqB,iBAAiB;AAqBtD,WAnBiB,aAAAA,QAAM,YAAY,MAAM;AACvC,UAAI,CAAC;AACH,eAAO,CAAC;AAGV,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,cAAc,GAAG;AAAA,MACvD;AAOA,aANc,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC,EACtB;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AAAA,IAEF,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAAA,EAG7C;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,EACF;AACF;",
|
|
5
5
|
"names": ["React"]
|
|
6
6
|
}
|
package/dist/esm/Collection.js
CHANGED
|
@@ -1,33 +1,40 @@
|
|
|
1
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
Slot,
|
|
4
|
+
createStyledContext,
|
|
5
|
+
isWeb
|
|
6
|
+
} from "@tamagui/core";
|
|
4
7
|
import React from "react";
|
|
5
8
|
import { jsx } from "react/jsx-runtime";
|
|
6
9
|
function createCollection(name) {
|
|
7
|
-
const
|
|
10
|
+
const { Provider: CollectionProviderImpl, useStyledContext: useCollectionContext } = createStyledContext({
|
|
8
11
|
collectionRef: { current: null },
|
|
9
12
|
itemMap: /* @__PURE__ */ new Map()
|
|
10
13
|
}), CollectionProvider = (props) => {
|
|
11
|
-
const {
|
|
12
|
-
return /* @__PURE__ */ jsx(
|
|
14
|
+
const { __scopeCollection, children } = props, ref = React.useRef(null), itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
|
|
15
|
+
return /* @__PURE__ */ jsx(
|
|
16
|
+
CollectionProviderImpl,
|
|
17
|
+
{
|
|
18
|
+
scope: __scopeCollection,
|
|
19
|
+
itemMap,
|
|
20
|
+
collectionRef: ref,
|
|
21
|
+
children
|
|
22
|
+
}
|
|
23
|
+
);
|
|
13
24
|
};
|
|
14
|
-
CollectionProvider.displayName =
|
|
15
|
-
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = React.forwardRef(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
);
|
|
25
|
+
CollectionProvider.displayName = "CollectionProvider";
|
|
26
|
+
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = React.forwardRef((props, forwardedRef) => {
|
|
27
|
+
const { __scopeCollection, children } = props, context = useCollectionContext(__scopeCollection), composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
28
|
+
return /* @__PURE__ */ jsx(Slot, { ref: composedRefs, children });
|
|
29
|
+
});
|
|
21
30
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
22
|
-
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = React.forwardRef(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
);
|
|
31
|
+
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = React.forwardRef((props, forwardedRef) => {
|
|
32
|
+
const { __scopeCollection, children, ...itemData } = props, ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), context = useCollectionContext(__scopeCollection);
|
|
33
|
+
return React.useEffect(() => (context.itemMap.set(ref, { ref, ...itemData }), () => void context.itemMap.delete(ref))), /* @__PURE__ */ jsx(Slot, { [ITEM_DATA_ATTR]: "", ref: composedRefs, children });
|
|
34
|
+
});
|
|
28
35
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
29
|
-
function useCollection(
|
|
30
|
-
const context = useCollectionContext(
|
|
36
|
+
function useCollection(__scopeCollection) {
|
|
37
|
+
const context = useCollectionContext(__scopeCollection);
|
|
31
38
|
return React.useCallback(() => {
|
|
32
39
|
if (!isWeb)
|
|
33
40
|
return [];
|
|
@@ -44,8 +51,7 @@ function createCollection(name) {
|
|
|
44
51
|
}
|
|
45
52
|
return [
|
|
46
53
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
47
|
-
useCollection
|
|
48
|
-
createCollectionScope
|
|
54
|
+
useCollection
|
|
49
55
|
];
|
|
50
56
|
}
|
|
51
57
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC,
|
|
4
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AA8CZ;AAnCN,SAAS,iBACP,MACA;AAmBA,QAAM,EAAE,UAAU,wBAAwB,kBAAkB,qBAAqB,IAC/E,oBAAkC;AAAA,IAChC,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC,GAEG,qBAGD,CAAC,UAAU;AACd,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,MAAM,MAAM,OAA0B,IAAI,GAC1C,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO,kBAE9B,iBAAiB,MAAM,WAG3B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,UAAU,qBAAqB,iBAAiB,GAChD,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,WAAO,oBAAC,QAAK,KAAK,cAAe,UAAS;AAAA,EAC5C,CAAC;AAED,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO,sBACxB,iBAAiB,wBAMjB,qBAAqB,MAAM,WAG/B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,UAAU,GAAG,SAAS,IAAI,OAC/C,MAAM,MAAM,OAAoB,IAAI,GACpC,eAAe,gBAAgB,cAAc,GAAG,GAChD,UAAU,qBAAqB,iBAAiB;AAEtD,iBAAM,UAAU,OACd,QAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC,GAC/D,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG,EAC7C,GAGC,oBAAC,QAAW,CAAC,cAAc,GAAG,IAAM,KAAK,cACtC,UACH;AAAA,EAEJ,CAAC;AAED,qBAAmB,cAAc;AAMjC,WAAS,cAAc,mBAAwB;AAC7C,UAAM,UAAU,qBAAqB,iBAAiB;AAqBtD,WAnBiB,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC;AACH,eAAO,CAAC;AAGV,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,cAAc,GAAG;AAAA,MACvD;AAOA,aANc,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC,EACtB;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AAAA,IAEF,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAAA,EAG7C;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,EACF;AACF;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/dist/jsx/Collection.js
CHANGED
|
@@ -1,32 +1,35 @@
|
|
|
1
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
Slot,
|
|
4
|
+
createStyledContext,
|
|
5
|
+
isWeb
|
|
6
|
+
} from "@tamagui/core";
|
|
4
7
|
import React from "react";
|
|
5
8
|
function createCollection(name) {
|
|
6
|
-
const
|
|
9
|
+
const { Provider: CollectionProviderImpl, useStyledContext: useCollectionContext } = createStyledContext({
|
|
7
10
|
collectionRef: { current: null },
|
|
8
11
|
itemMap: /* @__PURE__ */ new Map()
|
|
9
12
|
}), CollectionProvider = (props) => {
|
|
10
|
-
const {
|
|
11
|
-
return <CollectionProviderImpl
|
|
13
|
+
const { __scopeCollection, children } = props, ref = React.useRef(null), itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
|
|
14
|
+
return <CollectionProviderImpl
|
|
15
|
+
scope={__scopeCollection}
|
|
16
|
+
itemMap={itemMap}
|
|
17
|
+
collectionRef={ref}
|
|
18
|
+
>{children}</CollectionProviderImpl>;
|
|
12
19
|
};
|
|
13
|
-
CollectionProvider.displayName =
|
|
14
|
-
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = React.forwardRef(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
);
|
|
20
|
+
CollectionProvider.displayName = "CollectionProvider";
|
|
21
|
+
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = React.forwardRef((props, forwardedRef) => {
|
|
22
|
+
const { __scopeCollection, children } = props, context = useCollectionContext(__scopeCollection), composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
23
|
+
return <Slot ref={composedRefs}>{children}</Slot>;
|
|
24
|
+
});
|
|
20
25
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
21
|
-
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = React.forwardRef(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
);
|
|
26
|
+
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = React.forwardRef((props, forwardedRef) => {
|
|
27
|
+
const { __scopeCollection, children, ...itemData } = props, ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), context = useCollectionContext(__scopeCollection);
|
|
28
|
+
return React.useEffect(() => (context.itemMap.set(ref, { ref, ...itemData }), () => void context.itemMap.delete(ref))), <Slot {...{ [ITEM_DATA_ATTR]: "" }} ref={composedRefs}>{children}</Slot>;
|
|
29
|
+
});
|
|
27
30
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
28
|
-
function useCollection(
|
|
29
|
-
const context = useCollectionContext(
|
|
31
|
+
function useCollection(__scopeCollection) {
|
|
32
|
+
const context = useCollectionContext(__scopeCollection);
|
|
30
33
|
return React.useCallback(() => {
|
|
31
34
|
if (!isWeb)
|
|
32
35
|
return [];
|
|
@@ -43,8 +46,7 @@ function createCollection(name) {
|
|
|
43
46
|
}
|
|
44
47
|
return [
|
|
45
48
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
46
|
-
useCollection
|
|
47
|
-
createCollectionScope
|
|
49
|
+
useCollection
|
|
48
50
|
];
|
|
49
51
|
}
|
|
50
52
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC,
|
|
4
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AAWlB,SAAS,iBACP,MACA;AAmBA,QAAM,EAAE,UAAU,wBAAwB,kBAAkB,qBAAqB,IAC/E,oBAAkC;AAAA,IAChC,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC,GAEG,qBAGD,CAAC,UAAU;AACd,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,MAAM,MAAM,OAA0B,IAAI,GAC1C,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,CAAC;AAAA,MACC,OAAO;AAAA,MACP,SAAS;AAAA,MACT,eAAe;AAAA,MAEd,SACH,EANC;AAAA,EAQL;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO,kBAE9B,iBAAiB,MAAM,WAG3B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,UAAU,qBAAqB,iBAAiB,GAChD,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,WAAO,CAAC,KAAK,KAAK,eAAe,SAAS,EAAlC;AAAA,EACV,CAAC;AAED,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO,sBACxB,iBAAiB,wBAMjB,qBAAqB,MAAM,WAG/B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,UAAU,GAAG,SAAS,IAAI,OAC/C,MAAM,MAAM,OAAoB,IAAI,GACpC,eAAe,gBAAgB,cAAc,GAAG,GAChD,UAAU,qBAAqB,iBAAiB;AAEtD,iBAAM,UAAU,OACd,QAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC,GAC/D,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG,EAC7C,GAGC,CAAC,YAAY,iBAAiB,MAAM,KAAK,eACtC,SACH,EAFC;AAAA,EAIL,CAAC;AAED,qBAAmB,cAAc;AAMjC,WAAS,cAAc,mBAAwB;AAC7C,UAAM,UAAU,qBAAqB,iBAAiB;AAqBtD,WAnBiB,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC;AACH,eAAO,CAAC;AAGV,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,cAAc,GAAG;AAAA,MACvD;AAOA,aANc,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC,EACtB;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AAAA,IAEF,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAAA,EAG7C;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,EACF;AACF;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,32 +1,35 @@
|
|
|
1
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
Slot,
|
|
4
|
+
createStyledContext,
|
|
5
|
+
isWeb
|
|
6
|
+
} from "@tamagui/core";
|
|
4
7
|
import React from "react";
|
|
5
8
|
function createCollection(name) {
|
|
6
|
-
const
|
|
9
|
+
const { Provider: CollectionProviderImpl, useStyledContext: useCollectionContext } = createStyledContext({
|
|
7
10
|
collectionRef: { current: null },
|
|
8
11
|
itemMap: /* @__PURE__ */ new Map()
|
|
9
12
|
}), CollectionProvider = (props) => {
|
|
10
|
-
const {
|
|
11
|
-
return <CollectionProviderImpl
|
|
13
|
+
const { __scopeCollection, children } = props, ref = React.useRef(null), itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
|
|
14
|
+
return <CollectionProviderImpl
|
|
15
|
+
scope={__scopeCollection}
|
|
16
|
+
itemMap={itemMap}
|
|
17
|
+
collectionRef={ref}
|
|
18
|
+
>{children}</CollectionProviderImpl>;
|
|
12
19
|
};
|
|
13
|
-
CollectionProvider.displayName =
|
|
14
|
-
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = React.forwardRef(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
);
|
|
20
|
+
CollectionProvider.displayName = "CollectionProvider";
|
|
21
|
+
const COLLECTION_SLOT_NAME = name + "CollectionSlot", CollectionSlot = React.forwardRef((props, forwardedRef) => {
|
|
22
|
+
const { __scopeCollection, children } = props, context = useCollectionContext(__scopeCollection), composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
23
|
+
return <Slot ref={composedRefs}>{children}</Slot>;
|
|
24
|
+
});
|
|
20
25
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
21
|
-
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = React.forwardRef(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
);
|
|
26
|
+
const ITEM_SLOT_NAME = name + "CollectionItemSlot", ITEM_DATA_ATTR = "data-collection-item", CollectionItemSlot = React.forwardRef((props, forwardedRef) => {
|
|
27
|
+
const { __scopeCollection, children, ...itemData } = props, ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), context = useCollectionContext(__scopeCollection);
|
|
28
|
+
return React.useEffect(() => (context.itemMap.set(ref, { ref, ...itemData }), () => void context.itemMap.delete(ref))), <Slot {...{ [ITEM_DATA_ATTR]: "" }} ref={composedRefs}>{children}</Slot>;
|
|
29
|
+
});
|
|
27
30
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
28
|
-
function useCollection(
|
|
29
|
-
const context = useCollectionContext(
|
|
31
|
+
function useCollection(__scopeCollection) {
|
|
32
|
+
const context = useCollectionContext(__scopeCollection);
|
|
30
33
|
return React.useCallback(() => {
|
|
31
34
|
if (!isWeb)
|
|
32
35
|
return [];
|
|
@@ -43,8 +46,7 @@ function createCollection(name) {
|
|
|
43
46
|
}
|
|
44
47
|
return [
|
|
45
48
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
46
|
-
useCollection
|
|
47
|
-
createCollectionScope
|
|
49
|
+
useCollection
|
|
48
50
|
];
|
|
49
51
|
}
|
|
50
52
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collection.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC,
|
|
4
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AAWlB,SAAS,iBACP,MACA;AAmBA,QAAM,EAAE,UAAU,wBAAwB,kBAAkB,qBAAqB,IAC/E,oBAAkC;AAAA,IAChC,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC,GAEG,qBAGD,CAAC,UAAU;AACd,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,MAAM,MAAM,OAA0B,IAAI,GAC1C,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,CAAC;AAAA,MACC,OAAO;AAAA,MACP,SAAS;AAAA,MACT,eAAe;AAAA,MAEd,SACH,EANC;AAAA,EAQL;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO,kBAE9B,iBAAiB,MAAM,WAG3B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,SAAS,IAAI,OAClC,UAAU,qBAAqB,iBAAiB,GAChD,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,WAAO,CAAC,KAAK,KAAK,eAAe,SAAS,EAAlC;AAAA,EACV,CAAC;AAED,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO,sBACxB,iBAAiB,wBAMjB,qBAAqB,MAAM,WAG/B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,mBAAmB,UAAU,GAAG,SAAS,IAAI,OAC/C,MAAM,MAAM,OAAoB,IAAI,GACpC,eAAe,gBAAgB,cAAc,GAAG,GAChD,UAAU,qBAAqB,iBAAiB;AAEtD,iBAAM,UAAU,OACd,QAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC,GAC/D,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG,EAC7C,GAGC,CAAC,YAAY,iBAAiB,MAAM,KAAK,eACtC,SACH,EAFC;AAAA,EAIL,CAAC;AAED,qBAAmB,cAAc;AAMjC,WAAS,cAAc,mBAAwB;AAC7C,UAAM,UAAU,qBAAqB,iBAAiB;AAqBtD,WAnBiB,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC;AACH,eAAO,CAAC;AAGV,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,cAAc,GAAG;AAAA,MACvD;AAOA,aANc,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC,EACtB;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAuB,IAClD,aAAa,QAAQ,EAAE,IAAI,OAAuB;AAAA,MACtD;AAAA,IAEF,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAAA,EAG7C;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,EACF;AACF;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/collection",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.71.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.71.0",
|
|
31
|
+
"@tamagui/core": "1.71.0",
|
|
32
|
+
"@tamagui/create-context": "1.71.0",
|
|
33
|
+
"@tamagui/polyfill-dev": "1.71.0",
|
|
34
|
+
"@tamagui/stacks": "1.71.0",
|
|
35
|
+
"@tamagui/use-controllable-state": "1.71.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": "*"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "1.
|
|
41
|
+
"@tamagui/build": "1.71.0",
|
|
42
42
|
"react": "^18.2.0"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|
package/src/Collection.tsx
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { useComposedRefs } from '@tamagui/compose-refs'
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
ScopedProps,
|
|
4
|
+
Slot,
|
|
5
|
+
TamaguiElement,
|
|
6
|
+
createStyledContext,
|
|
7
|
+
isWeb,
|
|
8
|
+
} from '@tamagui/core'
|
|
4
9
|
import React from 'react'
|
|
5
10
|
|
|
6
11
|
type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>
|
|
7
12
|
type CollectionElement = TamaguiElement
|
|
8
|
-
interface CollectionProps extends SlotProps {
|
|
9
|
-
scope: any
|
|
10
|
-
}
|
|
13
|
+
interface CollectionProps extends SlotProps {}
|
|
11
14
|
|
|
12
15
|
// We have resorted to returning slots directly rather than exposing primitives that can then
|
|
13
16
|
// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
|
|
@@ -21,9 +24,9 @@ function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(
|
|
|
21
24
|
* CollectionProvider
|
|
22
25
|
* ---------------------------------------------------------------------------------------------*/
|
|
23
26
|
|
|
24
|
-
const PROVIDER_NAME = name + 'CollectionProvider'
|
|
25
|
-
const [createCollectionContext, createCollectionScope] =
|
|
26
|
-
|
|
27
|
+
// const PROVIDER_NAME = name + 'CollectionProvider'
|
|
28
|
+
// const [createCollectionContext, createCollectionScope] =
|
|
29
|
+
// createContextScope(PROVIDER_NAME)
|
|
27
30
|
|
|
28
31
|
type ContextValue = {
|
|
29
32
|
collectionRef: React.RefObject<CollectionElement>
|
|
@@ -33,26 +36,33 @@ function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(
|
|
|
33
36
|
>
|
|
34
37
|
}
|
|
35
38
|
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
type ScopedCollectionProps<P> = ScopedProps<P, 'Collection'>
|
|
40
|
+
|
|
41
|
+
const { Provider: CollectionProviderImpl, useStyledContext: useCollectionContext } =
|
|
42
|
+
createStyledContext<ContextValue>({
|
|
38
43
|
collectionRef: { current: null },
|
|
39
44
|
itemMap: new Map(),
|
|
40
45
|
})
|
|
41
46
|
|
|
42
|
-
const CollectionProvider: React.FC<{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
47
|
+
const CollectionProvider: React.FC<{
|
|
48
|
+
children?: React.ReactNode
|
|
49
|
+
__scopeCollection: string
|
|
50
|
+
}> = (props) => {
|
|
51
|
+
const { __scopeCollection, children } = props
|
|
46
52
|
const ref = React.useRef<CollectionElement>(null)
|
|
47
53
|
const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current
|
|
48
54
|
return (
|
|
49
|
-
<CollectionProviderImpl
|
|
55
|
+
<CollectionProviderImpl
|
|
56
|
+
scope={__scopeCollection}
|
|
57
|
+
itemMap={itemMap}
|
|
58
|
+
collectionRef={ref}
|
|
59
|
+
>
|
|
50
60
|
{children}
|
|
51
61
|
</CollectionProviderImpl>
|
|
52
62
|
)
|
|
53
63
|
}
|
|
54
64
|
|
|
55
|
-
CollectionProvider.displayName =
|
|
65
|
+
CollectionProvider.displayName = 'CollectionProvider'
|
|
56
66
|
|
|
57
67
|
/* -----------------------------------------------------------------------------------------------
|
|
58
68
|
* CollectionSlot
|
|
@@ -60,14 +70,15 @@ function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(
|
|
|
60
70
|
|
|
61
71
|
const COLLECTION_SLOT_NAME = name + 'CollectionSlot'
|
|
62
72
|
|
|
63
|
-
const CollectionSlot = React.forwardRef<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
const CollectionSlot = React.forwardRef<
|
|
74
|
+
CollectionElement,
|
|
75
|
+
ScopedCollectionProps<CollectionProps>
|
|
76
|
+
>((props, forwardedRef) => {
|
|
77
|
+
const { __scopeCollection, children } = props
|
|
78
|
+
const context = useCollectionContext(__scopeCollection)
|
|
79
|
+
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)
|
|
80
|
+
return <Slot ref={composedRefs}>{children}</Slot>
|
|
81
|
+
})
|
|
71
82
|
|
|
72
83
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME
|
|
73
84
|
|
|
@@ -80,28 +91,28 @@ function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(
|
|
|
80
91
|
|
|
81
92
|
type CollectionItemSlotProps = ItemData & {
|
|
82
93
|
children: React.ReactNode
|
|
83
|
-
scope: any
|
|
84
94
|
}
|
|
85
95
|
|
|
86
|
-
const CollectionItemSlot = React.forwardRef<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
})
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
96
|
+
const CollectionItemSlot = React.forwardRef<
|
|
97
|
+
ItemElement,
|
|
98
|
+
ScopedCollectionProps<CollectionItemSlotProps>
|
|
99
|
+
>((props, forwardedRef) => {
|
|
100
|
+
const { __scopeCollection, children, ...itemData } = props
|
|
101
|
+
const ref = React.useRef<ItemElement>(null)
|
|
102
|
+
const composedRefs = useComposedRefs(forwardedRef, ref)
|
|
103
|
+
const context = useCollectionContext(__scopeCollection)
|
|
104
|
+
|
|
105
|
+
React.useEffect(() => {
|
|
106
|
+
context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })
|
|
107
|
+
return () => void context.itemMap.delete(ref)
|
|
108
|
+
})
|
|
109
|
+
|
|
110
|
+
return (
|
|
111
|
+
<Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>
|
|
112
|
+
{children}
|
|
113
|
+
</Slot>
|
|
114
|
+
)
|
|
115
|
+
})
|
|
105
116
|
|
|
106
117
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME
|
|
107
118
|
|
|
@@ -109,8 +120,8 @@ function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(
|
|
|
109
120
|
* useCollection
|
|
110
121
|
* ---------------------------------------------------------------------------------------------*/
|
|
111
122
|
|
|
112
|
-
function useCollection(
|
|
113
|
-
const context = useCollectionContext(
|
|
123
|
+
function useCollection(__scopeCollection: any) {
|
|
124
|
+
const context = useCollectionContext(__scopeCollection)
|
|
114
125
|
|
|
115
126
|
const getItems = React.useCallback(() => {
|
|
116
127
|
if (!isWeb) {
|
|
@@ -137,7 +148,6 @@ function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(
|
|
|
137
148
|
return [
|
|
138
149
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
139
150
|
useCollection,
|
|
140
|
-
createCollectionScope,
|
|
141
151
|
] as const
|
|
142
152
|
}
|
|
143
153
|
|
package/types/Collection.d.ts
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { Slot, TamaguiElement } from '@tamagui/core';
|
|
1
|
+
import { ScopedProps, 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
|
-
scope: any;
|
|
6
5
|
}
|
|
7
6
|
declare function createCollection<ItemElement extends TamaguiElement, ItemData = {}>(name: string): readonly [{
|
|
8
7
|
readonly Provider: React.FC<{
|
|
9
8
|
children?: React.ReactNode;
|
|
10
|
-
|
|
9
|
+
__scopeCollection: string;
|
|
11
10
|
}>;
|
|
12
|
-
readonly Slot: React.ForwardRefExoticComponent<CollectionProps &
|
|
13
|
-
|
|
11
|
+
readonly Slot: React.ForwardRefExoticComponent<CollectionProps & {
|
|
12
|
+
__scopeCollection?: string | undefined;
|
|
13
|
+
} & React.RefAttributes<TamaguiElement>>;
|
|
14
|
+
readonly ItemSlot: React.ForwardRefExoticComponent<React.PropsWithoutRef<ScopedProps<ItemData & {
|
|
14
15
|
children: React.ReactNode;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}, (scope: any) => () => ({
|
|
16
|
+
}, "Collection">> & React.RefAttributes<ItemElement>>;
|
|
17
|
+
}, (__scopeCollection: any) => () => ({
|
|
18
18
|
ref: React.RefObject<ItemElement>;
|
|
19
|
-
} & ItemData)[]
|
|
19
|
+
} & ItemData)[]];
|
|
20
20
|
export { createCollection };
|
|
21
21
|
export type { CollectionProps };
|
|
22
22
|
//# sourceMappingURL=Collection.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../src/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../src/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,IAAI,EACJ,cAAc,EAGf,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAA;AAE5D,UAAU,eAAgB,SAAQ,SAAS;CAAG;AAO9C,iBAAS,gBAAgB,CAAC,WAAW,SAAS,cAAc,EAAE,QAAQ,GAAG,EAAE,EACzE,IAAI,EAAE,MAAM;;mBA2BC,MAAM,SAAS;2BACP,MAAM;;;;;;kBA4Cf,MAAM,SAAS;;uBA8Be,GAAG;SAxFlC,MAAM,SAAS,CAAC,WAAW,CAAC;iBAqHxC;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAC3B,YAAY,EAAE,eAAe,EAAE,CAAA"}
|