@tamagui/button 1.26.0 → 1.27.0-1684163004699
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 +19 -51
- package/dist/cjs/Button.js.map +1 -1
- package/dist/cjs/Button.test.js.map +1 -1
- package/dist/cjs/base.js +29 -0
- package/dist/cjs/base.js.map +6 -0
- package/dist/cjs/themed.js +252 -0
- package/dist/cjs/themed.js.map +6 -0
- package/dist/esm/Button.js +19 -57
- package/dist/esm/Button.js.map +1 -1
- package/dist/esm/Button.test.js.map +1 -1
- package/dist/esm/base.js +5 -0
- package/dist/esm/base.js.map +6 -0
- package/dist/esm/{Button.mjs → themed.js} +77 -77
- package/dist/esm/themed.js.map +6 -0
- package/dist/jsx/Button.js +19 -53
- package/dist/jsx/Button.js.map +1 -1
- package/dist/jsx/Button.mjs +19 -53
- package/dist/jsx/Button.mjs.map +1 -1
- package/dist/jsx/Button.test.js.map +1 -1
- package/dist/jsx/Button.test.mjs.map +1 -1
- package/dist/jsx/base.js +5 -0
- package/dist/jsx/base.js.map +6 -0
- package/dist/jsx/base.mjs.map +6 -0
- package/dist/jsx/themed.js +232 -0
- package/dist/jsx/themed.js.map +6 -0
- package/dist/jsx/themed.mjs.map +6 -0
- package/package.json +7 -7
- package/src/Button.test.tsx +1 -4
- package/src/Button.tsx +35 -97
- package/types/Button.d.ts +91 -80
- package/types/Button.d.ts.map +1 -1
- package/types/base.d.ts.map +1 -0
- package/types/themed.d.ts.map +1 -0
- package/dist/esm/Button.test.mjs +0 -11
- package/dist/esm/index.mjs +0 -2
package/dist/cjs/Button.js
CHANGED
|
@@ -19,15 +19,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
19
19
|
var Button_exports = {};
|
|
20
20
|
__export(Button_exports, {
|
|
21
21
|
Button: () => Button2,
|
|
22
|
+
ButtonContext: () => ButtonContext,
|
|
22
23
|
ButtonFrame: () => ButtonFrame,
|
|
23
|
-
|
|
24
|
+
ButtonIcon: () => ButtonIcon,
|
|
25
|
+
ButtonText: () => ButtonText,
|
|
24
26
|
buttonStaticConfig: () => buttonStaticConfig,
|
|
25
|
-
createButtonScope: () => createButtonScope,
|
|
26
27
|
useButton: () => useButton
|
|
27
28
|
});
|
|
28
29
|
module.exports = __toCommonJS(Button_exports);
|
|
29
30
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
-
var import_create_context = require("@tamagui/create-context");
|
|
31
31
|
var import_font_size = require("@tamagui/font-size");
|
|
32
32
|
var import_get_button_sized = require("@tamagui/get-button-sized");
|
|
33
33
|
var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
|
|
@@ -35,10 +35,14 @@ var import_stacks = require("@tamagui/stacks");
|
|
|
35
35
|
var import_text = require("@tamagui/text");
|
|
36
36
|
var import_web = require("@tamagui/web");
|
|
37
37
|
var import_react = require("react");
|
|
38
|
+
const ButtonContext = (0, import_web.createStyledContext)({
|
|
39
|
+
size: "$true"
|
|
40
|
+
});
|
|
38
41
|
const BUTTON_NAME = "Button";
|
|
39
42
|
const ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
|
|
40
43
|
name: BUTTON_NAME,
|
|
41
44
|
tag: "button",
|
|
45
|
+
context: ButtonContext,
|
|
42
46
|
focusable: true,
|
|
43
47
|
variants: {
|
|
44
48
|
unstyled: {
|
|
@@ -53,15 +57,11 @@ const ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
|
|
|
53
57
|
pressTheme: true,
|
|
54
58
|
backgrounded: true,
|
|
55
59
|
borderWidth: 1,
|
|
56
|
-
borderColor: "
|
|
60
|
+
borderColor: "$borderColor",
|
|
57
61
|
pressStyle: {
|
|
58
|
-
borderColor: "
|
|
59
|
-
},
|
|
60
|
-
hoverStyle: {
|
|
61
|
-
borderColor: "transparent"
|
|
62
|
+
borderColor: "$borderColorPress"
|
|
62
63
|
},
|
|
63
64
|
focusStyle: {
|
|
64
|
-
borderColor: "$borderColorFocus",
|
|
65
65
|
outlineColor: "$borderColorFocus",
|
|
66
66
|
outlineStyle: "solid",
|
|
67
67
|
outlineWidth: 2
|
|
@@ -88,9 +88,9 @@ const ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
|
|
|
88
88
|
unstyled: false
|
|
89
89
|
}
|
|
90
90
|
});
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
const ButtonText = (0, import_web.styled)(import_text.SizableText, {
|
|
92
|
+
name: "ButtonText",
|
|
93
|
+
context: ButtonContext,
|
|
94
94
|
variants: {
|
|
95
95
|
unstyled: {
|
|
96
96
|
false: {
|
|
@@ -108,49 +108,16 @@ const ButtonTextFrame = (0, import_web.styled)(import_text.SizableText, {
|
|
|
108
108
|
unstyled: false
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
|
-
const [createButtonContext, createButtonScope] = (0, import_create_context.createContextScope)("Button");
|
|
112
|
-
const [ButtonProvider, useButtonContext] = createButtonContext("Button");
|
|
113
|
-
const ButtonTextComponent = ButtonTextFrame.extractable(
|
|
114
|
-
(0, import_react.forwardRef)(
|
|
115
|
-
(props, ref) => {
|
|
116
|
-
const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
|
|
117
|
-
(0, import_react.useEffect)(() => {
|
|
118
|
-
const unregister = context.registerButtonText();
|
|
119
|
-
return () => unregister();
|
|
120
|
-
}, [context.registerButtonText]);
|
|
121
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonTextFrame, { size: props.size ?? context.size, ...props, ref });
|
|
122
|
-
}
|
|
123
|
-
)
|
|
124
|
-
);
|
|
125
|
-
const BUTTON_ICON_NAME = "ButtonIcon";
|
|
126
111
|
const ButtonIcon = (props) => {
|
|
127
112
|
const { children, scaleIcon = 1 } = props;
|
|
128
|
-
const
|
|
129
|
-
const size = context.size;
|
|
130
|
-
const color = context.color;
|
|
113
|
+
const { size, color } = (0, import_react.useContext)(ButtonContext);
|
|
131
114
|
const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
|
|
132
115
|
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
133
116
|
return getThemedIcon(children);
|
|
134
117
|
};
|
|
135
118
|
const ButtonComponent = ButtonFrame.styleable(function Button(props, ref) {
|
|
136
119
|
const { props: buttonProps } = useButton(props);
|
|
137
|
-
|
|
138
|
-
const registerButtonText = (0, import_react.useCallback)(() => {
|
|
139
|
-
setButtonTextCount((prev) => prev + 1);
|
|
140
|
-
return () => setButtonTextCount((prev) => prev - 1);
|
|
141
|
-
}, [setButtonTextCount]);
|
|
142
|
-
const hasTextComponent = buttonTextCount > 0;
|
|
143
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
144
|
-
ButtonProvider,
|
|
145
|
-
{
|
|
146
|
-
scope: props.__scopeButton,
|
|
147
|
-
color: props.color,
|
|
148
|
-
hasTextComponent,
|
|
149
|
-
size: props.size ?? "$true",
|
|
150
|
-
registerButtonText,
|
|
151
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { ...hasTextComponent ? props : buttonProps, ref })
|
|
152
|
-
}
|
|
153
|
-
);
|
|
120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { ...buttonProps, ref });
|
|
154
121
|
});
|
|
155
122
|
const buttonStaticConfig = {
|
|
156
123
|
inlineProps: /* @__PURE__ */ new Set([
|
|
@@ -167,10 +134,10 @@ const buttonStaticConfig = {
|
|
|
167
134
|
])
|
|
168
135
|
};
|
|
169
136
|
const Button2 = (0, import_web.withStaticProperties)(ButtonComponent, {
|
|
170
|
-
Text:
|
|
137
|
+
Text: ButtonText,
|
|
171
138
|
Icon: ButtonIcon
|
|
172
139
|
});
|
|
173
|
-
function useButton(propsIn, { Text =
|
|
140
|
+
function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
174
141
|
const {
|
|
175
142
|
children,
|
|
176
143
|
icon,
|
|
@@ -204,7 +171,7 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
204
171
|
const contents = (0, import_text.wrapChildrenInText)(
|
|
205
172
|
Text,
|
|
206
173
|
propsActive,
|
|
207
|
-
Text ===
|
|
174
|
+
Text === ButtonText && hasUnstyled ? {
|
|
208
175
|
unstyled: propsIn.unstyled
|
|
209
176
|
} : void 0
|
|
210
177
|
);
|
|
@@ -243,10 +210,11 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
243
210
|
// Annotate the CommonJS export names for ESM import in node:
|
|
244
211
|
0 && (module.exports = {
|
|
245
212
|
Button,
|
|
213
|
+
ButtonContext,
|
|
246
214
|
ButtonFrame,
|
|
215
|
+
ButtonIcon,
|
|
247
216
|
ButtonText,
|
|
248
217
|
buttonStaticConfig,
|
|
249
|
-
createButtonScope,
|
|
250
218
|
useButton
|
|
251
219
|
});
|
|
252
220
|
//# sourceMappingURL=Button.js.map
|
package/dist/cjs/Button.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["Button"]
|
|
6
6
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.test.tsx"],
|
|
4
|
-
"mappings": ";AAEA,4BAAwC;AACxC,
|
|
4
|
+
"mappings": ";AAEA,4BAAwC;AACxC,kBAA8B;AAC9B,oBAAuC;AAJvC,QAAQ,IAAI,iBAAiB;AAM7B,MAAM,WAAO,+BAAc,+CAAwB,CAAC;AAAA,IAEpD,wBAAS,UAAU,MAAM;AACvB,0BAAK,OAAO,MAAM;AAChB,8BAAO,IAAI,EAAE,WAAW;AAAA,EAC1B,CAAC;AAWH,CAAC;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/dist/cjs/base.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var base_exports = {};
|
|
20
|
+
__export(base_exports, {
|
|
21
|
+
Button: () => import_Button.Button
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(base_exports);
|
|
24
|
+
var import_Button = require("./Button");
|
|
25
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
26
|
+
0 && (module.exports = {
|
|
27
|
+
Button
|
|
28
|
+
});
|
|
29
|
+
//# sourceMappingURL=base.js.map
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var themed_exports = {};
|
|
20
|
+
__export(themed_exports, {
|
|
21
|
+
Button: () => Button,
|
|
22
|
+
ButtonFrame: () => ButtonFrame,
|
|
23
|
+
ButtonText: () => ButtonTextFrame,
|
|
24
|
+
buttonStaticConfig: () => buttonStaticConfig,
|
|
25
|
+
createButtonScope: () => createButtonScope,
|
|
26
|
+
useButton: () => useButton
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(themed_exports);
|
|
29
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var import_create_context = require("@tamagui/create-context");
|
|
31
|
+
var import_font_size = require("@tamagui/font-size");
|
|
32
|
+
var import_get_button_sized = require("@tamagui/get-button-sized");
|
|
33
|
+
var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
|
|
34
|
+
var import_text = require("@tamagui/text");
|
|
35
|
+
var import_web = require("@tamagui/web");
|
|
36
|
+
var import_react = require("react");
|
|
37
|
+
var import_Button = require("./Button");
|
|
38
|
+
const ButtonFrame = (0, import_web.styled)(import_Button.Button, {
|
|
39
|
+
name: import_Button.BUTTON_NAME,
|
|
40
|
+
variants: {
|
|
41
|
+
unstyled: {
|
|
42
|
+
false: {
|
|
43
|
+
size: "$true",
|
|
44
|
+
justifyContent: "center",
|
|
45
|
+
alignItems: "center",
|
|
46
|
+
flexWrap: "nowrap",
|
|
47
|
+
flexDirection: "row",
|
|
48
|
+
cursor: "pointer",
|
|
49
|
+
hoverTheme: true,
|
|
50
|
+
pressTheme: true,
|
|
51
|
+
backgrounded: true,
|
|
52
|
+
borderWidth: 1,
|
|
53
|
+
borderColor: "$borderColor",
|
|
54
|
+
pressStyle: {
|
|
55
|
+
borderColor: "$borderColorPress"
|
|
56
|
+
},
|
|
57
|
+
focusStyle: {
|
|
58
|
+
outlineColor: "$borderColorFocus",
|
|
59
|
+
outlineStyle: "solid",
|
|
60
|
+
outlineWidth: 2
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
size: {
|
|
65
|
+
"...size": import_get_button_sized.getButtonSized
|
|
66
|
+
},
|
|
67
|
+
active: {
|
|
68
|
+
true: {
|
|
69
|
+
hoverStyle: {
|
|
70
|
+
backgroundColor: "$background"
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
disabled: {
|
|
75
|
+
true: {
|
|
76
|
+
pointerEvents: "none"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
defaultVariants: {
|
|
81
|
+
unstyled: false
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
const [createButtonContext, createButtonScope] = (0, import_create_context.createContextScope)(import_Button.BUTTON_NAME);
|
|
85
|
+
const [ButtonProvider, useButtonContext] = createButtonContext("Button");
|
|
86
|
+
const ButtonTextFrame = (0, import_web.styled)(import_Button.Button.Text, {
|
|
87
|
+
name: import_Button.BUTTON_TEXT_NAME,
|
|
88
|
+
variants: {
|
|
89
|
+
unstyled: {
|
|
90
|
+
false: {
|
|
91
|
+
userSelect: "none",
|
|
92
|
+
cursor: "pointer",
|
|
93
|
+
// flexGrow 1 leads to inconsistent native style where text pushes to start of view
|
|
94
|
+
flexGrow: 0,
|
|
95
|
+
flexShrink: 1,
|
|
96
|
+
ellipse: true,
|
|
97
|
+
color: "$color"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
defaultVariants: {
|
|
102
|
+
unstyled: false
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
const ButtonText = ButtonTextFrame.styleable(
|
|
106
|
+
(props, ref) => {
|
|
107
|
+
const context = useButtonContext(import_Button.BUTTON_TEXT_NAME, props.__scopeButton);
|
|
108
|
+
(0, import_react.useEffect)(() => {
|
|
109
|
+
const unregister = context.registerButtonText();
|
|
110
|
+
return () => unregister();
|
|
111
|
+
}, [context.registerButtonText]);
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonTextFrame, { ref, color: context.color, size: context.size, ...props, children: props.children });
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
const ButtonIcon = (props) => {
|
|
116
|
+
const { children, scaleIcon = 1 } = props;
|
|
117
|
+
const context = useButtonContext(import_Button.BUTTON_ICON_NAME, props.__scopeButton);
|
|
118
|
+
const size = context.size;
|
|
119
|
+
const color = context.color;
|
|
120
|
+
const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
|
|
121
|
+
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
122
|
+
return getThemedIcon(children);
|
|
123
|
+
};
|
|
124
|
+
const ButtonComponent = ButtonFrame.styleable(
|
|
125
|
+
(props, ref) => {
|
|
126
|
+
const buttonApi = props.forceButtonApi ?? (0, import_web.getConfig)().buttonApi ?? "mixed";
|
|
127
|
+
const { props: buttonProps } = useButton(props);
|
|
128
|
+
const [buttonTextCount, setButtonTextCount] = (0, import_react.useState)(0);
|
|
129
|
+
const registerButtonText = (0, import_react.useCallback)(() => {
|
|
130
|
+
if (buttonApi === "simple") {
|
|
131
|
+
console.warn(
|
|
132
|
+
"You are using Button.Text with simple button API. Either remove Button.Text or use either `buttonApi: composable` or `mixed` in your tamagui config."
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
if (buttonApi === "composable")
|
|
136
|
+
return () => {
|
|
137
|
+
};
|
|
138
|
+
setButtonTextCount((prev) => prev + 1);
|
|
139
|
+
return () => setButtonTextCount((prev) => prev - 1);
|
|
140
|
+
}, [setButtonTextCount]);
|
|
141
|
+
const usesComposableApi = buttonApi === "composable" || buttonApi === "mixed" && buttonTextCount > 0;
|
|
142
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
143
|
+
ButtonProvider,
|
|
144
|
+
{
|
|
145
|
+
scope: props.__scopeButton,
|
|
146
|
+
size: props.size ?? "$true",
|
|
147
|
+
color: props.color,
|
|
148
|
+
usesComposableApi,
|
|
149
|
+
registerButtonText,
|
|
150
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { unstyled: props.unstyled ?? false, ref, ...buttonProps })
|
|
151
|
+
}
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
);
|
|
155
|
+
const Button = (0, import_web.withStaticProperties)(ButtonComponent, {
|
|
156
|
+
Text: ButtonText,
|
|
157
|
+
Icon: ButtonIcon
|
|
158
|
+
});
|
|
159
|
+
function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame }) {
|
|
160
|
+
const {
|
|
161
|
+
children,
|
|
162
|
+
icon,
|
|
163
|
+
iconAfter,
|
|
164
|
+
noTextWrap,
|
|
165
|
+
theme: themeName,
|
|
166
|
+
space,
|
|
167
|
+
spaceFlex,
|
|
168
|
+
scaleIcon = 1,
|
|
169
|
+
scaleSpace = 0.66,
|
|
170
|
+
separator,
|
|
171
|
+
// text props
|
|
172
|
+
color,
|
|
173
|
+
fontWeight,
|
|
174
|
+
letterSpacing,
|
|
175
|
+
fontSize,
|
|
176
|
+
fontFamily,
|
|
177
|
+
fontStyle,
|
|
178
|
+
textAlign,
|
|
179
|
+
unstyled = false,
|
|
180
|
+
textProps,
|
|
181
|
+
...rest
|
|
182
|
+
} = propsIn;
|
|
183
|
+
const isNested = import_web.isRSC ? false : (0, import_react.useContext)(import_web.ButtonNestingContext);
|
|
184
|
+
const propsActive = (0, import_web.useMediaPropsActive)(propsIn);
|
|
185
|
+
const size = propsActive.size || "$true";
|
|
186
|
+
const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
|
|
187
|
+
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
188
|
+
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
189
|
+
const spaceSize = propsActive.space ?? (0, import_web.getVariableValue)(iconSize) * scaleSpace;
|
|
190
|
+
const contents = (0, import_text.wrapChildrenInText)(
|
|
191
|
+
Text,
|
|
192
|
+
propsActive,
|
|
193
|
+
Text === ButtonTextFrame ? {
|
|
194
|
+
unstyled
|
|
195
|
+
} : void 0
|
|
196
|
+
);
|
|
197
|
+
const inner = (0, import_web.spacedChildren)({
|
|
198
|
+
// a bit arbitrary but scaling to font size is necessary so long as button does
|
|
199
|
+
space: spaceSize,
|
|
200
|
+
spaceFlex,
|
|
201
|
+
separator,
|
|
202
|
+
direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
|
|
203
|
+
children: [themedIcon, ...contents, themedIconAfter]
|
|
204
|
+
});
|
|
205
|
+
const tag = isNested ? "span" : (
|
|
206
|
+
// defaults to <a /> when accessibilityRole = link
|
|
207
|
+
// see https://github.com/tamagui/tamagui/issues/505
|
|
208
|
+
propsIn.accessibilityRole === "link" ? "a" : void 0
|
|
209
|
+
);
|
|
210
|
+
const props = {
|
|
211
|
+
...propsActive.disabled && {
|
|
212
|
+
// in rnw - false still has keyboard tabIndex, undefined = not actually focusable
|
|
213
|
+
focusable: void 0,
|
|
214
|
+
// even with tabIndex unset, it will keep focusStyle on web so disable it here
|
|
215
|
+
focusStyle: {
|
|
216
|
+
borderColor: "$background"
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
tag,
|
|
220
|
+
...rest,
|
|
221
|
+
children: import_web.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.ButtonNestingContext.Provider, { value: true, children: inner })
|
|
222
|
+
};
|
|
223
|
+
return {
|
|
224
|
+
spaceSize,
|
|
225
|
+
isNested,
|
|
226
|
+
props
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
const buttonStaticConfig = {
|
|
230
|
+
inlineProps: /* @__PURE__ */ new Set([
|
|
231
|
+
// text props go here (can't really optimize them, but we never fully extract button anyway)
|
|
232
|
+
// may be able to remove this entirely, as the compiler / runtime have gotten better
|
|
233
|
+
"color",
|
|
234
|
+
"fontWeight",
|
|
235
|
+
"fontSize",
|
|
236
|
+
"fontFamily",
|
|
237
|
+
"fontStyle",
|
|
238
|
+
"letterSpacing",
|
|
239
|
+
"textAlign",
|
|
240
|
+
"unstyled"
|
|
241
|
+
])
|
|
242
|
+
};
|
|
243
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
244
|
+
0 && (module.exports = {
|
|
245
|
+
Button,
|
|
246
|
+
ButtonFrame,
|
|
247
|
+
ButtonText,
|
|
248
|
+
buttonStaticConfig,
|
|
249
|
+
createButtonScope,
|
|
250
|
+
useButton
|
|
251
|
+
});
|
|
252
|
+
//# sourceMappingURL=themed.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/themed.tsx"],
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8KM;AA7KN,4BAAmC;AACnC,uBAA4B;AAC5B,8BAA+B;AAC/B,6BAA4C;AAC5C,kBAAqD;AACrD,iBAaO;AACP,mBAAgF;AAEhF,oBAKO;AAEP,MAAM,kBAAc,mBAAO,cAAAA,QAAY;AAAA,EACrC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,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,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc;AAAA,QAChB;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,UAAU;AAAA,EACZ;AACF,CAAC;AAgDD,MAAM,CAAC,qBAAqB,iBAAiB,QAAI,0CAAmB,yBAAW;AAY/E,MAAM,CAAC,gBAAgB,gBAAgB,IACrC,oBAAwC,QAAQ;AAGlD,MAAM,sBAAkB,mBAAO,cAAAA,OAAW,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA;AAAA,QAER,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAED,MAAM,aAAa,gBAAgB;AAAA,EACjC,CAAC,OAAsD,QAAQ;AAC7D,UAAM,UAAU,iBAAiB,gCAAkB,MAAM,aAAa;AACtE,gCAAU,MAAM;AACd,YAAM,aAAa,QAAQ,mBAAmB;AAC9C,aAAO,MAAM,WAAW;AAAA,IAC1B,GAAG,CAAC,QAAQ,kBAAkB,CAAC;AAE/B,WACE,4CAAC,mBAAgB,KAAU,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAO,GAAG,OACtE,gBAAM,UACT;AAAA,EAEJ;AACF;AAOA,MAAM,aAAa,CAAC,UAAiD;AACnE,QAAM,EAAE,UAAU,YAAY,EAAE,IAAI;AACpC,QAAM,UAAU,iBAAiB,gCAAkB,MAAM,aAAa;AAEtE,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,QAAQ;AAEtB,QAAM,YAAY,OAAO,SAAS,WAAW,OAAO,UAAM,8BAAY,IAAI,KAAK;AAC/E,QAAM,oBAAgB,yCAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,SAAO,cAAc,QAAQ;AAC/B;AAEA,MAAM,kBAAkB,YAAY;AAAA,EAClC,CAAC,OAAiC,QAAQ;AACxC,UAAM,YAAY,MAAM,sBAAkB,sBAAU,EAAE,aAAa;AACnE,UAAM,EAAE,OAAO,YAAY,IAAI,UAAU,KAAK;AAC9C,UAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,CAAC;AAExD,UAAM,yBAAqB,0BAAY,MAAM;AAC3C,UAAI,cAAc,UAAU;AAC1B,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAEA,UAAI,cAAc;AAAc,eAAO,MAAM;AAAA,QAAC;AAG9C,yBAAmB,CAAC,SAAS,OAAO,CAAC;AACrC,aAAO,MAAM,mBAAmB,CAAC,SAAS,OAAO,CAAC;AAAA,IACpD,GAAG,CAAC,kBAAkB,CAAC;AAEvB,UAAM,oBACJ,cAAc,gBAAiB,cAAc,WAAW,kBAAkB;AAE5E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,MAAM;AAAA,QACb,MAAM,MAAM,QAAQ;AAAA,QACpB,OAAO,MAAM;AAAA,QACb;AAAA,QACA;AAAA,QAEA,sDAAC,eAAY,UAAU,MAAM,YAAY,OAAO,KAAW,GAAG,aAAa;AAAA;AAAA,IAC7E;AAAA,EAEJ;AACF;AAEA,MAAM,aAAS,iCAAqB,iBAAiB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAMD,SAAS,UACP,SACA,EAAE,OAAO,gBAAgB,IAAmB,EAAE,MAAM,gBAAgB,GACpE;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,WAAW;AAAA,IACX;AAAA,IAEA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,WAAW,mBAAQ,YAAQ,yBAAW,+BAAoB;AAChE,QAAM,kBAAc,gCAAoB,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,6BAAiB,QAAQ,IAAI;AACpE,QAAM,eAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS,kBACL;AAAA,MACE;AAAA,IACF,IACA;AAAA,EACN;AACA,QAAM,YAAQ,2BAAe;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,mBACR,QAEA,4CAAC,gCAAqB,UAArB,EAA8B,OAAO,MAAO,iBAAM;AAAA,EAEvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,qBAAqB;AAAA,EACzB,aAAa,oBAAI,IAAI;AAAA;AAAA;AAAA,IAGnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
|
|
5
|
+
"names": ["BaseButton"]
|
|
6
|
+
}
|
package/dist/esm/Button.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
3
2
|
import { getFontSize } from "@tamagui/font-size";
|
|
4
3
|
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
5
4
|
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
@@ -7,6 +6,7 @@ import { ThemeableStack } from "@tamagui/stacks";
|
|
|
7
6
|
import { SizableText, wrapChildrenInText } from "@tamagui/text";
|
|
8
7
|
import {
|
|
9
8
|
ButtonNestingContext,
|
|
9
|
+
createStyledContext,
|
|
10
10
|
getVariableValue,
|
|
11
11
|
isRSC,
|
|
12
12
|
spacedChildren,
|
|
@@ -14,17 +14,15 @@ import {
|
|
|
14
14
|
useProps,
|
|
15
15
|
withStaticProperties
|
|
16
16
|
} from "@tamagui/web";
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
useEffect,
|
|
22
|
-
useState
|
|
23
|
-
} from "react";
|
|
17
|
+
import { useContext } from "react";
|
|
18
|
+
const ButtonContext = createStyledContext({
|
|
19
|
+
size: "$true"
|
|
20
|
+
});
|
|
24
21
|
const BUTTON_NAME = "Button";
|
|
25
22
|
const ButtonFrame = styled(ThemeableStack, {
|
|
26
23
|
name: BUTTON_NAME,
|
|
27
24
|
tag: "button",
|
|
25
|
+
context: ButtonContext,
|
|
28
26
|
focusable: true,
|
|
29
27
|
variants: {
|
|
30
28
|
unstyled: {
|
|
@@ -39,15 +37,11 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
39
37
|
pressTheme: true,
|
|
40
38
|
backgrounded: true,
|
|
41
39
|
borderWidth: 1,
|
|
42
|
-
borderColor: "
|
|
40
|
+
borderColor: "$borderColor",
|
|
43
41
|
pressStyle: {
|
|
44
|
-
borderColor: "
|
|
45
|
-
},
|
|
46
|
-
hoverStyle: {
|
|
47
|
-
borderColor: "transparent"
|
|
42
|
+
borderColor: "$borderColorPress"
|
|
48
43
|
},
|
|
49
44
|
focusStyle: {
|
|
50
|
-
borderColor: "$borderColorFocus",
|
|
51
45
|
outlineColor: "$borderColorFocus",
|
|
52
46
|
outlineStyle: "solid",
|
|
53
47
|
outlineWidth: 2
|
|
@@ -74,9 +68,9 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
74
68
|
unstyled: false
|
|
75
69
|
}
|
|
76
70
|
});
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
|
|
71
|
+
const ButtonText = styled(SizableText, {
|
|
72
|
+
name: "ButtonText",
|
|
73
|
+
context: ButtonContext,
|
|
80
74
|
variants: {
|
|
81
75
|
unstyled: {
|
|
82
76
|
false: {
|
|
@@ -94,49 +88,16 @@ const ButtonTextFrame = styled(SizableText, {
|
|
|
94
88
|
unstyled: false
|
|
95
89
|
}
|
|
96
90
|
});
|
|
97
|
-
const [createButtonContext, createButtonScope] = createContextScope("Button");
|
|
98
|
-
const [ButtonProvider, useButtonContext] = createButtonContext("Button");
|
|
99
|
-
const ButtonTextComponent = ButtonTextFrame.extractable(
|
|
100
|
-
forwardRef(
|
|
101
|
-
(props, ref) => {
|
|
102
|
-
const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
|
|
103
|
-
useEffect(() => {
|
|
104
|
-
const unregister = context.registerButtonText();
|
|
105
|
-
return () => unregister();
|
|
106
|
-
}, [context.registerButtonText]);
|
|
107
|
-
return /* @__PURE__ */ jsx(ButtonTextFrame, { size: props.size ?? context.size, ...props, ref });
|
|
108
|
-
}
|
|
109
|
-
)
|
|
110
|
-
);
|
|
111
|
-
const BUTTON_ICON_NAME = "ButtonIcon";
|
|
112
91
|
const ButtonIcon = (props) => {
|
|
113
92
|
const { children, scaleIcon = 1 } = props;
|
|
114
|
-
const
|
|
115
|
-
const size = context.size;
|
|
116
|
-
const color = context.color;
|
|
93
|
+
const { size, color } = useContext(ButtonContext);
|
|
117
94
|
const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
|
|
118
95
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
119
96
|
return getThemedIcon(children);
|
|
120
97
|
};
|
|
121
98
|
const ButtonComponent = ButtonFrame.styleable(function Button(props, ref) {
|
|
122
99
|
const { props: buttonProps } = useButton(props);
|
|
123
|
-
|
|
124
|
-
const registerButtonText = useCallback(() => {
|
|
125
|
-
setButtonTextCount((prev) => prev + 1);
|
|
126
|
-
return () => setButtonTextCount((prev) => prev - 1);
|
|
127
|
-
}, [setButtonTextCount]);
|
|
128
|
-
const hasTextComponent = buttonTextCount > 0;
|
|
129
|
-
return /* @__PURE__ */ jsx(
|
|
130
|
-
ButtonProvider,
|
|
131
|
-
{
|
|
132
|
-
scope: props.__scopeButton,
|
|
133
|
-
color: props.color,
|
|
134
|
-
hasTextComponent,
|
|
135
|
-
size: props.size ?? "$true",
|
|
136
|
-
registerButtonText,
|
|
137
|
-
children: /* @__PURE__ */ jsx(ButtonFrame, { ...hasTextComponent ? props : buttonProps, ref })
|
|
138
|
-
}
|
|
139
|
-
);
|
|
100
|
+
return /* @__PURE__ */ jsx(ButtonFrame, { ...buttonProps, ref });
|
|
140
101
|
});
|
|
141
102
|
const buttonStaticConfig = {
|
|
142
103
|
inlineProps: /* @__PURE__ */ new Set([
|
|
@@ -153,10 +114,10 @@ const buttonStaticConfig = {
|
|
|
153
114
|
])
|
|
154
115
|
};
|
|
155
116
|
const Button2 = withStaticProperties(ButtonComponent, {
|
|
156
|
-
Text:
|
|
117
|
+
Text: ButtonText,
|
|
157
118
|
Icon: ButtonIcon
|
|
158
119
|
});
|
|
159
|
-
function useButton(propsIn, { Text =
|
|
120
|
+
function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
|
|
160
121
|
const {
|
|
161
122
|
children,
|
|
162
123
|
icon,
|
|
@@ -190,7 +151,7 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
190
151
|
const contents = wrapChildrenInText(
|
|
191
152
|
Text,
|
|
192
153
|
propsActive,
|
|
193
|
-
Text ===
|
|
154
|
+
Text === ButtonText && hasUnstyled ? {
|
|
194
155
|
unstyled: propsIn.unstyled
|
|
195
156
|
} : void 0
|
|
196
157
|
);
|
|
@@ -228,10 +189,11 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
228
189
|
}
|
|
229
190
|
export {
|
|
230
191
|
Button2 as Button,
|
|
192
|
+
ButtonContext,
|
|
231
193
|
ButtonFrame,
|
|
232
|
-
|
|
194
|
+
ButtonIcon,
|
|
195
|
+
ButtonText,
|
|
233
196
|
buttonStaticConfig,
|
|
234
|
-
createButtonScope,
|
|
235
197
|
useButton
|
|
236
198
|
};
|
|
237
199
|
//# sourceMappingURL=Button.js.map
|
package/dist/esm/Button.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["Button"]
|
|
6
6
|
}
|