@tamagui/button 2.7.7 → 3.0.0-beta.643.1
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.cjs +180 -266
- package/dist/cjs/Button.native.cjs +224 -0
- package/dist/cjs/Button.native.js +200 -271
- package/dist/cjs/Button.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +21 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/Button.mjs +168 -255
- package/dist/esm/Button.mjs.map +1 -1
- package/dist/esm/Button.native.js +188 -261
- package/dist/esm/Button.native.js.map +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/dist/jsx/Button.mjs +168 -255
- package/dist/jsx/Button.mjs.map +1 -1
- package/dist/jsx/Button.native.cjs +224 -0
- package/dist/jsx/Button.native.js +200 -271
- package/dist/jsx/Button.native.js.map +1 -1
- package/dist/jsx/index.js +1 -2
- package/dist/jsx/index.mjs +1 -2
- package/dist/jsx/index.native.cjs +21 -0
- package/dist/jsx/index.native.js +10 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/package.json +11 -12
- package/src/Button.tsx +222 -280
- package/types/Button.d.ts +218 -114
- package/types/Button.d.ts.map +1 -1
- package/dist/cjs/Button.test.cjs +0 -37
- package/dist/cjs/Button.test.native.js +0 -40
- package/dist/cjs/Button.test.native.js.map +0 -1
- package/dist/esm/Button.test.mjs +0 -38
- package/dist/esm/Button.test.mjs.map +0 -1
- package/dist/esm/Button.test.native.js +0 -38
- package/dist/esm/Button.test.native.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/Button.test.mjs +0 -38
- package/dist/jsx/Button.test.mjs.map +0 -1
- package/dist/jsx/Button.test.native.js +0 -40
- package/dist/jsx/Button.test.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
- package/src/Button.test.tsx +0 -45
- package/types/Button.test.d.ts +0 -2
- package/types/Button.test.d.ts.map +0 -1
package/dist/cjs/index.native.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
8
|
var __copyProps = (to, from, except, desc) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
+
get: () => from[key],
|
|
12
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
15
16
|
};
|
|
16
17
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
18
|
-
value: true
|
|
19
|
-
}), mod);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
19
|
var index_exports = {};
|
|
21
20
|
module.exports = __toCommonJS(index_exports);
|
|
22
21
|
__reExport(index_exports, require("./Button.native.js"), module.exports);
|
|
22
|
+
|
|
23
23
|
//# sourceMappingURL=index.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.native.js","names":[],"sources":["cjs/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./Button\"), module.exports);\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,oBAAU,GAAG,OAAO,OAAO"}
|
package/dist/esm/Button.mjs
CHANGED
|
@@ -1,263 +1,176 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { SizableText, wrapChildrenInText } from "@tamagui/text";
|
|
6
|
-
import { createStyledContext, getTokenValue, styled, useProps, View, withStaticProperties } from "@tamagui/web";
|
|
1
|
+
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
2
|
+
import { ButtonNestingContext } from "@tamagui/stacks";
|
|
3
|
+
import { wrapChildrenInText } from "@tamagui/text";
|
|
4
|
+
import { Text, View, createStyledContext, createStyledHOC, styled, useProps, withStaticProperties } from "@tamagui/web";
|
|
7
5
|
import { useContext } from "react";
|
|
8
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
flexWrap: "nowrap",
|
|
44
|
-
flexDirection: "row",
|
|
45
|
-
backgroundColor: "$background",
|
|
46
|
-
borderWidth: 1,
|
|
47
|
-
borderColor: "transparent",
|
|
48
|
-
"$platform-web": {
|
|
49
|
-
cursor: "pointer"
|
|
50
|
-
},
|
|
51
|
-
hoverStyle: {
|
|
52
|
-
backgroundColor: "$backgroundHover",
|
|
53
|
-
borderColor: "$borderColorHover"
|
|
54
|
-
},
|
|
55
|
-
pressStyle: {
|
|
56
|
-
backgroundColor: "$backgroundPress",
|
|
57
|
-
borderColor: "$borderColorHover"
|
|
58
|
-
},
|
|
59
|
-
focusVisibleStyle: {
|
|
60
|
-
outlineColor: "$outlineColor",
|
|
61
|
-
outlineStyle: "solid",
|
|
62
|
-
outlineWidth: 2
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
variant: {
|
|
67
|
-
outlined: process.env.TAMAGUI_HEADLESS === "1" ? {} : {
|
|
68
|
-
backgroundColor: "transparent",
|
|
69
|
-
borderWidth: 1,
|
|
70
|
-
borderColor: "$borderColor",
|
|
71
|
-
hoverStyle: {
|
|
72
|
-
backgroundColor: "transparent",
|
|
73
|
-
borderColor: "$borderColorHover"
|
|
74
|
-
},
|
|
75
|
-
pressStyle: {
|
|
76
|
-
backgroundColor: "transparent",
|
|
77
|
-
borderColor: "$borderColorPress"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
circular: themeableVariants.circular,
|
|
82
|
-
chromeless: themeableVariants.chromeless,
|
|
83
|
-
size: {
|
|
84
|
-
"...size": (val, extras) => {
|
|
85
|
-
const buttonStyle = getButtonSized(val, extras);
|
|
86
|
-
const gap = getTokenValue(val);
|
|
87
|
-
return {
|
|
88
|
-
...buttonStyle,
|
|
89
|
-
gap
|
|
90
|
-
};
|
|
91
|
-
},
|
|
92
|
-
":number": (val, extras) => {
|
|
93
|
-
const buttonStyle = getButtonSized(val, extras);
|
|
94
|
-
const gap = val * 0.4;
|
|
95
|
-
return {
|
|
96
|
-
...buttonStyle,
|
|
97
|
-
gap
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
elevation: {
|
|
102
|
-
"...size": getElevation,
|
|
103
|
-
":number": getElevation
|
|
104
|
-
},
|
|
105
|
-
disabled: {
|
|
106
|
-
true: {
|
|
107
|
-
pointerEvents: "none",
|
|
108
|
-
// @ts-ignore
|
|
109
|
-
"aria-disabled": true
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
defaultVariants: {
|
|
114
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
115
|
-
}
|
|
7
|
+
|
|
8
|
+
const buttonContextKeys = [
|
|
9
|
+
"color",
|
|
10
|
+
"ellipsis",
|
|
11
|
+
"fontFamily",
|
|
12
|
+
"fontSize",
|
|
13
|
+
"fontStyle",
|
|
14
|
+
"fontWeight",
|
|
15
|
+
"letterSpacing",
|
|
16
|
+
"maxFontSizeMultiplier",
|
|
17
|
+
"textAlign"
|
|
18
|
+
];
|
|
19
|
+
const ButtonContext = createStyledContext({
|
|
20
|
+
color: void 0,
|
|
21
|
+
ellipsis: void 0,
|
|
22
|
+
fontFamily: void 0,
|
|
23
|
+
fontSize: void 0,
|
|
24
|
+
fontStyle: void 0,
|
|
25
|
+
fontWeight: void 0,
|
|
26
|
+
letterSpacing: void 0,
|
|
27
|
+
maxFontSizeMultiplier: void 0,
|
|
28
|
+
textAlign: void 0
|
|
29
|
+
}, { keys: buttonContextKeys });
|
|
30
|
+
const ButtonFrame = styled(View, {
|
|
31
|
+
context: ButtonContext,
|
|
32
|
+
displayName: "ButtonFrame",
|
|
33
|
+
role: "button",
|
|
34
|
+
render: /* @__PURE__ */ jsx("button", { type: "button" }),
|
|
35
|
+
tabIndex: 0,
|
|
36
|
+
alignItems: "center",
|
|
37
|
+
flexDirection: "row",
|
|
38
|
+
flexWrap: "nowrap",
|
|
39
|
+
justifyContent: "center",
|
|
40
|
+
variants: { disabled: { true: { pointerEvents: "none" } } }
|
|
116
41
|
});
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
userSelect: "none",
|
|
123
|
-
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
124
|
-
flexGrow: 0,
|
|
125
|
-
flexShrink: 1,
|
|
126
|
-
ellipsis: true,
|
|
127
|
-
color: "$color",
|
|
128
|
-
"$platform-web": {
|
|
129
|
-
cursor: "pointer"
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
|
-
defaultVariants: {
|
|
135
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
136
|
-
}
|
|
42
|
+
const ButtonText = styled(Text, {
|
|
43
|
+
context: ButtonContext,
|
|
44
|
+
displayName: "ButtonText",
|
|
45
|
+
flexGrow: 0,
|
|
46
|
+
flexShrink: 1
|
|
137
47
|
});
|
|
138
|
-
const
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
throw new Error("Button.Icon must be used within a Button");
|
|
147
|
-
}
|
|
148
|
-
const sizeToken = size ?? styledContext.size;
|
|
149
|
-
const iconColorProp = styledContext.color === "unset" || typeof styledContext.color === "number" ? void 0 : styledContext.color;
|
|
150
|
-
const iconColor = useCurrentColor(iconColorProp);
|
|
151
|
-
const iconSize = (typeof sizeToken === "number" ? sizeToken * 0.5 : getFontSize(sizeToken)) * scaleIcon;
|
|
152
|
-
return getIcon(children, {
|
|
153
|
-
size: iconSize,
|
|
154
|
-
color: iconColor
|
|
155
|
-
});
|
|
48
|
+
const ButtonIcon = ({ children, color, scaleIcon = 1, size }) => {
|
|
49
|
+
const styledContext = ButtonContext.useStyledContext();
|
|
50
|
+
const iconColor = color ?? styledContext?.color;
|
|
51
|
+
const getThemedIcon = useGetThemedIcon({
|
|
52
|
+
color: iconColor === "unset" || typeof iconColor === "number" ? void 0 : iconColor,
|
|
53
|
+
size: size === void 0 ? void 0 : size * scaleIcon
|
|
54
|
+
});
|
|
55
|
+
return getThemedIcon(children);
|
|
156
56
|
};
|
|
157
|
-
const
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
57
|
+
const buttonInternalPropNames = [
|
|
58
|
+
"children",
|
|
59
|
+
"color",
|
|
60
|
+
"disabled",
|
|
61
|
+
"ellipsis",
|
|
62
|
+
"fontFamily",
|
|
63
|
+
"fontSize",
|
|
64
|
+
"fontStyle",
|
|
65
|
+
"fontWeight",
|
|
66
|
+
"icon",
|
|
67
|
+
"iconAfter",
|
|
68
|
+
"iconSize",
|
|
69
|
+
"letterSpacing",
|
|
70
|
+
"maxFontSizeMultiplier",
|
|
71
|
+
"noTextWrap",
|
|
72
|
+
"render",
|
|
73
|
+
"scaleIcon",
|
|
74
|
+
"textAlign",
|
|
75
|
+
"textProps"
|
|
76
|
+
];
|
|
77
|
+
function useButton(propsIn, { Text: Text2 = ButtonText, iconColor: iconColorOption, iconSize: iconSizeOption, textProps: textPropsOption } = {}) {
|
|
78
|
+
const isNested = useContext(ButtonNestingContext);
|
|
79
|
+
const styledContext = ButtonContext.useStyledContext();
|
|
80
|
+
const processedProps = useProps(propsIn, {
|
|
81
|
+
noNormalize: true,
|
|
82
|
+
noExpand: true
|
|
83
|
+
});
|
|
84
|
+
const { children, color, disabled, ellipsis, fontFamily, fontSize, fontStyle, fontWeight, icon, iconAfter, iconSize, letterSpacing, maxFontSizeMultiplier, noTextWrap, render, scaleIcon = 1, textAlign, textProps } = processedProps;
|
|
85
|
+
const frameProps = { ...propsIn };
|
|
86
|
+
for (const key of buttonInternalPropNames) {
|
|
87
|
+
delete frameProps[key];
|
|
88
|
+
}
|
|
89
|
+
const contextColor = color ?? styledContext?.color;
|
|
90
|
+
const iconColor = iconColorOption ?? contextColor;
|
|
91
|
+
const resolvedIconSize = iconSize ?? iconSizeOption;
|
|
92
|
+
const getThemedIcon = useGetThemedIcon({
|
|
93
|
+
color: iconColor === "unset" || typeof iconColor === "number" ? void 0 : iconColor,
|
|
94
|
+
size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon
|
|
95
|
+
});
|
|
96
|
+
const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {
|
|
97
|
+
return item ? getThemedIcon(item) : null;
|
|
98
|
+
});
|
|
99
|
+
const textContext = {
|
|
100
|
+
color: contextColor,
|
|
101
|
+
ellipsis: ellipsis ?? styledContext?.ellipsis,
|
|
102
|
+
fontFamily: fontFamily ?? styledContext?.fontFamily,
|
|
103
|
+
fontSize: fontSize ?? styledContext?.fontSize,
|
|
104
|
+
fontStyle: fontStyle ?? styledContext?.fontStyle,
|
|
105
|
+
fontWeight: fontWeight ?? styledContext?.fontWeight,
|
|
106
|
+
letterSpacing: letterSpacing ?? styledContext?.letterSpacing,
|
|
107
|
+
maxFontSizeMultiplier: maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,
|
|
108
|
+
textAlign: textAlign ?? styledContext?.textAlign
|
|
109
|
+
};
|
|
110
|
+
const wrappedChildren = wrapChildrenInText(Text2, {
|
|
111
|
+
children,
|
|
112
|
+
...textContext,
|
|
113
|
+
noTextWrap,
|
|
114
|
+
textProps
|
|
115
|
+
}, {
|
|
116
|
+
...textPropsOption,
|
|
117
|
+
...processedProps.size === void 0 ? null : { size: processedProps.size }
|
|
118
|
+
});
|
|
119
|
+
const resolvedRender = render ?? (isNested ? "span" : processedProps.accessibilityRole === "link" || processedProps.role === "link" ? "a" : disabled ? /* @__PURE__ */ jsx("button", {
|
|
120
|
+
type: "button",
|
|
121
|
+
disabled: true
|
|
122
|
+
}) : void 0);
|
|
123
|
+
const props = {
|
|
124
|
+
...frameProps,
|
|
125
|
+
...disabled && {
|
|
126
|
+
"aria-disabled": true,
|
|
127
|
+
disabled: true,
|
|
128
|
+
tabIndex: -1
|
|
129
|
+
},
|
|
130
|
+
...resolvedRender === void 0 ? null : { render: resolvedRender },
|
|
131
|
+
...isNested && {
|
|
132
|
+
role: "none",
|
|
133
|
+
tabIndex: -1,
|
|
134
|
+
"aria-disabled": void 0,
|
|
135
|
+
disabled: void 0,
|
|
136
|
+
onPress: void 0,
|
|
137
|
+
onPressIn: void 0,
|
|
138
|
+
onPressOut: void 0,
|
|
139
|
+
onLongPress: void 0,
|
|
140
|
+
onClick: void 0,
|
|
141
|
+
onKeyDown: void 0,
|
|
142
|
+
onKeyUp: void 0
|
|
143
|
+
},
|
|
144
|
+
children: /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
|
|
145
|
+
value: true,
|
|
146
|
+
children: /* @__PURE__ */ jsxs(ButtonContext.Provider, {
|
|
147
|
+
...textContext,
|
|
148
|
+
children: [
|
|
149
|
+
themedIcon,
|
|
150
|
+
wrappedChildren,
|
|
151
|
+
themedIconAfter
|
|
152
|
+
]
|
|
153
|
+
})
|
|
154
|
+
})
|
|
155
|
+
};
|
|
156
|
+
return {
|
|
157
|
+
isNested,
|
|
158
|
+
props
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
const ButtonComponent = createStyledHOC(ButtonFrame, function Button(props, ref) {
|
|
162
|
+
const { props: buttonProps } = useButton(props);
|
|
163
|
+
return /* @__PURE__ */ jsx(ButtonFrame, {
|
|
164
|
+
ref,
|
|
165
|
+
...buttonProps
|
|
166
|
+
});
|
|
255
167
|
});
|
|
256
|
-
const
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
168
|
+
const Button2 = withStaticProperties(ButtonComponent, {
|
|
169
|
+
Apply: ButtonContext.Provider,
|
|
170
|
+
Frame: ButtonFrame,
|
|
171
|
+
Icon: ButtonIcon,
|
|
172
|
+
Text: ButtonText
|
|
261
173
|
});
|
|
262
|
-
|
|
174
|
+
|
|
175
|
+
export { Button2 as Button, ButtonContext, ButtonFrame, ButtonIcon, ButtonText, useButton };
|
|
263
176
|
//# sourceMappingURL=Button.mjs.map
|
package/dist/esm/Button.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["esm/Button.js"],"sourcesContent":["import { useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { ButtonNestingContext } from \"@tamagui/stacks\";\nimport { wrapChildrenInText } from \"@tamagui/text\";\nimport {\n createStyledContext,\n createStyledHOC,\n styled,\n Text,\n useProps,\n View,\n withStaticProperties\n} from \"@tamagui/web\";\nimport { useContext } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst buttonContextKeys = [\n \"color\",\n \"ellipsis\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"letterSpacing\",\n \"maxFontSizeMultiplier\",\n \"textAlign\"\n];\nconst ButtonContext = createStyledContext(\n {\n color: void 0,\n ellipsis: void 0,\n fontFamily: void 0,\n fontSize: void 0,\n fontStyle: void 0,\n fontWeight: void 0,\n letterSpacing: void 0,\n maxFontSizeMultiplier: void 0,\n textAlign: void 0\n },\n {\n keys: buttonContextKeys\n }\n);\nconst ButtonFrame = styled(View, {\n context: ButtonContext,\n displayName: \"ButtonFrame\",\n role: \"button\",\n render: /* @__PURE__ */ jsx(\"button\", { type: \"button\" }),\n tabIndex: 0,\n alignItems: \"center\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n justifyContent: \"center\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nconst ButtonText = styled(Text, {\n context: ButtonContext,\n displayName: \"ButtonText\",\n // flexGrow 1 pushes text to the start of its parent on native\n flexGrow: 0,\n flexShrink: 1\n});\nconst ButtonIcon = ({ children, color, scaleIcon = 1, size }) => {\n const styledContext = ButtonContext.useStyledContext();\n const iconColor = color ?? styledContext?.color;\n const getThemedIcon = useGetThemedIcon({\n color: iconColor === \"unset\" || typeof iconColor === \"number\" ? void 0 : iconColor,\n size: size === void 0 ? void 0 : size * scaleIcon\n });\n return getThemedIcon(children);\n};\nconst buttonInternalPropNames = [\n \"children\",\n \"color\",\n \"disabled\",\n \"ellipsis\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"icon\",\n \"iconAfter\",\n \"iconSize\",\n \"letterSpacing\",\n \"maxFontSizeMultiplier\",\n \"noTextWrap\",\n \"render\",\n \"scaleIcon\",\n \"textAlign\",\n \"textProps\"\n];\nfunction useButton(propsIn, {\n Text: Text2 = ButtonText,\n iconColor: iconColorOption,\n iconSize: iconSizeOption,\n textProps: textPropsOption\n} = {}) {\n const isNested = useContext(ButtonNestingContext);\n const styledContext = ButtonContext.useStyledContext();\n const processedProps = useProps(propsIn, {\n noNormalize: true,\n noExpand: true\n });\n const {\n children,\n color,\n disabled,\n ellipsis,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n icon,\n iconAfter,\n iconSize,\n letterSpacing,\n maxFontSizeMultiplier,\n noTextWrap,\n render,\n scaleIcon = 1,\n textAlign,\n textProps\n } = processedProps;\n const frameProps = { ...propsIn };\n for (const key of buttonInternalPropNames) {\n delete frameProps[key];\n }\n const contextColor = color ?? styledContext?.color;\n const iconColor = iconColorOption ?? contextColor;\n const resolvedIconSize = iconSize ?? iconSizeOption;\n const getThemedIcon = useGetThemedIcon({\n color: iconColor === \"unset\" || typeof iconColor === \"number\" ? void 0 : iconColor,\n size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon\n });\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {\n return item ? getThemedIcon(item) : null;\n });\n const textContext = {\n color: contextColor,\n ellipsis: ellipsis ?? styledContext?.ellipsis,\n fontFamily: fontFamily ?? styledContext?.fontFamily,\n fontSize: fontSize ?? styledContext?.fontSize,\n fontStyle: fontStyle ?? styledContext?.fontStyle,\n fontWeight: fontWeight ?? styledContext?.fontWeight,\n letterSpacing: letterSpacing ?? styledContext?.letterSpacing,\n maxFontSizeMultiplier: maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,\n textAlign: textAlign ?? styledContext?.textAlign\n };\n const wrappedChildren = wrapChildrenInText(\n Text2,\n {\n children,\n ...textContext,\n noTextWrap,\n textProps\n },\n {\n ...textPropsOption,\n ...processedProps.size === void 0 ? null : { size: processedProps.size }\n }\n );\n const resolvedRender = render ?? (isNested ? \"span\" : processedProps.accessibilityRole === \"link\" || processedProps.role === \"link\" ? \"a\" : disabled ? /* @__PURE__ */ jsx(\"button\", { type: \"button\", disabled: true }) : void 0);\n const props = {\n ...frameProps,\n ...disabled && {\n \"aria-disabled\": true,\n disabled: true,\n tabIndex: -1\n },\n ...resolvedRender === void 0 ? null : { render: resolvedRender },\n ...isNested && {\n // a nested Button is a presentation part, not a control: strip the\n // interactive semantics so we never place a focusable role=button (with\n // its own press/keyboard handlers) inside the outer native <button>. that\n // nesting is invalid html, adds an extra focus stop, and bubbles\n // activation to the outer control. resolvedRender already makes it a span.\n role: \"none\",\n tabIndex: -1,\n \"aria-disabled\": void 0,\n disabled: void 0,\n onPress: void 0,\n onPressIn: void 0,\n onPressOut: void 0,\n onLongPress: void 0,\n onClick: void 0,\n onKeyDown: void 0,\n onKeyUp: void 0\n },\n children: /* @__PURE__ */ jsx(ButtonNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(ButtonContext.Provider, { ...textContext, children: [\n themedIcon,\n wrappedChildren,\n themedIconAfter\n ] }) })\n };\n return {\n isNested,\n props\n };\n}\nconst ButtonComponent = createStyledHOC(\n ButtonFrame,\n function Button(props, ref) {\n const { props: buttonProps } = useButton(props);\n return /* @__PURE__ */ jsx(ButtonFrame, { ref, ...buttonProps });\n }\n);\nconst Button2 = withStaticProperties(ButtonComponent, {\n Apply: ButtonContext.Provider,\n Frame: ButtonFrame,\n Icon: ButtonIcon,\n Text: ButtonText\n});\nexport {\n Button2 as Button,\n ButtonContext,\n ButtonFrame,\n ButtonIcon,\n ButtonText,\n useButton\n};\n//# sourceMappingURL=Button.js.map\n"],"mappings":"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"}
|