@tamagui/list-item 1.0.4 → 1.0.5
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.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 TamaguiElement,\n ThemeableProps,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize } from '@tamagui/get-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\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: NAME,\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: '$true',\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 mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\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 {title || subTitle ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\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 </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer 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} justifyContent=\"space-between\" {...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(\n themeable(ListItemComponent, { componentName: NAME }),\n listItemStaticConfig\n ),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize } from '@tamagui/get-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\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: NAME,\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: '$true',\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 mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n // @ts-expect-error need to fix\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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\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 {title || subTitle ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\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 </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer 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} justifyContent=\"space-between\" {...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(\n themeable(ListItemComponent, { componentName: NAME }),\n listItemStaticConfig\n ),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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 TamaguiElement,\n ThemeableProps,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize } from '@tamagui/get-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\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: NAME,\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: '$true',\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 mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\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 {title || subTitle ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\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 </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer 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} justifyContent=\"space-between\" {...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(\n themeable(ListItemComponent, { componentName: NAME }),\n listItemStaticConfig\n ),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize } from '@tamagui/get-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\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: NAME,\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: '$true',\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 mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n // @ts-expect-error need to fix\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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\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 {title || subTitle ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\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 </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer 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} justifyContent=\"space-between\" {...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(\n themeable(ListItemComponent, { componentName: NAME }),\n listItemStaticConfig\n ),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
+
"mappings": "AA2LY,mBAEE,KAFF;AA3LZ;AAAA,EAGE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,cAAc;AACvC,SAAS,aAA+B,0BAA0B;AAClE,SAAmC,kBAAkB;AA6CrD,MAAM,OAAO;AAEN,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;AAAA,EACT,QAAQ;AACV,CAAC;AAEM,MAAM,mBAAmB,OAAO,cAAc;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AACR,CAAC;AAEM,MAAM,gBAAgB,OAAO,cAAc;AAAA,EAChD,MAAM;AACR,CAAC;AAEM,MAAM,cAAc,CACzB,OACA;AAAA,EACE,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AACV,IAII,EAAE,MAAM,cAAc,UAAU,kBAAkB,OAAO,cAAc,MACxE;AAEH,QAAM;AAAA,IACJ;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,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB,oBAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,QAAM,oBAAoB,QAAQ,MAAM,EAAE;AAE1C,QAAM,eAAe,IAAI,kBAAkB;AAC3C,QAAM,WAAW,YAAY,IAAI,IAAI;AACrC,QAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,iBAAiB,QAAQ,IAAI;AAE/C,QAAM,WAAW,mBAAmB,MAAM,gBAAgB;AAE1D,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,MACH,UACE;AAAA,QACG;AAAA,uBACC;AAAA,YACG;AAAA;AAAA,cACD,oBAAC;AAAA,gBAAO,MAAM;AAAA,eAAW;AAAA;AAAA,WAC3B,IACE;AAAA,UAEH,SAAS,WACR,qBAAC;AAAA,YAAO,MAAM;AAAA,YACX;AAAA,6BAAe,QAAQ,QAAQ,oBAAC;AAAA,gBAAM;AAAA,gBAAa;AAAA,eAAM;AAAA,cACzD,WACC;AAAA,gBACE;AAAA,sCAAC;AAAA,oBAAO,MAAI;AAAA,oBAAC,MAAM,YAAY;AAAA,mBAAO;AAAA,kBACrC,OAAO,aAAa,YAAY,eAAe,QAG9C,oBAAC;AAAA,oBAAS,MAAM;AAAA,oBAAe;AAAA,mBAAS,IAExC;AAAA;AAAA,eAEJ,IACE;AAAA,cACH;AAAA;AAAA,WACH,IAEA;AAAA,UAED,kBACC;AAAA,YACE;AAAA,kCAAC;AAAA,gBAAO,MAAM;AAAA,eAAW;AAAA,cACxB;AAAA;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,oBAAoB,WAA0C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,cAAc,IAAI,YAAY,KAAK;AAClD,SAAO,oBAAC;AAAA,IAAc;AAAA,IAAU,gBAAe;AAAA,IAAiB,GAAG;AAAA,GAAe;AACpF,CAAC;AAEM,MAAM,uBAAuB;AAAA,EAClC,aAAa,oBAAI,IAAI;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAM,WAAW;AAAA,EACtB,cAAc;AAAA,IACZ,UAAU,mBAAmB,EAAE,eAAe,KAAK,CAAC;AAAA,IACpD;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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 TamaguiElement,\n ThemeableProps,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize } from '@tamagui/get-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\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: NAME,\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: '$true',\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 mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\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 {title || subTitle ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\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 </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer 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} justifyContent=\"space-between\" {...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(\n themeable(ListItemComponent, { componentName: NAME }),\n listItemStaticConfig\n ),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA,EAGE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,cAAc;AACvC,SAAS,aAA+B,0BAA0B;AAClE,SAAmC,kBAAkB;AA6CrD,MAAM,OAAO;AAEN,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;AAAA,EACT,QAAQ;AACV,CAAC;AAEM,MAAM,mBAAmB,OAAO,cAAc;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AACR,CAAC;AAEM,MAAM,gBAAgB,OAAO,cAAc;AAAA,EAChD,MAAM;AACR,CAAC;AAEM,MAAM,cAAc,CACzB,OACA;AAAA,EACE,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AACV,IAII,EAAE,MAAM,cAAc,UAAU,kBAAkB,OAAO,cAAc,MACxE;AAEH,QAAM;AAAA,IACJ;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,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB,oBAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,QAAM,oBAAoB,QAAQ,MAAM,EAAE;
|
|
4
|
+
"sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize } from '@tamagui/get-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\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n name: NAME,\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: '$true',\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 mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n // @ts-expect-error need to fix\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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\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 {title || subTitle ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\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 </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer 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} justifyContent=\"space-between\" {...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(\n themeable(ListItemComponent, { componentName: NAME }),\n listItemStaticConfig\n ),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\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.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -21,17 +21,17 @@
|
|
|
21
21
|
"watch": "tamagui-build --watch"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@tamagui/core": "^1.0.
|
|
25
|
-
"@tamagui/font-size": "^1.0.
|
|
26
|
-
"@tamagui/get-size": "^1.0.
|
|
27
|
-
"@tamagui/helpers-tamagui": "^1.0.
|
|
24
|
+
"@tamagui/core": "^1.0.5",
|
|
25
|
+
"@tamagui/font-size": "^1.0.5",
|
|
26
|
+
"@tamagui/get-size": "^1.0.5",
|
|
27
|
+
"@tamagui/helpers-tamagui": "^1.0.5"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"react": "*",
|
|
31
31
|
"react-dom": "*"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@tamagui/build": "^1.0.
|
|
34
|
+
"@tamagui/build": "^1.0.5",
|
|
35
35
|
"react": "^18.2.0",
|
|
36
36
|
"react-dom": "^18.2.0"
|
|
37
37
|
},
|
package/src/ListItem.tsx
CHANGED
|
@@ -169,6 +169,7 @@ export const useListItem = (
|
|
|
169
169
|
const mediaActiveProps = useMediaPropsActive(props)
|
|
170
170
|
const size = mediaActiveProps.size || '$4'
|
|
171
171
|
const subtitleSizeToken = getSize(size, -3)
|
|
172
|
+
// @ts-expect-error need to fix
|
|
172
173
|
const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens
|
|
173
174
|
const iconSize = getFontSize(size) * scaleIcon
|
|
174
175
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
|