@tamagui/list-item 1.0.1-beta.151 → 1.0.1-beta.154
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 +53 -23
- package/dist/cjs/ListItem.js.map +2 -2
- package/dist/cjs/index.js +0 -0
- package/dist/cjs/index.js.map +0 -0
- package/dist/esm/ListItem.js +49 -22
- package/dist/esm/ListItem.js.map +1 -1
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/ListItem.js +13 -10
- package/dist/jsx/ListItem.js.map +1 -1
- package/dist/jsx/index.js +0 -0
- package/dist/jsx/index.js.map +1 -1
- package/package.json +5 -5
package/dist/cjs/ListItem.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var ListItem_exports = {};
|
|
23
26
|
__export(ListItem_exports, {
|
|
@@ -27,6 +30,7 @@ __export(ListItem_exports, {
|
|
|
27
30
|
ListItemText: () => ListItemText
|
|
28
31
|
});
|
|
29
32
|
module.exports = __toCommonJS(ListItem_exports);
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
34
|
var import_core = require("@tamagui/core");
|
|
31
35
|
var import_font_size = require("@tamagui/font-size");
|
|
32
36
|
var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
|
|
@@ -123,31 +127,57 @@ const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
123
127
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
124
128
|
const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
|
|
125
129
|
const contents = (0, import_text.wrapChildrenInText)(ListItemText, props);
|
|
126
|
-
return /* @__PURE__ */
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ListItemFrame, {
|
|
127
131
|
fontFamily,
|
|
128
132
|
ref,
|
|
129
|
-
...rest
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
133
|
+
...rest,
|
|
134
|
+
children: [
|
|
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,
|
|
145
|
+
children: [
|
|
146
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
|
|
147
|
+
children: title
|
|
148
|
+
}),
|
|
149
|
+
subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
|
|
150
|
+
size: subtitleSize,
|
|
151
|
+
children: subTitle
|
|
152
|
+
}) : subTitle : null,
|
|
153
|
+
contents
|
|
154
|
+
]
|
|
155
|
+
}) : contents,
|
|
156
|
+
themedIconAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
157
|
+
children: [
|
|
158
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, {
|
|
159
|
+
flex: true,
|
|
160
|
+
size: spaceSize
|
|
161
|
+
}),
|
|
162
|
+
themedIconAfter
|
|
163
|
+
]
|
|
164
|
+
}) : null
|
|
165
|
+
]
|
|
166
|
+
});
|
|
150
167
|
});
|
|
168
|
+
const ListItemInner = ListItemFrame.extractable(
|
|
169
|
+
(0, import_core.themeable)(ListItemComponent),
|
|
170
|
+
{
|
|
171
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
172
|
+
"color",
|
|
173
|
+
"fontWeight",
|
|
174
|
+
"fontSize",
|
|
175
|
+
"fontFamily",
|
|
176
|
+
"letterSpacing",
|
|
177
|
+
"textAlign"
|
|
178
|
+
])
|
|
179
|
+
}
|
|
180
|
+
);
|
|
151
181
|
const ListItem = (0, import_core.withStaticProperties)(ListItemInner, {
|
|
152
182
|
Text: ListItemText,
|
|
153
183
|
Subtitle: ListItemSubtitle
|
package/dist/cjs/ListItem.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ListItem.tsx"],
|
|
4
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 selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n ellipse: true,\n maxWidth: '100%',\n size: '$3',\n})\n\nconst ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n ellipse: true,\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\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 as ListItemProps\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(ListItemText, props)\n\n return (\n <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\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 <ListItemTitle>{title}</ListItemTitle>\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 <ListItemSubtitle size={subtitleSize}>{subTitle}</ListItemSubtitle>\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 </ListItemFrame>\n )\n})\n\nconst ListItemInner: TamaguiComponent<ListItemProps, TamaguiElement> = ListItemFrame.extractable(\n themeable(ListItemComponent as any) as any,\n {\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)\n\nexport const ListItem = withStaticProperties(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
File without changes
|
package/dist/cjs/index.js.map
CHANGED
|
File without changes
|
package/dist/esm/ListItem.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
1
2
|
import {
|
|
2
3
|
Spacer,
|
|
3
4
|
getSize,
|
|
@@ -101,31 +102,57 @@ const ListItemComponent = forwardRef((props, ref) => {
|
|
|
101
102
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
102
103
|
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
103
104
|
const contents = wrapChildrenInText(ListItemText, props);
|
|
104
|
-
return /* @__PURE__ */
|
|
105
|
+
return /* @__PURE__ */ jsxs(ListItemFrame, {
|
|
105
106
|
fontFamily,
|
|
106
107
|
ref,
|
|
107
|
-
...rest
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
108
|
+
...rest,
|
|
109
|
+
children: [
|
|
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,
|
|
120
|
+
children: [
|
|
121
|
+
/* @__PURE__ */ jsx(ListItemTitle, {
|
|
122
|
+
children: title
|
|
123
|
+
}),
|
|
124
|
+
subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ jsx(ListItemSubtitle, {
|
|
125
|
+
size: subtitleSize,
|
|
126
|
+
children: subTitle
|
|
127
|
+
}) : subTitle : null,
|
|
128
|
+
contents
|
|
129
|
+
]
|
|
130
|
+
}) : contents,
|
|
131
|
+
themedIconAfter ? /* @__PURE__ */ jsxs(Fragment, {
|
|
132
|
+
children: [
|
|
133
|
+
/* @__PURE__ */ jsx(Spacer, {
|
|
134
|
+
flex: true,
|
|
135
|
+
size: spaceSize
|
|
136
|
+
}),
|
|
137
|
+
themedIconAfter
|
|
138
|
+
]
|
|
139
|
+
}) : null
|
|
140
|
+
]
|
|
141
|
+
});
|
|
128
142
|
});
|
|
143
|
+
const ListItemInner = ListItemFrame.extractable(
|
|
144
|
+
themeable(ListItemComponent),
|
|
145
|
+
{
|
|
146
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
147
|
+
"color",
|
|
148
|
+
"fontWeight",
|
|
149
|
+
"fontSize",
|
|
150
|
+
"fontFamily",
|
|
151
|
+
"letterSpacing",
|
|
152
|
+
"textAlign"
|
|
153
|
+
])
|
|
154
|
+
}
|
|
155
|
+
);
|
|
129
156
|
const ListItem = withStaticProperties(ListItemInner, {
|
|
130
157
|
Text: ListItemText,
|
|
131
158
|
Subtitle: ListItemSubtitle
|
package/dist/esm/ListItem.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ListItem.tsx"],
|
|
4
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 selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n ellipse: true,\n maxWidth: '100%',\n size: '$3',\n})\n\nconst ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n ellipse: true,\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\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 as ListItemProps\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(ListItemText, props)\n\n return (\n <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\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 <ListItemTitle>{title}</ListItemTitle>\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 <ListItemSubtitle size={subtitleSize}>{subTitle}</ListItemSubtitle>\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 </ListItemFrame>\n )\n})\n\nconst ListItemInner: TamaguiComponent<ListItemProps, TamaguiElement> = ListItemFrame.extractable(\n themeable(ListItemComponent as any) as any,\n {\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)\n\nexport const ListItem = withStaticProperties(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
File without changes
|
package/dist/esm/index.js.map
CHANGED
package/dist/jsx/ListItem.js
CHANGED
|
@@ -117,16 +117,19 @@ const ListItemComponent = forwardRef((props, ref) => {
|
|
|
117
117
|
</> : null}
|
|
118
118
|
</ListItemFrame>;
|
|
119
119
|
});
|
|
120
|
-
const ListItemInner = ListItemFrame.extractable(
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
120
|
+
const ListItemInner = ListItemFrame.extractable(
|
|
121
|
+
themeable(ListItemComponent),
|
|
122
|
+
{
|
|
123
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
124
|
+
"color",
|
|
125
|
+
"fontWeight",
|
|
126
|
+
"fontSize",
|
|
127
|
+
"fontFamily",
|
|
128
|
+
"letterSpacing",
|
|
129
|
+
"textAlign"
|
|
130
|
+
])
|
|
131
|
+
}
|
|
132
|
+
);
|
|
130
133
|
const ListItem = withStaticProperties(ListItemInner, {
|
|
131
134
|
Text: ListItemText,
|
|
132
135
|
Subtitle: ListItemSubtitle
|
package/dist/jsx/ListItem.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ListItem.tsx"],
|
|
4
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 selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n ellipse: true,\n maxWidth: '100%',\n size: '$3',\n})\n\nconst ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n ellipse: true,\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\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 as ListItemProps\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(ListItemText, props)\n\n return (\n <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\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 <ListItemTitle>{title}</ListItemTitle>\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 <ListItemSubtitle size={subtitleSize}>{subTitle}</ListItemSubtitle>\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 </ListItemFrame>\n )\n})\n\nconst ListItemInner: TamaguiComponent<ListItemProps, TamaguiElement> = ListItemFrame.extractable(\n themeable(ListItemComponent as any) as any,\n {\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)\n\nexport const ListItem = withStaticProperties(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/index.js
CHANGED
|
File without changes
|
package/dist/jsx/index.js.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/list-item",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.154",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -21,16 +21,16 @@
|
|
|
21
21
|
"watch": "tamagui-build --watch"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/font-size": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/helpers-tamagui": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/core": "^1.0.1-beta.154",
|
|
25
|
+
"@tamagui/font-size": "^1.0.1-beta.154",
|
|
26
|
+
"@tamagui/helpers-tamagui": "^1.0.1-beta.154"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": "*",
|
|
30
30
|
"react-dom": "*"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
33
|
+
"@tamagui/build": "^1.0.1-beta.154",
|
|
34
34
|
"react": "*",
|
|
35
35
|
"react-dom": "*"
|
|
36
36
|
},
|