@tamagui/group 1.11.2 → 1.12.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.js +8 -7
- package/dist/cjs/Group.js.map +2 -2
- package/dist/esm/Group.js +8 -7
- package/dist/esm/Group.js.map +2 -2
- package/dist/esm/Group.mjs +8 -7
- package/dist/esm/Group.mjs.map +2 -2
- package/dist/jsx/Group.js +8 -7
- package/dist/jsx/Group.js.map +2 -2
- package/dist/jsx/Group.mjs +8 -7
- package/dist/jsx/Group.mjs.map +2 -2
- package/package.json +6 -6
- package/src/Group.tsx +12 -8
- package/types/Group.d.ts +16 -0
- package/types/Group.d.ts.map +1 -1
package/dist/cjs/Group.js
CHANGED
|
@@ -80,13 +80,14 @@ function createGroup(verticalDefault) {
|
|
|
80
80
|
separator,
|
|
81
81
|
scrollable,
|
|
82
82
|
axis = verticalDefault ? "vertical" : "horizontal",
|
|
83
|
+
orientation = axis,
|
|
83
84
|
disabled: disabledProp,
|
|
84
85
|
disablePassBorderRadius: disablePassBorderRadiusProp,
|
|
85
86
|
borderRadius,
|
|
86
87
|
forceUseItem,
|
|
87
88
|
...restProps
|
|
88
89
|
} = (0, import_core.getExpandedShorthands)(activeProps);
|
|
89
|
-
const vertical =
|
|
90
|
+
const vertical = orientation === "vertical";
|
|
90
91
|
const [itemChildrenCount, setItemChildrenCount] = (0, import_use_controllable_state.useControllableState)({
|
|
91
92
|
defaultProp: forceUseItem ? 1 : 0
|
|
92
93
|
});
|
|
@@ -137,7 +138,7 @@ function createGroup(verticalDefault) {
|
|
|
137
138
|
GroupProvider,
|
|
138
139
|
{
|
|
139
140
|
disablePassBorderRadius,
|
|
140
|
-
vertical:
|
|
141
|
+
vertical: orientation === "vertical",
|
|
141
142
|
radius,
|
|
142
143
|
disabled: disabledProp,
|
|
143
144
|
onItemMount,
|
|
@@ -148,10 +149,10 @@ function createGroup(verticalDefault) {
|
|
|
148
149
|
{
|
|
149
150
|
ref,
|
|
150
151
|
size,
|
|
151
|
-
flexDirection:
|
|
152
|
+
flexDirection: orientation === "horizontal" ? "row" : "column",
|
|
152
153
|
borderRadius,
|
|
153
154
|
...restProps,
|
|
154
|
-
children: wrapScroll({ ...activeProps,
|
|
155
|
+
children: wrapScroll({ ...activeProps, orientation }, indexedChildren)
|
|
155
156
|
}
|
|
156
157
|
)
|
|
157
158
|
}
|
|
@@ -215,15 +216,15 @@ const useGroupItem = (childrenProps, __scopeGroup) => {
|
|
|
215
216
|
const Group = createGroup(true);
|
|
216
217
|
const YGroup = Group;
|
|
217
218
|
const XGroup = createGroup(false);
|
|
218
|
-
const wrapScroll = ({ scrollable,
|
|
219
|
+
const wrapScroll = ({ scrollable, orientation, showScrollIndicator = false }, children) => {
|
|
219
220
|
if (scrollable)
|
|
220
221
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
221
222
|
import_react_native.ScrollView,
|
|
222
223
|
{
|
|
223
|
-
...
|
|
224
|
+
...orientation === "vertical" && {
|
|
224
225
|
showsVerticalScrollIndicator: showScrollIndicator
|
|
225
226
|
},
|
|
226
|
-
...
|
|
227
|
+
...orientation === "horizontal" && {
|
|
227
228
|
horizontal: true,
|
|
228
229
|
showsHorizontalScrollIndicator: showScrollIndicator
|
|
229
230
|
},
|
package/dist/cjs/Group.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Group.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n axis?: 'horizontal' | 'vertical'\n\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n /**\n * @deprecated use `orientation` instead\n */\n axis?: 'horizontal' | 'vertical'\n orientation?: 'horizontal' | 'vertical'\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n orientation = axis,\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical = orientation === 'vertical'\n const [itemChildrenCount, setItemChildrenCount] = useControllableState({\n defaultProp: forceUseItem ? 1 : 0,\n })\n const isUsingItems = true // itemChildrenCount > 0\n\n // 1 off given border to adjust for border radius? This should be user controllable\n const radius =\n borderRadius ??\n (size ? getVariableValue(getTokens().radius[size]) - 1 : undefined)\n\n const hasRadius = radius !== undefined\n const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius\n\n if (!isUsingItems) console.log('screw up!')\n const childrenArray = Children.toArray(childrenProp)\n const children = isUsingItems\n ? childrenProp\n : childrenArray.map((child, i) => {\n if (!isValidElement(child)) {\n return child\n }\n const disabled = child.props.disabled ?? disabledProp\n\n const isFirst = i === 0\n const isLast = i === childrenArray.length - 1\n\n const radiusStyles =\n disablePassBorderRadius === true\n ? null\n : getBorderRadius({\n isFirst,\n isLast,\n radius,\n vertical,\n disable: disablePassBorderRadius,\n })\n const props = {\n disabled,\n ...(isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }),\n }\n\n return cloneElementWithPropOrder(child, props)\n })\n\n const indexedChildren = useIndexedChildren(\n spacedChildren({\n direction: spaceDirection,\n separator,\n space,\n children,\n })\n )\n\n const onItemMount = React.useCallback(\n () => setItemChildrenCount((prev) => prev + 1),\n []\n )\n const onItemUnmount = React.useCallback(\n () => setItemChildrenCount((prev) => prev - 1),\n []\n )\n\n return (\n <GroupProvider\n disablePassBorderRadius={disablePassBorderRadius}\n vertical={orientation === 'vertical'}\n radius={radius}\n disabled={disabledProp}\n onItemMount={onItemMount}\n onItemUnmount={onItemUnmount}\n scope={__scopeGroup}\n >\n <GroupFrame\n ref={ref}\n size={size}\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n borderRadius={borderRadius}\n {...restProps}\n >\n {wrapScroll({ ...activeProps, orientation }, indexedChildren)}\n </GroupFrame>\n </GroupProvider>\n )\n }),\n {\n Item: GroupItem,\n }\n )\n}\n\nconst GroupItem = (props: ScopedProps<{ children: React.ReactNode }>) => {\n const { __scopeGroup, children } = props\n const groupItemProps = useGroupItem(\n { disabled: isValidElement(children) ? children.props.disabled : undefined },\n __scopeGroup\n )\n\n if (!isValidElement(children)) {\n return children as any\n }\n\n if (isTamaguiElement(children)) {\n return React.cloneElement(children, groupItemProps)\n }\n\n return React.cloneElement(children, {\n style: {\n ...children.props?.['style'],\n ...groupItemProps,\n },\n } as any)\n}\n\nexport const useGroupItem = (\n childrenProps: { disabled: boolean },\n __scopeGroup?: Scope\n) => {\n const treeIndex = useIndex()\n const context = useGroupContext('GroupItem', __scopeGroup)\n\n React.useEffect(() => {\n context.onItemMount()\n return () => {\n context.onItemUnmount()\n }\n }, [])\n\n if (!treeIndex) {\n throw Error('<Group.Item/> should only be used within a <Group/>')\n }\n\n const isFirst = treeIndex.index === 0\n const isLast = treeIndex.index === treeIndex.maxIndex\n\n const disabled = childrenProps.disabled ?? context.disabled\n\n let propsToPass: Record<string, any> = {\n disabled,\n }\n\n if (context.disablePassBorderRadius !== true) {\n const borderRadius = getBorderRadius({\n radius: context.radius,\n isFirst,\n isLast,\n vertical: context.vertical,\n disable: context.disablePassBorderRadius,\n })\n return { ...propsToPass, ...borderRadius }\n }\n return propsToPass\n}\n\nexport const Group = createGroup(true)\nexport const YGroup = Group\nexport const XGroup = createGroup(false)\n\nconst wrapScroll = (\n { scrollable, orientation, showScrollIndicator = false }: GroupProps,\n children: any\n) => {\n if (scrollable)\n return (\n <ScrollView\n {...(orientation === 'vertical' && {\n showsVerticalScrollIndicator: showScrollIndicator,\n })}\n {...(orientation === 'horizontal' && {\n horizontal: true,\n showsHorizontalScrollIndicator: showScrollIndicator,\n })}\n >\n {children}\n </ScrollView>\n )\n return children\n}\n\nconst getBorderRadius = ({\n isFirst,\n isLast,\n radius,\n vertical,\n disable,\n}: {\n radius: any\n vertical: boolean\n isFirst: boolean\n isLast: boolean\n disable: DisablePassBorderRadius\n}) => {\n // TODO: RTL support would be nice here\n return {\n borderTopLeftRadius: isFirst && disable !== 'top' && disable !== 'start' ? radius : 0,\n borderTopRightRadius:\n disable !== 'top' &&\n disable !== 'end' &&\n ((vertical && isFirst) || (!vertical && isLast))\n ? radius\n : 0,\n borderBottomLeftRadius:\n disable !== 'bottom' &&\n disable !== 'start' &&\n ((vertical && isLast) || (!vertical && isFirst))\n ? radius\n : 0,\n borderBottomRightRadius:\n isLast && disable !== 'bottom' && disable !== 'end' ? radius : 0,\n }\n}\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n return React.cloneElement({ ...child, props: null }, next)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props", "React"]
|
|
7
7
|
}
|
package/dist/esm/Group.js
CHANGED
|
@@ -54,13 +54,14 @@ function createGroup(verticalDefault) {
|
|
|
54
54
|
separator,
|
|
55
55
|
scrollable,
|
|
56
56
|
axis = verticalDefault ? "vertical" : "horizontal",
|
|
57
|
+
orientation = axis,
|
|
57
58
|
disabled: disabledProp,
|
|
58
59
|
disablePassBorderRadius: disablePassBorderRadiusProp,
|
|
59
60
|
borderRadius,
|
|
60
61
|
forceUseItem,
|
|
61
62
|
...restProps
|
|
62
63
|
} = getExpandedShorthands(activeProps);
|
|
63
|
-
const vertical =
|
|
64
|
+
const vertical = orientation === "vertical";
|
|
64
65
|
const [itemChildrenCount, setItemChildrenCount] = useControllableState({
|
|
65
66
|
defaultProp: forceUseItem ? 1 : 0
|
|
66
67
|
});
|
|
@@ -111,7 +112,7 @@ function createGroup(verticalDefault) {
|
|
|
111
112
|
GroupProvider,
|
|
112
113
|
{
|
|
113
114
|
disablePassBorderRadius,
|
|
114
|
-
vertical:
|
|
115
|
+
vertical: orientation === "vertical",
|
|
115
116
|
radius,
|
|
116
117
|
disabled: disabledProp,
|
|
117
118
|
onItemMount,
|
|
@@ -122,10 +123,10 @@ function createGroup(verticalDefault) {
|
|
|
122
123
|
{
|
|
123
124
|
ref,
|
|
124
125
|
size,
|
|
125
|
-
flexDirection:
|
|
126
|
+
flexDirection: orientation === "horizontal" ? "row" : "column",
|
|
126
127
|
borderRadius,
|
|
127
128
|
...restProps,
|
|
128
|
-
children: wrapScroll({ ...activeProps,
|
|
129
|
+
children: wrapScroll({ ...activeProps, orientation }, indexedChildren)
|
|
129
130
|
}
|
|
130
131
|
)
|
|
131
132
|
}
|
|
@@ -189,15 +190,15 @@ const useGroupItem = (childrenProps, __scopeGroup) => {
|
|
|
189
190
|
const Group = createGroup(true);
|
|
190
191
|
const YGroup = Group;
|
|
191
192
|
const XGroup = createGroup(false);
|
|
192
|
-
const wrapScroll = ({ scrollable,
|
|
193
|
+
const wrapScroll = ({ scrollable, orientation, showScrollIndicator = false }, children) => {
|
|
193
194
|
if (scrollable)
|
|
194
195
|
return /* @__PURE__ */ jsx(
|
|
195
196
|
ScrollView,
|
|
196
197
|
{
|
|
197
|
-
...
|
|
198
|
+
...orientation === "vertical" && {
|
|
198
199
|
showsVerticalScrollIndicator: showScrollIndicator
|
|
199
200
|
},
|
|
200
|
-
...
|
|
201
|
+
...orientation === "horizontal" && {
|
|
201
202
|
horizontal: true,
|
|
202
203
|
showsHorizontalScrollIndicator: showScrollIndicator
|
|
203
204
|
},
|
package/dist/esm/Group.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Group.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n axis?: 'horizontal' | 'vertical'\n\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical =
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n /**\n * @deprecated use `orientation` instead\n */\n axis?: 'horizontal' | 'vertical'\n orientation?: 'horizontal' | 'vertical'\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n orientation = axis,\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical = orientation === 'vertical'\n const [itemChildrenCount, setItemChildrenCount] = useControllableState({\n defaultProp: forceUseItem ? 1 : 0,\n })\n const isUsingItems = true // itemChildrenCount > 0\n\n // 1 off given border to adjust for border radius? This should be user controllable\n const radius =\n borderRadius ??\n (size ? getVariableValue(getTokens().radius[size]) - 1 : undefined)\n\n const hasRadius = radius !== undefined\n const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius\n\n if (!isUsingItems) console.log('screw up!')\n const childrenArray = Children.toArray(childrenProp)\n const children = isUsingItems\n ? childrenProp\n : childrenArray.map((child, i) => {\n if (!isValidElement(child)) {\n return child\n }\n const disabled = child.props.disabled ?? disabledProp\n\n const isFirst = i === 0\n const isLast = i === childrenArray.length - 1\n\n const radiusStyles =\n disablePassBorderRadius === true\n ? null\n : getBorderRadius({\n isFirst,\n isLast,\n radius,\n vertical,\n disable: disablePassBorderRadius,\n })\n const props = {\n disabled,\n ...(isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }),\n }\n\n return cloneElementWithPropOrder(child, props)\n })\n\n const indexedChildren = useIndexedChildren(\n spacedChildren({\n direction: spaceDirection,\n separator,\n space,\n children,\n })\n )\n\n const onItemMount = React.useCallback(\n () => setItemChildrenCount((prev) => prev + 1),\n []\n )\n const onItemUnmount = React.useCallback(\n () => setItemChildrenCount((prev) => prev - 1),\n []\n )\n\n return (\n <GroupProvider\n disablePassBorderRadius={disablePassBorderRadius}\n vertical={orientation === 'vertical'}\n radius={radius}\n disabled={disabledProp}\n onItemMount={onItemMount}\n onItemUnmount={onItemUnmount}\n scope={__scopeGroup}\n >\n <GroupFrame\n ref={ref}\n size={size}\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n borderRadius={borderRadius}\n {...restProps}\n >\n {wrapScroll({ ...activeProps, orientation }, indexedChildren)}\n </GroupFrame>\n </GroupProvider>\n )\n }),\n {\n Item: GroupItem,\n }\n )\n}\n\nconst GroupItem = (props: ScopedProps<{ children: React.ReactNode }>) => {\n const { __scopeGroup, children } = props\n const groupItemProps = useGroupItem(\n { disabled: isValidElement(children) ? children.props.disabled : undefined },\n __scopeGroup\n )\n\n if (!isValidElement(children)) {\n return children as any\n }\n\n if (isTamaguiElement(children)) {\n return React.cloneElement(children, groupItemProps)\n }\n\n return React.cloneElement(children, {\n style: {\n ...children.props?.['style'],\n ...groupItemProps,\n },\n } as any)\n}\n\nexport const useGroupItem = (\n childrenProps: { disabled: boolean },\n __scopeGroup?: Scope\n) => {\n const treeIndex = useIndex()\n const context = useGroupContext('GroupItem', __scopeGroup)\n\n React.useEffect(() => {\n context.onItemMount()\n return () => {\n context.onItemUnmount()\n }\n }, [])\n\n if (!treeIndex) {\n throw Error('<Group.Item/> should only be used within a <Group/>')\n }\n\n const isFirst = treeIndex.index === 0\n const isLast = treeIndex.index === treeIndex.maxIndex\n\n const disabled = childrenProps.disabled ?? context.disabled\n\n let propsToPass: Record<string, any> = {\n disabled,\n }\n\n if (context.disablePassBorderRadius !== true) {\n const borderRadius = getBorderRadius({\n radius: context.radius,\n isFirst,\n isLast,\n vertical: context.vertical,\n disable: context.disablePassBorderRadius,\n })\n return { ...propsToPass, ...borderRadius }\n }\n return propsToPass\n}\n\nexport const Group = createGroup(true)\nexport const YGroup = Group\nexport const XGroup = createGroup(false)\n\nconst wrapScroll = (\n { scrollable, orientation, showScrollIndicator = false }: GroupProps,\n children: any\n) => {\n if (scrollable)\n return (\n <ScrollView\n {...(orientation === 'vertical' && {\n showsVerticalScrollIndicator: showScrollIndicator,\n })}\n {...(orientation === 'horizontal' && {\n horizontal: true,\n showsHorizontalScrollIndicator: showScrollIndicator,\n })}\n >\n {children}\n </ScrollView>\n )\n return children\n}\n\nconst getBorderRadius = ({\n isFirst,\n isLast,\n radius,\n vertical,\n disable,\n}: {\n radius: any\n vertical: boolean\n isFirst: boolean\n isLast: boolean\n disable: DisablePassBorderRadius\n}) => {\n // TODO: RTL support would be nice here\n return {\n borderTopLeftRadius: isFirst && disable !== 'top' && disable !== 'start' ? radius : 0,\n borderTopRightRadius:\n disable !== 'top' &&\n disable !== 'end' &&\n ((vertical && isFirst) || (!vertical && isLast))\n ? radius\n : 0,\n borderBottomLeftRadius:\n disable !== 'bottom' &&\n disable !== 'start' &&\n ((vertical && isLast) || (!vertical && isFirst))\n ? radius\n : 0,\n borderBottomRightRadius:\n isLast && disable !== 'bottom' && disable !== 'end' ? radius : 0,\n }\n}\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n return React.cloneElement({ ...child, props: null }, next)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/esm/Group.mjs
CHANGED
|
@@ -54,13 +54,14 @@ function createGroup(verticalDefault) {
|
|
|
54
54
|
separator,
|
|
55
55
|
scrollable,
|
|
56
56
|
axis = verticalDefault ? "vertical" : "horizontal",
|
|
57
|
+
orientation = axis,
|
|
57
58
|
disabled: disabledProp,
|
|
58
59
|
disablePassBorderRadius: disablePassBorderRadiusProp,
|
|
59
60
|
borderRadius,
|
|
60
61
|
forceUseItem,
|
|
61
62
|
...restProps
|
|
62
63
|
} = getExpandedShorthands(activeProps);
|
|
63
|
-
const vertical =
|
|
64
|
+
const vertical = orientation === "vertical";
|
|
64
65
|
const [itemChildrenCount, setItemChildrenCount] = useControllableState({
|
|
65
66
|
defaultProp: forceUseItem ? 1 : 0
|
|
66
67
|
});
|
|
@@ -111,7 +112,7 @@ function createGroup(verticalDefault) {
|
|
|
111
112
|
GroupProvider,
|
|
112
113
|
{
|
|
113
114
|
disablePassBorderRadius,
|
|
114
|
-
vertical:
|
|
115
|
+
vertical: orientation === "vertical",
|
|
115
116
|
radius,
|
|
116
117
|
disabled: disabledProp,
|
|
117
118
|
onItemMount,
|
|
@@ -122,10 +123,10 @@ function createGroup(verticalDefault) {
|
|
|
122
123
|
{
|
|
123
124
|
ref,
|
|
124
125
|
size,
|
|
125
|
-
flexDirection:
|
|
126
|
+
flexDirection: orientation === "horizontal" ? "row" : "column",
|
|
126
127
|
borderRadius,
|
|
127
128
|
...restProps,
|
|
128
|
-
children: wrapScroll({ ...activeProps,
|
|
129
|
+
children: wrapScroll({ ...activeProps, orientation }, indexedChildren)
|
|
129
130
|
}
|
|
130
131
|
)
|
|
131
132
|
}
|
|
@@ -189,15 +190,15 @@ const useGroupItem = (childrenProps, __scopeGroup) => {
|
|
|
189
190
|
const Group = createGroup(true);
|
|
190
191
|
const YGroup = Group;
|
|
191
192
|
const XGroup = createGroup(false);
|
|
192
|
-
const wrapScroll = ({ scrollable,
|
|
193
|
+
const wrapScroll = ({ scrollable, orientation, showScrollIndicator = false }, children) => {
|
|
193
194
|
if (scrollable)
|
|
194
195
|
return /* @__PURE__ */ jsx(
|
|
195
196
|
ScrollView,
|
|
196
197
|
{
|
|
197
|
-
...
|
|
198
|
+
...orientation === "vertical" && {
|
|
198
199
|
showsVerticalScrollIndicator: showScrollIndicator
|
|
199
200
|
},
|
|
200
|
-
...
|
|
201
|
+
...orientation === "horizontal" && {
|
|
201
202
|
horizontal: true,
|
|
202
203
|
showsHorizontalScrollIndicator: showScrollIndicator
|
|
203
204
|
},
|
package/dist/esm/Group.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Group.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n axis?: 'horizontal' | 'vertical'\n\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical =
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n /**\n * @deprecated use `orientation` instead\n */\n axis?: 'horizontal' | 'vertical'\n orientation?: 'horizontal' | 'vertical'\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n orientation = axis,\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical = orientation === 'vertical'\n const [itemChildrenCount, setItemChildrenCount] = useControllableState({\n defaultProp: forceUseItem ? 1 : 0,\n })\n const isUsingItems = true // itemChildrenCount > 0\n\n // 1 off given border to adjust for border radius? This should be user controllable\n const radius =\n borderRadius ??\n (size ? getVariableValue(getTokens().radius[size]) - 1 : undefined)\n\n const hasRadius = radius !== undefined\n const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius\n\n if (!isUsingItems) console.log('screw up!')\n const childrenArray = Children.toArray(childrenProp)\n const children = isUsingItems\n ? childrenProp\n : childrenArray.map((child, i) => {\n if (!isValidElement(child)) {\n return child\n }\n const disabled = child.props.disabled ?? disabledProp\n\n const isFirst = i === 0\n const isLast = i === childrenArray.length - 1\n\n const radiusStyles =\n disablePassBorderRadius === true\n ? null\n : getBorderRadius({\n isFirst,\n isLast,\n radius,\n vertical,\n disable: disablePassBorderRadius,\n })\n const props = {\n disabled,\n ...(isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }),\n }\n\n return cloneElementWithPropOrder(child, props)\n })\n\n const indexedChildren = useIndexedChildren(\n spacedChildren({\n direction: spaceDirection,\n separator,\n space,\n children,\n })\n )\n\n const onItemMount = React.useCallback(\n () => setItemChildrenCount((prev) => prev + 1),\n []\n )\n const onItemUnmount = React.useCallback(\n () => setItemChildrenCount((prev) => prev - 1),\n []\n )\n\n return (\n <GroupProvider\n disablePassBorderRadius={disablePassBorderRadius}\n vertical={orientation === 'vertical'}\n radius={radius}\n disabled={disabledProp}\n onItemMount={onItemMount}\n onItemUnmount={onItemUnmount}\n scope={__scopeGroup}\n >\n <GroupFrame\n ref={ref}\n size={size}\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n borderRadius={borderRadius}\n {...restProps}\n >\n {wrapScroll({ ...activeProps, orientation }, indexedChildren)}\n </GroupFrame>\n </GroupProvider>\n )\n }),\n {\n Item: GroupItem,\n }\n )\n}\n\nconst GroupItem = (props: ScopedProps<{ children: React.ReactNode }>) => {\n const { __scopeGroup, children } = props\n const groupItemProps = useGroupItem(\n { disabled: isValidElement(children) ? children.props.disabled : undefined },\n __scopeGroup\n )\n\n if (!isValidElement(children)) {\n return children as any\n }\n\n if (isTamaguiElement(children)) {\n return React.cloneElement(children, groupItemProps)\n }\n\n return React.cloneElement(children, {\n style: {\n ...children.props?.['style'],\n ...groupItemProps,\n },\n } as any)\n}\n\nexport const useGroupItem = (\n childrenProps: { disabled: boolean },\n __scopeGroup?: Scope\n) => {\n const treeIndex = useIndex()\n const context = useGroupContext('GroupItem', __scopeGroup)\n\n React.useEffect(() => {\n context.onItemMount()\n return () => {\n context.onItemUnmount()\n }\n }, [])\n\n if (!treeIndex) {\n throw Error('<Group.Item/> should only be used within a <Group/>')\n }\n\n const isFirst = treeIndex.index === 0\n const isLast = treeIndex.index === treeIndex.maxIndex\n\n const disabled = childrenProps.disabled ?? context.disabled\n\n let propsToPass: Record<string, any> = {\n disabled,\n }\n\n if (context.disablePassBorderRadius !== true) {\n const borderRadius = getBorderRadius({\n radius: context.radius,\n isFirst,\n isLast,\n vertical: context.vertical,\n disable: context.disablePassBorderRadius,\n })\n return { ...propsToPass, ...borderRadius }\n }\n return propsToPass\n}\n\nexport const Group = createGroup(true)\nexport const YGroup = Group\nexport const XGroup = createGroup(false)\n\nconst wrapScroll = (\n { scrollable, orientation, showScrollIndicator = false }: GroupProps,\n children: any\n) => {\n if (scrollable)\n return (\n <ScrollView\n {...(orientation === 'vertical' && {\n showsVerticalScrollIndicator: showScrollIndicator,\n })}\n {...(orientation === 'horizontal' && {\n horizontal: true,\n showsHorizontalScrollIndicator: showScrollIndicator,\n })}\n >\n {children}\n </ScrollView>\n )\n return children\n}\n\nconst getBorderRadius = ({\n isFirst,\n isLast,\n radius,\n vertical,\n disable,\n}: {\n radius: any\n vertical: boolean\n isFirst: boolean\n isLast: boolean\n disable: DisablePassBorderRadius\n}) => {\n // TODO: RTL support would be nice here\n return {\n borderTopLeftRadius: isFirst && disable !== 'top' && disable !== 'start' ? radius : 0,\n borderTopRightRadius:\n disable !== 'top' &&\n disable !== 'end' &&\n ((vertical && isFirst) || (!vertical && isLast))\n ? radius\n : 0,\n borderBottomLeftRadius:\n disable !== 'bottom' &&\n disable !== 'start' &&\n ((vertical && isLast) || (!vertical && isFirst))\n ? radius\n : 0,\n borderBottomRightRadius:\n isLast && disable !== 'bottom' && disable !== 'end' ? radius : 0,\n }\n}\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n return React.cloneElement({ ...child, props: null }, next)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/jsx/Group.js
CHANGED
|
@@ -53,13 +53,14 @@ function createGroup(verticalDefault) {
|
|
|
53
53
|
separator,
|
|
54
54
|
scrollable,
|
|
55
55
|
axis = verticalDefault ? "vertical" : "horizontal",
|
|
56
|
+
orientation = axis,
|
|
56
57
|
disabled: disabledProp,
|
|
57
58
|
disablePassBorderRadius: disablePassBorderRadiusProp,
|
|
58
59
|
borderRadius,
|
|
59
60
|
forceUseItem,
|
|
60
61
|
...restProps
|
|
61
62
|
} = getExpandedShorthands(activeProps);
|
|
62
|
-
const vertical =
|
|
63
|
+
const vertical = orientation === "vertical";
|
|
63
64
|
const [itemChildrenCount, setItemChildrenCount] = useControllableState({
|
|
64
65
|
defaultProp: forceUseItem ? 1 : 0
|
|
65
66
|
});
|
|
@@ -108,7 +109,7 @@ function createGroup(verticalDefault) {
|
|
|
108
109
|
);
|
|
109
110
|
return <GroupProvider
|
|
110
111
|
disablePassBorderRadius={disablePassBorderRadius}
|
|
111
|
-
vertical={
|
|
112
|
+
vertical={orientation === "vertical"}
|
|
112
113
|
radius={radius}
|
|
113
114
|
disabled={disabledProp}
|
|
114
115
|
onItemMount={onItemMount}
|
|
@@ -117,10 +118,10 @@ function createGroup(verticalDefault) {
|
|
|
117
118
|
><GroupFrame
|
|
118
119
|
ref={ref}
|
|
119
120
|
size={size}
|
|
120
|
-
flexDirection={
|
|
121
|
+
flexDirection={orientation === "horizontal" ? "row" : "column"}
|
|
121
122
|
borderRadius={borderRadius}
|
|
122
123
|
{...restProps}
|
|
123
|
-
>{wrapScroll({ ...activeProps,
|
|
124
|
+
>{wrapScroll({ ...activeProps, orientation }, indexedChildren)}</GroupFrame></GroupProvider>;
|
|
124
125
|
}),
|
|
125
126
|
{
|
|
126
127
|
Item: GroupItem
|
|
@@ -179,13 +180,13 @@ const useGroupItem = (childrenProps, __scopeGroup) => {
|
|
|
179
180
|
const Group = createGroup(true);
|
|
180
181
|
const YGroup = Group;
|
|
181
182
|
const XGroup = createGroup(false);
|
|
182
|
-
const wrapScroll = ({ scrollable,
|
|
183
|
+
const wrapScroll = ({ scrollable, orientation, showScrollIndicator = false }, children) => {
|
|
183
184
|
if (scrollable)
|
|
184
185
|
return <ScrollView
|
|
185
|
-
{...
|
|
186
|
+
{...orientation === "vertical" && {
|
|
186
187
|
showsVerticalScrollIndicator: showScrollIndicator
|
|
187
188
|
}}
|
|
188
|
-
{...
|
|
189
|
+
{...orientation === "horizontal" && {
|
|
189
190
|
horizontal: true,
|
|
190
191
|
showsHorizontalScrollIndicator: showScrollIndicator
|
|
191
192
|
}}
|
package/dist/jsx/Group.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Group.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n axis?: 'horizontal' | 'vertical'\n\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical =
|
|
5
|
-
"mappings": "AAAA;AAAA,EAKE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,OAAO,SAAS,UAAU,YAAY,sBAAsB;AAC5D,SAAS,kBAAkB;AAC3B,SAAS,UAAU,0BAA0B;AAa7C,MAAM,aAAa;AAGnB,MAAM,CAAC,oBAAoB,gBAAgB,IAAI,mBAAmB,UAAU;AAC5E,MAAM,CAAC,eAAe,eAAe,IAAI,mBAAsC,UAAU;AAElF,MAAM,aAAa,OAAO,gBAAgB;AAAA,EAC/C,MAAM;AAAA,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,GAAG;AAAA,QACH,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,MAAM,CAAC,KAAK,EAAE,OAAO,MAAM;AACzB,YAAM,eAAe,OAAO,OAAO,GAAG,KAAK,OAAO,OAAO,OAAO,OAAO;AACvE,aAAO;AAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n /**\n * @deprecated use `orientation` instead\n */\n axis?: 'horizontal' | 'vertical'\n orientation?: 'horizontal' | 'vertical'\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n orientation = axis,\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical = orientation === 'vertical'\n const [itemChildrenCount, setItemChildrenCount] = useControllableState({\n defaultProp: forceUseItem ? 1 : 0,\n })\n const isUsingItems = true // itemChildrenCount > 0\n\n // 1 off given border to adjust for border radius? This should be user controllable\n const radius =\n borderRadius ??\n (size ? getVariableValue(getTokens().radius[size]) - 1 : undefined)\n\n const hasRadius = radius !== undefined\n const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius\n\n if (!isUsingItems) console.log('screw up!')\n const childrenArray = Children.toArray(childrenProp)\n const children = isUsingItems\n ? childrenProp\n : childrenArray.map((child, i) => {\n if (!isValidElement(child)) {\n return child\n }\n const disabled = child.props.disabled ?? disabledProp\n\n const isFirst = i === 0\n const isLast = i === childrenArray.length - 1\n\n const radiusStyles =\n disablePassBorderRadius === true\n ? null\n : getBorderRadius({\n isFirst,\n isLast,\n radius,\n vertical,\n disable: disablePassBorderRadius,\n })\n const props = {\n disabled,\n ...(isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }),\n }\n\n return cloneElementWithPropOrder(child, props)\n })\n\n const indexedChildren = useIndexedChildren(\n spacedChildren({\n direction: spaceDirection,\n separator,\n space,\n children,\n })\n )\n\n const onItemMount = React.useCallback(\n () => setItemChildrenCount((prev) => prev + 1),\n []\n )\n const onItemUnmount = React.useCallback(\n () => setItemChildrenCount((prev) => prev - 1),\n []\n )\n\n return (\n <GroupProvider\n disablePassBorderRadius={disablePassBorderRadius}\n vertical={orientation === 'vertical'}\n radius={radius}\n disabled={disabledProp}\n onItemMount={onItemMount}\n onItemUnmount={onItemUnmount}\n scope={__scopeGroup}\n >\n <GroupFrame\n ref={ref}\n size={size}\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n borderRadius={borderRadius}\n {...restProps}\n >\n {wrapScroll({ ...activeProps, orientation }, indexedChildren)}\n </GroupFrame>\n </GroupProvider>\n )\n }),\n {\n Item: GroupItem,\n }\n )\n}\n\nconst GroupItem = (props: ScopedProps<{ children: React.ReactNode }>) => {\n const { __scopeGroup, children } = props\n const groupItemProps = useGroupItem(\n { disabled: isValidElement(children) ? children.props.disabled : undefined },\n __scopeGroup\n )\n\n if (!isValidElement(children)) {\n return children as any\n }\n\n if (isTamaguiElement(children)) {\n return React.cloneElement(children, groupItemProps)\n }\n\n return React.cloneElement(children, {\n style: {\n ...children.props?.['style'],\n ...groupItemProps,\n },\n } as any)\n}\n\nexport const useGroupItem = (\n childrenProps: { disabled: boolean },\n __scopeGroup?: Scope\n) => {\n const treeIndex = useIndex()\n const context = useGroupContext('GroupItem', __scopeGroup)\n\n React.useEffect(() => {\n context.onItemMount()\n return () => {\n context.onItemUnmount()\n }\n }, [])\n\n if (!treeIndex) {\n throw Error('<Group.Item/> should only be used within a <Group/>')\n }\n\n const isFirst = treeIndex.index === 0\n const isLast = treeIndex.index === treeIndex.maxIndex\n\n const disabled = childrenProps.disabled ?? context.disabled\n\n let propsToPass: Record<string, any> = {\n disabled,\n }\n\n if (context.disablePassBorderRadius !== true) {\n const borderRadius = getBorderRadius({\n radius: context.radius,\n isFirst,\n isLast,\n vertical: context.vertical,\n disable: context.disablePassBorderRadius,\n })\n return { ...propsToPass, ...borderRadius }\n }\n return propsToPass\n}\n\nexport const Group = createGroup(true)\nexport const YGroup = Group\nexport const XGroup = createGroup(false)\n\nconst wrapScroll = (\n { scrollable, orientation, showScrollIndicator = false }: GroupProps,\n children: any\n) => {\n if (scrollable)\n return (\n <ScrollView\n {...(orientation === 'vertical' && {\n showsVerticalScrollIndicator: showScrollIndicator,\n })}\n {...(orientation === 'horizontal' && {\n horizontal: true,\n showsHorizontalScrollIndicator: showScrollIndicator,\n })}\n >\n {children}\n </ScrollView>\n )\n return children\n}\n\nconst getBorderRadius = ({\n isFirst,\n isLast,\n radius,\n vertical,\n disable,\n}: {\n radius: any\n vertical: boolean\n isFirst: boolean\n isLast: boolean\n disable: DisablePassBorderRadius\n}) => {\n // TODO: RTL support would be nice here\n return {\n borderTopLeftRadius: isFirst && disable !== 'top' && disable !== 'start' ? radius : 0,\n borderTopRightRadius:\n disable !== 'top' &&\n disable !== 'end' &&\n ((vertical && isFirst) || (!vertical && isLast))\n ? radius\n : 0,\n borderBottomLeftRadius:\n disable !== 'bottom' &&\n disable !== 'start' &&\n ((vertical && isLast) || (!vertical && isFirst))\n ? radius\n : 0,\n borderBottomRightRadius:\n isLast && disable !== 'bottom' && disable !== 'end' ? radius : 0,\n }\n}\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n return React.cloneElement({ ...child, props: null }, next)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/jsx/Group.mjs
CHANGED
|
@@ -53,13 +53,14 @@ function createGroup(verticalDefault) {
|
|
|
53
53
|
separator,
|
|
54
54
|
scrollable,
|
|
55
55
|
axis = verticalDefault ? "vertical" : "horizontal",
|
|
56
|
+
orientation = axis,
|
|
56
57
|
disabled: disabledProp,
|
|
57
58
|
disablePassBorderRadius: disablePassBorderRadiusProp,
|
|
58
59
|
borderRadius,
|
|
59
60
|
forceUseItem,
|
|
60
61
|
...restProps
|
|
61
62
|
} = getExpandedShorthands(activeProps);
|
|
62
|
-
const vertical =
|
|
63
|
+
const vertical = orientation === "vertical";
|
|
63
64
|
const [itemChildrenCount, setItemChildrenCount] = useControllableState({
|
|
64
65
|
defaultProp: forceUseItem ? 1 : 0
|
|
65
66
|
});
|
|
@@ -108,7 +109,7 @@ function createGroup(verticalDefault) {
|
|
|
108
109
|
);
|
|
109
110
|
return <GroupProvider
|
|
110
111
|
disablePassBorderRadius={disablePassBorderRadius}
|
|
111
|
-
vertical={
|
|
112
|
+
vertical={orientation === "vertical"}
|
|
112
113
|
radius={radius}
|
|
113
114
|
disabled={disabledProp}
|
|
114
115
|
onItemMount={onItemMount}
|
|
@@ -117,10 +118,10 @@ function createGroup(verticalDefault) {
|
|
|
117
118
|
><GroupFrame
|
|
118
119
|
ref={ref}
|
|
119
120
|
size={size}
|
|
120
|
-
flexDirection={
|
|
121
|
+
flexDirection={orientation === "horizontal" ? "row" : "column"}
|
|
121
122
|
borderRadius={borderRadius}
|
|
122
123
|
{...restProps}
|
|
123
|
-
>{wrapScroll({ ...activeProps,
|
|
124
|
+
>{wrapScroll({ ...activeProps, orientation }, indexedChildren)}</GroupFrame></GroupProvider>;
|
|
124
125
|
}),
|
|
125
126
|
{
|
|
126
127
|
Item: GroupItem
|
|
@@ -179,13 +180,13 @@ const useGroupItem = (childrenProps, __scopeGroup) => {
|
|
|
179
180
|
const Group = createGroup(true);
|
|
180
181
|
const YGroup = Group;
|
|
181
182
|
const XGroup = createGroup(false);
|
|
182
|
-
const wrapScroll = ({ scrollable,
|
|
183
|
+
const wrapScroll = ({ scrollable, orientation, showScrollIndicator = false }, children) => {
|
|
183
184
|
if (scrollable)
|
|
184
185
|
return <ScrollView
|
|
185
|
-
{...
|
|
186
|
+
{...orientation === "vertical" && {
|
|
186
187
|
showsVerticalScrollIndicator: showScrollIndicator
|
|
187
188
|
}}
|
|
188
|
-
{...
|
|
189
|
+
{...orientation === "horizontal" && {
|
|
189
190
|
horizontal: true,
|
|
190
191
|
showsHorizontalScrollIndicator: showScrollIndicator
|
|
191
192
|
}}
|
package/dist/jsx/Group.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Group.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n axis?: 'horizontal' | 'vertical'\n\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical =
|
|
5
|
-
"mappings": "AAAA;AAAA,EAKE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,OAAO,SAAS,UAAU,YAAY,sBAAsB;AAC5D,SAAS,kBAAkB;AAC3B,SAAS,UAAU,0BAA0B;AAa7C,MAAM,aAAa;AAGnB,MAAM,CAAC,oBAAoB,gBAAgB,IAAI,mBAAmB,UAAU;AAC5E,MAAM,CAAC,eAAe,eAAe,IAAI,mBAAsC,UAAU;AAElF,MAAM,aAAa,OAAO,gBAAgB;AAAA,EAC/C,MAAM;AAAA,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,GAAG;AAAA,QACH,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,MAAM,CAAC,KAAK,EAAE,OAAO,MAAM;AACzB,YAAM,eAAe,OAAO,OAAO,GAAG,KAAK,OAAO,OAAO,OAAO,OAAO;AACvE,aAAO;AAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n UnionableString,\n Variable,\n getConfig,\n getExpandedShorthands,\n getTokens,\n getVariableValue,\n isTamaguiElement,\n mergeProps,\n spacedChildren,\n styled,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n vertical: boolean\n disablePassBorderRadius: DisablePassBorderRadius\n onItemMount: () => void\n onItemUnmount: () => void\n radius?: number | UnionableString | Variable<any>\n disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n name: 'GroupFrame',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n y: 0,\n backgroundColor: '$background',\n },\n },\n\n size: (val, { tokens }) => {\n const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n return {\n borderRadius,\n }\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n /**\n * @deprecated use `orientation` instead\n */\n axis?: 'horizontal' | 'vertical'\n orientation?: 'horizontal' | 'vertical'\n scrollable?: boolean\n /**\n * @default false\n */\n showScrollIndicator?: boolean\n disabled?: boolean\n disablePassBorderRadius?: DisablePassBorderRadius\n /**\n * forces the group to use the Group.Item API\n */\n forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n return withStaticProperties(\n forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n const activeProps = useMediaPropsActive(props)\n\n const {\n __scopeGroup,\n children: childrenProp,\n space,\n size = '$true',\n spaceDirection,\n separator,\n scrollable,\n axis = verticalDefault ? 'vertical' : 'horizontal',\n orientation = axis,\n disabled: disabledProp,\n disablePassBorderRadius: disablePassBorderRadiusProp,\n borderRadius,\n forceUseItem,\n ...restProps\n } = getExpandedShorthands(activeProps)\n\n const vertical = orientation === 'vertical'\n const [itemChildrenCount, setItemChildrenCount] = useControllableState({\n defaultProp: forceUseItem ? 1 : 0,\n })\n const isUsingItems = true // itemChildrenCount > 0\n\n // 1 off given border to adjust for border radius? This should be user controllable\n const radius =\n borderRadius ??\n (size ? getVariableValue(getTokens().radius[size]) - 1 : undefined)\n\n const hasRadius = radius !== undefined\n const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius\n\n if (!isUsingItems) console.log('screw up!')\n const childrenArray = Children.toArray(childrenProp)\n const children = isUsingItems\n ? childrenProp\n : childrenArray.map((child, i) => {\n if (!isValidElement(child)) {\n return child\n }\n const disabled = child.props.disabled ?? disabledProp\n\n const isFirst = i === 0\n const isLast = i === childrenArray.length - 1\n\n const radiusStyles =\n disablePassBorderRadius === true\n ? null\n : getBorderRadius({\n isFirst,\n isLast,\n radius,\n vertical,\n disable: disablePassBorderRadius,\n })\n const props = {\n disabled,\n ...(isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }),\n }\n\n return cloneElementWithPropOrder(child, props)\n })\n\n const indexedChildren = useIndexedChildren(\n spacedChildren({\n direction: spaceDirection,\n separator,\n space,\n children,\n })\n )\n\n const onItemMount = React.useCallback(\n () => setItemChildrenCount((prev) => prev + 1),\n []\n )\n const onItemUnmount = React.useCallback(\n () => setItemChildrenCount((prev) => prev - 1),\n []\n )\n\n return (\n <GroupProvider\n disablePassBorderRadius={disablePassBorderRadius}\n vertical={orientation === 'vertical'}\n radius={radius}\n disabled={disabledProp}\n onItemMount={onItemMount}\n onItemUnmount={onItemUnmount}\n scope={__scopeGroup}\n >\n <GroupFrame\n ref={ref}\n size={size}\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n borderRadius={borderRadius}\n {...restProps}\n >\n {wrapScroll({ ...activeProps, orientation }, indexedChildren)}\n </GroupFrame>\n </GroupProvider>\n )\n }),\n {\n Item: GroupItem,\n }\n )\n}\n\nconst GroupItem = (props: ScopedProps<{ children: React.ReactNode }>) => {\n const { __scopeGroup, children } = props\n const groupItemProps = useGroupItem(\n { disabled: isValidElement(children) ? children.props.disabled : undefined },\n __scopeGroup\n )\n\n if (!isValidElement(children)) {\n return children as any\n }\n\n if (isTamaguiElement(children)) {\n return React.cloneElement(children, groupItemProps)\n }\n\n return React.cloneElement(children, {\n style: {\n ...children.props?.['style'],\n ...groupItemProps,\n },\n } as any)\n}\n\nexport const useGroupItem = (\n childrenProps: { disabled: boolean },\n __scopeGroup?: Scope\n) => {\n const treeIndex = useIndex()\n const context = useGroupContext('GroupItem', __scopeGroup)\n\n React.useEffect(() => {\n context.onItemMount()\n return () => {\n context.onItemUnmount()\n }\n }, [])\n\n if (!treeIndex) {\n throw Error('<Group.Item/> should only be used within a <Group/>')\n }\n\n const isFirst = treeIndex.index === 0\n const isLast = treeIndex.index === treeIndex.maxIndex\n\n const disabled = childrenProps.disabled ?? context.disabled\n\n let propsToPass: Record<string, any> = {\n disabled,\n }\n\n if (context.disablePassBorderRadius !== true) {\n const borderRadius = getBorderRadius({\n radius: context.radius,\n isFirst,\n isLast,\n vertical: context.vertical,\n disable: context.disablePassBorderRadius,\n })\n return { ...propsToPass, ...borderRadius }\n }\n return propsToPass\n}\n\nexport const Group = createGroup(true)\nexport const YGroup = Group\nexport const XGroup = createGroup(false)\n\nconst wrapScroll = (\n { scrollable, orientation, showScrollIndicator = false }: GroupProps,\n children: any\n) => {\n if (scrollable)\n return (\n <ScrollView\n {...(orientation === 'vertical' && {\n showsVerticalScrollIndicator: showScrollIndicator,\n })}\n {...(orientation === 'horizontal' && {\n horizontal: true,\n showsHorizontalScrollIndicator: showScrollIndicator,\n })}\n >\n {children}\n </ScrollView>\n )\n return children\n}\n\nconst getBorderRadius = ({\n isFirst,\n isLast,\n radius,\n vertical,\n disable,\n}: {\n radius: any\n vertical: boolean\n isFirst: boolean\n isLast: boolean\n disable: DisablePassBorderRadius\n}) => {\n // TODO: RTL support would be nice here\n return {\n borderTopLeftRadius: isFirst && disable !== 'top' && disable !== 'start' ? radius : 0,\n borderTopRightRadius:\n disable !== 'top' &&\n disable !== 'end' &&\n ((vertical && isFirst) || (!vertical && isLast))\n ? radius\n : 0,\n borderBottomLeftRadius:\n disable !== 'bottom' &&\n disable !== 'start' &&\n ((vertical && isLast) || (!vertical && isFirst))\n ? radius\n : 0,\n borderBottomRightRadius:\n isLast && disable !== 'bottom' && disable !== 'end' ? radius : 0,\n }\n}\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n return React.cloneElement({ ...child, props: null }, next)\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/group",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.1",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -23,17 +23,17 @@
|
|
|
23
23
|
"clean:build": "tamagui-build clean:build"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@tamagui/core": "1.
|
|
27
|
-
"@tamagui/create-context": "1.
|
|
28
|
-
"@tamagui/stacks": "1.
|
|
29
|
-
"@tamagui/use-controllable-state": "1.
|
|
26
|
+
"@tamagui/core": "1.12.1",
|
|
27
|
+
"@tamagui/create-context": "1.12.1",
|
|
28
|
+
"@tamagui/stacks": "1.12.1",
|
|
29
|
+
"@tamagui/use-controllable-state": "1.12.1",
|
|
30
30
|
"reforest": "^0.12.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": "*"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@tamagui/build": "1.
|
|
36
|
+
"@tamagui/build": "1.12.1",
|
|
37
37
|
"react": "^18.2.0"
|
|
38
38
|
},
|
|
39
39
|
"publishConfig": {
|
package/src/Group.tsx
CHANGED
|
@@ -64,8 +64,11 @@ export const GroupFrame = styled(ThemeableStack, {
|
|
|
64
64
|
})
|
|
65
65
|
|
|
66
66
|
export type GroupProps = GetProps<typeof GroupFrame> & {
|
|
67
|
+
/**
|
|
68
|
+
* @deprecated use `orientation` instead
|
|
69
|
+
*/
|
|
67
70
|
axis?: 'horizontal' | 'vertical'
|
|
68
|
-
|
|
71
|
+
orientation?: 'horizontal' | 'vertical'
|
|
69
72
|
scrollable?: boolean
|
|
70
73
|
/**
|
|
71
74
|
* @default false
|
|
@@ -93,6 +96,7 @@ function createGroup(verticalDefault: boolean) {
|
|
|
93
96
|
separator,
|
|
94
97
|
scrollable,
|
|
95
98
|
axis = verticalDefault ? 'vertical' : 'horizontal',
|
|
99
|
+
orientation = axis,
|
|
96
100
|
disabled: disabledProp,
|
|
97
101
|
disablePassBorderRadius: disablePassBorderRadiusProp,
|
|
98
102
|
borderRadius,
|
|
@@ -100,7 +104,7 @@ function createGroup(verticalDefault: boolean) {
|
|
|
100
104
|
...restProps
|
|
101
105
|
} = getExpandedShorthands(activeProps)
|
|
102
106
|
|
|
103
|
-
const vertical =
|
|
107
|
+
const vertical = orientation === 'vertical'
|
|
104
108
|
const [itemChildrenCount, setItemChildrenCount] = useControllableState({
|
|
105
109
|
defaultProp: forceUseItem ? 1 : 0,
|
|
106
110
|
})
|
|
@@ -166,7 +170,7 @@ function createGroup(verticalDefault: boolean) {
|
|
|
166
170
|
return (
|
|
167
171
|
<GroupProvider
|
|
168
172
|
disablePassBorderRadius={disablePassBorderRadius}
|
|
169
|
-
vertical={
|
|
173
|
+
vertical={orientation === 'vertical'}
|
|
170
174
|
radius={radius}
|
|
171
175
|
disabled={disabledProp}
|
|
172
176
|
onItemMount={onItemMount}
|
|
@@ -176,11 +180,11 @@ function createGroup(verticalDefault: boolean) {
|
|
|
176
180
|
<GroupFrame
|
|
177
181
|
ref={ref}
|
|
178
182
|
size={size}
|
|
179
|
-
flexDirection={
|
|
183
|
+
flexDirection={orientation === 'horizontal' ? 'row' : 'column'}
|
|
180
184
|
borderRadius={borderRadius}
|
|
181
185
|
{...restProps}
|
|
182
186
|
>
|
|
183
|
-
{wrapScroll({ ...activeProps,
|
|
187
|
+
{wrapScroll({ ...activeProps, orientation }, indexedChildren)}
|
|
184
188
|
</GroupFrame>
|
|
185
189
|
</GroupProvider>
|
|
186
190
|
)
|
|
@@ -259,16 +263,16 @@ export const YGroup = Group
|
|
|
259
263
|
export const XGroup = createGroup(false)
|
|
260
264
|
|
|
261
265
|
const wrapScroll = (
|
|
262
|
-
{ scrollable,
|
|
266
|
+
{ scrollable, orientation, showScrollIndicator = false }: GroupProps,
|
|
263
267
|
children: any
|
|
264
268
|
) => {
|
|
265
269
|
if (scrollable)
|
|
266
270
|
return (
|
|
267
271
|
<ScrollView
|
|
268
|
-
{...(
|
|
272
|
+
{...(orientation === 'vertical' && {
|
|
269
273
|
showsVerticalScrollIndicator: showScrollIndicator,
|
|
270
274
|
})}
|
|
271
|
-
{...(
|
|
275
|
+
{...(orientation === 'horizontal' && {
|
|
272
276
|
horizontal: true,
|
|
273
277
|
showsHorizontalScrollIndicator: showScrollIndicator,
|
|
274
278
|
})}
|
package/types/Group.d.ts
CHANGED
|
@@ -79,7 +79,11 @@ export declare const GroupFrame: import("@tamagui/core").TamaguiComponent<Omit<i
|
|
|
79
79
|
readonly size?: any;
|
|
80
80
|
}>;
|
|
81
81
|
export type GroupProps = GetProps<typeof GroupFrame> & {
|
|
82
|
+
/**
|
|
83
|
+
* @deprecated use `orientation` instead
|
|
84
|
+
*/
|
|
82
85
|
axis?: 'horizontal' | 'vertical';
|
|
86
|
+
orientation?: 'horizontal' | 'vertical';
|
|
83
87
|
scrollable?: boolean;
|
|
84
88
|
/**
|
|
85
89
|
* @default false
|
|
@@ -150,7 +154,11 @@ export declare const Group: React.ForwardRefExoticComponent<Omit<import("react-n
|
|
|
150
154
|
readonly unstyled?: boolean | undefined;
|
|
151
155
|
readonly size?: any;
|
|
152
156
|
}>> & {
|
|
157
|
+
/**
|
|
158
|
+
* @deprecated use `orientation` instead
|
|
159
|
+
*/
|
|
153
160
|
axis?: "horizontal" | "vertical" | undefined;
|
|
161
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
154
162
|
scrollable?: boolean | undefined;
|
|
155
163
|
/**
|
|
156
164
|
* @default false
|
|
@@ -224,7 +232,11 @@ export declare const YGroup: React.ForwardRefExoticComponent<Omit<import("react-
|
|
|
224
232
|
readonly unstyled?: boolean | undefined;
|
|
225
233
|
readonly size?: any;
|
|
226
234
|
}>> & {
|
|
235
|
+
/**
|
|
236
|
+
* @deprecated use `orientation` instead
|
|
237
|
+
*/
|
|
227
238
|
axis?: "horizontal" | "vertical" | undefined;
|
|
239
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
228
240
|
scrollable?: boolean | undefined;
|
|
229
241
|
/**
|
|
230
242
|
* @default false
|
|
@@ -298,7 +310,11 @@ export declare const XGroup: React.ForwardRefExoticComponent<Omit<import("react-
|
|
|
298
310
|
readonly unstyled?: boolean | undefined;
|
|
299
311
|
readonly size?: any;
|
|
300
312
|
}>> & {
|
|
313
|
+
/**
|
|
314
|
+
* @deprecated use `orientation` instead
|
|
315
|
+
*/
|
|
301
316
|
axis?: "horizontal" | "vertical" | undefined;
|
|
317
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
302
318
|
scrollable?: boolean | undefined;
|
|
303
319
|
/**
|
|
304
320
|
* @default false
|
package/types/Group.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../src/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,cAAc,EAaf,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAsB,MAAM,yBAAyB,CAAA;AAGnE,OAAO,KAA+C,MAAM,OAAO,CAAA;AAInE,KAAK,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,CAAA;AAa3E,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAIlD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBrB,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../src/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,cAAc,EAaf,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAsB,MAAM,yBAAyB,CAAA;AAGnE,OAAO,KAA+C,MAAM,OAAO,CAAA;AAInE,KAAK,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,CAAA;AAa3E,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAIlD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBrB,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAChC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uBAAuB,CAAC,EAAE,uBAAuB,CAAA;IACjD;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AA0ID,eAAO,MAAM,YAAY,kBACR;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,iBACrB,KAAK,wBAoCrB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAlMhB;;OAEG;;;;IAIH;;OAEG;;;;IAIH;;OAEG;;;mBA5CsC,KAAK;;kBAiKtB,YAAY;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE,CAAC;CA+D9B,CAAA;AACtC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAnMjB;;OAEG;;;;IAIH;;OAEG;;;;IAIH;;OAEG;;;mBA5CsC,KAAK;;kBAiKtB,YAAY;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE,CAAC;CAgEzC,CAAA;AAC3B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IApMjB;;OAEG;;;;IAIH;;OAEG;;;;IAIH;;OAEG;;;mBA5CsC,KAAK;;kBAiKtB,YAAY;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE,CAAC;CAiE5B,CAAA"}
|