@tamagui/button 1.0.2 → 1.0.4
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 +1 -1
- package/dist/cjs/Button.js.map +2 -2
- package/dist/cjs/Button.test.js +12 -0
- package/dist/cjs/Button.test.js.map +7 -0
- package/dist/cjs/Buttont.test.js +2 -0
- package/dist/cjs/Buttont.test.js.map +7 -0
- package/dist/esm/Button.js +1 -1
- package/dist/esm/Button.js.map +2 -2
- package/dist/esm/Button.test.js +11 -0
- package/dist/esm/Button.test.js.map +7 -0
- package/dist/esm/Buttont.test.js +1 -0
- package/dist/esm/Buttont.test.js.map +7 -0
- package/dist/jsx/Button.js +1 -1
- package/dist/jsx/Button.js.map +2 -2
- package/dist/jsx/Button.test.js +11 -0
- package/dist/jsx/Button.test.js.map +7 -0
- package/dist/jsx/Buttont.test.js +1 -0
- package/dist/jsx/Buttont.test.js.map +7 -0
- package/package.json +8 -7
- package/src/Button.test.tsx +26 -0
- package/src/Button.tsx +6 -9
- package/types/Button.test.d.ts +2 -0
package/dist/cjs/Button.js
CHANGED
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 ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\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': getButtonSized,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\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': getButtonSized,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\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 propsIn: 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 } = propsIn\n\n const isNested = isRSC ? false : useContext(ButtonNestingContext)\n const propsActive = useMediaPropsActive(propsIn)\n const size = propsActive.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, propsActive)\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 propsActive.flexDirection === 'column' ||\n propsActive.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n const props = {\n ...(propsActive.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 tag: isNested ? 'span' : undefined,\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n ),\n }\n\n return {\n spaceSize,\n isNested,\n props,\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n props,\n ref\n) {\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(\n themeable(ButtonComponent, ButtonFrame.staticConfig),\n buttonStaticConfig\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Button"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var import_config_default = require("@tamagui/config-default");
|
|
3
|
+
var import_core = require("@tamagui/core");
|
|
4
|
+
var import_vitest = require("vitest");
|
|
5
|
+
process.env.TAMAGUI_TARGET = "web";
|
|
6
|
+
const conf = (0, import_core.createTamagui)((0, import_config_default.getDefaultTamaguiConfig)());
|
|
7
|
+
(0, import_vitest.describe)("Button", () => {
|
|
8
|
+
(0, import_vitest.test)(`123`, () => {
|
|
9
|
+
(0, import_vitest.expect)(true).toBeTruthy();
|
|
10
|
+
});
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=Button.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Button.test.tsx"],
|
|
4
|
+
"sourcesContent": ["process.env.TAMAGUI_TARGET = 'web'\n\nimport { getDefaultTamaguiConfig } from '@tamagui/config-default'\nimport { TamaguiProvider, createTamagui } from '@tamagui/core'\nimport { render } from '@testing-library/react'\nimport { describe, expect, test } from 'vitest'\n\nimport { Button } from '.'\n\nconst conf = createTamagui(getDefaultTamaguiConfig())\n\ndescribe('Button', () => {\n test(`123`, () => {\n expect(true).toBeTruthy()\n })\n\n // test(`Adapts to a when given accessibilityRole=\"link\"`, async () => {\n // const { container } = render(\n // <TamaguiProvider config={conf} defaultTheme=\"light\">\n // <Button href=\"http://google.com\" accessibilityRole=\"link\" />\n // </TamaguiProvider>\n // )\n\n // expect(container.firstChild).toMatchSnapshot()\n // })\n})\n"],
|
|
5
|
+
"mappings": ";AAEA,4BAAwC;AACxC,kBAA+C;AAE/C,oBAAuC;AALvC,QAAQ,IAAI,iBAAiB;AAS7B,MAAM,WAAO,+BAAc,+CAAwB,CAAC;AAAA,IAEpD,wBAAS,UAAU,MAAM;AACvB,0BAAK,OAAO,MAAM;AAChB,8BAAO,IAAI,EAAE,WAAW;AAAA,EAC1B,CAAC;AAWH,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/Button.js
CHANGED
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 ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\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': getButtonSized,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\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': getButtonSized,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\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 propsIn: 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 } = propsIn\n\n const isNested = isRSC ? false : useContext(ButtonNestingContext)\n const propsActive = useMediaPropsActive(propsIn)\n const size = propsActive.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, propsActive)\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 propsActive.flexDirection === 'column' ||\n propsActive.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n const props = {\n ...(propsActive.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 tag: isNested ? 'span' : undefined,\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n ),\n }\n\n return {\n spaceSize,\n isNested,\n props,\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n props,\n ref\n) {\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(\n themeable(ButtonComponent, ButtonFrame.staticConfig),\n buttonStaticConfig\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Button"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
process.env.TAMAGUI_TARGET = "web";
|
|
2
|
+
import { getDefaultTamaguiConfig } from "@tamagui/config-default";
|
|
3
|
+
import { createTamagui } from "@tamagui/core";
|
|
4
|
+
import { describe, expect, test } from "vitest";
|
|
5
|
+
const conf = createTamagui(getDefaultTamaguiConfig());
|
|
6
|
+
describe("Button", () => {
|
|
7
|
+
test(`123`, () => {
|
|
8
|
+
expect(true).toBeTruthy();
|
|
9
|
+
});
|
|
10
|
+
});
|
|
11
|
+
//# sourceMappingURL=Button.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Button.test.tsx"],
|
|
4
|
+
"sourcesContent": ["process.env.TAMAGUI_TARGET = 'web'\n\nimport { getDefaultTamaguiConfig } from '@tamagui/config-default'\nimport { TamaguiProvider, createTamagui } from '@tamagui/core'\nimport { render } from '@testing-library/react'\nimport { describe, expect, test } from 'vitest'\n\nimport { Button } from '.'\n\nconst conf = createTamagui(getDefaultTamaguiConfig())\n\ndescribe('Button', () => {\n test(`123`, () => {\n expect(true).toBeTruthy()\n })\n\n // test(`Adapts to a when given accessibilityRole=\"link\"`, async () => {\n // const { container } = render(\n // <TamaguiProvider config={conf} defaultTheme=\"light\">\n // <Button href=\"http://google.com\" accessibilityRole=\"link\" />\n // </TamaguiProvider>\n // )\n\n // expect(container.firstChild).toMatchSnapshot()\n // })\n})\n"],
|
|
5
|
+
"mappings": "AAAA,QAAQ,IAAI,iBAAiB;AAE7B,SAAS,+BAA+B;AACxC,SAA0B,qBAAqB;AAE/C,SAAS,UAAU,QAAQ,YAAY;AAIvC,MAAM,OAAO,cAAc,wBAAwB,CAAC;AAEpD,SAAS,UAAU,MAAM;AACvB,OAAK,OAAO,MAAM;AAChB,WAAO,IAAI,EAAE,WAAW;AAAA,EAC1B,CAAC;AAWH,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=Buttont.test.js.map
|
package/dist/jsx/Button.js
CHANGED
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 ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\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': getButtonSized,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$
|
|
5
|
-
"mappings": "AAAA;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,aAA+B,0BAA0B;AAClE,SAA4B,YAAY,kBAAkB;AAiC1D,MAAM,OAAO;AAEN,MAAM,cAAc,OAAO,gBAAgB;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,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,SAAS,UACd,SACA,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,WAAW,QAAQ,QAAQ,WAAW,oBAAoB;AAChE,QAAM,cAAc,oBAAoB,OAAO;AAC/C,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,
|
|
4
|
+
"sourcesContent": ["import {\n ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\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': getButtonSized,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\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 propsIn: 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 } = propsIn\n\n const isNested = isRSC ? false : useContext(ButtonNestingContext)\n const propsActive = useMediaPropsActive(propsIn)\n const size = propsActive.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, propsActive)\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 propsActive.flexDirection === 'column' ||\n propsActive.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n const props = {\n ...(propsActive.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 tag: isNested ? 'span' : undefined,\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n ),\n }\n\n return {\n spaceSize,\n isNested,\n props,\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n props,\n ref\n) {\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(\n themeable(ButtonComponent, ButtonFrame.staticConfig),\n buttonStaticConfig\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Button"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
process.env.TAMAGUI_TARGET = "web";
|
|
2
|
+
import { getDefaultTamaguiConfig } from "@tamagui/config-default";
|
|
3
|
+
import { createTamagui } from "@tamagui/core";
|
|
4
|
+
import { describe, expect, test } from "vitest";
|
|
5
|
+
const conf = createTamagui(getDefaultTamaguiConfig());
|
|
6
|
+
describe("Button", () => {
|
|
7
|
+
test(`123`, () => {
|
|
8
|
+
expect(true).toBeTruthy();
|
|
9
|
+
});
|
|
10
|
+
});
|
|
11
|
+
//# sourceMappingURL=Button.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Button.test.tsx"],
|
|
4
|
+
"sourcesContent": ["process.env.TAMAGUI_TARGET = 'web'\n\nimport { getDefaultTamaguiConfig } from '@tamagui/config-default'\nimport { TamaguiProvider, createTamagui } from '@tamagui/core'\nimport { render } from '@testing-library/react'\nimport { describe, expect, test } from 'vitest'\n\nimport { Button } from '.'\n\nconst conf = createTamagui(getDefaultTamaguiConfig())\n\ndescribe('Button', () => {\n test(`123`, () => {\n expect(true).toBeTruthy()\n })\n\n // test(`Adapts to a when given accessibilityRole=\"link\"`, async () => {\n // const { container } = render(\n // <TamaguiProvider config={conf} defaultTheme=\"light\">\n // <Button href=\"http://google.com\" accessibilityRole=\"link\" />\n // </TamaguiProvider>\n // )\n\n // expect(container.firstChild).toMatchSnapshot()\n // })\n})\n"],
|
|
5
|
+
"mappings": "AAAA,QAAQ,IAAI,iBAAiB;AAE7B,SAAS,+BAA+B;AACxC,SAA0B,qBAAqB;AAE/C,SAAS,UAAU,QAAQ,YAAY;AAIvC,MAAM,OAAO,cAAc,wBAAwB,CAAC;AAEpD,SAAS,UAAU,MAAM;AACvB,OAAK,OAAO,MAAM;AAChB,WAAO,IAAI,EAAE,WAAW;AAAA,EAC1B,CAAC;AAWH,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=Buttont.test.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/button",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -28,19 +28,20 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@tamagui/core": "^1.0.
|
|
32
|
-
"@tamagui/font-size": "^1.0.
|
|
33
|
-
"@tamagui/get-button-sized": "^1.0.
|
|
34
|
-
"@tamagui/helpers-tamagui": "^1.0.
|
|
31
|
+
"@tamagui/core": "^1.0.4",
|
|
32
|
+
"@tamagui/font-size": "^1.0.4",
|
|
33
|
+
"@tamagui/get-button-sized": "^1.0.4",
|
|
34
|
+
"@tamagui/helpers-tamagui": "^1.0.4"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"react": "*",
|
|
38
38
|
"react-dom": "*"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.0.
|
|
41
|
+
"@tamagui/build": "^1.0.4",
|
|
42
42
|
"react": "^18.2.0",
|
|
43
|
-
"react-dom": "^18.2.0"
|
|
43
|
+
"react-dom": "^18.2.0",
|
|
44
|
+
"vitest": "^0.26.3"
|
|
44
45
|
},
|
|
45
46
|
"publishConfig": {
|
|
46
47
|
"access": "public"
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
process.env.TAMAGUI_TARGET = 'web'
|
|
2
|
+
|
|
3
|
+
import { getDefaultTamaguiConfig } from '@tamagui/config-default'
|
|
4
|
+
import { TamaguiProvider, createTamagui } from '@tamagui/core'
|
|
5
|
+
import { render } from '@testing-library/react'
|
|
6
|
+
import { describe, expect, test } from 'vitest'
|
|
7
|
+
|
|
8
|
+
import { Button } from '.'
|
|
9
|
+
|
|
10
|
+
const conf = createTamagui(getDefaultTamaguiConfig())
|
|
11
|
+
|
|
12
|
+
describe('Button', () => {
|
|
13
|
+
test(`123`, () => {
|
|
14
|
+
expect(true).toBeTruthy()
|
|
15
|
+
})
|
|
16
|
+
|
|
17
|
+
// test(`Adapts to a when given accessibilityRole="link"`, async () => {
|
|
18
|
+
// const { container } = render(
|
|
19
|
+
// <TamaguiProvider config={conf} defaultTheme="light">
|
|
20
|
+
// <Button href="http://google.com" accessibilityRole="link" />
|
|
21
|
+
// </TamaguiProvider>
|
|
22
|
+
// )
|
|
23
|
+
|
|
24
|
+
// expect(container.firstChild).toMatchSnapshot()
|
|
25
|
+
// })
|
|
26
|
+
})
|
package/src/Button.tsx
CHANGED
|
@@ -100,7 +100,7 @@ export const ButtonFrame = styled(ThemeableStack, {
|
|
|
100
100
|
} as const,
|
|
101
101
|
|
|
102
102
|
defaultVariants: {
|
|
103
|
-
size: '$
|
|
103
|
+
size: '$true',
|
|
104
104
|
},
|
|
105
105
|
})
|
|
106
106
|
|
|
@@ -120,7 +120,7 @@ export const ButtonText = styled(SizableText, {
|
|
|
120
120
|
|
|
121
121
|
export function useButton(
|
|
122
122
|
propsIn: ButtonProps,
|
|
123
|
-
{ Text = ButtonText }: { Text: any } = { Text: ButtonText }
|
|
123
|
+
{ Text = ButtonText }: { Text: any } = { Text: ButtonText }
|
|
124
124
|
) {
|
|
125
125
|
// careful not to desctructure and re-order props, order is important
|
|
126
126
|
const {
|
|
@@ -149,8 +149,7 @@ export function useButton(
|
|
|
149
149
|
const isNested = isRSC ? false : useContext(ButtonNestingContext)
|
|
150
150
|
const propsActive = useMediaPropsActive(propsIn)
|
|
151
151
|
const size = propsActive.size || '$4'
|
|
152
|
-
const iconSize =
|
|
153
|
-
(typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon
|
|
152
|
+
const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon
|
|
154
153
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
|
|
155
154
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
|
|
156
155
|
const spaceSize = getVariableValue(iconSize) * scaleSpace
|
|
@@ -186,9 +185,7 @@ export function useButton(
|
|
|
186
185
|
children: isRSC ? (
|
|
187
186
|
inner
|
|
188
187
|
) : (
|
|
189
|
-
<ButtonNestingContext.Provider value={true}>
|
|
190
|
-
{inner}
|
|
191
|
-
</ButtonNestingContext.Provider>
|
|
188
|
+
<ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
|
|
192
189
|
),
|
|
193
190
|
}
|
|
194
191
|
|
|
@@ -201,7 +198,7 @@ export function useButton(
|
|
|
201
198
|
|
|
202
199
|
const ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(
|
|
203
200
|
props,
|
|
204
|
-
ref
|
|
201
|
+
ref
|
|
205
202
|
) {
|
|
206
203
|
const { props: buttonProps } = useButton(props)
|
|
207
204
|
return <ButtonFrame {...buttonProps} ref={ref} />
|
|
@@ -222,5 +219,5 @@ export const buttonStaticConfig = {
|
|
|
222
219
|
|
|
223
220
|
export const Button = ButtonFrame.extractable(
|
|
224
221
|
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
225
|
-
buttonStaticConfig
|
|
222
|
+
buttonStaticConfig
|
|
226
223
|
)
|