@tamagui/core 1.0.0-beta.230 → 1.0.0-beta.3
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/Tamagui.js +18 -1
- package/dist/cjs/Tamagui.js.map +2 -2
- package/dist/cjs/ThemeContext.js +4 -0
- package/dist/cjs/ThemeManager.js +30 -14
- package/dist/cjs/ThemeManager.js.map +2 -2
- package/dist/cjs/conf.js +10 -1
- package/dist/cjs/conf.js.map +2 -2
- package/dist/cjs/constants/constants.js +6 -0
- package/dist/cjs/constants/platform.js +15 -0
- package/dist/cjs/constants/platform.js.map +2 -2
- package/dist/cjs/constants/rnw.js +4 -0
- package/dist/cjs/contexts/ButtonInsideButtonContext.js +4 -0
- package/dist/cjs/createComponent.js +112 -63
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createFont.js +4 -0
- package/dist/cjs/createShorthands.js +4 -0
- package/dist/cjs/createTamagui.js +56 -27
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createTheme.js +4 -0
- package/dist/cjs/createTokens.js +7 -6
- package/dist/cjs/createTokens.js.map +2 -2
- package/dist/cjs/createVariable.js +18 -2
- package/dist/cjs/createVariable.js.map +2 -2
- package/dist/cjs/helpers/RNComponents.js +4 -0
- package/dist/cjs/helpers/RNComponents.js.map +0 -0
- package/dist/cjs/helpers/addStylesUsingClassname.js +19 -16
- package/dist/cjs/helpers/addStylesUsingClassname.js.map +2 -2
- package/dist/cjs/helpers/areEqualSets.js +4 -0
- package/dist/cjs/helpers/createMediaStyle.js +5 -2
- package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +44 -41
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/createShallowUpdate.js +4 -0
- package/dist/cjs/helpers/createShallowUpdate.js.map +0 -0
- package/dist/cjs/helpers/createTamaguiProvider.js +4 -0
- package/dist/cjs/helpers/extendStaticConfig.js +9 -6
- package/dist/cjs/helpers/extendStaticConfig.js.map +2 -2
- package/dist/cjs/helpers/fixNativeShadow.js +4 -0
- package/dist/cjs/helpers/fixNativeShadow.native.js +6 -2
- package/dist/cjs/helpers/fixNativeShadow.native.js.map +2 -2
- package/dist/cjs/helpers/getExpandedShorthands.js +4 -0
- package/dist/cjs/{constants/pseudos.js → helpers/getSize.js} +17 -19
- package/dist/cjs/helpers/getSize.js.map +7 -0
- package/dist/cjs/helpers/getSplitStyles.js +166 -60
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +20 -3
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.native.js +4 -0
- package/dist/cjs/helpers/insertStyleRule.js +41 -26
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/isObj.js +4 -0
- package/dist/cjs/helpers/isTamaguiElement.js +4 -0
- package/dist/cjs/helpers/matchMedia.js +4 -0
- package/dist/cjs/helpers/matchMedia.native.js +4 -0
- package/dist/cjs/helpers/proxyThemeVariables.js +40 -0
- package/dist/cjs/helpers/proxyThemeVariables.js.map +7 -0
- package/dist/cjs/helpers/themeable.js +7 -2
- package/dist/cjs/helpers/themeable.js.map +2 -2
- package/dist/cjs/helpers/validate.js +53 -11
- package/dist/cjs/helpers/validate.js.map +2 -2
- package/dist/cjs/helpers/withStaticProperties.js +4 -0
- package/dist/cjs/helpers/wrapThemeManagerContext.js +4 -0
- package/dist/cjs/hooks/useConstant.js +4 -0
- package/dist/cjs/hooks/useFeatures.js +8 -5
- package/dist/cjs/hooks/useFeatures.js.map +2 -2
- package/dist/cjs/hooks/useIsMounted.js +4 -0
- package/dist/cjs/hooks/useIsTouchDevice.js +8 -4
- package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +30 -12
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/usePressable.js +4 -0
- package/dist/cjs/hooks/useTheme.js +30 -17
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/hooks/useUnmountEffect.js +4 -0
- package/dist/cjs/index.js +15 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/static.js +3 -0
- package/dist/cjs/static.js.map +2 -2
- package/dist/cjs/styled.js +7 -4
- package/dist/cjs/styled.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Stack.js +4 -0
- package/dist/cjs/views/Text.js +4 -0
- package/dist/cjs/views/TextAncestorContext.js +6 -0
- package/dist/cjs/views/Theme.js +7 -3
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/cjs/views/ThemeInverse.js +5 -0
- package/dist/cjs/views/ThemeProvider.js +6 -1
- package/dist/cjs/views/ThemeProvider.js.map +2 -2
- package/dist/cjs/views/ThemeReset.js +4 -0
- package/dist/esm/Tamagui.js +10 -2
- package/dist/esm/Tamagui.js.map +2 -2
- package/dist/esm/ThemeManager.js +21 -11
- package/dist/esm/ThemeManager.js.map +2 -2
- package/dist/esm/conf.js +0 -1
- package/dist/esm/conf.js.map +2 -2
- package/dist/esm/constants/platform.js +2 -0
- package/dist/esm/constants/platform.js.map +2 -2
- package/dist/esm/createComponent.js +104 -65
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +53 -28
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createTokens.js +2 -6
- package/dist/esm/createTokens.js.map +2 -2
- package/dist/esm/createVariable.js +8 -2
- package/dist/esm/createVariable.js.map +2 -2
- package/dist/esm/helpers/RNComponents.js +0 -0
- package/dist/esm/helpers/RNComponents.js.map +0 -0
- package/dist/esm/helpers/addStylesUsingClassname.js +16 -18
- package/dist/esm/helpers/addStylesUsingClassname.js.map +2 -2
- package/dist/esm/helpers/createMediaStyle.js +0 -2
- package/dist/esm/helpers/createMediaStyle.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +40 -41
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/createShallowUpdate.js +0 -0
- package/dist/esm/helpers/createShallowUpdate.js.map +0 -0
- package/dist/esm/helpers/extendStaticConfig.js +9 -6
- package/dist/esm/helpers/extendStaticConfig.js.map +2 -2
- package/dist/esm/helpers/fixNativeShadow.native.js +2 -2
- package/dist/esm/helpers/fixNativeShadow.native.js.map +2 -2
- package/dist/esm/helpers/getSize.js +13 -0
- package/dist/esm/helpers/getSize.js.map +7 -0
- package/dist/esm/helpers/getSplitStyles.js +166 -63
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +15 -3
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +31 -26
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/proxyThemeVariables.js +18 -0
- package/dist/esm/helpers/proxyThemeVariables.js.map +7 -0
- package/dist/esm/helpers/themeable.js +3 -2
- package/dist/esm/helpers/themeable.js.map +2 -2
- package/dist/esm/helpers/validate.js +24 -11
- package/dist/esm/helpers/validate.js.map +2 -2
- package/dist/esm/hooks/useFeatures.js +3 -5
- package/dist/esm/hooks/useFeatures.js.map +2 -2
- package/dist/esm/hooks/useIsTouchDevice.js +6 -6
- package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +19 -12
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +22 -17
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/static.js +3 -0
- package/dist/esm/static.js.map +2 -2
- package/dist/esm/styled.js +3 -4
- package/dist/esm/styled.js.map +2 -2
- package/dist/esm/views/Theme.js +3 -3
- package/dist/esm/views/Theme.js.map +2 -2
- package/dist/esm/views/ThemeProvider.js +2 -1
- package/dist/esm/views/ThemeProvider.js.map +2 -2
- package/dist/jsx/Tamagui.js +10 -2
- package/dist/jsx/ThemeManager.js +21 -11
- package/dist/jsx/conf.js +0 -1
- package/dist/jsx/constants/platform.js +2 -0
- package/dist/jsx/createComponent.js +100 -61
- package/dist/jsx/createTamagui.js +53 -28
- package/dist/jsx/createTokens.js +2 -6
- package/dist/jsx/createVariable.js +8 -2
- package/dist/jsx/helpers/RNComponents.js +0 -0
- package/dist/jsx/helpers/addStylesUsingClassname.js +16 -18
- package/dist/jsx/helpers/createMediaStyle.js +0 -2
- package/dist/jsx/helpers/createPropMapper.js +40 -41
- package/dist/jsx/helpers/createShallowUpdate.js +0 -0
- package/dist/jsx/helpers/extendStaticConfig.js +9 -6
- package/dist/jsx/helpers/fixNativeShadow.native.js +2 -2
- package/dist/jsx/helpers/getSize.js +12 -0
- package/dist/jsx/helpers/getSplitStyles.js +166 -63
- package/dist/jsx/helpers/getStylesAtomic.js +15 -3
- package/dist/jsx/helpers/insertStyleRule.js +31 -26
- package/dist/jsx/helpers/proxyThemeVariables.js +17 -0
- package/dist/jsx/helpers/themeable.js +3 -3
- package/dist/jsx/helpers/validate.js +24 -11
- package/dist/jsx/hooks/useFeatures.js +3 -5
- package/dist/jsx/hooks/useIsTouchDevice.js +6 -6
- package/dist/jsx/hooks/useMedia.js +19 -12
- package/dist/jsx/hooks/useTheme.js +22 -17
- package/dist/jsx/index.js +4 -0
- package/dist/jsx/static.js +3 -0
- package/dist/jsx/styled.js +3 -4
- package/dist/jsx/views/Theme.js +4 -4
- package/dist/jsx/views/ThemeProvider.js +2 -2
- package/package.json +6 -6
- package/types/Tamagui.d.ts +18 -1
- package/types/Tamagui.d.ts.map +1 -1
- package/types/ThemeManager.d.ts +3 -3
- package/types/ThemeManager.d.ts.map +1 -1
- package/types/conf.d.ts +2 -0
- package/types/conf.d.ts.map +1 -1
- package/types/constants/platform.d.ts +1 -0
- package/types/constants/platform.d.ts.map +1 -1
- package/types/createComponent.d.ts +3 -4
- package/types/createComponent.d.ts.map +1 -1
- package/types/createFont.d.ts +1 -1
- package/types/createFont.d.ts.map +1 -1
- package/types/createTamagui.d.ts +3 -1
- package/types/createTamagui.d.ts.map +1 -1
- package/types/createTokens.d.ts +0 -26
- package/types/createTokens.d.ts.map +1 -1
- package/types/createVariable.d.ts +1 -0
- package/types/createVariable.d.ts.map +1 -1
- package/types/helpers/addStylesUsingClassname.d.ts.map +1 -1
- package/types/helpers/createMediaStyle.d.ts.map +1 -1
- package/types/helpers/createPropMapper.d.ts +1 -1
- package/types/helpers/createPropMapper.d.ts.map +1 -1
- package/types/helpers/extendStaticConfig.d.ts +2 -2
- package/types/helpers/extendStaticConfig.d.ts.map +1 -1
- package/types/helpers/getSize.d.ts +3 -0
- package/types/helpers/getSize.d.ts.map +1 -0
- package/types/helpers/getSplitStyles.d.ts +14 -6
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts +2 -1
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/helpers/proxyThemeVariables.d.ts +2 -0
- package/types/helpers/proxyThemeVariables.d.ts.map +1 -0
- package/types/helpers/themeable.d.ts +3 -1
- package/types/helpers/themeable.d.ts.map +1 -1
- package/types/helpers/validate.d.ts.map +1 -1
- package/types/hooks/useMedia.d.ts +2 -6
- package/types/hooks/useMedia.d.ts.map +1 -1
- package/types/hooks/useTheme.d.ts +1 -1
- package/types/hooks/useTheme.d.ts.map +1 -1
- package/types/index.d.ts +2 -0
- package/types/index.d.ts.map +1 -1
- package/types/static.d.ts +3 -0
- package/types/static.d.ts.map +1 -1
- package/types/styled.d.ts +12 -3
- package/types/styled.d.ts.map +1 -1
- package/types/types.d.ts +76 -48
- package/types/types.d.ts.map +1 -1
- package/types/views/Theme.d.ts +1 -0
- package/types/views/Theme.d.ts.map +1 -1
- package/types/views/ThemeProvider.d.ts +1 -0
- package/types/views/ThemeProvider.d.ts.map +1 -1
- package/LICENSE +0 -21
- package/dist/cjs/constants/pseudos.js.map +0 -7
- package/dist/cjs/createShallowUpdate.js +0 -1
- package/dist/cjs/createShallowUpdate.js.map +0 -7
- package/dist/cjs/devtools.js +0 -32
- package/dist/cjs/devtools.js.map +0 -7
- package/dist/cjs/spacedChildren.js +0 -86
- package/dist/cjs/spacedChildren.js.map +0 -7
- package/dist/cjs/tamagui-base.css +0 -8
- package/dist/cjs/tamagui-base.css.map +0 -7
- package/dist/esm/constants/pseudos.js +0 -18
- package/dist/esm/constants/pseudos.js.map +0 -7
- package/dist/esm/createShallowUpdate.js +0 -1
- package/dist/esm/createShallowUpdate.js.map +0 -7
- package/dist/esm/devtools.js +0 -14
- package/dist/esm/devtools.js.map +0 -7
- package/dist/esm/spacedChildren.js +0 -52
- package/dist/esm/spacedChildren.js.map +0 -7
- package/dist/esm/tamagui-base.css +0 -8
- package/dist/esm/tamagui-base.css.map +0 -7
- package/dist/jsx/constants/pseudos.js +0 -17
- package/dist/jsx/createShallowUpdate.js +0 -0
- package/dist/jsx/devtools.js +0 -13
- package/dist/jsx/spacedChildren.js +0 -44
- package/dist/jsx/tamagui-base.css +0 -7
- package/types/spacedChildren.d.ts +0 -9
- package/types/spacedChildren.d.ts.map +0 -1
|
@@ -16,15 +16,17 @@ import React, {
|
|
|
16
16
|
import { StyleSheet, Text, View } from "react-native";
|
|
17
17
|
import { onConfiguredOnce } from "./conf";
|
|
18
18
|
import { stackDefaultStyles } from "./constants/constants";
|
|
19
|
-
import { isAndroid,
|
|
19
|
+
import { isAndroid, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
|
|
20
20
|
import { rnw } from "./constants/rnw";
|
|
21
21
|
import { isVariable } from "./createVariable";
|
|
22
22
|
import { createShallowUpdate } from "./helpers/createShallowUpdate";
|
|
23
23
|
import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
|
|
24
|
-
import {
|
|
24
|
+
import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
|
|
25
25
|
import { getAllSelectors } from "./helpers/insertStyleRule";
|
|
26
|
+
import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
|
|
26
27
|
import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
|
|
27
28
|
import { useFeatures } from "./hooks/useFeatures";
|
|
29
|
+
import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
|
|
28
30
|
import { usePressable } from "./hooks/usePressable";
|
|
29
31
|
import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
|
|
30
32
|
import { TextAncestorContext } from "./views/TextAncestorContext";
|
|
@@ -43,53 +45,70 @@ if (typeof document !== "undefined") {
|
|
|
43
45
|
mouseUps.forEach((x) => x());
|
|
44
46
|
mouseUps.clear();
|
|
45
47
|
});
|
|
48
|
+
document.addEventListener("touchend", () => {
|
|
49
|
+
mouseUps.forEach((x) => x());
|
|
50
|
+
mouseUps.clear();
|
|
51
|
+
});
|
|
52
|
+
document.addEventListener("touchcancel", () => {
|
|
53
|
+
mouseUps.forEach((x) => x());
|
|
54
|
+
mouseUps.clear();
|
|
55
|
+
});
|
|
46
56
|
}
|
|
47
|
-
function
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
staticConfig = configIn;
|
|
51
|
-
} else {
|
|
52
|
-
staticConfig = parseStaticConfig(configIn);
|
|
57
|
+
function mergeShorthands({ defaultProps }, { shorthands }) {
|
|
58
|
+
for (const key in defaultProps) {
|
|
59
|
+
defaultProps[shorthands[key] || key] = defaultProps[key];
|
|
53
60
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
61
|
+
}
|
|
62
|
+
__name(mergeShorthands, "mergeShorthands");
|
|
63
|
+
let initialTheme;
|
|
64
|
+
function createComponent(configIn, ParentComponent) {
|
|
65
|
+
const staticConfig = (() => {
|
|
66
|
+
const config = extendStaticConfig(configIn, ParentComponent);
|
|
67
|
+
if ("parsed" in config) {
|
|
68
|
+
return config;
|
|
69
|
+
} else {
|
|
70
|
+
return parseStaticConfig(config);
|
|
71
|
+
}
|
|
72
|
+
})();
|
|
73
|
+
const componentClassName = `is_${staticConfig.componentName}`;
|
|
57
74
|
let tamaguiConfig;
|
|
58
75
|
let AnimatedText;
|
|
59
76
|
let AnimatedView;
|
|
60
77
|
let avoidClasses = true;
|
|
61
|
-
let defaultPseudos = {};
|
|
62
78
|
let defaultNativeStyle;
|
|
63
|
-
let defaultNativeStyleSheet
|
|
64
|
-
let
|
|
65
|
-
let
|
|
66
|
-
let defaultSplitStyleResult = null;
|
|
79
|
+
let defaultNativeStyleSheet;
|
|
80
|
+
let tamaguiDefaultProps;
|
|
81
|
+
let initialSplitStyles;
|
|
67
82
|
function addPseudoToStyles(styles, name, pseudos) {
|
|
68
83
|
const pseudoStyle = pseudos[name];
|
|
84
|
+
const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
|
|
69
85
|
if (pseudoStyle) {
|
|
70
|
-
styles.push(
|
|
86
|
+
styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
|
|
71
87
|
}
|
|
72
|
-
const defaultPseudoStyle =
|
|
88
|
+
const defaultPseudoStyle = initialSplitStyles.pseudos[name];
|
|
73
89
|
if (defaultPseudoStyle) {
|
|
74
|
-
styles.push(
|
|
90
|
+
styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
|
|
75
91
|
}
|
|
76
92
|
}
|
|
77
93
|
__name(addPseudoToStyles, "addPseudoToStyles");
|
|
78
94
|
const component = forwardRef((props, forwardedRef) => {
|
|
79
95
|
var _a, _b, _c, _d;
|
|
96
|
+
props = tamaguiDefaultProps ? { ...tamaguiDefaultProps, ...props } : props;
|
|
97
|
+
const { Component, componentName, isText, isZStack } = staticConfig;
|
|
80
98
|
if (process.env.NODE_ENV === "development") {
|
|
81
99
|
if (props["debug"]) {
|
|
82
|
-
console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "
|
|
100
|
+
console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
|
|
101
|
+
console.log("props in:", props, Object.keys(props));
|
|
83
102
|
if (props["debug"] === "break")
|
|
84
103
|
debugger;
|
|
85
104
|
}
|
|
86
105
|
}
|
|
87
106
|
const forceUpdate = useForceUpdate();
|
|
88
|
-
const theme = useTheme(props.theme, componentName, props, forceUpdate);
|
|
107
|
+
const theme = useTheme(props.theme, staticConfig.componentName, props, forceUpdate);
|
|
89
108
|
const [state, set_] = useState(defaultComponentState);
|
|
90
109
|
const setStateShallow = createShallowUpdate(set_);
|
|
91
110
|
const shouldAvoidClasses = !!(props.animation && avoidClasses);
|
|
92
|
-
const splitStyles =
|
|
111
|
+
const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
|
|
93
112
|
const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
|
|
94
113
|
const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
|
|
95
114
|
const isAnimated = !!(useAnimations && props.animation);
|
|
@@ -142,6 +161,7 @@ function createComponent(configIn) {
|
|
|
142
161
|
accessibilityRole,
|
|
143
162
|
collapsable,
|
|
144
163
|
focusable,
|
|
164
|
+
onClick,
|
|
145
165
|
theme: _themeProp,
|
|
146
166
|
defaultVariants,
|
|
147
167
|
onLayout,
|
|
@@ -164,15 +184,17 @@ function createComponent(configIn) {
|
|
|
164
184
|
};
|
|
165
185
|
}
|
|
166
186
|
useIsomorphicLayoutEffect(() => {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
187
|
+
if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
|
|
188
|
+
setStateShallow({
|
|
189
|
+
mounted: true
|
|
190
|
+
});
|
|
191
|
+
}
|
|
170
192
|
internal.current.isMounted = true;
|
|
171
193
|
return () => {
|
|
172
194
|
mouseUps.delete(unPress);
|
|
173
195
|
internal.current.isMounted = false;
|
|
174
196
|
};
|
|
175
|
-
}, [hasEnterStyle]);
|
|
197
|
+
}, [hasEnterStyle, props.animation]);
|
|
176
198
|
if (nativeID) {
|
|
177
199
|
viewProps.id = nativeID;
|
|
178
200
|
}
|
|
@@ -230,6 +252,7 @@ function createComponent(configIn) {
|
|
|
230
252
|
medias
|
|
231
253
|
];
|
|
232
254
|
if (!animationStyles) {
|
|
255
|
+
!state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
|
|
233
256
|
state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
|
|
234
257
|
state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
|
|
235
258
|
state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
|
|
@@ -248,7 +271,7 @@ function createComponent(configIn) {
|
|
|
248
271
|
const className = classList.join(" ");
|
|
249
272
|
if (process.env.NODE_ENV === "development") {
|
|
250
273
|
if (props["debug"]) {
|
|
251
|
-
console.log(" \xBB className", { isStringElement, pseudos, state,
|
|
274
|
+
console.log(" \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
|
|
252
275
|
}
|
|
253
276
|
}
|
|
254
277
|
viewProps.className = className;
|
|
@@ -289,8 +312,10 @@ function createComponent(configIn) {
|
|
|
289
312
|
viewProps.ref = forwardedRef;
|
|
290
313
|
}
|
|
291
314
|
}
|
|
292
|
-
const
|
|
293
|
-
const
|
|
315
|
+
const initialPseudos = initialSplitStyles.pseudos;
|
|
316
|
+
const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
|
|
317
|
+
const isTouch = useIsTouchDevice();
|
|
318
|
+
const isHoverable = isWeb && !isTouch;
|
|
294
319
|
const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
|
|
295
320
|
const pressEventKey = isStringElement ? "onClick" : "onPress";
|
|
296
321
|
const shouldAttach = attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
|
|
@@ -348,8 +373,12 @@ function createComponent(configIn) {
|
|
|
348
373
|
});
|
|
349
374
|
onPressIn == null ? void 0 : onPressIn(e);
|
|
350
375
|
onMouseDown == null ? void 0 : onMouseDown(e);
|
|
376
|
+
if (isWeb) {
|
|
377
|
+
mouseUps.add(unPress);
|
|
378
|
+
}
|
|
351
379
|
} : null,
|
|
352
380
|
[pressEventKey]: attachPress ? (e) => {
|
|
381
|
+
onClick == null ? void 0 : onClick(e);
|
|
353
382
|
onPress == null ? void 0 : onPress(e);
|
|
354
383
|
unPress();
|
|
355
384
|
onPressOut == null ? void 0 : onPressOut(e);
|
|
@@ -404,7 +433,7 @@ function createComponent(configIn) {
|
|
|
404
433
|
if (process.env.NODE_ENV === "development") {
|
|
405
434
|
if (props["debug"]) {
|
|
406
435
|
viewProps["debug"] = true;
|
|
407
|
-
console.log(" \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles,
|
|
436
|
+
console.log(" \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
|
|
408
437
|
}
|
|
409
438
|
}
|
|
410
439
|
if (features.length) {
|
|
@@ -415,30 +444,28 @@ function createComponent(configIn) {
|
|
|
415
444
|
}
|
|
416
445
|
return content;
|
|
417
446
|
});
|
|
447
|
+
component.displayName = staticConfig.componentName;
|
|
418
448
|
onConfiguredOnce((conf) => {
|
|
419
449
|
var _a, _b, _c, _d;
|
|
420
450
|
if (process.env.IS_STATIC === "is_static") {
|
|
421
451
|
return;
|
|
422
452
|
}
|
|
423
|
-
const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
|
|
424
453
|
tamaguiConfig = conf;
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
454
|
+
mergeShorthands(staticConfig, tamaguiConfig);
|
|
455
|
+
avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
|
|
456
|
+
AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
|
|
457
|
+
AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
|
|
458
|
+
initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
|
|
459
|
+
initialSplitStyles = insertSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
|
|
430
460
|
mounted: true,
|
|
431
461
|
hover: false,
|
|
432
462
|
press: false,
|
|
433
463
|
pressIn: false,
|
|
434
464
|
focus: false,
|
|
435
|
-
resolveVariablesAs: "both"
|
|
465
|
+
resolveVariablesAs: "both",
|
|
466
|
+
keepVariantsAsProps: true
|
|
436
467
|
});
|
|
437
|
-
const {
|
|
438
|
-
if (isWeb) {
|
|
439
|
-
defaultsClassName = classNames;
|
|
440
|
-
}
|
|
441
|
-
defaultPseudos = pseudos;
|
|
468
|
+
const { style, viewProps } = initialSplitStyles;
|
|
442
469
|
defaultNativeStyle = {};
|
|
443
470
|
for (const key in style) {
|
|
444
471
|
const v = style[key];
|
|
@@ -447,34 +474,44 @@ function createComponent(configIn) {
|
|
|
447
474
|
defaultNativeStyleSheet = StyleSheet.create({
|
|
448
475
|
base: defaultNativeStyle
|
|
449
476
|
});
|
|
450
|
-
|
|
451
|
-
component.defaultProps = {
|
|
477
|
+
const defaults = {
|
|
452
478
|
...viewProps,
|
|
453
479
|
...component.defaultProps
|
|
454
480
|
};
|
|
455
|
-
if (
|
|
456
|
-
|
|
481
|
+
if (Object.keys(defaults).length) {
|
|
482
|
+
tamaguiDefaultProps = defaults;
|
|
483
|
+
}
|
|
484
|
+
if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
|
|
485
|
+
if (process.env.IS_STATIC !== "is_static") {
|
|
486
|
+
console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
|
|
487
|
+
staticConfig,
|
|
488
|
+
initialSplitStyles
|
|
489
|
+
});
|
|
490
|
+
}
|
|
457
491
|
}
|
|
458
492
|
});
|
|
459
493
|
let res = component;
|
|
460
494
|
if (configIn.memo) {
|
|
461
495
|
res = memo(res);
|
|
462
496
|
}
|
|
463
|
-
res["whyDidYouRender"] = true;
|
|
464
497
|
res["staticConfig"] = {
|
|
465
|
-
validStyles:
|
|
498
|
+
validStyles: staticConfig.validStyles || stylePropsView,
|
|
466
499
|
...staticConfig
|
|
467
500
|
};
|
|
468
|
-
|
|
469
|
-
|
|
501
|
+
if (process.env.NODE_ENV === "development") {
|
|
502
|
+
res["whyDidYouRender"] = true;
|
|
503
|
+
}
|
|
504
|
+
res["extractable"] = (Component, conf) => {
|
|
505
|
+
Component["staticConfig"] = extendStaticConfig({
|
|
506
|
+
Component,
|
|
470
507
|
...conf,
|
|
471
508
|
neverFlatten: true,
|
|
472
509
|
defaultProps: {
|
|
473
|
-
...
|
|
510
|
+
...Component.defaultProps,
|
|
474
511
|
...conf == null ? void 0 : conf.defaultProps
|
|
475
512
|
}
|
|
476
|
-
});
|
|
477
|
-
return
|
|
513
|
+
}, res);
|
|
514
|
+
return Component;
|
|
478
515
|
};
|
|
479
516
|
return res;
|
|
480
517
|
}
|
|
@@ -554,18 +591,20 @@ function spacedChildren({
|
|
|
554
591
|
return next;
|
|
555
592
|
}
|
|
556
593
|
__name(spacedChildren, "spacedChildren");
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
594
|
+
function AbsoluteFill(props) {
|
|
595
|
+
return isWeb ? <div style={{
|
|
596
|
+
position: "absolute",
|
|
597
|
+
top: 0,
|
|
598
|
+
left: 0,
|
|
599
|
+
right: 0,
|
|
600
|
+
bottom: 0
|
|
601
|
+
}}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>;
|
|
602
|
+
}
|
|
603
|
+
__name(AbsoluteFill, "AbsoluteFill");
|
|
564
604
|
export {
|
|
565
605
|
AbsoluteFill,
|
|
566
606
|
Spacer,
|
|
567
607
|
createComponent,
|
|
568
|
-
defaultComponentState,
|
|
569
608
|
mouseUps,
|
|
570
609
|
spacedChildren
|
|
571
610
|
};
|
|
@@ -12,6 +12,14 @@ function createTamagui(config) {
|
|
|
12
12
|
if (createdConfigs.has(config)) {
|
|
13
13
|
return config;
|
|
14
14
|
}
|
|
15
|
+
if (process.env.NODE_ENV === "development") {
|
|
16
|
+
if (!config.tokens) {
|
|
17
|
+
throw new Error(`No tokens provided to Tamagui config`);
|
|
18
|
+
}
|
|
19
|
+
if (!config.themes) {
|
|
20
|
+
throw new Error(`No themes provided to Tamagui config`);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
15
23
|
if (getHasConfigured()) {
|
|
16
24
|
console.warn("Called createTamagui twice! Should never do so");
|
|
17
25
|
}
|
|
@@ -20,7 +28,7 @@ function createTamagui(config) {
|
|
|
20
28
|
defaultActive: config.mediaQueryDefaultActive
|
|
21
29
|
});
|
|
22
30
|
const themeConfig = (() => {
|
|
23
|
-
var _a, _b;
|
|
31
|
+
var _a, _b, _c;
|
|
24
32
|
let cssRules = [];
|
|
25
33
|
const varsByValue = /* @__PURE__ */ new Map();
|
|
26
34
|
if (isWeb) {
|
|
@@ -67,13 +75,16 @@ function createTamagui(config) {
|
|
|
67
75
|
}
|
|
68
76
|
if (isWeb) {
|
|
69
77
|
const isDarkOrLightBase = themeName === "dark" || themeName === "light";
|
|
70
|
-
const isDark = themeName.
|
|
78
|
+
const isDark = themeName.startsWith("dark");
|
|
71
79
|
const selector = `${CNP}${themeName}`;
|
|
72
|
-
const addDarkLightSels = hasDarkLight && !isDarkOrLightBase;
|
|
73
80
|
const selectors = [selector];
|
|
74
|
-
if (
|
|
81
|
+
if (hasDarkLight) {
|
|
75
82
|
const childSelector = `${CNP}${themeName.replace("dark_", "").replace("light_", "")}`;
|
|
76
|
-
const
|
|
83
|
+
const order = isDark ? ["dark", "light"] : ["light", "dark"];
|
|
84
|
+
if (isDarkOrLightBase) {
|
|
85
|
+
order.reverse();
|
|
86
|
+
}
|
|
87
|
+
const [stronger, weaker] = order;
|
|
77
88
|
const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
|
|
78
89
|
new Array(max * 2).fill(void 0).forEach((_, pi) => {
|
|
79
90
|
if (pi % 2 === 1)
|
|
@@ -84,25 +95,56 @@ function createTamagui(config) {
|
|
|
84
95
|
selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
|
|
85
96
|
});
|
|
86
97
|
}
|
|
87
|
-
const
|
|
88
|
-
${vars}
|
|
89
|
-
|
|
90
|
-
|
|
98
|
+
const rootSep = config.themeClassNameOnRoot ? "" : " ";
|
|
99
|
+
cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`);
|
|
100
|
+
if ((_c = config.shouldAddPrefersColorThemes) != null ? _c : true) {
|
|
101
|
+
if (isDarkOrLightBase) {
|
|
102
|
+
cssRules.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
|
|
103
|
+
body { background:${theme.background}; color: ${theme.color} }
|
|
104
|
+
:root {${vars} }
|
|
105
|
+
}`);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
91
108
|
}
|
|
92
109
|
}
|
|
93
110
|
varsByValue.clear();
|
|
94
111
|
Object.freeze(cssRules);
|
|
112
|
+
const css = cssRules.join("\n");
|
|
95
113
|
return {
|
|
96
114
|
cssRules,
|
|
97
|
-
css
|
|
115
|
+
css
|
|
98
116
|
};
|
|
99
117
|
})();
|
|
100
118
|
const tokensParsed = parseTokens(config.tokens);
|
|
119
|
+
const fontsParsed = (() => {
|
|
120
|
+
if (!config.fonts) {
|
|
121
|
+
throw new Error(`No fonts defined!`);
|
|
122
|
+
}
|
|
123
|
+
const res = {};
|
|
124
|
+
for (const familyName in config.fonts) {
|
|
125
|
+
const family = config.fonts[familyName];
|
|
126
|
+
const parsed = {};
|
|
127
|
+
for (const attrKey in family) {
|
|
128
|
+
const attr = family[attrKey];
|
|
129
|
+
if (attrKey === "family") {
|
|
130
|
+
parsed[attrKey] = attr;
|
|
131
|
+
continue;
|
|
132
|
+
}
|
|
133
|
+
parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {
|
|
134
|
+
acc[`$${cur}`] = attr[cur];
|
|
135
|
+
return acc;
|
|
136
|
+
}, {});
|
|
137
|
+
}
|
|
138
|
+
res[`$${familyName}`] = parsed;
|
|
139
|
+
}
|
|
140
|
+
return res;
|
|
141
|
+
})();
|
|
101
142
|
const getCSS = /* @__PURE__ */ __name(() => {
|
|
102
143
|
return `${themeConfig.css}
|
|
103
144
|
${getInsertedRules().join("\n")}`;
|
|
104
145
|
}, "getCSS");
|
|
105
146
|
const next = {
|
|
147
|
+
fonts: {},
|
|
106
148
|
animations: {},
|
|
107
149
|
shorthands: {},
|
|
108
150
|
media: {},
|
|
@@ -112,6 +154,7 @@ ${getInsertedRules().join("\n")}`;
|
|
|
112
154
|
defaultTheme: "light",
|
|
113
155
|
...config
|
|
114
156
|
}),
|
|
157
|
+
fontsParsed,
|
|
115
158
|
themeConfig,
|
|
116
159
|
tokensParsed,
|
|
117
160
|
parsed: true,
|
|
@@ -130,24 +173,6 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
|
|
|
130
173
|
const res = {};
|
|
131
174
|
for (const key in tokens) {
|
|
132
175
|
res[key] = {};
|
|
133
|
-
if (key === "font") {
|
|
134
|
-
for (const family in tokens.font) {
|
|
135
|
-
const obj = {};
|
|
136
|
-
res.font[`$${family}`] = obj;
|
|
137
|
-
for (const attrKey in tokens.font[family]) {
|
|
138
|
-
const attr = tokens.font[family][attrKey];
|
|
139
|
-
if (attrKey === "family") {
|
|
140
|
-
obj[attrKey] = attr;
|
|
141
|
-
continue;
|
|
142
|
-
}
|
|
143
|
-
obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
|
|
144
|
-
acc[`$${cur}`] = attr[cur];
|
|
145
|
-
return acc;
|
|
146
|
-
}, {});
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
continue;
|
|
150
|
-
}
|
|
151
176
|
for (const skey in tokens[key]) {
|
|
152
177
|
res[key][`$${skey}`] = tokens[key][skey];
|
|
153
178
|
}
|
package/dist/jsx/createTokens.js
CHANGED
|
@@ -6,17 +6,13 @@ function createTokens(tokens) {
|
|
|
6
6
|
if (process.env.NODE_ENV === "development") {
|
|
7
7
|
validateTokens(tokens);
|
|
8
8
|
}
|
|
9
|
-
return setupTokens(tokens);
|
|
10
|
-
}
|
|
11
|
-
__name(createTokens, "createTokens");
|
|
12
|
-
function setupTokens(tokens) {
|
|
13
9
|
return mapTokensToVariables(tokens);
|
|
14
10
|
}
|
|
15
|
-
__name(
|
|
11
|
+
__name(createTokens, "createTokens");
|
|
16
12
|
const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
|
|
17
13
|
const res = {};
|
|
18
14
|
for (const key in tokens) {
|
|
19
|
-
|
|
15
|
+
let val = tokens[key];
|
|
20
16
|
const name = parentPath ? `${parentPath}-${key}` : key;
|
|
21
17
|
if (val && typeof val === "object") {
|
|
22
18
|
res[key] = mapTokensToVariables(tokens[key], name);
|
|
@@ -22,12 +22,17 @@ function isVariable(v) {
|
|
|
22
22
|
}
|
|
23
23
|
__name(isVariable, "isVariable");
|
|
24
24
|
function getVariableValue(v) {
|
|
25
|
-
if (isVariable(v))
|
|
25
|
+
if (isVariable(v))
|
|
26
26
|
return v.val;
|
|
27
|
-
}
|
|
28
27
|
return v;
|
|
29
28
|
}
|
|
30
29
|
__name(getVariableValue, "getVariableValue");
|
|
30
|
+
function getVariableName(v) {
|
|
31
|
+
if (isVariable(v))
|
|
32
|
+
return v.name;
|
|
33
|
+
return v;
|
|
34
|
+
}
|
|
35
|
+
__name(getVariableName, "getVariableName");
|
|
31
36
|
const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
|
|
32
37
|
const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
|
|
33
38
|
return includeVar ? `var(--${name})` : name;
|
|
@@ -37,6 +42,7 @@ export {
|
|
|
37
42
|
Variable,
|
|
38
43
|
createCSSVariable,
|
|
39
44
|
createVariable,
|
|
45
|
+
getVariableName,
|
|
40
46
|
getVariableValue,
|
|
41
47
|
isVariable
|
|
42
48
|
};
|
|
File without changes
|
|
@@ -1,26 +1,24 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import { useInsertionEffect } from "react";
|
|
3
|
+
import { useInsertionEffect, useLayoutEffect } from "react";
|
|
4
4
|
import { getStylesAtomic } from "./getStylesAtomic";
|
|
5
|
-
import { insertStyleRule } from "./insertStyleRule";
|
|
5
|
+
import { insertStyleRule, updateInsertedCache } from "./insertStyleRule";
|
|
6
6
|
let added = /* @__PURE__ */ new Set();
|
|
7
|
+
const effect = useInsertionEffect || useLayoutEffect;
|
|
7
8
|
function useStylesAsClassname(styles, disable = false, debug = false) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
})
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
});
|
|
22
|
-
return className;
|
|
23
|
-
}
|
|
9
|
+
const insertions = [];
|
|
10
|
+
const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
|
|
11
|
+
for (const rule of rules) {
|
|
12
|
+
insertions.push({ identifier, rule });
|
|
13
|
+
updateInsertedCache(identifier, rule);
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
effect(() => {
|
|
17
|
+
for (const { identifier, rule } of insertions) {
|
|
18
|
+
insertStyleRule(identifier, rule);
|
|
19
|
+
}
|
|
20
|
+
}, [className]);
|
|
21
|
+
return className;
|
|
24
22
|
}
|
|
25
23
|
__name(useStylesAsClassname, "useStylesAsClassname");
|
|
26
24
|
function addStylesUsingClassname(styles, debug = false, onAdd) {
|
|
@@ -13,8 +13,6 @@ const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey
|
|
|
13
13
|
const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
|
|
14
14
|
const mediaQuery = `${screenStr} and ${mediaSelector}`;
|
|
15
15
|
const styleInner = rules[0].replace(identifier, nextIdentifier);
|
|
16
|
-
if (styleInner.includes("2:r;"))
|
|
17
|
-
debugger;
|
|
18
16
|
let styleRule = "";
|
|
19
17
|
if (styleInner.includes("@media")) {
|
|
20
18
|
styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);
|