@tamagui/button 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Button.js +58 -39
- package/dist/cjs/Button.js.map +2 -2
- package/dist/esm/Button.js +58 -39
- package/dist/esm/Button.js.map +2 -2
- package/dist/jsx/Button.js +58 -39
- package/dist/jsx/Button.js.map +2 -2
- package/package.json +6 -6
- package/src/Button.tsx +74 -53
- package/types/Button.d.ts +200 -192
- package/types/Button.d.ts.map +1 -1
package/dist/cjs/Button.js
CHANGED
|
@@ -37,28 +37,31 @@ const NAME = "Button";
|
|
|
37
37
|
const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
38
38
|
name: NAME,
|
|
39
39
|
tag: "button",
|
|
40
|
-
focusable: true,
|
|
41
|
-
hoverTheme: true,
|
|
42
|
-
pressTheme: true,
|
|
43
|
-
backgrounded: true,
|
|
44
|
-
borderWidth: 1,
|
|
45
|
-
borderColor: "transparent",
|
|
46
40
|
justifyContent: "center",
|
|
47
41
|
alignItems: "center",
|
|
48
42
|
flexWrap: "nowrap",
|
|
49
43
|
flexDirection: "row",
|
|
50
|
-
// if we wanted this only when pressable = true, we'd need to merge variants?
|
|
51
44
|
cursor: "pointer",
|
|
52
|
-
pressStyle: {
|
|
53
|
-
borderColor: "transparent"
|
|
54
|
-
},
|
|
55
|
-
hoverStyle: {
|
|
56
|
-
borderColor: "transparent"
|
|
57
|
-
},
|
|
58
|
-
focusStyle: {
|
|
59
|
-
borderColor: "$borderColorFocus"
|
|
60
|
-
},
|
|
61
45
|
variants: {
|
|
46
|
+
defaultStyle: {
|
|
47
|
+
true: {
|
|
48
|
+
focusable: true,
|
|
49
|
+
hoverTheme: true,
|
|
50
|
+
pressTheme: true,
|
|
51
|
+
backgrounded: true,
|
|
52
|
+
borderWidth: 1,
|
|
53
|
+
borderColor: "transparent",
|
|
54
|
+
pressStyle: {
|
|
55
|
+
borderColor: "transparent"
|
|
56
|
+
},
|
|
57
|
+
hoverStyle: {
|
|
58
|
+
borderColor: "transparent"
|
|
59
|
+
},
|
|
60
|
+
focusStyle: {
|
|
61
|
+
borderColor: "$borderColorFocus"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
62
65
|
size: {
|
|
63
66
|
"...size": import_get_button_sized.getButtonSized
|
|
64
67
|
},
|
|
@@ -80,14 +83,44 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
80
83
|
}
|
|
81
84
|
});
|
|
82
85
|
const ButtonText = (0, import_core.styled)(import_text.SizableText, {
|
|
83
|
-
|
|
86
|
+
name: "ButtonText",
|
|
84
87
|
userSelect: "none",
|
|
85
88
|
cursor: "pointer",
|
|
86
89
|
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
87
90
|
flexGrow: 0,
|
|
88
91
|
flexShrink: 1,
|
|
89
|
-
ellipse: true
|
|
92
|
+
ellipse: true,
|
|
93
|
+
variants: {
|
|
94
|
+
defaultStyle: {
|
|
95
|
+
true: {
|
|
96
|
+
color: "$color"
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
90
100
|
});
|
|
101
|
+
const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {
|
|
102
|
+
const {
|
|
103
|
+
props: { unstyled, ...buttonProps }
|
|
104
|
+
} = useButton(props);
|
|
105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { defaultStyle: !unstyled, ...buttonProps, ref });
|
|
106
|
+
});
|
|
107
|
+
const buttonStaticConfig = {
|
|
108
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
109
|
+
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
110
|
+
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
111
|
+
"color",
|
|
112
|
+
"fontWeight",
|
|
113
|
+
"fontSize",
|
|
114
|
+
"fontFamily",
|
|
115
|
+
"letterSpacing",
|
|
116
|
+
"textAlign",
|
|
117
|
+
"unstyled"
|
|
118
|
+
])
|
|
119
|
+
};
|
|
120
|
+
const Button2 = ButtonFrame.extractable(
|
|
121
|
+
(0, import_core.themeable)(ButtonComponent, ButtonFrame.staticConfig),
|
|
122
|
+
buttonStaticConfig
|
|
123
|
+
);
|
|
91
124
|
function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
92
125
|
const {
|
|
93
126
|
children,
|
|
@@ -117,7 +150,13 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
|
117
150
|
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
118
151
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
119
152
|
const spaceSize = propsActive.space ?? (0, import_core.getVariableValue)(iconSize) * scaleSpace;
|
|
120
|
-
const contents = (0, import_text.wrapChildrenInText)(
|
|
153
|
+
const contents = (0, import_text.wrapChildrenInText)(
|
|
154
|
+
Text,
|
|
155
|
+
propsActive,
|
|
156
|
+
Text === ButtonText ? {
|
|
157
|
+
defaultStyle: !propsIn.unstyled
|
|
158
|
+
} : void 0
|
|
159
|
+
);
|
|
121
160
|
const inner = (0, import_core.spacedChildren)({
|
|
122
161
|
// a bit arbitrary but scaling to font size is necessary so long as button does
|
|
123
162
|
space: spaceSize,
|
|
@@ -150,26 +189,6 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
|
150
189
|
props
|
|
151
190
|
};
|
|
152
191
|
}
|
|
153
|
-
const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {
|
|
154
|
-
const { props: buttonProps } = useButton(props);
|
|
155
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { ...buttonProps, ref });
|
|
156
|
-
});
|
|
157
|
-
const buttonStaticConfig = {
|
|
158
|
-
inlineProps: /* @__PURE__ */ new Set([
|
|
159
|
-
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
160
|
-
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
161
|
-
"color",
|
|
162
|
-
"fontWeight",
|
|
163
|
-
"fontSize",
|
|
164
|
-
"fontFamily",
|
|
165
|
-
"letterSpacing",
|
|
166
|
-
"textAlign"
|
|
167
|
-
])
|
|
168
|
-
};
|
|
169
|
-
const Button2 = ButtonFrame.extractable(
|
|
170
|
-
(0, import_core.themeable)(ButtonComponent, ButtonFrame.staticConfig),
|
|
171
|
-
buttonStaticConfig
|
|
172
|
-
);
|
|
173
192
|
// Annotate the CommonJS export names for ESM import in node:
|
|
174
193
|
0 && (module.exports = {
|
|
175
194
|
Button,
|
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
|
|
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 * @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 '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 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 || '$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;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyIS;AAzIT,kBAWO;AACP,uBAA4B;AAC5B,8BAA+B;AAC/B,6BAAiC;AACjC,oBAA+B;AAC/B,kBAAkE;AAClE,mBAA0D;AAoC1D,MAAM,OAAO;AAEN,MAAM,kBAAc,oBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QAEb,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,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;AAEM,MAAM,iBAAa,oBAAO,yBAAa;AAAA,EAC5C,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AAAA;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EAET,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAED,MAAM,sBAAkB,yBAAwC,SAAS,OACvE,OACA,KACA;AACA,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,GAAG,YAAY;AAAA,EACpC,IAAI,UAAU,KAAK;AACnB,SAAO,4CAAC,eAAY,cAAc,CAAC,UAAW,GAAG,aAAa,KAAU;AAC1E,CAAC;AAEM,MAAM,qBAAqB;AAAA,EAChC,aAAa,oBAAI,IAAI;AAAA;AAAA;AAAA,IAGnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAMA,UAAS,YAAY;AAAA,MAChC,uBAAU,iBAAiB,YAAY,YAAY;AAAA,EACnD;AACF;AAEO,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;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,WAAW,oBAAQ,YAAQ,yBAAW,gCAAoB;AAChE,QAAM,kBAAc,iCAAoB,OAAO;AAC/C,QAAM,OAAO,YAAY,QAAQ;AACjC,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,YAAY,YAAY,aAAS,8BAAiB,QAAQ,IAAI;AACpE,QAAM,eAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS,aACL;AAAA,MACE,cAAc,CAAC,QAAQ;AAAA,IACzB,IACA;AAAA,EACN;AACA,QAAM,YAAQ,4BAAe;AAAA;AAAA,IAE3B,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,YAAY,kBAAkB,YAC9B,YAAY,kBAAkB,mBAC1B,aACA;AAAA,IACN,UAAU,CAAC,YAAY,GAAG,UAAU,eAAe;AAAA,EACrD,CAAC;AAGD,QAAM,MAAM,WACR;AAAA;AAAA;AAAA,IAGF,QAAQ,sBAAsB,SAC5B,MACA;AAAA;AAEJ,QAAM,QAAQ;AAAA,IACZ,GAAI,YAAY,YAAY;AAAA;AAAA,MAE1B,WAAW;AAAA;AAAA,MAEX,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,oBACR,QAEA,4CAAC,iCAAqB,UAArB,EAA8B,OAAO,MAAO,iBAAM;AAAA,EAEvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["Button"]
|
|
7
7
|
}
|
package/dist/esm/Button.js
CHANGED
|
@@ -18,28 +18,31 @@ const NAME = "Button";
|
|
|
18
18
|
const ButtonFrame = styled(ThemeableStack, {
|
|
19
19
|
name: NAME,
|
|
20
20
|
tag: "button",
|
|
21
|
-
focusable: true,
|
|
22
|
-
hoverTheme: true,
|
|
23
|
-
pressTheme: true,
|
|
24
|
-
backgrounded: true,
|
|
25
|
-
borderWidth: 1,
|
|
26
|
-
borderColor: "transparent",
|
|
27
21
|
justifyContent: "center",
|
|
28
22
|
alignItems: "center",
|
|
29
23
|
flexWrap: "nowrap",
|
|
30
24
|
flexDirection: "row",
|
|
31
|
-
// if we wanted this only when pressable = true, we'd need to merge variants?
|
|
32
25
|
cursor: "pointer",
|
|
33
|
-
pressStyle: {
|
|
34
|
-
borderColor: "transparent"
|
|
35
|
-
},
|
|
36
|
-
hoverStyle: {
|
|
37
|
-
borderColor: "transparent"
|
|
38
|
-
},
|
|
39
|
-
focusStyle: {
|
|
40
|
-
borderColor: "$borderColorFocus"
|
|
41
|
-
},
|
|
42
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
|
+
},
|
|
43
46
|
size: {
|
|
44
47
|
"...size": getButtonSized
|
|
45
48
|
},
|
|
@@ -61,14 +64,44 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
61
64
|
}
|
|
62
65
|
});
|
|
63
66
|
const ButtonText = styled(SizableText, {
|
|
64
|
-
|
|
67
|
+
name: "ButtonText",
|
|
65
68
|
userSelect: "none",
|
|
66
69
|
cursor: "pointer",
|
|
67
70
|
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
68
71
|
flexGrow: 0,
|
|
69
72
|
flexShrink: 1,
|
|
70
|
-
ellipse: true
|
|
73
|
+
ellipse: true,
|
|
74
|
+
variants: {
|
|
75
|
+
defaultStyle: {
|
|
76
|
+
true: {
|
|
77
|
+
color: "$color"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
71
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
|
+
"letterSpacing",
|
|
97
|
+
"textAlign",
|
|
98
|
+
"unstyled"
|
|
99
|
+
])
|
|
100
|
+
};
|
|
101
|
+
const Button2 = ButtonFrame.extractable(
|
|
102
|
+
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
103
|
+
buttonStaticConfig
|
|
104
|
+
);
|
|
72
105
|
function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
73
106
|
const {
|
|
74
107
|
children,
|
|
@@ -98,7 +131,13 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
|
98
131
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
99
132
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
100
133
|
const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
|
|
101
|
-
const contents = wrapChildrenInText(
|
|
134
|
+
const contents = wrapChildrenInText(
|
|
135
|
+
Text,
|
|
136
|
+
propsActive,
|
|
137
|
+
Text === ButtonText ? {
|
|
138
|
+
defaultStyle: !propsIn.unstyled
|
|
139
|
+
} : void 0
|
|
140
|
+
);
|
|
102
141
|
const inner = spacedChildren({
|
|
103
142
|
// a bit arbitrary but scaling to font size is necessary so long as button does
|
|
104
143
|
space: spaceSize,
|
|
@@ -131,26 +170,6 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
|
131
170
|
props
|
|
132
171
|
};
|
|
133
172
|
}
|
|
134
|
-
const ButtonComponent = forwardRef(function Button(props, ref) {
|
|
135
|
-
const { props: buttonProps } = useButton(props);
|
|
136
|
-
return /* @__PURE__ */ jsx(ButtonFrame, { ...buttonProps, ref });
|
|
137
|
-
});
|
|
138
|
-
const buttonStaticConfig = {
|
|
139
|
-
inlineProps: /* @__PURE__ */ new Set([
|
|
140
|
-
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
141
|
-
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
142
|
-
"color",
|
|
143
|
-
"fontWeight",
|
|
144
|
-
"fontSize",
|
|
145
|
-
"fontFamily",
|
|
146
|
-
"letterSpacing",
|
|
147
|
-
"textAlign"
|
|
148
|
-
])
|
|
149
|
-
};
|
|
150
|
-
const Button2 = ButtonFrame.extractable(
|
|
151
|
-
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
152
|
-
buttonStaticConfig
|
|
153
|
-
);
|
|
154
173
|
export {
|
|
155
174
|
Button2 as Button,
|
|
156
175
|
ButtonFrame,
|
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
|
|
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 * @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 '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 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 || '$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": "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",
|
|
6
6
|
"names": ["Button"]
|
|
7
7
|
}
|
package/dist/jsx/Button.js
CHANGED
|
@@ -17,28 +17,31 @@ const NAME = "Button";
|
|
|
17
17
|
const ButtonFrame = styled(ThemeableStack, {
|
|
18
18
|
name: NAME,
|
|
19
19
|
tag: "button",
|
|
20
|
-
focusable: true,
|
|
21
|
-
hoverTheme: true,
|
|
22
|
-
pressTheme: true,
|
|
23
|
-
backgrounded: true,
|
|
24
|
-
borderWidth: 1,
|
|
25
|
-
borderColor: "transparent",
|
|
26
20
|
justifyContent: "center",
|
|
27
21
|
alignItems: "center",
|
|
28
22
|
flexWrap: "nowrap",
|
|
29
23
|
flexDirection: "row",
|
|
30
|
-
// if we wanted this only when pressable = true, we'd need to merge variants?
|
|
31
24
|
cursor: "pointer",
|
|
32
|
-
pressStyle: {
|
|
33
|
-
borderColor: "transparent"
|
|
34
|
-
},
|
|
35
|
-
hoverStyle: {
|
|
36
|
-
borderColor: "transparent"
|
|
37
|
-
},
|
|
38
|
-
focusStyle: {
|
|
39
|
-
borderColor: "$borderColorFocus"
|
|
40
|
-
},
|
|
41
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
|
+
},
|
|
42
45
|
size: {
|
|
43
46
|
"...size": getButtonSized
|
|
44
47
|
},
|
|
@@ -60,14 +63,44 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
60
63
|
}
|
|
61
64
|
});
|
|
62
65
|
const ButtonText = styled(SizableText, {
|
|
63
|
-
|
|
66
|
+
name: "ButtonText",
|
|
64
67
|
userSelect: "none",
|
|
65
68
|
cursor: "pointer",
|
|
66
69
|
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
67
70
|
flexGrow: 0,
|
|
68
71
|
flexShrink: 1,
|
|
69
|
-
ellipse: true
|
|
72
|
+
ellipse: true,
|
|
73
|
+
variants: {
|
|
74
|
+
defaultStyle: {
|
|
75
|
+
true: {
|
|
76
|
+
color: "$color"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
70
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
|
+
"letterSpacing",
|
|
96
|
+
"textAlign",
|
|
97
|
+
"unstyled"
|
|
98
|
+
])
|
|
99
|
+
};
|
|
100
|
+
const Button2 = ButtonFrame.extractable(
|
|
101
|
+
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
102
|
+
buttonStaticConfig
|
|
103
|
+
);
|
|
71
104
|
function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
72
105
|
const {
|
|
73
106
|
children,
|
|
@@ -97,7 +130,13 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
|
97
130
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
98
131
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
99
132
|
const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
|
|
100
|
-
const contents = wrapChildrenInText(
|
|
133
|
+
const contents = wrapChildrenInText(
|
|
134
|
+
Text,
|
|
135
|
+
propsActive,
|
|
136
|
+
Text === ButtonText ? {
|
|
137
|
+
defaultStyle: !propsIn.unstyled
|
|
138
|
+
} : void 0
|
|
139
|
+
);
|
|
101
140
|
const inner = spacedChildren({
|
|
102
141
|
// a bit arbitrary but scaling to font size is necessary so long as button does
|
|
103
142
|
space: spaceSize,
|
|
@@ -130,26 +169,6 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
|
130
169
|
props
|
|
131
170
|
};
|
|
132
171
|
}
|
|
133
|
-
const ButtonComponent = forwardRef(function Button(props, ref) {
|
|
134
|
-
const { props: buttonProps } = useButton(props);
|
|
135
|
-
return <ButtonFrame {...buttonProps} ref={ref} />;
|
|
136
|
-
});
|
|
137
|
-
const buttonStaticConfig = {
|
|
138
|
-
inlineProps: /* @__PURE__ */ new Set([
|
|
139
|
-
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
140
|
-
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
141
|
-
"color",
|
|
142
|
-
"fontWeight",
|
|
143
|
-
"fontSize",
|
|
144
|
-
"fontFamily",
|
|
145
|
-
"letterSpacing",
|
|
146
|
-
"textAlign"
|
|
147
|
-
])
|
|
148
|
-
};
|
|
149
|
-
const Button2 = ButtonFrame.extractable(
|
|
150
|
-
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
151
|
-
buttonStaticConfig
|
|
152
|
-
);
|
|
153
172
|
export {
|
|
154
173
|
Button2 as Button,
|
|
155
174
|
ButtonFrame,
|
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
|
|
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;
|
|
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 * @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 '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 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 || '$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": "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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.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@tamagui/core": "^1.2.
|
|
33
|
-
"@tamagui/font-size": "^1.2.
|
|
34
|
-
"@tamagui/get-button-sized": "^1.2.
|
|
35
|
-
"@tamagui/helpers-tamagui": "^1.2.
|
|
32
|
+
"@tamagui/core": "^1.2.5",
|
|
33
|
+
"@tamagui/font-size": "^1.2.5",
|
|
34
|
+
"@tamagui/get-button-sized": "^1.2.5",
|
|
35
|
+
"@tamagui/helpers-tamagui": "^1.2.5"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": "*",
|
|
39
39
|
"react-dom": "*"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@tamagui/build": "^1.2.
|
|
42
|
+
"@tamagui/build": "^1.2.5",
|
|
43
43
|
"react": "^18.2.0",
|
|
44
44
|
"react-dom": "^18.2.0",
|
|
45
45
|
"vitest": "^0.26.3"
|