@tamagui/list-item 1.0.1-beta.91 → 1.0.1-beta.94
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 +1 -1
- package/dist/cjs/ListItem.js.map +2 -2
- package/dist/esm/ListItem.js +3 -6
- package/dist/esm/ListItem.js.map +2 -2
- package/dist/jsx/ListItem.js +3 -6
- package/dist/jsx/ListItem.js.map +2 -2
- package/package.json +5 -5
- package/src/ListItem.tsx +3 -7
- package/types/ListItem.d.ts.map +1 -1
package/dist/cjs/ListItem.js
CHANGED
|
@@ -156,7 +156,7 @@ const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
156
156
|
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
157
157
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
158
158
|
const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
|
|
159
|
-
const contents = (0,
|
|
159
|
+
const contents = (0, import_text.wrapChildrenInText)(ListItemText, props);
|
|
160
160
|
return /* @__PURE__ */ import_react.default.createElement(ListItemFrame, __spreadValues({
|
|
161
161
|
fontFamily,
|
|
162
162
|
ref
|
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 ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAWO;AACP,uBAA4B;AAC5B,
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\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 }\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 color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n size: '$3',\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 <ListItemText>{title}</ListItemText>\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, HTMLLIElement | View> =\n ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\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(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ListItem.js
CHANGED
|
@@ -35,12 +35,9 @@ import {
|
|
|
35
35
|
withStaticProperties
|
|
36
36
|
} from "@tamagui/core";
|
|
37
37
|
import { getFontSize } from "@tamagui/font-size";
|
|
38
|
-
import {
|
|
39
|
-
useGetThemedIcon,
|
|
40
|
-
wrapStringChildrenInText
|
|
41
|
-
} from "@tamagui/helpers-tamagui";
|
|
38
|
+
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
42
39
|
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
43
|
-
import { SizableText } from "@tamagui/text";
|
|
40
|
+
import { SizableText, wrapChildrenInText } from "@tamagui/text";
|
|
44
41
|
import React, { forwardRef } from "react";
|
|
45
42
|
React["createElement"];
|
|
46
43
|
const ListItemFrame = styled(ThemeableStack, {
|
|
@@ -140,7 +137,7 @@ const ListItemComponent = forwardRef((props, ref) => {
|
|
|
140
137
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
141
138
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
142
139
|
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
143
|
-
const contents =
|
|
140
|
+
const contents = wrapChildrenInText(ListItemText, props);
|
|
144
141
|
return /* @__PURE__ */ React.createElement(ListItemFrame, __spreadValues({
|
|
145
142
|
fontFamily,
|
|
146
143
|
ref
|
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 ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AACA;
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\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 }\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 color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n size: '$3',\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 <ListItemText>{title}</ListItemText>\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, HTMLLIElement | View> =\n ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\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(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AACA;AACA;AACA;AACA;AAIA,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,aAAa;AAC9B,eAAO;AAAA,UACL,WAAW,OAAO,KAAK;AAAA,UACvB,mBAAmB,OAAO,MAAM;AAAA,QAClC;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,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,MAAM,mBAAmB,OAAO,cAAc;AAAA,EACnD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACR,CAAC;AAED,MAAM,oBAAoB,WAAW,CAAC,OAAsB,QAAQ;AAElE,QAsBI,YArBF;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,iBACD,IADC;AAAA,IApBH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,oBAAoB,QAAQ,MAAM,EAAE;AAC1C,QAAM,eAAe,IAAI,kBAAkB;AAC3C,QAAM,WAAW,YAAY,IAAI,IAAI;AACrC,QAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,mBAAmB,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,iBAAiB,QAAQ,IAAI;AAC/C,QAAM,WAAW,mBAAmB,cAAc,KAAK;AAEvD,SACE,oCAAC;AAAA,IAAc;AAAA,IAAwB;AAAA,KAAqB,OACzD,aACC,0DACG,YACD,oCAAC;AAAA,IAAO,MAAM;AAAA,GAAW,CAC3B,IACE,MAEH,QAAQ,SAAS,QAAQ,IACxB,oCAAC;AAAA,IAAO,MAAM;AAAA,KACZ,oCAAC,oBAAc,KAAM,GACpB,WACC,OAAO,aAAa,WAGlB,oCAAC;AAAA,IAAiB,MAAM;AAAA,KAAe,QAAS,IAEhD,WAEA,MACH,QACH,IAEA,UAED,kBACC,0DACE,oCAAC;AAAA,IAAO,MAAI;AAAA,IAAC,MAAM;AAAA,GAAW,GAC7B,eACH,IACE,IACN;AAEJ,CAAC;AAED,MAAM,gBACJ,cAAc,YAAY,UAAU,iBAAwB,GAAU;AAAA,EACpE,aAAa,oBAAI,IAAI;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,CAAC;AAEI,MAAM,WAAW,qBAAqB,eAAe;AAAA,EAC1D,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/ListItem.js
CHANGED
|
@@ -7,12 +7,9 @@ import {
|
|
|
7
7
|
withStaticProperties
|
|
8
8
|
} from "@tamagui/core";
|
|
9
9
|
import { getFontSize } from "@tamagui/font-size";
|
|
10
|
-
import {
|
|
11
|
-
useGetThemedIcon,
|
|
12
|
-
wrapStringChildrenInText
|
|
13
|
-
} from "@tamagui/helpers-tamagui";
|
|
10
|
+
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
14
11
|
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
15
|
-
import { SizableText } from "@tamagui/text";
|
|
12
|
+
import { SizableText, wrapChildrenInText } from "@tamagui/text";
|
|
16
13
|
import React, { forwardRef } from "react";
|
|
17
14
|
React["createElement"];
|
|
18
15
|
const ListItemFrame = styled(ThemeableStack, {
|
|
@@ -94,7 +91,7 @@ const ListItemComponent = forwardRef((props, ref) => {
|
|
|
94
91
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
95
92
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
96
93
|
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
97
|
-
const contents =
|
|
94
|
+
const contents = wrapChildrenInText(ListItemText, props);
|
|
98
95
|
return <ListItemFrame fontFamily={fontFamily} ref={ref} {...rest}>
|
|
99
96
|
{themedIcon ? <>
|
|
100
97
|
{themedIcon}
|
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 ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {
|
|
5
|
-
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AACA;
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiComponent,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\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 }\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 color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n size: '$3',\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 <ListItemText>{title}</ListItemText>\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, HTMLLIElement | View> =\n ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\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(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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.94",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -19,16 +19,16 @@
|
|
|
19
19
|
"watch": "tamagui-build --watch"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
23
|
-
"@tamagui/font-size": "^1.0.1-beta.
|
|
24
|
-
"@tamagui/helpers-tamagui": "^1.0.1-beta.
|
|
22
|
+
"@tamagui/core": "^1.0.1-beta.94",
|
|
23
|
+
"@tamagui/font-size": "^1.0.1-beta.94",
|
|
24
|
+
"@tamagui/helpers-tamagui": "^1.0.1-beta.94"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "*",
|
|
28
28
|
"react-dom": "*"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
31
|
+
"@tamagui/build": "^1.0.1-beta.94",
|
|
32
32
|
"react": "*",
|
|
33
33
|
"react-dom": "*"
|
|
34
34
|
},
|
package/src/ListItem.tsx
CHANGED
|
@@ -11,13 +11,9 @@ import {
|
|
|
11
11
|
withStaticProperties,
|
|
12
12
|
} from '@tamagui/core'
|
|
13
13
|
import { getFontSize } from '@tamagui/font-size'
|
|
14
|
-
import {
|
|
15
|
-
TextParentStyles,
|
|
16
|
-
useGetThemedIcon,
|
|
17
|
-
wrapStringChildrenInText,
|
|
18
|
-
} from '@tamagui/helpers-tamagui'
|
|
14
|
+
import { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'
|
|
19
15
|
import { ThemeableStack, YStack } from '@tamagui/stacks'
|
|
20
|
-
import { SizableText } from '@tamagui/text'
|
|
16
|
+
import { SizableText, wrapChildrenInText } from '@tamagui/text'
|
|
21
17
|
import React, { FunctionComponent, forwardRef } from 'react'
|
|
22
18
|
import { View } from 'react-native'
|
|
23
19
|
|
|
@@ -138,7 +134,7 @@ const ListItemComponent = forwardRef((props: ListItemProps, ref) => {
|
|
|
138
134
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
|
|
139
135
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
|
|
140
136
|
const spaceSize = getVariableValue(iconSize) * scaleSpace
|
|
141
|
-
const contents =
|
|
137
|
+
const contents = wrapChildrenInText(ListItemText, props)
|
|
142
138
|
|
|
143
139
|
return (
|
|
144
140
|
<ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>
|
package/types/ListItem.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../src/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EAER,gBAAgB,EAChB,cAAc,EAMf,MAAM,eAAe,CAAA;AAEtB,OAAO,
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../src/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EAER,gBAAgB,EAChB,cAAc,EAMf,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,gBAAgB,EAAoB,MAAM,0BAA0B,CAAA;AAG7E,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAKnC,aAAK,iBAAiB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1D,aAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAA;AAEzE,oBAAY,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GACjE,QAAQ,CAAC,OAAO,aAAa,CAAC,GAC9B,cAAc,GAAG;IAEf,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,SAAS,CAAC,EAAE,QAAQ,CAAA;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCxB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;GAMvB,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAK3B,CAAA;AAsFF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGnB,CAAA"}
|