@tamagui/list-item 1.0.1-beta.159 → 1.0.1-beta.162
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/ListItem.js +76 -57
- package/dist/cjs/ListItem.js.map +2 -2
- package/dist/esm/ListItem.js +72 -56
- package/dist/esm/ListItem.js.map +2 -2
- package/dist/jsx/ListItem.js +53 -37
- package/dist/jsx/ListItem.js.map +2 -2
- package/package.json +5 -5
- package/src/ListItem.tsx +76 -55
- package/types/ListItem.d.ts +597 -119
package/dist/cjs/ListItem.js
CHANGED
|
@@ -27,7 +27,10 @@ __export(ListItem_exports, {
|
|
|
27
27
|
ListItem: () => ListItem,
|
|
28
28
|
ListItemFrame: () => ListItemFrame,
|
|
29
29
|
ListItemSubtitle: () => ListItemSubtitle,
|
|
30
|
-
ListItemText: () => ListItemText
|
|
30
|
+
ListItemText: () => ListItemText,
|
|
31
|
+
ListItemTitle: () => ListItemTitle,
|
|
32
|
+
listItemStaticConfig: () => listItemStaticConfig,
|
|
33
|
+
useListItem: () => useListItem
|
|
31
34
|
});
|
|
32
35
|
module.exports = __toCommonJS(ListItem_exports);
|
|
33
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -79,25 +82,28 @@ const ListItemFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
79
82
|
const ListItemText = (0, import_core.styled)(import_text.SizableText, {
|
|
80
83
|
name: "ListItemText",
|
|
81
84
|
color: "$color",
|
|
82
|
-
|
|
85
|
+
userSelect: "none",
|
|
83
86
|
flexGrow: 1,
|
|
84
87
|
flexShrink: 1,
|
|
85
|
-
ellipse: true
|
|
88
|
+
ellipse: true,
|
|
89
|
+
cursor: "default"
|
|
86
90
|
});
|
|
87
91
|
const ListItemSubtitle = (0, import_core.styled)(ListItemText, {
|
|
88
92
|
name: "ListItemSubtitle",
|
|
89
93
|
color: "$colorPress",
|
|
90
94
|
marginTop: "$-2",
|
|
91
95
|
opacity: 0.65,
|
|
92
|
-
ellipse: true,
|
|
93
96
|
maxWidth: "100%",
|
|
94
97
|
size: "$3"
|
|
95
98
|
});
|
|
96
99
|
const ListItemTitle = (0, import_core.styled)(ListItemText, {
|
|
97
|
-
name: "ListItemTitle"
|
|
98
|
-
ellipse: true
|
|
100
|
+
name: "ListItemTitle"
|
|
99
101
|
});
|
|
100
|
-
const
|
|
102
|
+
const useListItem = (props, {
|
|
103
|
+
Text = ListItemText,
|
|
104
|
+
Subtitle = ListItemSubtitle,
|
|
105
|
+
Title = ListItemTitle
|
|
106
|
+
} = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }) => {
|
|
101
107
|
const {
|
|
102
108
|
children,
|
|
103
109
|
icon,
|
|
@@ -126,67 +132,80 @@ const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
126
132
|
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
127
133
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
128
134
|
const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
|
|
129
|
-
const contents = (0, import_text.wrapChildrenInText)(
|
|
130
|
-
return
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
themedIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
136
|
-
children: [
|
|
137
|
-
themedIcon,
|
|
138
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, {
|
|
139
|
-
size: spaceSize
|
|
140
|
-
})
|
|
141
|
-
]
|
|
142
|
-
}) : null,
|
|
143
|
-
Boolean(title || subTitle) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
|
|
144
|
-
flex: 1,
|
|
135
|
+
const contents = (0, import_text.wrapChildrenInText)(Text, props);
|
|
136
|
+
return {
|
|
137
|
+
props: {
|
|
138
|
+
fontFamily,
|
|
139
|
+
...rest,
|
|
140
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
145
141
|
children: [
|
|
146
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
147
|
-
children:
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
142
|
+
themedIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
143
|
+
children: [
|
|
144
|
+
themedIcon,
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, {
|
|
146
|
+
size: spaceSize
|
|
147
|
+
})
|
|
148
|
+
]
|
|
149
|
+
}) : null,
|
|
150
|
+
Boolean(title || subTitle) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
|
|
151
|
+
flex: 1,
|
|
152
|
+
children: [
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, {
|
|
154
|
+
children: title
|
|
155
|
+
}),
|
|
156
|
+
subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Subtitle, {
|
|
157
|
+
size: subtitleSize,
|
|
158
|
+
children: subTitle
|
|
159
|
+
}) : subTitle : null,
|
|
160
|
+
contents
|
|
161
|
+
]
|
|
162
|
+
}) : contents,
|
|
163
|
+
themedIconAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
164
|
+
children: [
|
|
165
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, {
|
|
166
|
+
flex: true,
|
|
167
|
+
size: spaceSize
|
|
168
|
+
}),
|
|
169
|
+
themedIconAfter
|
|
170
|
+
]
|
|
171
|
+
}) : null
|
|
154
172
|
]
|
|
155
|
-
})
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}) : null
|
|
165
|
-
]
|
|
173
|
+
})
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
};
|
|
177
|
+
const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
178
|
+
const { props: listItemProps } = useListItem(props);
|
|
179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, {
|
|
180
|
+
ref,
|
|
181
|
+
...listItemProps
|
|
166
182
|
});
|
|
167
183
|
});
|
|
168
|
-
const
|
|
169
|
-
|
|
184
|
+
const listItemStaticConfig = {
|
|
185
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
186
|
+
"color",
|
|
187
|
+
"fontWeight",
|
|
188
|
+
"fontSize",
|
|
189
|
+
"fontFamily",
|
|
190
|
+
"letterSpacing",
|
|
191
|
+
"textAlign"
|
|
192
|
+
])
|
|
193
|
+
};
|
|
194
|
+
const ListItem = (0, import_core.withStaticProperties)(
|
|
195
|
+
ListItemFrame.extractable((0, import_core.themeable)(ListItemComponent), listItemStaticConfig),
|
|
170
196
|
{
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
"fontWeight",
|
|
174
|
-
"fontSize",
|
|
175
|
-
"fontFamily",
|
|
176
|
-
"letterSpacing",
|
|
177
|
-
"textAlign"
|
|
178
|
-
])
|
|
197
|
+
Text: ListItemText,
|
|
198
|
+
Subtitle: ListItemSubtitle
|
|
179
199
|
}
|
|
180
200
|
);
|
|
181
|
-
const ListItem = (0, import_core.withStaticProperties)(ListItemInner, {
|
|
182
|
-
Text: ListItemText,
|
|
183
|
-
Subtitle: ListItemSubtitle
|
|
184
|
-
});
|
|
185
201
|
// Annotate the CommonJS export names for ESM import in node:
|
|
186
202
|
0 && (module.exports = {
|
|
187
203
|
ListItem,
|
|
188
204
|
ListItemFrame,
|
|
189
205
|
ListItemSubtitle,
|
|
190
|
-
ListItemText
|
|
206
|
+
ListItemText,
|
|
207
|
+
ListItemTitle,
|
|
208
|
+
listItemStaticConfig,
|
|
209
|
+
useListItem
|
|
191
210
|
});
|
|
192
211
|
//# sourceMappingURL=ListItem.js.map
|
package/dist/cjs/ListItem.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ListItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 1,\n subTitle,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n title,\n ...rest\n } = props\n\n const size = props.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, props)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n <Title>{title}</Title>\n {subTitle ? (\n typeof subTitle === 'string' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n}\n\nexport const ListItem = withStaticProperties(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/ListItem.js
CHANGED
|
@@ -54,25 +54,28 @@ const ListItemFrame = styled(ThemeableStack, {
|
|
|
54
54
|
const ListItemText = styled(SizableText, {
|
|
55
55
|
name: "ListItemText",
|
|
56
56
|
color: "$color",
|
|
57
|
-
|
|
57
|
+
userSelect: "none",
|
|
58
58
|
flexGrow: 1,
|
|
59
59
|
flexShrink: 1,
|
|
60
|
-
ellipse: true
|
|
60
|
+
ellipse: true,
|
|
61
|
+
cursor: "default"
|
|
61
62
|
});
|
|
62
63
|
const ListItemSubtitle = styled(ListItemText, {
|
|
63
64
|
name: "ListItemSubtitle",
|
|
64
65
|
color: "$colorPress",
|
|
65
66
|
marginTop: "$-2",
|
|
66
67
|
opacity: 0.65,
|
|
67
|
-
ellipse: true,
|
|
68
68
|
maxWidth: "100%",
|
|
69
69
|
size: "$3"
|
|
70
70
|
});
|
|
71
71
|
const ListItemTitle = styled(ListItemText, {
|
|
72
|
-
name: "ListItemTitle"
|
|
73
|
-
ellipse: true
|
|
72
|
+
name: "ListItemTitle"
|
|
74
73
|
});
|
|
75
|
-
const
|
|
74
|
+
const useListItem = (props, {
|
|
75
|
+
Text = ListItemText,
|
|
76
|
+
Subtitle = ListItemSubtitle,
|
|
77
|
+
Title = ListItemTitle
|
|
78
|
+
} = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }) => {
|
|
76
79
|
const {
|
|
77
80
|
children,
|
|
78
81
|
icon,
|
|
@@ -101,66 +104,79 @@ const ListItemComponent = forwardRef((props, ref) => {
|
|
|
101
104
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
102
105
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
103
106
|
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
104
|
-
const contents = wrapChildrenInText(
|
|
105
|
-
return
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
themedIcon ? /* @__PURE__ */ jsxs(Fragment, {
|
|
111
|
-
children: [
|
|
112
|
-
themedIcon,
|
|
113
|
-
/* @__PURE__ */ jsx(Spacer, {
|
|
114
|
-
size: spaceSize
|
|
115
|
-
})
|
|
116
|
-
]
|
|
117
|
-
}) : null,
|
|
118
|
-
Boolean(title || subTitle) ? /* @__PURE__ */ jsxs(YStack, {
|
|
119
|
-
flex: 1,
|
|
107
|
+
const contents = wrapChildrenInText(Text, props);
|
|
108
|
+
return {
|
|
109
|
+
props: {
|
|
110
|
+
fontFamily,
|
|
111
|
+
...rest,
|
|
112
|
+
children: /* @__PURE__ */ jsxs(Fragment, {
|
|
120
113
|
children: [
|
|
121
|
-
/* @__PURE__ */
|
|
122
|
-
children:
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
114
|
+
themedIcon ? /* @__PURE__ */ jsxs(Fragment, {
|
|
115
|
+
children: [
|
|
116
|
+
themedIcon,
|
|
117
|
+
/* @__PURE__ */ jsx(Spacer, {
|
|
118
|
+
size: spaceSize
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
}) : null,
|
|
122
|
+
Boolean(title || subTitle) ? /* @__PURE__ */ jsxs(YStack, {
|
|
123
|
+
flex: 1,
|
|
124
|
+
children: [
|
|
125
|
+
/* @__PURE__ */ jsx(Title, {
|
|
126
|
+
children: title
|
|
127
|
+
}),
|
|
128
|
+
subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ jsx(Subtitle, {
|
|
129
|
+
size: subtitleSize,
|
|
130
|
+
children: subTitle
|
|
131
|
+
}) : subTitle : null,
|
|
132
|
+
contents
|
|
133
|
+
]
|
|
134
|
+
}) : contents,
|
|
135
|
+
themedIconAfter ? /* @__PURE__ */ jsxs(Fragment, {
|
|
136
|
+
children: [
|
|
137
|
+
/* @__PURE__ */ jsx(Spacer, {
|
|
138
|
+
flex: true,
|
|
139
|
+
size: spaceSize
|
|
140
|
+
}),
|
|
141
|
+
themedIconAfter
|
|
142
|
+
]
|
|
143
|
+
}) : null
|
|
129
144
|
]
|
|
130
|
-
})
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}) : null
|
|
140
|
-
]
|
|
145
|
+
})
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
};
|
|
149
|
+
const ListItemComponent = forwardRef((props, ref) => {
|
|
150
|
+
const { props: listItemProps } = useListItem(props);
|
|
151
|
+
return /* @__PURE__ */ jsx(ListItemFrame, {
|
|
152
|
+
ref,
|
|
153
|
+
...listItemProps
|
|
141
154
|
});
|
|
142
155
|
});
|
|
143
|
-
const
|
|
144
|
-
|
|
156
|
+
const listItemStaticConfig = {
|
|
157
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
158
|
+
"color",
|
|
159
|
+
"fontWeight",
|
|
160
|
+
"fontSize",
|
|
161
|
+
"fontFamily",
|
|
162
|
+
"letterSpacing",
|
|
163
|
+
"textAlign"
|
|
164
|
+
])
|
|
165
|
+
};
|
|
166
|
+
const ListItem = withStaticProperties(
|
|
167
|
+
ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),
|
|
145
168
|
{
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
"fontWeight",
|
|
149
|
-
"fontSize",
|
|
150
|
-
"fontFamily",
|
|
151
|
-
"letterSpacing",
|
|
152
|
-
"textAlign"
|
|
153
|
-
])
|
|
169
|
+
Text: ListItemText,
|
|
170
|
+
Subtitle: ListItemSubtitle
|
|
154
171
|
}
|
|
155
172
|
);
|
|
156
|
-
const ListItem = withStaticProperties(ListItemInner, {
|
|
157
|
-
Text: ListItemText,
|
|
158
|
-
Subtitle: ListItemSubtitle
|
|
159
|
-
});
|
|
160
173
|
export {
|
|
161
174
|
ListItem,
|
|
162
175
|
ListItemFrame,
|
|
163
176
|
ListItemSubtitle,
|
|
164
|
-
ListItemText
|
|
177
|
+
ListItemText,
|
|
178
|
+
ListItemTitle,
|
|
179
|
+
listItemStaticConfig,
|
|
180
|
+
useListItem
|
|
165
181
|
};
|
|
166
182
|
//# sourceMappingURL=ListItem.js.map
|
package/dist/esm/ListItem.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ListItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 1,\n subTitle,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n title,\n ...rest\n } = props\n\n const size = props.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, props)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n <Title>{title}</Title>\n {subTitle ? (\n typeof subTitle === 'string' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n}\n\nexport const ListItem = withStaticProperties(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/ListItem.js
CHANGED
|
@@ -53,25 +53,28 @@ const ListItemFrame = styled(ThemeableStack, {
|
|
|
53
53
|
const ListItemText = styled(SizableText, {
|
|
54
54
|
name: "ListItemText",
|
|
55
55
|
color: "$color",
|
|
56
|
-
|
|
56
|
+
userSelect: "none",
|
|
57
57
|
flexGrow: 1,
|
|
58
58
|
flexShrink: 1,
|
|
59
|
-
ellipse: true
|
|
59
|
+
ellipse: true,
|
|
60
|
+
cursor: "default"
|
|
60
61
|
});
|
|
61
62
|
const ListItemSubtitle = styled(ListItemText, {
|
|
62
63
|
name: "ListItemSubtitle",
|
|
63
64
|
color: "$colorPress",
|
|
64
65
|
marginTop: "$-2",
|
|
65
66
|
opacity: 0.65,
|
|
66
|
-
ellipse: true,
|
|
67
67
|
maxWidth: "100%",
|
|
68
68
|
size: "$3"
|
|
69
69
|
});
|
|
70
70
|
const ListItemTitle = styled(ListItemText, {
|
|
71
|
-
name: "ListItemTitle"
|
|
72
|
-
ellipse: true
|
|
71
|
+
name: "ListItemTitle"
|
|
73
72
|
});
|
|
74
|
-
const
|
|
73
|
+
const useListItem = (props, {
|
|
74
|
+
Text = ListItemText,
|
|
75
|
+
Subtitle = ListItemSubtitle,
|
|
76
|
+
Title = ListItemTitle
|
|
77
|
+
} = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }) => {
|
|
75
78
|
const {
|
|
76
79
|
children,
|
|
77
80
|
icon,
|
|
@@ -100,44 +103,57 @@ const ListItemComponent = forwardRef((props, ref) => {
|
|
|
100
103
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
101
104
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
102
105
|
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
103
|
-
const contents = wrapChildrenInText(
|
|
104
|
-
return
|
|
105
|
-
{
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
106
|
+
const contents = wrapChildrenInText(Text, props);
|
|
107
|
+
return {
|
|
108
|
+
props: {
|
|
109
|
+
fontFamily,
|
|
110
|
+
...rest,
|
|
111
|
+
children: <>
|
|
112
|
+
{themedIcon ? <>
|
|
113
|
+
{themedIcon}
|
|
114
|
+
<Spacer size={spaceSize} />
|
|
115
|
+
</> : null}
|
|
116
|
+
{Boolean(title || subTitle) ? <YStack flex={1}>
|
|
117
|
+
<Title>{title}</Title>
|
|
118
|
+
{subTitle ? typeof subTitle === "string" ? <Subtitle size={subtitleSize}>{subTitle}</Subtitle> : subTitle : null}
|
|
119
|
+
{contents}
|
|
120
|
+
</YStack> : contents}
|
|
121
|
+
{themedIconAfter ? <>
|
|
122
|
+
<Spacer flex size={spaceSize} />
|
|
123
|
+
{themedIconAfter}
|
|
124
|
+
</> : null}
|
|
125
|
+
</>
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
const ListItemComponent = forwardRef((props, ref) => {
|
|
130
|
+
const { props: listItemProps } = useListItem(props);
|
|
131
|
+
return <ListItemFrame ref={ref} {...listItemProps} />;
|
|
119
132
|
});
|
|
120
|
-
const
|
|
121
|
-
|
|
133
|
+
const listItemStaticConfig = {
|
|
134
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
135
|
+
"color",
|
|
136
|
+
"fontWeight",
|
|
137
|
+
"fontSize",
|
|
138
|
+
"fontFamily",
|
|
139
|
+
"letterSpacing",
|
|
140
|
+
"textAlign"
|
|
141
|
+
])
|
|
142
|
+
};
|
|
143
|
+
const ListItem = withStaticProperties(
|
|
144
|
+
ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),
|
|
122
145
|
{
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
"fontWeight",
|
|
126
|
-
"fontSize",
|
|
127
|
-
"fontFamily",
|
|
128
|
-
"letterSpacing",
|
|
129
|
-
"textAlign"
|
|
130
|
-
])
|
|
146
|
+
Text: ListItemText,
|
|
147
|
+
Subtitle: ListItemSubtitle
|
|
131
148
|
}
|
|
132
149
|
);
|
|
133
|
-
const ListItem = withStaticProperties(ListItemInner, {
|
|
134
|
-
Text: ListItemText,
|
|
135
|
-
Subtitle: ListItemSubtitle
|
|
136
|
-
});
|
|
137
150
|
export {
|
|
138
151
|
ListItem,
|
|
139
152
|
ListItemFrame,
|
|
140
153
|
ListItemSubtitle,
|
|
141
|
-
ListItemText
|
|
154
|
+
ListItemText,
|
|
155
|
+
ListItemTitle,
|
|
156
|
+
listItemStaticConfig,
|
|
157
|
+
useListItem
|
|
142
158
|
};
|
|
143
159
|
//# sourceMappingURL=ListItem.js.map
|
package/dist/jsx/ListItem.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ListItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n
|
|
5
|
-
"mappings": "AAAA;AAAA,EAGE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,cAAc;AACvC,SAAS,aAA+B,0BAA0B;AAClE,OAAO,SAA4B,kBAAkB;AAGrD,MAAM;AAyBC,MAAM,gBAAgB,OAAO,gBAAgB;AAAA,EAClD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,eAAe;AAAA,EAEf,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,WAAW,OAAO,KAAK;AAAA,UACvB,mBAAmB,OAAO,MAAM;AAAA,UAChC,iBAAiB,SAAS,KAAK,EAAE;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QAET,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,eAAe,OAAO,aAAa;AAAA,EAC9C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 1,\n subTitle,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n title,\n ...rest\n } = props\n\n const size = props.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, props)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n <Title>{title}</Title>\n {subTitle ? (\n typeof subTitle === 'string' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n}\n\nexport const ListItem = withStaticProperties(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|