@tamagui/button 1.0.1-beta.73 → 1.0.1-beta.76
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/esm/Button.js +59 -12
- package/dist/esm/Button.js.map +1 -1
- package/package.json +5 -5
package/dist/esm/Button.js
CHANGED
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
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
32
|
import {
|
|
2
33
|
ButtonInsideButtonContext,
|
|
3
34
|
getButtonSize,
|
|
@@ -69,7 +100,7 @@ const ButtonText = styled(SizableText, {
|
|
|
69
100
|
ellipse: true
|
|
70
101
|
});
|
|
71
102
|
const ButtonComponent = forwardRef((props, ref) => {
|
|
72
|
-
const {
|
|
103
|
+
const _a = props, {
|
|
73
104
|
children,
|
|
74
105
|
icon,
|
|
75
106
|
iconAfter,
|
|
@@ -86,9 +117,26 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
86
117
|
fontSize,
|
|
87
118
|
fontFamily,
|
|
88
119
|
textAlign,
|
|
89
|
-
textProps
|
|
90
|
-
|
|
91
|
-
|
|
120
|
+
textProps
|
|
121
|
+
} = _a, rest = __objRest(_a, [
|
|
122
|
+
"children",
|
|
123
|
+
"icon",
|
|
124
|
+
"iconAfter",
|
|
125
|
+
"noTextWrap",
|
|
126
|
+
"theme",
|
|
127
|
+
"space",
|
|
128
|
+
"spaceFlex",
|
|
129
|
+
"scaleIcon",
|
|
130
|
+
"scaleSpace",
|
|
131
|
+
"separator",
|
|
132
|
+
"color",
|
|
133
|
+
"fontWeight",
|
|
134
|
+
"letterSpacing",
|
|
135
|
+
"fontSize",
|
|
136
|
+
"fontFamily",
|
|
137
|
+
"textAlign",
|
|
138
|
+
"textProps"
|
|
139
|
+
]);
|
|
92
140
|
const isInsideButton = useContext(ButtonInsideButtonContext);
|
|
93
141
|
const size = props.size || "$4";
|
|
94
142
|
const iconSize = getFontSize(size) * scaleIcon;
|
|
@@ -96,14 +144,13 @@ const ButtonComponent = forwardRef((props, ref) => {
|
|
|
96
144
|
const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
|
|
97
145
|
const spaceSize = getVariableValue(iconSize) * scaleSpace;
|
|
98
146
|
const contents = wrapStringChildrenInText(ButtonText, props);
|
|
99
|
-
return /* @__PURE__ */ React.createElement(ButtonFrame, {
|
|
100
|
-
fontFamily
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
ref
|
|
105
|
-
|
|
106
|
-
}, /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
|
|
147
|
+
return /* @__PURE__ */ React.createElement(ButtonFrame, __spreadValues(__spreadProps(__spreadValues({
|
|
148
|
+
fontFamily
|
|
149
|
+
}, isInsideButton && {
|
|
150
|
+
tag: "span"
|
|
151
|
+
}), {
|
|
152
|
+
ref
|
|
153
|
+
}), rest), /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
|
|
107
154
|
value: true
|
|
108
155
|
}, themedIcon || themedIconAfter ? spacedChildren({
|
|
109
156
|
space: spaceSize,
|
package/dist/esm/Button.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Button.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n ReactComponentWithRef,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n spacedChildren,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {\n TextParentStyles,\n useGetThemedIcon,\n wrapStringChildrenInText,\n} from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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 // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // dont wrap inner contents in a text element\n noTextWrap?: boolean\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n }\n\nexport const ButtonFrame = styled(ThemeableStack, {\n name: 'Button',\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': getButtonSize,\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n pointerEvents: 'none',\n },\n },\n\n // TODO see core/styled.ts bug\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 selectable: false,\n cursor: 'inherit',\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\nconst ButtonComponent = forwardRef((props: ButtonProps, ref) => {\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 as ButtonProps\n\n const isInsideButton = useContext(ButtonInsideButtonContext)\n const size = props.size || '$4'\n const iconSize = 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 = wrapStringChildrenInText(ButtonText, props)\n\n return (\n <ButtonFrame\n fontFamily={fontFamily}\n // fixes SSR issue + DOM nesting issue of not allowing button in button\n {...(isInsideButton && {\n tag: 'span',\n })}\n ref={ref as any}\n {...rest}\n >\n <ButtonInsideButtonContext.Provider value={true}>\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: props.flexDirection || 'row',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents}\n </ButtonInsideButtonContext.Provider>\n </ButtonFrame>\n )\n})\n\nexport const Button: ReactComponentWithRef<ButtonProps, HTMLButtonElement | View> =\n ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract button anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n })\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AAIA,MAAM;AAuBC,MAAM,cAAc,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EAGf,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,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,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EAGF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAED,MAAM,kBAAkB,WAAW,CAAC,OAAoB,QAAQ;AAE9D,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/button",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.76",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -19,16 +19,16 @@
|
|
|
19
19
|
"watch": "tamagui-build --watch"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
23
|
-
"@tamagui/font-size": "^1.0.1-beta.
|
|
24
|
-
"@tamagui/helpers-tamagui": "^1.0.1-beta.
|
|
22
|
+
"@tamagui/core": "^1.0.1-beta.76",
|
|
23
|
+
"@tamagui/font-size": "^1.0.1-beta.76",
|
|
24
|
+
"@tamagui/helpers-tamagui": "^1.0.1-beta.76"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "*",
|
|
28
28
|
"react-dom": "*"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
31
|
+
"@tamagui/build": "^1.0.1-beta.76",
|
|
32
32
|
"react": "*",
|
|
33
33
|
"react-dom": "*"
|
|
34
34
|
},
|