@tamagui/button 1.27.2 → 1.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Button.js +24 -45
- package/dist/cjs/Button.js.map +1 -1
- package/dist/cjs/Button.test.js.map +1 -1
- package/dist/esm/Button.js +28 -52
- package/dist/esm/Button.js.map +1 -1
- package/dist/esm/Button.test.js.map +1 -1
- package/dist/jsx/Button.js +28 -48
- package/dist/jsx/Button.js.map +1 -1
- package/dist/jsx/Button.mjs +28 -48
- 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/package.json +7 -7
- package/src/Button.test.tsx +1 -4
- package/src/Button.tsx +47 -91
- package/types/Button.d.ts +117 -107
- package/types/Button.d.ts.map +1 -1
- package/dist/esm/Button.mjs +0 -237
- package/dist/esm/Button.test.mjs +0 -11
- package/dist/esm/index.mjs +0 -2
- package/dist/jsx/base.mjs +0 -5
- package/dist/jsx/themed.mjs +0 -232
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,21 @@ 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
|
+
color: void 0,
|
|
41
|
+
fontFamily: void 0,
|
|
42
|
+
fontSize: void 0,
|
|
43
|
+
fontStyle: void 0,
|
|
44
|
+
fontWeight: void 0,
|
|
45
|
+
letterSpacing: void 0,
|
|
46
|
+
textAlign: void 0
|
|
47
|
+
});
|
|
38
48
|
const BUTTON_NAME = "Button";
|
|
39
49
|
const ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
|
|
40
50
|
name: BUTTON_NAME,
|
|
41
51
|
tag: "button",
|
|
52
|
+
context: ButtonContext,
|
|
42
53
|
focusable: true,
|
|
43
54
|
variants: {
|
|
44
55
|
unstyled: {
|
|
@@ -84,9 +95,9 @@ const ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
|
|
|
84
95
|
unstyled: false
|
|
85
96
|
}
|
|
86
97
|
});
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
|
|
98
|
+
const ButtonText = (0, import_web.styled)(import_text.SizableText, {
|
|
99
|
+
name: "ButtonText",
|
|
100
|
+
context: ButtonContext,
|
|
90
101
|
variants: {
|
|
91
102
|
unstyled: {
|
|
92
103
|
false: {
|
|
@@ -104,49 +115,16 @@ const ButtonTextFrame = (0, import_web.styled)(import_text.SizableText, {
|
|
|
104
115
|
unstyled: false
|
|
105
116
|
}
|
|
106
117
|
});
|
|
107
|
-
const [createButtonContext, createButtonScope] = (0, import_create_context.createContextScope)("Button");
|
|
108
|
-
const [ButtonProvider, useButtonContext] = createButtonContext("Button");
|
|
109
|
-
const ButtonTextComponent = ButtonTextFrame.extractable(
|
|
110
|
-
(0, import_react.forwardRef)(
|
|
111
|
-
(props, ref) => {
|
|
112
|
-
const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
|
|
113
|
-
(0, import_react.useEffect)(() => {
|
|
114
|
-
const unregister = context.registerButtonText();
|
|
115
|
-
return () => unregister();
|
|
116
|
-
}, [context.registerButtonText]);
|
|
117
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonTextFrame, { size: props.size ?? context.size, ...props, ref });
|
|
118
|
-
}
|
|
119
|
-
)
|
|
120
|
-
);
|
|
121
|
-
const BUTTON_ICON_NAME = "ButtonIcon";
|
|
122
118
|
const ButtonIcon = (props) => {
|
|
123
119
|
const { children, scaleIcon = 1 } = props;
|
|
124
|
-
const
|
|
125
|
-
const size = context.size;
|
|
126
|
-
const color = context.color;
|
|
120
|
+
const { size, color } = (0, import_react.useContext)(ButtonContext);
|
|
127
121
|
const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
|
|
128
122
|
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
129
123
|
return getThemedIcon(children);
|
|
130
124
|
};
|
|
131
125
|
const ButtonComponent = ButtonFrame.styleable(function Button(props, ref) {
|
|
132
126
|
const { props: buttonProps } = useButton(props);
|
|
133
|
-
|
|
134
|
-
const registerButtonText = (0, import_react.useCallback)(() => {
|
|
135
|
-
setButtonTextCount((prev) => prev + 1);
|
|
136
|
-
return () => setButtonTextCount((prev) => prev - 1);
|
|
137
|
-
}, [setButtonTextCount]);
|
|
138
|
-
const hasTextComponent = buttonTextCount > 0;
|
|
139
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
140
|
-
ButtonProvider,
|
|
141
|
-
{
|
|
142
|
-
scope: props.__scopeButton,
|
|
143
|
-
color: props.color,
|
|
144
|
-
hasTextComponent,
|
|
145
|
-
size: props.size ?? "$true",
|
|
146
|
-
registerButtonText,
|
|
147
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { ...hasTextComponent ? props : buttonProps, ref })
|
|
148
|
-
}
|
|
149
|
-
);
|
|
127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { ...buttonProps, ref });
|
|
150
128
|
});
|
|
151
129
|
const buttonStaticConfig = {
|
|
152
130
|
inlineProps: /* @__PURE__ */ new Set([
|
|
@@ -163,10 +141,10 @@ const buttonStaticConfig = {
|
|
|
163
141
|
])
|
|
164
142
|
};
|
|
165
143
|
const Button2 = (0, import_web.withStaticProperties)(ButtonComponent, {
|
|
166
|
-
Text:
|
|
144
|
+
Text: ButtonText,
|
|
167
145
|
Icon: ButtonIcon
|
|
168
146
|
});
|
|
169
|
-
function useButton(propsIn, { Text =
|
|
147
|
+
function useButton(propsIn, { Text = Button2.Text } = { Text: Button2.Text }) {
|
|
170
148
|
const {
|
|
171
149
|
children,
|
|
172
150
|
icon,
|
|
@@ -200,7 +178,7 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
200
178
|
const contents = (0, import_text.wrapChildrenInText)(
|
|
201
179
|
Text,
|
|
202
180
|
propsActive,
|
|
203
|
-
Text ===
|
|
181
|
+
Text === ButtonText && hasUnstyled ? {
|
|
204
182
|
unstyled: propsIn.unstyled
|
|
205
183
|
} : void 0
|
|
206
184
|
);
|
|
@@ -239,10 +217,11 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
239
217
|
// Annotate the CommonJS export names for ESM import in node:
|
|
240
218
|
0 && (module.exports = {
|
|
241
219
|
Button,
|
|
220
|
+
ButtonContext,
|
|
242
221
|
ButtonFrame,
|
|
222
|
+
ButtonIcon,
|
|
243
223
|
ButtonText,
|
|
244
224
|
buttonStaticConfig,
|
|
245
|
-
createButtonScope,
|
|
246
225
|
useButton
|
|
247
226
|
});
|
|
248
227
|
//# 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/esm/Button.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
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";
|
|
6
5
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
7
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
SizableText,
|
|
8
|
+
wrapChildrenInText
|
|
9
|
+
} from "@tamagui/text";
|
|
8
10
|
import {
|
|
9
11
|
ButtonNestingContext,
|
|
12
|
+
createStyledContext,
|
|
10
13
|
getVariableValue,
|
|
11
14
|
isRSC,
|
|
12
15
|
spacedChildren,
|
|
@@ -14,17 +17,22 @@ import {
|
|
|
14
17
|
useProps,
|
|
15
18
|
withStaticProperties
|
|
16
19
|
} from "@tamagui/web";
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
import { useContext } from "react";
|
|
21
|
+
const ButtonContext = createStyledContext({
|
|
22
|
+
size: "$true",
|
|
23
|
+
color: void 0,
|
|
24
|
+
fontFamily: void 0,
|
|
25
|
+
fontSize: void 0,
|
|
26
|
+
fontStyle: void 0,
|
|
27
|
+
fontWeight: void 0,
|
|
28
|
+
letterSpacing: void 0,
|
|
29
|
+
textAlign: void 0
|
|
30
|
+
});
|
|
24
31
|
const BUTTON_NAME = "Button";
|
|
25
32
|
const ButtonFrame = styled(ThemeableStack, {
|
|
26
33
|
name: BUTTON_NAME,
|
|
27
34
|
tag: "button",
|
|
35
|
+
context: ButtonContext,
|
|
28
36
|
focusable: true,
|
|
29
37
|
variants: {
|
|
30
38
|
unstyled: {
|
|
@@ -70,9 +78,9 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
70
78
|
unstyled: false
|
|
71
79
|
}
|
|
72
80
|
});
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
81
|
+
const ButtonText = styled(SizableText, {
|
|
82
|
+
name: "ButtonText",
|
|
83
|
+
context: ButtonContext,
|
|
76
84
|
variants: {
|
|
77
85
|
unstyled: {
|
|
78
86
|
false: {
|
|
@@ -90,49 +98,16 @@ const ButtonTextFrame = styled(SizableText, {
|
|
|
90
98
|
unstyled: false
|
|
91
99
|
}
|
|
92
100
|
});
|
|
93
|
-
const [createButtonContext, createButtonScope] = createContextScope("Button");
|
|
94
|
-
const [ButtonProvider, useButtonContext] = createButtonContext("Button");
|
|
95
|
-
const ButtonTextComponent = ButtonTextFrame.extractable(
|
|
96
|
-
forwardRef(
|
|
97
|
-
(props, ref) => {
|
|
98
|
-
const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
|
|
99
|
-
useEffect(() => {
|
|
100
|
-
const unregister = context.registerButtonText();
|
|
101
|
-
return () => unregister();
|
|
102
|
-
}, [context.registerButtonText]);
|
|
103
|
-
return /* @__PURE__ */ jsx(ButtonTextFrame, { size: props.size ?? context.size, ...props, ref });
|
|
104
|
-
}
|
|
105
|
-
)
|
|
106
|
-
);
|
|
107
|
-
const BUTTON_ICON_NAME = "ButtonIcon";
|
|
108
101
|
const ButtonIcon = (props) => {
|
|
109
102
|
const { children, scaleIcon = 1 } = props;
|
|
110
|
-
const
|
|
111
|
-
const size = context.size;
|
|
112
|
-
const color = context.color;
|
|
103
|
+
const { size, color } = useContext(ButtonContext);
|
|
113
104
|
const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
|
|
114
105
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
115
106
|
return getThemedIcon(children);
|
|
116
107
|
};
|
|
117
108
|
const ButtonComponent = ButtonFrame.styleable(function Button(props, ref) {
|
|
118
109
|
const { props: buttonProps } = useButton(props);
|
|
119
|
-
|
|
120
|
-
const registerButtonText = useCallback(() => {
|
|
121
|
-
setButtonTextCount((prev) => prev + 1);
|
|
122
|
-
return () => setButtonTextCount((prev) => prev - 1);
|
|
123
|
-
}, [setButtonTextCount]);
|
|
124
|
-
const hasTextComponent = buttonTextCount > 0;
|
|
125
|
-
return /* @__PURE__ */ jsx(
|
|
126
|
-
ButtonProvider,
|
|
127
|
-
{
|
|
128
|
-
scope: props.__scopeButton,
|
|
129
|
-
color: props.color,
|
|
130
|
-
hasTextComponent,
|
|
131
|
-
size: props.size ?? "$true",
|
|
132
|
-
registerButtonText,
|
|
133
|
-
children: /* @__PURE__ */ jsx(ButtonFrame, { ...hasTextComponent ? props : buttonProps, ref })
|
|
134
|
-
}
|
|
135
|
-
);
|
|
110
|
+
return /* @__PURE__ */ jsx(ButtonFrame, { ...buttonProps, ref });
|
|
136
111
|
});
|
|
137
112
|
const buttonStaticConfig = {
|
|
138
113
|
inlineProps: /* @__PURE__ */ new Set([
|
|
@@ -149,10 +124,10 @@ const buttonStaticConfig = {
|
|
|
149
124
|
])
|
|
150
125
|
};
|
|
151
126
|
const Button2 = withStaticProperties(ButtonComponent, {
|
|
152
|
-
Text:
|
|
127
|
+
Text: ButtonText,
|
|
153
128
|
Icon: ButtonIcon
|
|
154
129
|
});
|
|
155
|
-
function useButton(propsIn, { Text =
|
|
130
|
+
function useButton(propsIn, { Text = Button2.Text } = { Text: Button2.Text }) {
|
|
156
131
|
const {
|
|
157
132
|
children,
|
|
158
133
|
icon,
|
|
@@ -186,7 +161,7 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
186
161
|
const contents = wrapChildrenInText(
|
|
187
162
|
Text,
|
|
188
163
|
propsActive,
|
|
189
|
-
Text ===
|
|
164
|
+
Text === ButtonText && hasUnstyled ? {
|
|
190
165
|
unstyled: propsIn.unstyled
|
|
191
166
|
} : void 0
|
|
192
167
|
);
|
|
@@ -224,10 +199,11 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
224
199
|
}
|
|
225
200
|
export {
|
|
226
201
|
Button2 as Button,
|
|
202
|
+
ButtonContext,
|
|
227
203
|
ButtonFrame,
|
|
228
|
-
|
|
204
|
+
ButtonIcon,
|
|
205
|
+
ButtonText,
|
|
229
206
|
buttonStaticConfig,
|
|
230
|
-
createButtonScope,
|
|
231
207
|
useButton
|
|
232
208
|
};
|
|
233
209
|
//# 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
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.test.tsx"],
|
|
4
|
-
"mappings": "AAAA,QAAQ,IAAI,iBAAiB;AAE7B,SAAS,+BAA+B;AACxC,
|
|
4
|
+
"mappings": "AAAA,QAAQ,IAAI,iBAAiB;AAE7B,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAC9B,SAAS,UAAU,QAAQ,YAAY;AAEvC,MAAM,OAAO,cAAc,wBAAwB,CAAC;AAEpD,SAAS,UAAU,MAAM;AACvB,OAAK,OAAO,MAAM;AAChB,WAAO,IAAI,EAAE,WAAW;AAAA,EAC1B,CAAC;AAWH,CAAC;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/dist/jsx/Button.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
2
1
|
import { getFontSize } from "@tamagui/font-size";
|
|
3
2
|
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
4
3
|
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
5
4
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
6
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
SizableText,
|
|
7
|
+
wrapChildrenInText
|
|
8
|
+
} from "@tamagui/text";
|
|
7
9
|
import {
|
|
8
10
|
ButtonNestingContext,
|
|
11
|
+
createStyledContext,
|
|
9
12
|
getVariableValue,
|
|
10
13
|
isRSC,
|
|
11
14
|
spacedChildren,
|
|
@@ -13,17 +16,22 @@ import {
|
|
|
13
16
|
useProps,
|
|
14
17
|
withStaticProperties
|
|
15
18
|
} from "@tamagui/web";
|
|
16
|
-
import {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
import { useContext } from "react";
|
|
20
|
+
const ButtonContext = createStyledContext({
|
|
21
|
+
size: "$true",
|
|
22
|
+
color: void 0,
|
|
23
|
+
fontFamily: void 0,
|
|
24
|
+
fontSize: void 0,
|
|
25
|
+
fontStyle: void 0,
|
|
26
|
+
fontWeight: void 0,
|
|
27
|
+
letterSpacing: void 0,
|
|
28
|
+
textAlign: void 0
|
|
29
|
+
});
|
|
23
30
|
const BUTTON_NAME = "Button";
|
|
24
31
|
const ButtonFrame = styled(ThemeableStack, {
|
|
25
32
|
name: BUTTON_NAME,
|
|
26
33
|
tag: "button",
|
|
34
|
+
context: ButtonContext,
|
|
27
35
|
focusable: true,
|
|
28
36
|
variants: {
|
|
29
37
|
unstyled: {
|
|
@@ -69,9 +77,9 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
69
77
|
unstyled: false
|
|
70
78
|
}
|
|
71
79
|
});
|
|
72
|
-
const
|
|
73
|
-
|
|
74
|
-
|
|
80
|
+
const ButtonText = styled(SizableText, {
|
|
81
|
+
name: "ButtonText",
|
|
82
|
+
context: ButtonContext,
|
|
75
83
|
variants: {
|
|
76
84
|
unstyled: {
|
|
77
85
|
false: {
|
|
@@ -89,45 +97,16 @@ const ButtonTextFrame = styled(SizableText, {
|
|
|
89
97
|
unstyled: false
|
|
90
98
|
}
|
|
91
99
|
});
|
|
92
|
-
const [createButtonContext, createButtonScope] = createContextScope("Button");
|
|
93
|
-
const [ButtonProvider, useButtonContext] = createButtonContext("Button");
|
|
94
|
-
const ButtonTextComponent = ButtonTextFrame.extractable(
|
|
95
|
-
forwardRef(
|
|
96
|
-
(props, ref) => {
|
|
97
|
-
const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
const unregister = context.registerButtonText();
|
|
100
|
-
return () => unregister();
|
|
101
|
-
}, [context.registerButtonText]);
|
|
102
|
-
return <ButtonTextFrame size={props.size ?? context.size} {...props} ref={ref} />;
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
);
|
|
106
|
-
const BUTTON_ICON_NAME = "ButtonIcon";
|
|
107
100
|
const ButtonIcon = (props) => {
|
|
108
101
|
const { children, scaleIcon = 1 } = props;
|
|
109
|
-
const
|
|
110
|
-
const size = context.size;
|
|
111
|
-
const color = context.color;
|
|
102
|
+
const { size, color } = useContext(ButtonContext);
|
|
112
103
|
const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
|
|
113
104
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
114
105
|
return getThemedIcon(children);
|
|
115
106
|
};
|
|
116
107
|
const ButtonComponent = ButtonFrame.styleable(function Button(props, ref) {
|
|
117
108
|
const { props: buttonProps } = useButton(props);
|
|
118
|
-
|
|
119
|
-
const registerButtonText = useCallback(() => {
|
|
120
|
-
setButtonTextCount((prev) => prev + 1);
|
|
121
|
-
return () => setButtonTextCount((prev) => prev - 1);
|
|
122
|
-
}, [setButtonTextCount]);
|
|
123
|
-
const hasTextComponent = buttonTextCount > 0;
|
|
124
|
-
return <ButtonProvider
|
|
125
|
-
scope={props.__scopeButton}
|
|
126
|
-
color={props.color}
|
|
127
|
-
hasTextComponent={hasTextComponent}
|
|
128
|
-
size={props.size ?? "$true"}
|
|
129
|
-
registerButtonText={registerButtonText}
|
|
130
|
-
><ButtonFrame {...hasTextComponent ? props : buttonProps} ref={ref} /></ButtonProvider>;
|
|
109
|
+
return <ButtonFrame {...buttonProps} ref={ref} />;
|
|
131
110
|
});
|
|
132
111
|
const buttonStaticConfig = {
|
|
133
112
|
inlineProps: /* @__PURE__ */ new Set([
|
|
@@ -144,10 +123,10 @@ const buttonStaticConfig = {
|
|
|
144
123
|
])
|
|
145
124
|
};
|
|
146
125
|
const Button2 = withStaticProperties(ButtonComponent, {
|
|
147
|
-
Text:
|
|
126
|
+
Text: ButtonText,
|
|
148
127
|
Icon: ButtonIcon
|
|
149
128
|
});
|
|
150
|
-
function useButton(propsIn, { Text =
|
|
129
|
+
function useButton(propsIn, { Text = Button2.Text } = { Text: Button2.Text }) {
|
|
151
130
|
const {
|
|
152
131
|
children,
|
|
153
132
|
icon,
|
|
@@ -181,7 +160,7 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
181
160
|
const contents = wrapChildrenInText(
|
|
182
161
|
Text,
|
|
183
162
|
propsActive,
|
|
184
|
-
Text ===
|
|
163
|
+
Text === ButtonText && hasUnstyled ? {
|
|
185
164
|
unstyled: propsIn.unstyled
|
|
186
165
|
} : void 0
|
|
187
166
|
);
|
|
@@ -219,10 +198,11 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
219
198
|
}
|
|
220
199
|
export {
|
|
221
200
|
Button2 as Button,
|
|
201
|
+
ButtonContext,
|
|
222
202
|
ButtonFrame,
|
|
223
|
-
|
|
203
|
+
ButtonIcon,
|
|
204
|
+
ButtonText,
|
|
224
205
|
buttonStaticConfig,
|
|
225
|
-
createButtonScope,
|
|
226
206
|
useButton
|
|
227
207
|
};
|
|
228
208
|
//# sourceMappingURL=Button.js.map
|
package/dist/jsx/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
|
}
|
package/dist/jsx/Button.mjs
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
2
1
|
import { getFontSize } from "@tamagui/font-size";
|
|
3
2
|
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
4
3
|
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
5
4
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
6
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
SizableText,
|
|
7
|
+
wrapChildrenInText
|
|
8
|
+
} from "@tamagui/text";
|
|
7
9
|
import {
|
|
8
10
|
ButtonNestingContext,
|
|
11
|
+
createStyledContext,
|
|
9
12
|
getVariableValue,
|
|
10
13
|
isRSC,
|
|
11
14
|
spacedChildren,
|
|
@@ -13,17 +16,22 @@ import {
|
|
|
13
16
|
useProps,
|
|
14
17
|
withStaticProperties
|
|
15
18
|
} from "@tamagui/web";
|
|
16
|
-
import {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
import { useContext } from "react";
|
|
20
|
+
const ButtonContext = createStyledContext({
|
|
21
|
+
size: "$true",
|
|
22
|
+
color: void 0,
|
|
23
|
+
fontFamily: void 0,
|
|
24
|
+
fontSize: void 0,
|
|
25
|
+
fontStyle: void 0,
|
|
26
|
+
fontWeight: void 0,
|
|
27
|
+
letterSpacing: void 0,
|
|
28
|
+
textAlign: void 0
|
|
29
|
+
});
|
|
23
30
|
const BUTTON_NAME = "Button";
|
|
24
31
|
const ButtonFrame = styled(ThemeableStack, {
|
|
25
32
|
name: BUTTON_NAME,
|
|
26
33
|
tag: "button",
|
|
34
|
+
context: ButtonContext,
|
|
27
35
|
focusable: true,
|
|
28
36
|
variants: {
|
|
29
37
|
unstyled: {
|
|
@@ -69,9 +77,9 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
69
77
|
unstyled: false
|
|
70
78
|
}
|
|
71
79
|
});
|
|
72
|
-
const
|
|
73
|
-
|
|
74
|
-
|
|
80
|
+
const ButtonText = styled(SizableText, {
|
|
81
|
+
name: "ButtonText",
|
|
82
|
+
context: ButtonContext,
|
|
75
83
|
variants: {
|
|
76
84
|
unstyled: {
|
|
77
85
|
false: {
|
|
@@ -89,45 +97,16 @@ const ButtonTextFrame = styled(SizableText, {
|
|
|
89
97
|
unstyled: false
|
|
90
98
|
}
|
|
91
99
|
});
|
|
92
|
-
const [createButtonContext, createButtonScope] = createContextScope("Button");
|
|
93
|
-
const [ButtonProvider, useButtonContext] = createButtonContext("Button");
|
|
94
|
-
const ButtonTextComponent = ButtonTextFrame.extractable(
|
|
95
|
-
forwardRef(
|
|
96
|
-
(props, ref) => {
|
|
97
|
-
const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
const unregister = context.registerButtonText();
|
|
100
|
-
return () => unregister();
|
|
101
|
-
}, [context.registerButtonText]);
|
|
102
|
-
return <ButtonTextFrame size={props.size ?? context.size} {...props} ref={ref} />;
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
);
|
|
106
|
-
const BUTTON_ICON_NAME = "ButtonIcon";
|
|
107
100
|
const ButtonIcon = (props) => {
|
|
108
101
|
const { children, scaleIcon = 1 } = props;
|
|
109
|
-
const
|
|
110
|
-
const size = context.size;
|
|
111
|
-
const color = context.color;
|
|
102
|
+
const { size, color } = useContext(ButtonContext);
|
|
112
103
|
const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
|
|
113
104
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
114
105
|
return getThemedIcon(children);
|
|
115
106
|
};
|
|
116
107
|
const ButtonComponent = ButtonFrame.styleable(function Button(props, ref) {
|
|
117
108
|
const { props: buttonProps } = useButton(props);
|
|
118
|
-
|
|
119
|
-
const registerButtonText = useCallback(() => {
|
|
120
|
-
setButtonTextCount((prev) => prev + 1);
|
|
121
|
-
return () => setButtonTextCount((prev) => prev - 1);
|
|
122
|
-
}, [setButtonTextCount]);
|
|
123
|
-
const hasTextComponent = buttonTextCount > 0;
|
|
124
|
-
return <ButtonProvider
|
|
125
|
-
scope={props.__scopeButton}
|
|
126
|
-
color={props.color}
|
|
127
|
-
hasTextComponent={hasTextComponent}
|
|
128
|
-
size={props.size ?? "$true"}
|
|
129
|
-
registerButtonText={registerButtonText}
|
|
130
|
-
><ButtonFrame {...hasTextComponent ? props : buttonProps} ref={ref} /></ButtonProvider>;
|
|
109
|
+
return <ButtonFrame {...buttonProps} ref={ref} />;
|
|
131
110
|
});
|
|
132
111
|
const buttonStaticConfig = {
|
|
133
112
|
inlineProps: /* @__PURE__ */ new Set([
|
|
@@ -144,10 +123,10 @@ const buttonStaticConfig = {
|
|
|
144
123
|
])
|
|
145
124
|
};
|
|
146
125
|
const Button2 = withStaticProperties(ButtonComponent, {
|
|
147
|
-
Text:
|
|
126
|
+
Text: ButtonText,
|
|
148
127
|
Icon: ButtonIcon
|
|
149
128
|
});
|
|
150
|
-
function useButton(propsIn, { Text =
|
|
129
|
+
function useButton(propsIn, { Text = Button2.Text } = { Text: Button2.Text }) {
|
|
151
130
|
const {
|
|
152
131
|
children,
|
|
153
132
|
icon,
|
|
@@ -181,7 +160,7 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
181
160
|
const contents = wrapChildrenInText(
|
|
182
161
|
Text,
|
|
183
162
|
propsActive,
|
|
184
|
-
Text ===
|
|
163
|
+
Text === ButtonText && hasUnstyled ? {
|
|
185
164
|
unstyled: propsIn.unstyled
|
|
186
165
|
} : void 0
|
|
187
166
|
);
|
|
@@ -219,10 +198,11 @@ function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame
|
|
|
219
198
|
}
|
|
220
199
|
export {
|
|
221
200
|
Button2 as Button,
|
|
201
|
+
ButtonContext,
|
|
222
202
|
ButtonFrame,
|
|
223
|
-
|
|
203
|
+
ButtonIcon,
|
|
204
|
+
ButtonText,
|
|
224
205
|
buttonStaticConfig,
|
|
225
|
-
createButtonScope,
|
|
226
206
|
useButton
|
|
227
207
|
};
|
|
228
208
|
//# sourceMappingURL=Button.mjs.map
|