@tamagui/group 2.7.7 → 3.0.0-beta.643.1
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/Group.cjs +104 -132
- package/dist/cjs/Group.native.cjs +147 -0
- package/dist/cjs/Group.native.js +109 -136
- package/dist/cjs/Group.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +21 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/useIndexedChildren.cjs +52 -58
- package/dist/cjs/useIndexedChildren.native.cjs +84 -0
- package/dist/cjs/useIndexedChildren.native.js +60 -65
- package/dist/cjs/useIndexedChildren.native.js.map +1 -1
- package/dist/esm/Group.mjs +84 -104
- package/dist/esm/Group.mjs.map +1 -1
- package/dist/esm/Group.native.js +90 -110
- package/dist/esm/Group.native.js.map +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/dist/esm/useIndexedChildren.mjs +35 -33
- package/dist/esm/useIndexedChildren.mjs.map +1 -1
- package/dist/esm/useIndexedChildren.native.js +44 -42
- package/dist/esm/useIndexedChildren.native.js.map +1 -1
- package/dist/jsx/Group.mjs +84 -104
- package/dist/jsx/Group.mjs.map +1 -1
- package/dist/jsx/Group.native.cjs +147 -0
- package/dist/jsx/Group.native.js +109 -136
- package/dist/jsx/Group.native.js.map +1 -1
- package/dist/jsx/index.js +1 -2
- package/dist/jsx/index.mjs +1 -2
- package/dist/jsx/index.native.cjs +21 -0
- package/dist/jsx/index.native.js +10 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/useIndexedChildren.mjs +35 -33
- package/dist/jsx/useIndexedChildren.mjs.map +1 -1
- package/dist/jsx/useIndexedChildren.native.cjs +84 -0
- package/dist/jsx/useIndexedChildren.native.js +60 -65
- package/dist/jsx/useIndexedChildren.native.js.map +1 -1
- package/package.json +9 -9
- package/src/Group.tsx +20 -19
- package/types/Group.d.ts +107 -78
- package/types/Group.d.ts.map +1 -1
- package/types/useIndexedChildren.d.ts +1 -1
- package/types/useIndexedChildren.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
package/dist/jsx/Group.mjs
CHANGED
|
@@ -1,128 +1,108 @@
|
|
|
1
|
-
import { mergeSlotStyleProps, styled } from "@tamagui/core";
|
|
1
|
+
import { createStyledHOC, mergeSlotStyleProps, resolveSizeToken, styled } from "@tamagui/core";
|
|
2
2
|
import { createContextScope } from "@tamagui/create-context";
|
|
3
3
|
import { withStaticProperties } from "@tamagui/helpers";
|
|
4
4
|
import { YStack } from "@tamagui/stacks";
|
|
5
5
|
import React from "react";
|
|
6
6
|
import { useIndex, useIndexedChildren } from "./useIndexedChildren.mjs";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
|
|
8
9
|
const GROUP_NAME = "Group";
|
|
9
10
|
const [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME);
|
|
10
11
|
const [GroupProvider, useGroupContext] = createGroupContext(GROUP_NAME);
|
|
12
|
+
const groupSizeVariant = (val, { tokens }) => {
|
|
13
|
+
const radiusToken = resolveSizeToken(val, "radius");
|
|
14
|
+
return { borderRadius: tokens.radius[radiusToken] ?? radiusToken };
|
|
15
|
+
};
|
|
11
16
|
const GroupFrame = styled(YStack, {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
},
|
|
19
|
-
size: (val, {
|
|
20
|
-
tokens
|
|
21
|
-
}) => {
|
|
22
|
-
const borderRadius = tokens.radius[val] ?? val ?? tokens.radius["$true"];
|
|
23
|
-
return {
|
|
24
|
-
borderRadius
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
defaultVariants: {
|
|
29
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
30
|
-
}
|
|
17
|
+
displayName: "GroupFrame",
|
|
18
|
+
size: true,
|
|
19
|
+
variants: { size: {
|
|
20
|
+
true: groupSizeVariant,
|
|
21
|
+
any: groupSizeVariant
|
|
22
|
+
} }
|
|
31
23
|
});
|
|
32
24
|
function createGroup(verticalDefault) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
flexDirection: vertical ? "column" : "row",
|
|
50
|
-
...restProps,
|
|
51
|
-
children: indexedChildren
|
|
52
|
-
})
|
|
53
|
-
});
|
|
54
|
-
}), {
|
|
55
|
-
Item: GroupItem
|
|
56
|
-
});
|
|
25
|
+
return withStaticProperties(createStyledHOC(GroupFrame, (props, ref) => {
|
|
26
|
+
const { __scopeGroup, children: childrenProp, orientation = verticalDefault ? "vertical" : "horizontal", disabled, ...restProps } = props;
|
|
27
|
+
const vertical = orientation === "vertical";
|
|
28
|
+
const indexedChildren = useIndexedChildren(React.Children.toArray(childrenProp));
|
|
29
|
+
return /* @__PURE__ */ jsx(GroupProvider, {
|
|
30
|
+
vertical,
|
|
31
|
+
disabled,
|
|
32
|
+
scope: __scopeGroup,
|
|
33
|
+
children: /* @__PURE__ */ jsx(GroupFrame, {
|
|
34
|
+
ref,
|
|
35
|
+
flexDirection: vertical ? "column" : "row",
|
|
36
|
+
...restProps,
|
|
37
|
+
children: indexedChildren
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
}), { Item: GroupItem });
|
|
57
41
|
}
|
|
58
42
|
function GroupItem(props) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
if (context.disabled != null) {
|
|
81
|
-
groupProps.disabled = children.props.disabled ?? context.disabled;
|
|
82
|
-
}
|
|
83
|
-
const mergedProps = mergeSlotStyleProps(groupProps, children.props);
|
|
84
|
-
return React.cloneElement(children, mergedProps);
|
|
43
|
+
const { __scopeGroup, children, forcePlacement, ...forwardedProps } = props;
|
|
44
|
+
const context = useGroupContext("GroupItem", __scopeGroup);
|
|
45
|
+
const treeIndex = useIndex();
|
|
46
|
+
if (!treeIndex) {
|
|
47
|
+
throw Error("<Group.Item/> should only be used within a <Group/>");
|
|
48
|
+
}
|
|
49
|
+
if (!React.isValidElement(children)) {
|
|
50
|
+
return children;
|
|
51
|
+
}
|
|
52
|
+
const isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
|
|
53
|
+
const isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
|
|
54
|
+
const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
|
|
55
|
+
const groupProps = {
|
|
56
|
+
...forwardedProps,
|
|
57
|
+
...radiusStyles
|
|
58
|
+
};
|
|
59
|
+
if (context.disabled != null) {
|
|
60
|
+
groupProps.disabled = children.props.disabled ?? context.disabled;
|
|
61
|
+
}
|
|
62
|
+
const mergedProps = mergeSlotStyleProps(groupProps, children.props);
|
|
63
|
+
return React.cloneElement(children, mergedProps);
|
|
85
64
|
}
|
|
86
65
|
const useGroupItem = (childrenProps, forcePlacement, __scopeGroup) => {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
66
|
+
const treeIndex = useIndex();
|
|
67
|
+
const context = useGroupContext("GroupItem", __scopeGroup);
|
|
68
|
+
if (!treeIndex) {
|
|
69
|
+
throw Error("useGroupItem should only be used within a <Group/>");
|
|
70
|
+
}
|
|
71
|
+
const isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
|
|
72
|
+
const isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
|
|
73
|
+
const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
|
|
74
|
+
return {
|
|
75
|
+
disabled: childrenProps.disabled ?? context.disabled,
|
|
76
|
+
...radiusStyles
|
|
77
|
+
};
|
|
99
78
|
};
|
|
100
79
|
const Group = createGroup(true);
|
|
101
80
|
const YGroup = Group;
|
|
102
81
|
const XGroup = createGroup(false);
|
|
103
82
|
function getZeroedRadius(isFirst, isLast, vertical) {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
83
|
+
if (vertical) {
|
|
84
|
+
return {
|
|
85
|
+
...isFirst ? null : {
|
|
86
|
+
borderTopLeftRadius: 0,
|
|
87
|
+
borderTopRightRadius: 0
|
|
88
|
+
},
|
|
89
|
+
...isLast ? null : {
|
|
90
|
+
borderBottomLeftRadius: 0,
|
|
91
|
+
borderBottomRightRadius: 0
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
return {
|
|
96
|
+
...isFirst ? null : {
|
|
97
|
+
borderTopLeftRadius: 0,
|
|
98
|
+
borderBottomLeftRadius: 0
|
|
99
|
+
},
|
|
100
|
+
...isLast ? null : {
|
|
101
|
+
borderTopRightRadius: 0,
|
|
102
|
+
borderBottomRightRadius: 0
|
|
103
|
+
}
|
|
104
|
+
};
|
|
126
105
|
}
|
|
106
|
+
|
|
127
107
|
export { Group, GroupFrame, XGroup, YGroup, createGroupScope, useGroupItem };
|
|
128
108
|
//# sourceMappingURL=Group.mjs.map
|
package/dist/jsx/Group.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"Group.js","names":[],"sources":["jsx/Group.js"],"sourcesContent":["import {\n createStyledHOC,\n mergeSlotStyleProps,\n resolveSizeToken,\n styled\n} from \"@tamagui/core\";\nimport { createContextScope } from \"@tamagui/create-context\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport { YStack } from \"@tamagui/stacks\";\nimport React from \"react\";\nimport { useIndex, useIndexedChildren } from \"./useIndexedChildren\";\nimport { jsx } from \"react/jsx-runtime\";\nconst GROUP_NAME = \"Group\";\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME);\nconst [GroupProvider, useGroupContext] = createGroupContext(GROUP_NAME);\nconst groupSizeVariant = (val, { tokens }) => {\n const radiusToken = resolveSizeToken(val, \"radius\");\n return {\n borderRadius: tokens.radius[radiusToken] ?? radiusToken\n };\n};\nconst GroupFrame = styled(YStack, {\n displayName: \"GroupFrame\",\n size: true,\n variants: {\n size: {\n true: groupSizeVariant,\n any: groupSizeVariant\n }\n }\n});\nfunction createGroup(verticalDefault) {\n return withStaticProperties(\n createStyledHOC(GroupFrame, (props, ref) => {\n const {\n __scopeGroup,\n children: childrenProp,\n orientation = verticalDefault ? \"vertical\" : \"horizontal\",\n disabled,\n ...restProps\n } = props;\n const vertical = orientation === \"vertical\";\n const indexedChildren = useIndexedChildren(React.Children.toArray(childrenProp));\n return /* @__PURE__ */ jsx(GroupProvider, { vertical, disabled, scope: __scopeGroup, children: /* @__PURE__ */ jsx(\n GroupFrame,\n {\n ref,\n flexDirection: vertical ? \"column\" : \"row\",\n ...restProps,\n children: indexedChildren\n }\n ) });\n }),\n {\n Item: GroupItem\n }\n );\n}\nfunction GroupItem(props) {\n const { __scopeGroup, children, forcePlacement, ...forwardedProps } = props;\n const context = useGroupContext(\"GroupItem\", __scopeGroup);\n const treeIndex = useIndex();\n if (!treeIndex) {\n throw Error(\"<Group.Item/> should only be used within a <Group/>\");\n }\n if (!React.isValidElement(children)) {\n return children;\n }\n const isFirst = forcePlacement === \"first\" || forcePlacement !== \"last\" && treeIndex.index === 0;\n const isLast = forcePlacement === \"last\" || forcePlacement !== \"first\" && treeIndex.index === treeIndex.maxIndex;\n const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);\n const groupProps = {\n ...forwardedProps,\n ...radiusStyles\n };\n if (context.disabled != null) {\n groupProps.disabled = children.props.disabled ?? context.disabled;\n }\n const mergedProps = mergeSlotStyleProps(groupProps, children.props);\n return React.cloneElement(children, mergedProps);\n}\nconst useGroupItem = (childrenProps, forcePlacement, __scopeGroup) => {\n const treeIndex = useIndex();\n const context = useGroupContext(\"GroupItem\", __scopeGroup);\n if (!treeIndex) {\n throw Error(\"useGroupItem should only be used within a <Group/>\");\n }\n const isFirst = forcePlacement === \"first\" || forcePlacement !== \"last\" && treeIndex.index === 0;\n const isLast = forcePlacement === \"last\" || forcePlacement !== \"first\" && treeIndex.index === treeIndex.maxIndex;\n const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);\n return {\n disabled: childrenProps.disabled ?? context.disabled,\n ...radiusStyles\n };\n};\nconst Group = createGroup(true);\nconst YGroup = Group;\nconst XGroup = createGroup(false);\nfunction getZeroedRadius(isFirst, isLast, vertical) {\n if (vertical) {\n return {\n ...isFirst ? null : { borderTopLeftRadius: 0, borderTopRightRadius: 0 },\n ...isLast ? null : { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }\n };\n }\n return {\n ...isFirst ? null : { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },\n ...isLast ? null : { borderTopRightRadius: 0, borderBottomRightRadius: 0 }\n };\n}\nexport {\n Group,\n GroupFrame,\n XGroup,\n YGroup,\n createGroupScope,\n useGroupItem\n};\n//# sourceMappingURL=Group.js.map\n"],"mappings":";;;;;;;;;AAYA,MAAM,aAAa;AACnB,MAAM,CAAC,oBAAoB,oBAAoB,mBAAmB,UAAU;AAC5E,MAAM,CAAC,eAAe,mBAAmB,mBAAmB,UAAU;AACtE,MAAM,oBAAoB,KAAK,EAAE,aAAa;CAC5C,MAAM,cAAc,iBAAiB,KAAK,QAAQ;CAClD,OAAO,EACL,cAAc,OAAO,OAAO,gBAAgB,YAC9C;AACF;AACA,MAAM,aAAa,OAAO,QAAQ;CAChC,aAAa;CACb,MAAM;CACN,UAAU,EACR,MAAM;EACJ,MAAM;EACN,KAAK;CACP,EACF;AACF,CAAC;AACD,SAAS,YAAY,iBAAiB;CACpC,OAAO,qBACL,gBAAgB,aAAa,OAAO,QAAQ;EAC1C,MAAM,EACJ,cACA,UAAU,cACV,cAAc,kBAAkB,aAAa,cAC7C,UACA,GAAG,cACD;EACJ,MAAM,WAAW,gBAAgB;EACjC,MAAM,kBAAkB,mBAAmB,MAAM,SAAS,QAAQ,YAAY,CAAC;EAC/E,OAAuB,oBAAI,eAAe;GAAE;GAAU;GAAU,OAAO;GAAc,UAA0B,oBAC7G,YACA;IACE;IACA,eAAe,WAAW,WAAW;IACrC,GAAG;IACH,UAAU;GACZ,CACF;EAAE,CAAC;CACL,CAAC,GACD,EACE,MAAM,UACR,CACF;AACF;AACA,SAAS,UAAU,OAAO;CACxB,MAAM,EAAE,cAAc,UAAU,gBAAgB,GAAG,mBAAmB;CACtE,MAAM,UAAU,gBAAgB,aAAa,YAAY;CACzD,MAAM,YAAY,SAAS;CAC3B,IAAI,CAAC,WAAW;EACd,MAAM,MAAM,qDAAqD;CACnE;CACA,IAAI,CAAC,MAAM,eAAe,QAAQ,GAAG;EACnC,OAAO;CACT;CACA,MAAM,UAAU,mBAAmB,WAAW,mBAAmB,UAAU,UAAU,UAAU;CAC/F,MAAM,SAAS,mBAAmB,UAAU,mBAAmB,WAAW,UAAU,UAAU,UAAU;CACxG,MAAM,eAAe,gBAAgB,SAAS,QAAQ,QAAQ,QAAQ;CACtE,MAAM,aAAa;EACjB,GAAG;EACH,GAAG;CACL;CACA,IAAI,QAAQ,YAAY,MAAM;EAC5B,WAAW,WAAW,SAAS,MAAM,YAAY,QAAQ;CAC3D;CACA,MAAM,cAAc,oBAAoB,YAAY,SAAS,KAAK;CAClE,OAAO,MAAM,aAAa,UAAU,WAAW;AACjD;AACA,MAAM,gBAAgB,eAAe,gBAAgB,iBAAiB;CACpE,MAAM,YAAY,SAAS;CAC3B,MAAM,UAAU,gBAAgB,aAAa,YAAY;CACzD,IAAI,CAAC,WAAW;EACd,MAAM,MAAM,oDAAoD;CAClE;CACA,MAAM,UAAU,mBAAmB,WAAW,mBAAmB,UAAU,UAAU,UAAU;CAC/F,MAAM,SAAS,mBAAmB,UAAU,mBAAmB,WAAW,UAAU,UAAU,UAAU;CACxG,MAAM,eAAe,gBAAgB,SAAS,QAAQ,QAAQ,QAAQ;CACtE,OAAO;EACL,UAAU,cAAc,YAAY,QAAQ;EAC5C,GAAG;CACL;AACF;AACA,MAAM,QAAQ,YAAY,IAAI;AAC9B,MAAM,SAAS;AACf,MAAM,SAAS,YAAY,KAAK;AAChC,SAAS,gBAAgB,SAAS,QAAQ,UAAU;CAClD,IAAI,UAAU;EACZ,OAAO;GACL,GAAG,UAAU,OAAO;IAAE,qBAAqB;IAAG,sBAAsB;GAAE;GACtE,GAAG,SAAS,OAAO;IAAE,wBAAwB;IAAG,yBAAyB;GAAE;EAC7E;CACF;CACA,OAAO;EACL,GAAG,UAAU,OAAO;GAAE,qBAAqB;GAAG,wBAAwB;EAAE;EACxE,GAAG,SAAS,OAAO;GAAE,sBAAsB;GAAG,yBAAyB;EAAE;CAC3E;AACF"}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __export = (target, all) => {
|
|
11
|
+
for (var name in all) __defProp(target, name, {
|
|
12
|
+
get: all[name],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
+
get: () => from[key],
|
|
20
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return to;
|
|
24
|
+
};
|
|
25
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: true
|
|
28
|
+
}) : target, mod));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var Group_exports = {};
|
|
31
|
+
__export(Group_exports, {
|
|
32
|
+
Group: () => Group,
|
|
33
|
+
GroupFrame: () => GroupFrame,
|
|
34
|
+
XGroup: () => XGroup,
|
|
35
|
+
YGroup: () => YGroup,
|
|
36
|
+
createGroupScope: () => createGroupScope,
|
|
37
|
+
useGroupItem: () => useGroupItem
|
|
38
|
+
});
|
|
39
|
+
module.exports = __toCommonJS(Group_exports);
|
|
40
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
var import_core = require("@tamagui/core");
|
|
42
|
+
var import_create_context = require("@tamagui/create-context");
|
|
43
|
+
var import_helpers = require("@tamagui/helpers");
|
|
44
|
+
var import_stacks = require("@tamagui/stacks");
|
|
45
|
+
var import_react = __toESM(require("react"), 1);
|
|
46
|
+
var import_useIndexedChildren = require("./useIndexedChildren.native.js");
|
|
47
|
+
var GROUP_NAME = "Group";
|
|
48
|
+
var [createGroupContext, createGroupScope] = (0, import_create_context.createContextScope)(GROUP_NAME);
|
|
49
|
+
var [GroupProvider, useGroupContext] = createGroupContext(GROUP_NAME);
|
|
50
|
+
var groupSizeVariant = function(val, param) {
|
|
51
|
+
var { tokens } = param;
|
|
52
|
+
var radiusToken = (0, import_core.resolveSizeToken)(val, "radius");
|
|
53
|
+
var _tokens_radius_radiusToken;
|
|
54
|
+
return { borderRadius: (_tokens_radius_radiusToken = tokens.radius[radiusToken]) !== null && _tokens_radius_radiusToken !== void 0 ? _tokens_radius_radiusToken : radiusToken };
|
|
55
|
+
};
|
|
56
|
+
var GroupFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
57
|
+
displayName: "GroupFrame",
|
|
58
|
+
size: true,
|
|
59
|
+
variants: { size: {
|
|
60
|
+
true: groupSizeVariant,
|
|
61
|
+
any: groupSizeVariant
|
|
62
|
+
} }
|
|
63
|
+
});
|
|
64
|
+
function createGroup(verticalDefault) {
|
|
65
|
+
return (0, import_helpers.withStaticProperties)((0, import_core.createStyledHOC)(GroupFrame, function(props, ref) {
|
|
66
|
+
var { __scopeGroup, children: childrenProp, orientation = verticalDefault ? "vertical" : "horizontal", disabled, ...restProps } = props;
|
|
67
|
+
var vertical = orientation === "vertical";
|
|
68
|
+
var indexedChildren = (0, import_useIndexedChildren.useIndexedChildren)(import_react.default.Children.toArray(childrenProp));
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupProvider, {
|
|
70
|
+
vertical,
|
|
71
|
+
disabled,
|
|
72
|
+
scope: __scopeGroup,
|
|
73
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupFrame, {
|
|
74
|
+
ref,
|
|
75
|
+
flexDirection: vertical ? "column" : "row",
|
|
76
|
+
...restProps,
|
|
77
|
+
children: indexedChildren
|
|
78
|
+
})
|
|
79
|
+
});
|
|
80
|
+
}), { Item: GroupItem });
|
|
81
|
+
}
|
|
82
|
+
function GroupItem(props) {
|
|
83
|
+
var { __scopeGroup, children, forcePlacement, ...forwardedProps } = props;
|
|
84
|
+
var context = useGroupContext("GroupItem", __scopeGroup);
|
|
85
|
+
var treeIndex = (0, import_useIndexedChildren.useIndex)();
|
|
86
|
+
if (!treeIndex) {
|
|
87
|
+
throw Error("<Group.Item/> should only be used within a <Group/>");
|
|
88
|
+
}
|
|
89
|
+
if (!/* @__PURE__ */ import_react.default.isValidElement(children)) {
|
|
90
|
+
return children;
|
|
91
|
+
}
|
|
92
|
+
var isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
|
|
93
|
+
var isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
|
|
94
|
+
var radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
|
|
95
|
+
var groupProps = {
|
|
96
|
+
...forwardedProps,
|
|
97
|
+
...radiusStyles
|
|
98
|
+
};
|
|
99
|
+
if (context.disabled != null) {
|
|
100
|
+
var _children_props_disabled;
|
|
101
|
+
groupProps.disabled = (_children_props_disabled = children.props.disabled) !== null && _children_props_disabled !== void 0 ? _children_props_disabled : context.disabled;
|
|
102
|
+
}
|
|
103
|
+
var mergedProps = (0, import_core.mergeSlotStyleProps)(groupProps, children.props);
|
|
104
|
+
return /* @__PURE__ */ import_react.default.cloneElement(children, mergedProps);
|
|
105
|
+
}
|
|
106
|
+
var useGroupItem = function(childrenProps, forcePlacement, __scopeGroup) {
|
|
107
|
+
var treeIndex = (0, import_useIndexedChildren.useIndex)();
|
|
108
|
+
var context = useGroupContext("GroupItem", __scopeGroup);
|
|
109
|
+
if (!treeIndex) {
|
|
110
|
+
throw Error("useGroupItem should only be used within a <Group/>");
|
|
111
|
+
}
|
|
112
|
+
var isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
|
|
113
|
+
var isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
|
|
114
|
+
var radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
|
|
115
|
+
var _childrenProps_disabled;
|
|
116
|
+
return {
|
|
117
|
+
disabled: (_childrenProps_disabled = childrenProps.disabled) !== null && _childrenProps_disabled !== void 0 ? _childrenProps_disabled : context.disabled,
|
|
118
|
+
...radiusStyles
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
var Group = createGroup(true);
|
|
122
|
+
var YGroup = Group;
|
|
123
|
+
var XGroup = createGroup(false);
|
|
124
|
+
function getZeroedRadius(isFirst, isLast, vertical) {
|
|
125
|
+
if (vertical) {
|
|
126
|
+
return {
|
|
127
|
+
...isFirst ? null : {
|
|
128
|
+
borderTopLeftRadius: 0,
|
|
129
|
+
borderTopRightRadius: 0
|
|
130
|
+
},
|
|
131
|
+
...isLast ? null : {
|
|
132
|
+
borderBottomLeftRadius: 0,
|
|
133
|
+
borderBottomRightRadius: 0
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
return {
|
|
138
|
+
...isFirst ? null : {
|
|
139
|
+
borderTopLeftRadius: 0,
|
|
140
|
+
borderBottomLeftRadius: 0
|
|
141
|
+
},
|
|
142
|
+
...isLast ? null : {
|
|
143
|
+
borderTopRightRadius: 0,
|
|
144
|
+
borderBottomRightRadius: 0
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
}
|