@tamagui/button 1.0.1-beta.99 → 1.0.1-rc.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 +60 -79
- package/dist/cjs/Button.js.map +3 -3
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Button.js +60 -80
- package/dist/esm/Button.js.map +3 -3
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Button.js +49 -22
- package/dist/jsx/Button.js.map +3 -3
- package/dist/jsx/index.js +0 -0
- package/dist/jsx/index.js.map +1 -1
- package/package.json +20 -10
- package/src/Button.tsx +103 -67
- package/types/Button.d.ts +524 -72
- package/types/index.d.ts +0 -0
- package/types/Button.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
package/dist/cjs/Button.js
CHANGED
|
@@ -1,38 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
9
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
6
|
var __export = (target, all) => {
|
|
37
7
|
for (var name in all)
|
|
38
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -45,24 +15,27 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
45
15
|
}
|
|
46
16
|
return to;
|
|
47
17
|
};
|
|
48
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
49
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
50
19
|
var Button_exports = {};
|
|
51
20
|
__export(Button_exports, {
|
|
52
|
-
Button: () =>
|
|
21
|
+
Button: () => Button2,
|
|
53
22
|
ButtonFrame: () => ButtonFrame,
|
|
54
|
-
ButtonText: () => ButtonText
|
|
23
|
+
ButtonText: () => ButtonText,
|
|
24
|
+
buttonStaticConfig: () => buttonStaticConfig,
|
|
25
|
+
useButton: () => useButton
|
|
55
26
|
});
|
|
56
27
|
module.exports = __toCommonJS(Button_exports);
|
|
28
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
57
29
|
var import_core = require("@tamagui/core");
|
|
58
30
|
var import_font_size = require("@tamagui/font-size");
|
|
31
|
+
var import_get_button_sized = require("@tamagui/get-button-sized");
|
|
59
32
|
var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
|
|
60
33
|
var import_stacks = require("@tamagui/stacks");
|
|
61
34
|
var import_text = require("@tamagui/text");
|
|
62
|
-
var import_react =
|
|
63
|
-
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
const NAME = "Button";
|
|
64
37
|
const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
65
|
-
name:
|
|
38
|
+
name: NAME,
|
|
66
39
|
tag: "button",
|
|
67
40
|
focusable: true,
|
|
68
41
|
hoverTheme: true,
|
|
@@ -86,7 +59,7 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
86
59
|
},
|
|
87
60
|
variants: {
|
|
88
61
|
size: {
|
|
89
|
-
"...size":
|
|
62
|
+
"...size": import_get_button_sized.getButtonSized
|
|
90
63
|
},
|
|
91
64
|
active: {
|
|
92
65
|
true: {
|
|
@@ -97,7 +70,6 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
97
70
|
},
|
|
98
71
|
disabled: {
|
|
99
72
|
true: {
|
|
100
|
-
opacity: 0.5,
|
|
101
73
|
pointerEvents: "none"
|
|
102
74
|
}
|
|
103
75
|
}
|
|
@@ -108,14 +80,14 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
108
80
|
});
|
|
109
81
|
const ButtonText = (0, import_core.styled)(import_text.SizableText, {
|
|
110
82
|
color: "$color",
|
|
111
|
-
|
|
112
|
-
cursor: "
|
|
83
|
+
userSelect: "none",
|
|
84
|
+
cursor: "pointer",
|
|
113
85
|
flexGrow: 0,
|
|
114
86
|
flexShrink: 1,
|
|
115
87
|
ellipse: true
|
|
116
88
|
});
|
|
117
|
-
|
|
118
|
-
const
|
|
89
|
+
function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
|
|
90
|
+
const {
|
|
119
91
|
children,
|
|
120
92
|
icon,
|
|
121
93
|
iconAfter,
|
|
@@ -132,50 +104,53 @@ const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
|
|
|
132
104
|
fontSize,
|
|
133
105
|
fontFamily,
|
|
134
106
|
textAlign,
|
|
135
|
-
textProps
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
"theme",
|
|
142
|
-
"space",
|
|
143
|
-
"spaceFlex",
|
|
144
|
-
"scaleIcon",
|
|
145
|
-
"scaleSpace",
|
|
146
|
-
"separator",
|
|
147
|
-
"color",
|
|
148
|
-
"fontWeight",
|
|
149
|
-
"letterSpacing",
|
|
150
|
-
"fontSize",
|
|
151
|
-
"fontFamily",
|
|
152
|
-
"textAlign",
|
|
153
|
-
"textProps"
|
|
154
|
-
]);
|
|
155
|
-
const isInsideButton = (0, import_react.useContext)(import_core.ButtonInsideButtonContext);
|
|
156
|
-
const size = props.size || "$4";
|
|
107
|
+
textProps,
|
|
108
|
+
...rest
|
|
109
|
+
} = props;
|
|
110
|
+
const isNested = import_core.isRSC ? false : (0, import_react.useContext)(import_core.ButtonNestingContext);
|
|
111
|
+
const mediaActiveProps = (0, import_core.useMediaPropsActive)(props);
|
|
112
|
+
const size = mediaActiveProps.size || "$4";
|
|
157
113
|
const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
|
|
158
114
|
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
|
|
159
115
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
160
116
|
const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
|
|
161
|
-
const contents = (0, import_text.wrapChildrenInText)(
|
|
162
|
-
|
|
163
|
-
fontFamily
|
|
164
|
-
}, isInsideButton && {
|
|
165
|
-
tag: "span"
|
|
166
|
-
}), {
|
|
167
|
-
ref
|
|
168
|
-
}), rest), /* @__PURE__ */ import_react.default.createElement(import_core.ButtonInsideButtonContext.Provider, {
|
|
169
|
-
value: true
|
|
170
|
-
}, themedIcon || themedIconAfter ? (0, import_core.spacedChildren)({
|
|
117
|
+
const contents = (0, import_text.wrapChildrenInText)(Text, mediaActiveProps);
|
|
118
|
+
const inner = themedIcon || themedIconAfter ? (0, import_core.spacedChildren)({
|
|
171
119
|
space: spaceSize,
|
|
172
120
|
spaceFlex,
|
|
173
121
|
separator,
|
|
174
122
|
direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
|
|
175
123
|
children: [themedIcon, contents, themedIconAfter]
|
|
176
|
-
}) : contents
|
|
124
|
+
}) : contents;
|
|
125
|
+
return {
|
|
126
|
+
spaceSize,
|
|
127
|
+
isNested,
|
|
128
|
+
props: {
|
|
129
|
+
...props.disabled && {
|
|
130
|
+
focusable: void 0,
|
|
131
|
+
focusStyle: {
|
|
132
|
+
borderColor: "$background"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
...isNested ? {
|
|
136
|
+
tag: "span"
|
|
137
|
+
} : {},
|
|
138
|
+
...rest,
|
|
139
|
+
children: import_core.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ButtonNestingContext.Provider, {
|
|
140
|
+
value: true,
|
|
141
|
+
children: inner
|
|
142
|
+
})
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {
|
|
147
|
+
const { props: buttonProps } = useButton(props);
|
|
148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, {
|
|
149
|
+
...buttonProps,
|
|
150
|
+
ref
|
|
151
|
+
});
|
|
177
152
|
});
|
|
178
|
-
const
|
|
153
|
+
const buttonStaticConfig = {
|
|
179
154
|
inlineProps: /* @__PURE__ */ new Set([
|
|
180
155
|
"color",
|
|
181
156
|
"fontWeight",
|
|
@@ -184,11 +159,17 @@ const Button = ButtonFrame.extractable((0, import_core.themeable)(ButtonComponen
|
|
|
184
159
|
"letterSpacing",
|
|
185
160
|
"textAlign"
|
|
186
161
|
])
|
|
187
|
-
}
|
|
162
|
+
};
|
|
163
|
+
const Button2 = ButtonFrame.extractable(
|
|
164
|
+
(0, import_core.themeable)(ButtonComponent, ButtonFrame.staticConfig),
|
|
165
|
+
buttonStaticConfig
|
|
166
|
+
);
|
|
188
167
|
// Annotate the CommonJS export names for ESM import in node:
|
|
189
168
|
0 && (module.exports = {
|
|
190
169
|
Button,
|
|
191
170
|
ButtonFrame,
|
|
192
|
-
ButtonText
|
|
171
|
+
ButtonText,
|
|
172
|
+
buttonStaticConfig,
|
|
173
|
+
useButton
|
|
193
174
|
});
|
|
194
175
|
//# sourceMappingURL=Button.js.map
|
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
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
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 /**\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n\n // if we wanted this only when pressable = true, we'd need to merge variants?\n cursor: 'pointer',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\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: '$4',\n },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n color: '$color',\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\nexport function useButton(\n props: 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 } = props\n\n const isNested = isRSC ? false : useContext(ButtonNestingContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\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 = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? 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 props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n isNested,\n props: {\n ...(props.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 // fixes SSR issue + DOM nesting issue of not allowing button in button\n ...(isNested\n ? {\n tag: 'span',\n }\n : {}),\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n ),\n },\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n const { props: buttonProps } = useButton(props)\n return <ButtonFrame {...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 ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n themeable(ButtonComponent, ButtonFrame.staticConfig),\n buttonStaticConfig\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Button"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
package/dist/esm/Button.js
CHANGED
|
@@ -1,50 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
32
2
|
import {
|
|
33
|
-
|
|
34
|
-
getButtonSize,
|
|
3
|
+
ButtonNestingContext,
|
|
35
4
|
getVariableValue,
|
|
5
|
+
isRSC,
|
|
36
6
|
spacedChildren,
|
|
37
7
|
styled,
|
|
38
|
-
themeable
|
|
8
|
+
themeable,
|
|
9
|
+
useMediaPropsActive
|
|
39
10
|
} from "@tamagui/core";
|
|
40
11
|
import { getFontSize } from "@tamagui/font-size";
|
|
12
|
+
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
41
13
|
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
42
14
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
43
15
|
import { SizableText, wrapChildrenInText } from "@tamagui/text";
|
|
44
|
-
import
|
|
45
|
-
|
|
16
|
+
import { forwardRef, useContext } from "react";
|
|
17
|
+
const NAME = "Button";
|
|
46
18
|
const ButtonFrame = styled(ThemeableStack, {
|
|
47
|
-
name:
|
|
19
|
+
name: NAME,
|
|
48
20
|
tag: "button",
|
|
49
21
|
focusable: true,
|
|
50
22
|
hoverTheme: true,
|
|
@@ -68,7 +40,7 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
68
40
|
},
|
|
69
41
|
variants: {
|
|
70
42
|
size: {
|
|
71
|
-
"...size":
|
|
43
|
+
"...size": getButtonSized
|
|
72
44
|
},
|
|
73
45
|
active: {
|
|
74
46
|
true: {
|
|
@@ -79,7 +51,6 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
79
51
|
},
|
|
80
52
|
disabled: {
|
|
81
53
|
true: {
|
|
82
|
-
opacity: 0.5,
|
|
83
54
|
pointerEvents: "none"
|
|
84
55
|
}
|
|
85
56
|
}
|
|
@@ -90,14 +61,14 @@ const ButtonFrame = styled(ThemeableStack, {
|
|
|
90
61
|
});
|
|
91
62
|
const ButtonText = styled(SizableText, {
|
|
92
63
|
color: "$color",
|
|
93
|
-
|
|
94
|
-
cursor: "
|
|
64
|
+
userSelect: "none",
|
|
65
|
+
cursor: "pointer",
|
|
95
66
|
flexGrow: 0,
|
|
96
67
|
flexShrink: 1,
|
|
97
68
|
ellipse: true
|
|
98
69
|
});
|
|
99
|
-
|
|
100
|
-
const
|
|
70
|
+
function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
|
|
71
|
+
const {
|
|
101
72
|
children,
|
|
102
73
|
icon,
|
|
103
74
|
iconAfter,
|
|
@@ -114,50 +85,53 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
114
85
|
fontSize,
|
|
115
86
|
fontFamily,
|
|
116
87
|
textAlign,
|
|
117
|
-
textProps
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
"theme",
|
|
124
|
-
"space",
|
|
125
|
-
"spaceFlex",
|
|
126
|
-
"scaleIcon",
|
|
127
|
-
"scaleSpace",
|
|
128
|
-
"separator",
|
|
129
|
-
"color",
|
|
130
|
-
"fontWeight",
|
|
131
|
-
"letterSpacing",
|
|
132
|
-
"fontSize",
|
|
133
|
-
"fontFamily",
|
|
134
|
-
"textAlign",
|
|
135
|
-
"textProps"
|
|
136
|
-
]);
|
|
137
|
-
const isInsideButton = useContext(ButtonInsideButtonContext);
|
|
138
|
-
const size = props.size || "$4";
|
|
88
|
+
textProps,
|
|
89
|
+
...rest
|
|
90
|
+
} = props;
|
|
91
|
+
const isNested = isRSC ? false : useContext(ButtonNestingContext);
|
|
92
|
+
const mediaActiveProps = useMediaPropsActive(props);
|
|
93
|
+
const size = mediaActiveProps.size || "$4";
|
|
139
94
|
const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
|
|
140
95
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
|
|
141
96
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
142
97
|
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
143
|
-
const contents = wrapChildrenInText(
|
|
144
|
-
|
|
145
|
-
fontFamily
|
|
146
|
-
}, isInsideButton && {
|
|
147
|
-
tag: "span"
|
|
148
|
-
}), {
|
|
149
|
-
ref
|
|
150
|
-
}), rest), /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
|
|
151
|
-
value: true
|
|
152
|
-
}, themedIcon || themedIconAfter ? spacedChildren({
|
|
98
|
+
const contents = wrapChildrenInText(Text, mediaActiveProps);
|
|
99
|
+
const inner = themedIcon || themedIconAfter ? spacedChildren({
|
|
153
100
|
space: spaceSize,
|
|
154
101
|
spaceFlex,
|
|
155
102
|
separator,
|
|
156
103
|
direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
|
|
157
104
|
children: [themedIcon, contents, themedIconAfter]
|
|
158
|
-
}) : contents
|
|
105
|
+
}) : contents;
|
|
106
|
+
return {
|
|
107
|
+
spaceSize,
|
|
108
|
+
isNested,
|
|
109
|
+
props: {
|
|
110
|
+
...props.disabled && {
|
|
111
|
+
focusable: void 0,
|
|
112
|
+
focusStyle: {
|
|
113
|
+
borderColor: "$background"
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
...isNested ? {
|
|
117
|
+
tag: "span"
|
|
118
|
+
} : {},
|
|
119
|
+
...rest,
|
|
120
|
+
children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
|
|
121
|
+
value: true,
|
|
122
|
+
children: inner
|
|
123
|
+
})
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
const ButtonComponent = forwardRef(function Button(props, ref) {
|
|
128
|
+
const { props: buttonProps } = useButton(props);
|
|
129
|
+
return /* @__PURE__ */ jsx(ButtonFrame, {
|
|
130
|
+
...buttonProps,
|
|
131
|
+
ref
|
|
132
|
+
});
|
|
159
133
|
});
|
|
160
|
-
const
|
|
134
|
+
const buttonStaticConfig = {
|
|
161
135
|
inlineProps: /* @__PURE__ */ new Set([
|
|
162
136
|
"color",
|
|
163
137
|
"fontWeight",
|
|
@@ -166,10 +140,16 @@ const Button = ButtonFrame.extractable(themeable(ButtonComponent), {
|
|
|
166
140
|
"letterSpacing",
|
|
167
141
|
"textAlign"
|
|
168
142
|
])
|
|
169
|
-
}
|
|
143
|
+
};
|
|
144
|
+
const Button2 = ButtonFrame.extractable(
|
|
145
|
+
themeable(ButtonComponent, ButtonFrame.staticConfig),
|
|
146
|
+
buttonStaticConfig
|
|
147
|
+
);
|
|
170
148
|
export {
|
|
171
|
-
Button,
|
|
149
|
+
Button2 as Button,
|
|
172
150
|
ButtonFrame,
|
|
173
|
-
ButtonText
|
|
151
|
+
ButtonText,
|
|
152
|
+
buttonStaticConfig,
|
|
153
|
+
useButton
|
|
174
154
|
};
|
|
175
155
|
//# sourceMappingURL=Button.js.map
|
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
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
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 /**\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: NAME,\n tag: 'button',\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n\n // if we wanted this only when pressable = true, we'd need to merge variants?\n cursor: 'pointer',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\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: '$4',\n },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n color: '$color',\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\nexport function useButton(\n props: 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 } = props\n\n const isNested = isRSC ? false : useContext(ButtonNestingContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\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 = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? 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 props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n isNested,\n props: {\n ...(props.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 // fixes SSR issue + DOM nesting issue of not allowing button in button\n ...(isNested\n ? {\n tag: 'span',\n }\n : {}),\n ...rest,\n children: isRSC ? (\n inner\n ) : (\n <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n ),\n },\n }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n const { props: buttonProps } = useButton(props)\n return <ButtonFrame {...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 ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n themeable(ButtonComponent, ButtonFrame.staticConfig),\n buttonStaticConfig\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Button"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
File without changes
|