@tamagui/button 1.13.3 → 1.14.0
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 -201
- package/dist/cjs/Button.js.map +2 -2
- package/dist/cjs/Button.test.js +1 -11
- package/dist/cjs/Button.test.js.map +2 -2
- package/dist/cjs/index.js +1 -18
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Button.js +1 -181
- package/dist/esm/Button.js.map +2 -2
- package/dist/esm/Button.mjs +1 -181
- package/dist/esm/Button.mjs.map +2 -2
- package/dist/esm/Button.test.js +1 -10
- package/dist/esm/Button.test.js.map +2 -2
- package/dist/esm/Button.test.mjs +1 -10
- package/dist/esm/Button.test.mjs.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/jsx/Button.js +1 -180
- package/dist/jsx/Button.js.map +2 -2
- package/dist/jsx/Button.mjs +1 -180
- package/dist/jsx/Button.mjs.map +2 -2
- package/dist/jsx/Button.test.js +1 -10
- package/dist/jsx/Button.test.js.map +2 -2
- package/dist/jsx/Button.test.mjs +1 -10
- package/dist/jsx/Button.test.mjs.map +2 -2
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +1 -1
- package/dist/jsx/index.mjs.map +1 -1
- package/package.json +7 -7
package/dist/esm/Button.mjs
CHANGED
|
@@ -1,182 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getFontSize } from "@tamagui/font-size";
|
|
3
|
-
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
4
|
-
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
5
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
6
|
-
import { SizableText, wrapChildrenInText } from "@tamagui/text";
|
|
7
|
-
import {
|
|
8
|
-
ButtonNestingContext,
|
|
9
|
-
getVariableValue,
|
|
10
|
-
isRSC,
|
|
11
|
-
spacedChildren,
|
|
12
|
-
styled,
|
|
13
|
-
themeable,
|
|
14
|
-
useMediaPropsActive
|
|
15
|
-
} from "@tamagui/web";
|
|
16
|
-
import { forwardRef, useContext } from "react";
|
|
17
|
-
const NAME = "Button";
|
|
18
|
-
const ButtonFrame = styled(ThemeableStack, {
|
|
19
|
-
name: NAME,
|
|
20
|
-
tag: "button",
|
|
21
|
-
justifyContent: "center",
|
|
22
|
-
alignItems: "center",
|
|
23
|
-
flexWrap: "nowrap",
|
|
24
|
-
flexDirection: "row",
|
|
25
|
-
cursor: "pointer",
|
|
26
|
-
variants: {
|
|
27
|
-
defaultStyle: {
|
|
28
|
-
true: {
|
|
29
|
-
focusable: true,
|
|
30
|
-
hoverTheme: true,
|
|
31
|
-
pressTheme: true,
|
|
32
|
-
backgrounded: true,
|
|
33
|
-
borderWidth: 1,
|
|
34
|
-
borderColor: "transparent",
|
|
35
|
-
pressStyle: {
|
|
36
|
-
borderColor: "transparent"
|
|
37
|
-
},
|
|
38
|
-
hoverStyle: {
|
|
39
|
-
borderColor: "transparent"
|
|
40
|
-
},
|
|
41
|
-
focusStyle: {
|
|
42
|
-
borderColor: "$borderColorFocus"
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
size: {
|
|
47
|
-
"...size": getButtonSized
|
|
48
|
-
},
|
|
49
|
-
active: {
|
|
50
|
-
true: {
|
|
51
|
-
hoverStyle: {
|
|
52
|
-
backgroundColor: "$background"
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
disabled: {
|
|
57
|
-
true: {
|
|
58
|
-
pointerEvents: "none"
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
defaultVariants: {
|
|
63
|
-
size: "$true"
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
const ButtonText = styled(SizableText, {
|
|
67
|
-
name: "ButtonText",
|
|
68
|
-
userSelect: "none",
|
|
69
|
-
cursor: "pointer",
|
|
70
|
-
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
71
|
-
flexGrow: 0,
|
|
72
|
-
flexShrink: 1,
|
|
73
|
-
ellipse: true,
|
|
74
|
-
variants: {
|
|
75
|
-
defaultStyle: {
|
|
76
|
-
true: {
|
|
77
|
-
color: "$color"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
const ButtonComponent = forwardRef(function Button(props, ref) {
|
|
83
|
-
const {
|
|
84
|
-
props: { unstyled, ...buttonProps }
|
|
85
|
-
} = useButton(props);
|
|
86
|
-
return /* @__PURE__ */ jsx(ButtonFrame, { defaultStyle: !unstyled, ...buttonProps, ref });
|
|
87
|
-
});
|
|
88
|
-
const buttonStaticConfig = {
|
|
89
|
-
inlineProps: /* @__PURE__ */ new Set([
|
|
90
|
-
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
91
|
-
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
92
|
-
"color",
|
|
93
|
-
"fontWeight",
|
|
94
|
-
"fontSize",
|
|
95
|
-
"fontFamily",
|
|
96
|
-
"fontStyle",
|
|
97
|
-
"letterSpacing",
|
|
98
|
-
"textAlign",
|
|
99
|
-
"unstyled"
|
|
100
|
-
])
|
|
101
|
-
};
|
|
102
|
-
const Button2 = ButtonFrame.extractable(
|
|
103
|
-
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
104
|
-
buttonStaticConfig
|
|
105
|
-
);
|
|
106
|
-
function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
107
|
-
const {
|
|
108
|
-
children,
|
|
109
|
-
icon,
|
|
110
|
-
iconAfter,
|
|
111
|
-
noTextWrap,
|
|
112
|
-
theme: themeName,
|
|
113
|
-
space,
|
|
114
|
-
spaceFlex,
|
|
115
|
-
scaleIcon = 1,
|
|
116
|
-
scaleSpace = 0.66,
|
|
117
|
-
separator,
|
|
118
|
-
// text props
|
|
119
|
-
color,
|
|
120
|
-
fontWeight,
|
|
121
|
-
letterSpacing,
|
|
122
|
-
fontSize,
|
|
123
|
-
fontFamily,
|
|
124
|
-
fontStyle,
|
|
125
|
-
textAlign,
|
|
126
|
-
textProps,
|
|
127
|
-
...rest
|
|
128
|
-
} = propsIn;
|
|
129
|
-
const isNested = isRSC ? false : useContext(ButtonNestingContext);
|
|
130
|
-
const propsActive = useMediaPropsActive(propsIn);
|
|
131
|
-
const size = propsActive.size || "$true";
|
|
132
|
-
const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
|
|
133
|
-
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
134
|
-
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
135
|
-
const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
|
|
136
|
-
const contents = wrapChildrenInText(
|
|
137
|
-
Text,
|
|
138
|
-
propsActive,
|
|
139
|
-
Text === ButtonText ? {
|
|
140
|
-
defaultStyle: !propsIn.unstyled
|
|
141
|
-
} : void 0
|
|
142
|
-
);
|
|
143
|
-
const inner = spacedChildren({
|
|
144
|
-
// a bit arbitrary but scaling to font size is necessary so long as button does
|
|
145
|
-
space: spaceSize,
|
|
146
|
-
spaceFlex,
|
|
147
|
-
separator,
|
|
148
|
-
direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
|
|
149
|
-
children: [themedIcon, ...contents, themedIconAfter]
|
|
150
|
-
});
|
|
151
|
-
const tag = isNested ? "span" : (
|
|
152
|
-
// defaults to <a /> when accessibilityRole = link
|
|
153
|
-
// see https://github.com/tamagui/tamagui/issues/505
|
|
154
|
-
propsIn.accessibilityRole === "link" ? "a" : void 0
|
|
155
|
-
);
|
|
156
|
-
const props = {
|
|
157
|
-
...propsActive.disabled && {
|
|
158
|
-
// in rnw - false still has keyboard tabIndex, undefined = not actually focusable
|
|
159
|
-
focusable: void 0,
|
|
160
|
-
// even with tabIndex unset, it will keep focusStyle on web so disable it here
|
|
161
|
-
focusStyle: {
|
|
162
|
-
borderColor: "$background"
|
|
163
|
-
}
|
|
164
|
-
},
|
|
165
|
-
tag,
|
|
166
|
-
...rest,
|
|
167
|
-
children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonNestingContext.Provider, { value: true, children: inner })
|
|
168
|
-
};
|
|
169
|
-
return {
|
|
170
|
-
spaceSize,
|
|
171
|
-
isNested,
|
|
172
|
-
props
|
|
173
|
-
};
|
|
174
|
-
}
|
|
175
|
-
export {
|
|
176
|
-
Button2 as Button,
|
|
177
|
-
ButtonFrame,
|
|
178
|
-
ButtonText,
|
|
179
|
-
buttonStaticConfig,
|
|
180
|
-
useButton
|
|
181
|
-
};
|
|
1
|
+
import{jsx as S}from"react/jsx-runtime";import{getFontSize as A}from"@tamagui/font-size";import{getButtonSized as k}from"@tamagui/get-button-sized";import{useGetThemedIcon as w}from"@tamagui/helpers-tamagui";import{ThemeableStack as $}from"@tamagui/stacks";import{SizableText as E,wrapChildrenInText as N}from"@tamagui/text";import{ButtonNestingContext as d,getVariableValue as W,isRSC as f,spacedChildren as G,styled as b,themeable as D,useMediaPropsActive as R}from"@tamagui/web";import{forwardRef as V,useContext as M}from"react";const J="Button",i=b($,{name:J,tag:"button",justifyContent:"center",alignItems:"center",flexWrap:"nowrap",flexDirection:"row",cursor:"pointer",variants:{defaultStyle:{true:{focusable:!0,hoverTheme:!0,pressTheme:!0,backgrounded:!0,borderWidth:1,borderColor:"transparent",pressStyle:{borderColor:"transparent"},hoverStyle:{borderColor:"transparent"},focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":k},active:{true:{hoverStyle:{backgroundColor:"$background"}}},disabled:{true:{pointerEvents:"none"}}},defaultVariants:{size:"$true"}}),c=b(E,{name:"ButtonText",userSelect:"none",cursor:"pointer",flexGrow:0,flexShrink:1,ellipse:!0,variants:{defaultStyle:{true:{color:"$color"}}}}),O=V(function(o,l){const{props:{unstyled:n,...r}}=j(o);return S(i,{defaultStyle:!n,...r,ref:l})}),X={inlineProps:new Set(["color","fontWeight","fontSize","fontFamily","fontStyle","letterSpacing","textAlign","unstyled"])},de=i.extractable(D(O,i.staticConfig),X);function j(t,{Text:o=c}={Text:c}){const{children:l,icon:n,iconAfter:r,noTextWrap:q,theme:H,space:K,spaceFlex:x,scaleIcon:y=1,scaleSpace:h=.66,separator:g,color:C,fontWeight:L,letterSpacing:Q,fontSize:U,fontFamily:Y,fontStyle:Z,textAlign:_,textProps:ee,...P}=t,a=f?!1:M(d),e=R(t),s=e.size||"$true",u=(typeof s=="number"?s*.5:A(s))*y,T=w({size:u,color:C}),[B,z]=[n,r].map(T),p=e.space??W(u)*h,v=N(o,e,o===c?{defaultStyle:!t.unstyled}:void 0),m=G({space:p,spaceFlex:x,separator:g,direction:e.flexDirection==="column"||e.flexDirection==="column-reverse"?"vertical":"horizontal",children:[B,...v,z]}),F=a?"span":t.accessibilityRole==="link"?"a":void 0,I={...e.disabled&&{focusable:void 0,focusStyle:{borderColor:"$background"}},tag:F,...P,children:f?m:S(d.Provider,{value:!0,children:m})};return{spaceSize:p,isNested:a,props:I}}export{de as Button,i as ButtonFrame,c as ButtonText,X as buttonStaticConfig,j as useButton};
|
|
182
2
|
//# sourceMappingURL=Button.mjs.map
|
package/dist/esm/Button.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
4
|
"sourcesContent": ["import { 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 {\n ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/web'\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 * @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 *\n */\n unstyled?: boolean\n }\n\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\n tag: 'button',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n cursor: 'pointer',\n\n variants: {\n defaultStyle: {\n true: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\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\nexport const ButtonText = styled(SizableText, {\n name: 'ButtonText',\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 variants: {\n defaultStyle: {\n true: {\n color: '$color',\n },\n },\n },\n})\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n props,\n ref\n) {\n const {\n props: { unstyled, ...buttonProps },\n } = useButton(props)\n return <ButtonFrame defaultStyle={!unstyled} {...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 'fontStyle',\n 'letterSpacing',\n 'textAlign',\n 'unstyled',\n ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n themeable(ButtonComponent, ButtonFrame.staticConfig),\n buttonStaticConfig\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 fontStyle,\n textAlign,\n textProps,\n\n ...rest\n } = propsIn\n\n const isNested = isRSC ? false : useContext(ButtonNestingContext)\n const propsActive = useMediaPropsActive(propsIn)\n const size = propsActive.size || '$true'\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(\n Text,\n propsActive,\n Text === ButtonText\n ? {\n defaultStyle: !propsIn.unstyled,\n }\n : undefined\n )\n const inner = 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\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n const tag = isNested\n ? 'span'\n : // defaults to <a /> when accessibilityRole = link\n // see https://github.com/tamagui/tamagui/issues/505\n propsIn.accessibilityRole === 'link'\n ? 'a'\n : undefined\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 tag,\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"],
|
|
5
|
-
"mappings": "AAyIS
|
|
6
|
-
"names": ["Button"]
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "getFontSize", "getButtonSized", "useGetThemedIcon", "ThemeableStack", "SizableText", "wrapChildrenInText", "ButtonNestingContext", "getVariableValue", "isRSC", "spacedChildren", "styled", "themeable", "useMediaPropsActive", "forwardRef", "useContext", "NAME", "ButtonFrame", "ButtonText", "ButtonComponent", "props", "ref", "unstyled", "buttonProps", "useButton", "buttonStaticConfig", "Button", "propsIn", "Text", "children", "icon", "iconAfter", "noTextWrap", "themeName", "space", "spaceFlex", "scaleIcon", "scaleSpace", "separator", "color", "fontWeight", "letterSpacing", "fontSize", "fontFamily", "fontStyle", "textAlign", "textProps", "rest", "isNested", "propsActive", "size", "iconSize", "getThemedIcon", "themedIcon", "themedIconAfter", "spaceSize", "contents", "inner", "tag"]
|
|
7
7
|
}
|
package/dist/esm/Button.test.js
CHANGED
|
@@ -1,11 +1,2 @@
|
|
|
1
|
-
process.env.TAMAGUI_TARGET
|
|
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
|
-
});
|
|
1
|
+
process.env.TAMAGUI_TARGET="web";import{getDefaultTamaguiConfig as r}from"@tamagui/config-default";import{createTamagui as t}from"@tamagui/core";import{describe as o,expect as e,test as m}from"vitest";const g=t(r());o("Button",()=>{m("123",()=>{e(!0).toBeTruthy()})});
|
|
11
2
|
//# sourceMappingURL=Button.test.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.test.tsx"],
|
|
4
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,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,QAAQ,IAAI,eAAiB,MAE7B,OAAS,2BAAAA,MAA+B,0BACxC,OAA0B,iBAAAC,MAAqB,gBAE/C,OAAS,YAAAC,EAAU,UAAAC,EAAQ,QAAAC,MAAY,SAIvC,MAAMC,EAAOJ,EAAcD,EAAwB,CAAC,EAEpDE,EAAS,SAAU,IAAM,CACvBE,EAAK,MAAO,IAAM,CAChBD,EAAO,EAAI,EAAE,WAAW,CAC1B,CAAC,CAWH,CAAC",
|
|
6
|
+
"names": ["getDefaultTamaguiConfig", "createTamagui", "describe", "expect", "test", "conf"]
|
|
7
7
|
}
|
package/dist/esm/Button.test.mjs
CHANGED
|
@@ -1,11 +1,2 @@
|
|
|
1
|
-
process.env.TAMAGUI_TARGET
|
|
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
|
-
});
|
|
1
|
+
process.env.TAMAGUI_TARGET="web";import{getDefaultTamaguiConfig as r}from"@tamagui/config-default";import{createTamagui as t}from"@tamagui/core";import{describe as o,expect as e,test as m}from"vitest";const g=t(r());o("Button",()=>{m("123",()=>{e(!0).toBeTruthy()})});
|
|
11
2
|
//# sourceMappingURL=Button.test.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.test.tsx"],
|
|
4
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,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,QAAQ,IAAI,eAAiB,MAE7B,OAAS,2BAAAA,MAA+B,0BACxC,OAA0B,iBAAAC,MAAqB,gBAE/C,OAAS,YAAAC,EAAU,UAAAC,EAAQ,QAAAC,MAAY,SAIvC,MAAMC,EAAOJ,EAAcD,EAAwB,CAAC,EAEpDE,EAAS,SAAU,IAAM,CACvBE,EAAK,MAAO,IAAM,CAChBD,EAAO,EAAI,EAAE,WAAW,CAC1B,CAAC,CAWH,CAAC",
|
|
6
|
+
"names": ["getDefaultTamaguiConfig", "createTamagui", "describe", "expect", "test", "conf"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./Button";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./Button";
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
package/dist/jsx/Button.js
CHANGED
|
@@ -1,181 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
3
|
-
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
4
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
5
|
-
import { SizableText, wrapChildrenInText } from "@tamagui/text";
|
|
6
|
-
import {
|
|
7
|
-
ButtonNestingContext,
|
|
8
|
-
getVariableValue,
|
|
9
|
-
isRSC,
|
|
10
|
-
spacedChildren,
|
|
11
|
-
styled,
|
|
12
|
-
themeable,
|
|
13
|
-
useMediaPropsActive
|
|
14
|
-
} from "@tamagui/web";
|
|
15
|
-
import { forwardRef, useContext } from "react";
|
|
16
|
-
const NAME = "Button";
|
|
17
|
-
const ButtonFrame = styled(ThemeableStack, {
|
|
18
|
-
name: NAME,
|
|
19
|
-
tag: "button",
|
|
20
|
-
justifyContent: "center",
|
|
21
|
-
alignItems: "center",
|
|
22
|
-
flexWrap: "nowrap",
|
|
23
|
-
flexDirection: "row",
|
|
24
|
-
cursor: "pointer",
|
|
25
|
-
variants: {
|
|
26
|
-
defaultStyle: {
|
|
27
|
-
true: {
|
|
28
|
-
focusable: true,
|
|
29
|
-
hoverTheme: true,
|
|
30
|
-
pressTheme: true,
|
|
31
|
-
backgrounded: true,
|
|
32
|
-
borderWidth: 1,
|
|
33
|
-
borderColor: "transparent",
|
|
34
|
-
pressStyle: {
|
|
35
|
-
borderColor: "transparent"
|
|
36
|
-
},
|
|
37
|
-
hoverStyle: {
|
|
38
|
-
borderColor: "transparent"
|
|
39
|
-
},
|
|
40
|
-
focusStyle: {
|
|
41
|
-
borderColor: "$borderColorFocus"
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
size: {
|
|
46
|
-
"...size": getButtonSized
|
|
47
|
-
},
|
|
48
|
-
active: {
|
|
49
|
-
true: {
|
|
50
|
-
hoverStyle: {
|
|
51
|
-
backgroundColor: "$background"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
disabled: {
|
|
56
|
-
true: {
|
|
57
|
-
pointerEvents: "none"
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
defaultVariants: {
|
|
62
|
-
size: "$true"
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
const ButtonText = styled(SizableText, {
|
|
66
|
-
name: "ButtonText",
|
|
67
|
-
userSelect: "none",
|
|
68
|
-
cursor: "pointer",
|
|
69
|
-
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
70
|
-
flexGrow: 0,
|
|
71
|
-
flexShrink: 1,
|
|
72
|
-
ellipse: true,
|
|
73
|
-
variants: {
|
|
74
|
-
defaultStyle: {
|
|
75
|
-
true: {
|
|
76
|
-
color: "$color"
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
const ButtonComponent = forwardRef(function Button(props, ref) {
|
|
82
|
-
const {
|
|
83
|
-
props: { unstyled, ...buttonProps }
|
|
84
|
-
} = useButton(props);
|
|
85
|
-
return <ButtonFrame defaultStyle={!unstyled} {...buttonProps} ref={ref} />;
|
|
86
|
-
});
|
|
87
|
-
const buttonStaticConfig = {
|
|
88
|
-
inlineProps: /* @__PURE__ */ new Set([
|
|
89
|
-
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
90
|
-
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
91
|
-
"color",
|
|
92
|
-
"fontWeight",
|
|
93
|
-
"fontSize",
|
|
94
|
-
"fontFamily",
|
|
95
|
-
"fontStyle",
|
|
96
|
-
"letterSpacing",
|
|
97
|
-
"textAlign",
|
|
98
|
-
"unstyled"
|
|
99
|
-
])
|
|
100
|
-
};
|
|
101
|
-
const Button2 = ButtonFrame.extractable(
|
|
102
|
-
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
103
|
-
buttonStaticConfig
|
|
104
|
-
);
|
|
105
|
-
function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
106
|
-
const {
|
|
107
|
-
children,
|
|
108
|
-
icon,
|
|
109
|
-
iconAfter,
|
|
110
|
-
noTextWrap,
|
|
111
|
-
theme: themeName,
|
|
112
|
-
space,
|
|
113
|
-
spaceFlex,
|
|
114
|
-
scaleIcon = 1,
|
|
115
|
-
scaleSpace = 0.66,
|
|
116
|
-
separator,
|
|
117
|
-
// text props
|
|
118
|
-
color,
|
|
119
|
-
fontWeight,
|
|
120
|
-
letterSpacing,
|
|
121
|
-
fontSize,
|
|
122
|
-
fontFamily,
|
|
123
|
-
fontStyle,
|
|
124
|
-
textAlign,
|
|
125
|
-
textProps,
|
|
126
|
-
...rest
|
|
127
|
-
} = propsIn;
|
|
128
|
-
const isNested = isRSC ? false : useContext(ButtonNestingContext);
|
|
129
|
-
const propsActive = useMediaPropsActive(propsIn);
|
|
130
|
-
const size = propsActive.size || "$true";
|
|
131
|
-
const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
|
|
132
|
-
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
133
|
-
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
134
|
-
const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
|
|
135
|
-
const contents = wrapChildrenInText(
|
|
136
|
-
Text,
|
|
137
|
-
propsActive,
|
|
138
|
-
Text === ButtonText ? {
|
|
139
|
-
defaultStyle: !propsIn.unstyled
|
|
140
|
-
} : void 0
|
|
141
|
-
);
|
|
142
|
-
const inner = spacedChildren({
|
|
143
|
-
// a bit arbitrary but scaling to font size is necessary so long as button does
|
|
144
|
-
space: spaceSize,
|
|
145
|
-
spaceFlex,
|
|
146
|
-
separator,
|
|
147
|
-
direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
|
|
148
|
-
children: [themedIcon, ...contents, themedIconAfter]
|
|
149
|
-
});
|
|
150
|
-
const tag = isNested ? "span" : (
|
|
151
|
-
// defaults to <a /> when accessibilityRole = link
|
|
152
|
-
// see https://github.com/tamagui/tamagui/issues/505
|
|
153
|
-
propsIn.accessibilityRole === "link" ? "a" : void 0
|
|
154
|
-
);
|
|
155
|
-
const props = {
|
|
156
|
-
...propsActive.disabled && {
|
|
157
|
-
// in rnw - false still has keyboard tabIndex, undefined = not actually focusable
|
|
158
|
-
focusable: void 0,
|
|
159
|
-
// even with tabIndex unset, it will keep focusStyle on web so disable it here
|
|
160
|
-
focusStyle: {
|
|
161
|
-
borderColor: "$background"
|
|
162
|
-
}
|
|
163
|
-
},
|
|
164
|
-
tag,
|
|
165
|
-
...rest,
|
|
166
|
-
children: isRSC ? inner : <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
|
|
167
|
-
};
|
|
168
|
-
return {
|
|
169
|
-
spaceSize,
|
|
170
|
-
isNested,
|
|
171
|
-
props
|
|
172
|
-
};
|
|
173
|
-
}
|
|
174
|
-
export {
|
|
175
|
-
Button2 as Button,
|
|
176
|
-
ButtonFrame,
|
|
177
|
-
ButtonText,
|
|
178
|
-
buttonStaticConfig,
|
|
179
|
-
useButton
|
|
180
|
-
};
|
|
1
|
+
import{getFontSize as R}from"@tamagui/font-size";import{getButtonSized as V}from"@tamagui/get-button-sized";import{useGetThemedIcon as M}from"@tamagui/helpers-tamagui";import{ThemeableStack as j}from"@tamagui/stacks";import{SizableText as J,wrapChildrenInText as O}from"@tamagui/text";import{ButtonNestingContext as T,getVariableValue as X,isRSC as B,spacedChildren as q,styled as z,themeable as H,useMediaPropsActive as K}from"@tamagui/web";import{forwardRef as L,useContext as Q}from"react";const U="Button",S=z(j,{name:U,tag:"button",justifyContent:"center",alignItems:"center",flexWrap:"nowrap",flexDirection:"row",cursor:"pointer",variants:{defaultStyle:{true:{focusable:!0,hoverTheme:!0,pressTheme:!0,backgrounded:!0,borderWidth:1,borderColor:"transparent",pressStyle:{borderColor:"transparent"},hoverStyle:{borderColor:"transparent"},focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":V},active:{true:{hoverStyle:{backgroundColor:"$background"}}},disabled:{true:{pointerEvents:"none"}}},defaultVariants:{size:"$true"}}),x=z(J,{name:"ButtonText",userSelect:"none",cursor:"pointer",flexGrow:0,flexShrink:1,ellipse:!0,variants:{defaultStyle:{true:{color:"$color"}}}}),Y=L(function(o,y){const{props:{unstyled:n,...r}}=_(o);return<S defaultStyle={!n}{...r}ref={y}/>}),Z={inlineProps:new Set(["color","fontWeight","fontSize","fontFamily","fontStyle","letterSpacing","textAlign","unstyled"])},Pe=S.extractable(H(Y,S.staticConfig),Z);function _(t,{Text:o=x}={Text:x}){const{children:y,icon:n,iconAfter:r,noTextWrap:ee,theme:te,space:oe,spaceFlex:v,scaleIcon:F=1,scaleSpace:I=.66,separator:A,color:k,fontWeight:ne,letterSpacing:re,fontSize:se,fontFamily:ie,fontStyle:ce,textAlign:le,textProps:ae,...w}=t,h=B?!1:Q(T),e=K(t),s=e.size||"$true",g=(typeof s=="number"?s*.5:R(s))*F,$=M({size:g,color:k}),[E,N]=[n,r].map($),C=e.space??X(g)*I,W=O(o,e,o===x?{defaultStyle:!t.unstyled}:void 0),P=q({space:C,spaceFlex:v,separator:A,direction:e.flexDirection==="column"||e.flexDirection==="column-reverse"?"vertical":"horizontal",children:[E,...W,N]}),G=h?"span":t.accessibilityRole==="link"?"a":void 0,D={...e.disabled&&{focusable:void 0,focusStyle:{borderColor:"$background"}},tag:G,...w,children:B?P:<T.Provider value={!0}>{P}</T.Provider>};return{spaceSize:C,isNested:h,props:D}}export{Pe as Button,S as ButtonFrame,x as ButtonText,Z as buttonStaticConfig,_ as useButton};
|
|
181
2
|
//# sourceMappingURL=Button.js.map
|
package/dist/jsx/Button.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
4
|
"sourcesContent": ["import { 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 {\n ButtonNestingContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/web'\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 * @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 *\n */\n unstyled?: boolean\n }\n\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\n tag: 'button',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n cursor: 'pointer',\n\n variants: {\n defaultStyle: {\n true: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\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\nexport const ButtonText = styled(SizableText, {\n name: 'ButtonText',\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 variants: {\n defaultStyle: {\n true: {\n color: '$color',\n },\n },\n },\n})\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n props,\n ref\n) {\n const {\n props: { unstyled, ...buttonProps },\n } = useButton(props)\n return <ButtonFrame defaultStyle={!unstyled} {...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 'fontStyle',\n 'letterSpacing',\n 'textAlign',\n 'unstyled',\n ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n themeable(ButtonComponent, ButtonFrame.staticConfig),\n buttonStaticConfig\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 fontStyle,\n textAlign,\n textProps,\n\n ...rest\n } = propsIn\n\n const isNested = isRSC ? false : useContext(ButtonNestingContext)\n const propsActive = useMediaPropsActive(propsIn)\n const size = propsActive.size || '$true'\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(\n Text,\n propsActive,\n Text === ButtonText\n ? {\n defaultStyle: !propsIn.unstyled,\n }\n : undefined\n )\n const inner = 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\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n const tag = isNested\n ? 'span'\n : // defaults to <a /> when accessibilityRole = link\n // see https://github.com/tamagui/tamagui/issues/505\n propsIn.accessibilityRole === 'link'\n ? 'a'\n : undefined\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 tag,\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"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": ["Button"]
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["getFontSize", "getButtonSized", "useGetThemedIcon", "ThemeableStack", "SizableText", "wrapChildrenInText", "ButtonNestingContext", "getVariableValue", "isRSC", "spacedChildren", "styled", "themeable", "useMediaPropsActive", "forwardRef", "useContext", "NAME", "ButtonFrame", "ButtonText", "ButtonComponent", "props", "ref", "unstyled", "buttonProps", "useButton", "buttonStaticConfig", "Button", "propsIn", "Text", "children", "icon", "iconAfter", "noTextWrap", "themeName", "space", "spaceFlex", "scaleIcon", "scaleSpace", "separator", "color", "fontWeight", "letterSpacing", "fontSize", "fontFamily", "fontStyle", "textAlign", "textProps", "rest", "isNested", "propsActive", "size", "iconSize", "getThemedIcon", "themedIcon", "themedIconAfter", "spaceSize", "contents", "inner", "tag"]
|
|
7
7
|
}
|