@tamagui/button 1.0.1-beta.183 → 1.0.1-beta.185
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/Button.js.map +2 -2
- package/dist/esm/Button.js.map +2 -2
- package/dist/jsx/Button.js.map +2 -2
- package/package.json +5 -5
- package/src/Button.tsx +18 -8
- package/types/Button.d.ts +42 -3
package/dist/cjs/Button.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\n ThemeableProps & {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n\n // if we wanted this only when pressable = true, we'd need to merge variants?\n cursor: 'pointer',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': getButtonSize,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.375,\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n color: '$color',\n userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : 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, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n isInsideButton,\n props: {\n ...(props.disabled && {\n // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n focusable: undefined,\n // even with tabIndex unset, it will keep focusStyle on web so disable it here\n focusStyle: {\n borderColor: '$background',\n },\n }),\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n ...(isInsideButton && {\n tag: 'span',\n }),\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonInsideButtonContext.Provider value={true}>\n {inner}\n </ButtonInsideButtonContext.Provider>\n ),\n },\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n const { props: buttonProps } = useButton(props)\n return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract button anyway)\n // may be able to remove this entirely, as the compiler / runtime have gotten better\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n}\n\nexport const Button = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig)\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiMQ;AAjMR,kBAYO;AACP,uBAA4B;AAC5B,6BAAiC;AACjC,oBAA+B;AAC/B,kBAAkE;AAClE,mBAAiE;AAGjE,aAAAC,QAAM;AAiCC,MAAM,kBAAc,oBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EAGf,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;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,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,iBAAa,oBAAO,yBAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,SAAS,UACd,OACA,EAAE,OAAO,WAAW,IAAmB,EAAE,MAAM,WAAW,GAC1D;AAEA,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,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,iBAAiB,oBAAQ,YAAQ,yBAAW,qCAAyB;AAC3E,QAAM,uBAAmB,iCAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,QAAM,YAAY,OAAO,SAAS,WAAW,OAAO,UAAM,8BAAY,IAAI,KAAK;AAC/E,QAAM,oBAAgB,yCAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,gBAAY,8BAAiB,QAAQ,IAAI;AAC/C,QAAM,eAAW,gCAAmB,MAAM,gBAAgB;AAC1D,QAAM,QACJ,cAAc,sBACV,4BAAe;AAAA,IAEb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,MAAM,kBAAkB,YAAY,MAAM,kBAAkB,mBACxD,aACA;AAAA,IACN,UAAU,CAAC,YAAY,UAAU,eAAe;AAAA,EAClD,CAAC,IACD;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL,GAAI,MAAM,YAAY;AAAA,QAEpB,WAAW;AAAA,QAEX,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MAEA,GAAI,kBAAkB;AAAA,QACpB,KAAK;AAAA,MACP;AAAA,MACA,GAAG;AAAA,MACH,UAAU,oBACR,QAEA,4CAAC,sCAA0B,UAA1B;AAAA,QAAmC,OAAO;AAAA,QACxC;AAAA,OACH;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,sBAAkB,yBAAwC,SAAS,OAAO,OAAO,KAAK;AAC1F,QAAM,EAAE,OAAO,YAAY,IAAI,UAAU,KAAK;AAC9C,SAAO,4CAAC;AAAA,IAAa,GAAG;AAAA,IAAa;AAAA,GAAU;AACjD,CAAC;AAEM,MAAM,qBAAqB;AAAA,EAChC,aAAa,oBAAI,IAAI;AAAA,IAGnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAMD,UAAS,YAAY,gBAAY,uBAAU,eAAe,GAAG,kBAAkB;",
|
|
6
6
|
"names": ["Button", "React"]
|
|
7
7
|
}
|
package/dist/esm/Button.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\n ThemeableProps & {\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n\n // if we wanted this only when pressable = true, we'd need to merge variants?\n cursor: 'pointer',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': getButtonSize,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.375,\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n color: '$color',\n userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : 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, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n isInsideButton,\n props: {\n ...(props.disabled && {\n // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n focusable: undefined,\n // even with tabIndex unset, it will keep focusStyle on web so disable it here\n focusStyle: {\n borderColor: '$background',\n },\n }),\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n ...(isInsideButton && {\n tag: 'span',\n }),\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonInsideButtonContext.Provider value={true}>\n {inner}\n </ButtonInsideButtonContext.Provider>\n ),\n },\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n const { props: buttonProps } = useButton(props)\n return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract button anyway)\n // may be able to remove this entirely, as the compiler / runtime have gotten better\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n}\n\nexport const Button = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Button"]
|
|
7
7
|
}
|
package/dist/jsx/Button.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\n ThemeableProps & {\n
|
|
5
|
-
"mappings": "AAAA;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,aAA+B,0BAA0B;AAClE,OAAO,SAA4B,YAAY,kBAAkB;AAGjE,MAAM;
|
|
4
|
+
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ButtonFrame> &\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\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n\n // if we wanted this only when pressable = true, we'd need to merge variants?\n cursor: 'pointer',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': getButtonSize,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.375,\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n color: '$color',\n userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : 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, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n isInsideButton,\n props: {\n ...(props.disabled && {\n // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n focusable: undefined,\n // even with tabIndex unset, it will keep focusStyle on web so disable it here\n focusStyle: {\n borderColor: '$background',\n },\n }),\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n ...(isInsideButton && {\n tag: 'span',\n }),\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonInsideButtonContext.Provider value={true}>\n {inner}\n </ButtonInsideButtonContext.Provider>\n ),\n },\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n const { props: buttonProps } = useButton(props)\n return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract button anyway)\n // may be able to remove this entirely, as the compiler / runtime have gotten better\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n}\n\nexport const Button = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Button"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/button",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.185",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/font-size": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/helpers-tamagui": "^1.0.1-beta.
|
|
31
|
+
"@tamagui/core": "^1.0.1-beta.185",
|
|
32
|
+
"@tamagui/font-size": "^1.0.1-beta.185",
|
|
33
|
+
"@tamagui/helpers-tamagui": "^1.0.1-beta.185"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "*",
|
|
37
37
|
"react-dom": "*"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
40
|
+
"@tamagui/build": "^1.0.1-beta.185",
|
|
41
41
|
"react": "*",
|
|
42
42
|
"react-dom": "*"
|
|
43
43
|
},
|
package/src/Button.tsx
CHANGED
|
@@ -26,18 +26,28 @@ type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null
|
|
|
26
26
|
export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
|
|
27
27
|
GetProps<typeof ButtonFrame> &
|
|
28
28
|
ThemeableProps & {
|
|
29
|
-
|
|
29
|
+
/**
|
|
30
|
+
* add icon before, passes color and size automatically if Component
|
|
31
|
+
*/
|
|
30
32
|
icon?: IconProp
|
|
31
|
-
|
|
33
|
+
/**
|
|
34
|
+
* add icon after, passes color and size automatically if Component
|
|
35
|
+
*/
|
|
32
36
|
iconAfter?: IconProp
|
|
33
|
-
|
|
34
|
-
|
|
37
|
+
/**
|
|
38
|
+
* adjust icon relative to size
|
|
39
|
+
*/
|
|
40
|
+
/**
|
|
41
|
+
* default: -1
|
|
42
|
+
*/
|
|
35
43
|
scaleIcon?: number
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
44
|
+
/**
|
|
45
|
+
* make the spacing elements flex
|
|
46
|
+
*/
|
|
39
47
|
spaceFlex?: number | boolean
|
|
40
|
-
|
|
48
|
+
/**
|
|
49
|
+
* adjust internal space relative to icon size
|
|
50
|
+
*/
|
|
41
51
|
scaleSpace?: number
|
|
42
52
|
}
|
|
43
53
|
|
package/types/Button.d.ts
CHANGED
|
@@ -7,11 +7,28 @@ declare type ButtonIconProps = {
|
|
|
7
7
|
};
|
|
8
8
|
declare type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null;
|
|
9
9
|
export declare type ButtonProps = Omit<TextParentStyles, 'TextComponent'> & GetProps<typeof ButtonFrame> & ThemeableProps & {
|
|
10
|
+
/**
|
|
11
|
+
* add icon before, passes color and size automatically if Component
|
|
12
|
+
*/
|
|
10
13
|
icon?: IconProp;
|
|
14
|
+
/**
|
|
15
|
+
* add icon after, passes color and size automatically if Component
|
|
16
|
+
*/
|
|
11
17
|
iconAfter?: IconProp;
|
|
18
|
+
/**
|
|
19
|
+
* adjust icon relative to size
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* default: -1
|
|
23
|
+
*/
|
|
12
24
|
scaleIcon?: number;
|
|
13
|
-
|
|
25
|
+
/**
|
|
26
|
+
* make the spacing elements flex
|
|
27
|
+
*/
|
|
14
28
|
spaceFlex?: number | boolean;
|
|
29
|
+
/**
|
|
30
|
+
* adjust internal space relative to icon size
|
|
31
|
+
*/
|
|
15
32
|
scaleSpace?: number;
|
|
16
33
|
};
|
|
17
34
|
export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
@@ -190,6 +207,9 @@ export declare function useButton(props: ButtonProps, { Text }?: {
|
|
|
190
207
|
hrefAttrs?: {
|
|
191
208
|
target?: "top" | "_blank" | "_self" | "_top" | "blank" | "self" | undefined;
|
|
192
209
|
rel?: string | undefined;
|
|
210
|
+
/**
|
|
211
|
+
* make the spacing elements flex
|
|
212
|
+
*/
|
|
193
213
|
download?: boolean | undefined;
|
|
194
214
|
} | undefined;
|
|
195
215
|
onMouseDown?: (((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | undefined;
|
|
@@ -210,7 +230,9 @@ export declare function useButton(props: ButtonProps, { Text }?: {
|
|
|
210
230
|
animation?: import("@tamagui/core").AnimationProp | undefined;
|
|
211
231
|
animateOnly?: string[] | undefined;
|
|
212
232
|
debug?: import("@tamagui/core").DebugProp | undefined;
|
|
213
|
-
disabled?: boolean | undefined;
|
|
233
|
+
disabled?: boolean | undefined; /**
|
|
234
|
+
* make the spacing elements flex
|
|
235
|
+
*/
|
|
214
236
|
className?: string | undefined;
|
|
215
237
|
themeShallow?: boolean | undefined;
|
|
216
238
|
id?: string | undefined;
|
|
@@ -512,11 +534,28 @@ export declare const Button: (props: Omit<Omit<TextParentStyles, "TextComponent"
|
|
|
512
534
|
readonly active?: boolean | undefined;
|
|
513
535
|
readonly disabled?: boolean | undefined;
|
|
514
536
|
}>> & ThemeableProps & {
|
|
537
|
+
/**
|
|
538
|
+
* add icon before, passes color and size automatically if Component
|
|
539
|
+
*/
|
|
515
540
|
icon?: IconProp | undefined;
|
|
541
|
+
/**
|
|
542
|
+
* add icon after, passes color and size automatically if Component
|
|
543
|
+
*/
|
|
516
544
|
iconAfter?: IconProp | undefined;
|
|
545
|
+
/**
|
|
546
|
+
* adjust icon relative to size
|
|
547
|
+
*/
|
|
548
|
+
/**
|
|
549
|
+
* default: -1
|
|
550
|
+
*/
|
|
517
551
|
scaleIcon?: number | undefined;
|
|
518
|
-
|
|
552
|
+
/**
|
|
553
|
+
* make the spacing elements flex
|
|
554
|
+
*/
|
|
519
555
|
spaceFlex?: number | boolean | undefined;
|
|
556
|
+
/**
|
|
557
|
+
* adjust internal space relative to icon size
|
|
558
|
+
*/
|
|
520
559
|
scaleSpace?: number | undefined;
|
|
521
560
|
} & React.RefAttributes<TamaguiElement>, "theme" | "themeInverse"> & {
|
|
522
561
|
theme?: import("@tamagui/core").ThemeName | null | undefined;
|