@tamagui/core 1.0.1-beta.75 → 1.0.1-beta.78
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/ThemeManager.js +6 -22
- package/dist/cjs/ThemeManager.js.map +2 -2
- package/dist/cjs/createComponent.js +13 -10
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createFont.js.map +1 -1
- package/dist/cjs/createTamagui.js +2 -2
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createVariable.js +9 -1
- package/dist/cjs/createVariable.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +4 -16
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/generateAtomicStyles.js +55 -70
- package/dist/cjs/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +18 -10
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +4 -2
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +12 -10
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/{pseudos.js → pseudoDescriptors.js} +7 -7
- package/dist/cjs/helpers/pseudoDescriptors.js.map +7 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/insertFont.js +16 -4
- package/dist/cjs/insertFont.js.map +2 -2
- package/dist/cjs/static.js +1 -1
- package/dist/cjs/static.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/ThemeManager.js +6 -22
- package/dist/esm/ThemeManager.js.map +2 -2
- package/dist/esm/constants/constants.js +23 -8
- package/dist/esm/constants/constants.js.map +1 -1
- package/dist/esm/createComponent.js +228 -121
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createFont.js.map +1 -1
- package/dist/esm/createTamagui.js +28 -10
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createVariable.js +9 -1
- package/dist/esm/createVariable.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +4 -5
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/createShallowUpdate.js +17 -1
- package/dist/esm/helpers/createShallowUpdate.js.map +1 -1
- package/dist/esm/helpers/createTamaguiProvider.js +39 -9
- package/dist/esm/helpers/createTamaguiProvider.js.map +1 -1
- package/dist/esm/helpers/extendStaticConfig.js +28 -27
- package/dist/esm/helpers/extendStaticConfig.js.map +1 -1
- package/dist/esm/helpers/fixNativeShadow.native.js +2 -3
- package/dist/esm/helpers/fixNativeShadow.native.js.map +1 -1
- package/dist/esm/helpers/generateAtomicStyles.js +75 -76
- package/dist/esm/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/esm/helpers/getSize.js +2 -3
- package/dist/esm/helpers/getSize.js.map +1 -1
- package/dist/esm/helpers/getSplitStyles.js +50 -30
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStackSize.js +1 -2
- package/dist/esm/helpers/getStackSize.js.map +1 -1
- package/dist/esm/helpers/getStylesAtomic.js +38 -7
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +12 -10
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/mergeTransform.js +1 -1
- package/dist/esm/helpers/mergeTransform.js.map +1 -1
- package/dist/{jsx/helpers/pseudos.js → esm/helpers/pseudoDescriptors.js} +3 -2
- package/dist/esm/helpers/pseudoDescriptors.js.map +7 -0
- package/dist/esm/helpers/themeable.js +33 -2
- package/dist/esm/helpers/themeable.js.map +1 -1
- package/dist/esm/helpers/validate.js +30 -5
- package/dist/esm/helpers/validate.js.map +1 -1
- package/dist/esm/hooks/useFeatures.js +40 -8
- package/dist/esm/hooks/useFeatures.js.map +1 -1
- package/dist/esm/hooks/useId.js +2 -3
- package/dist/esm/hooks/useId.js.map +1 -1
- package/dist/esm/hooks/useMedia.js +18 -6
- package/dist/esm/hooks/useMedia.js.map +1 -1
- package/dist/esm/hooks/usePressable.js +16 -1
- package/dist/esm/hooks/usePressable.js.map +1 -1
- package/dist/esm/hooks/useTheme.js +24 -7
- package/dist/esm/hooks/useTheme.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/insertFont.js +16 -4
- package/dist/esm/insertFont.js.map +2 -2
- package/dist/esm/static.js +1 -1
- package/dist/esm/static.js.map +1 -1
- package/dist/esm/styled.js +38 -9
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/views/Slot.js +40 -11
- package/dist/esm/views/Slot.js.map +1 -1
- package/dist/esm/views/Stack.js +21 -3
- package/dist/esm/views/Stack.js.map +1 -1
- package/dist/esm/views/Text.js +24 -12
- package/dist/esm/views/Text.js.map +1 -1
- package/dist/esm/views/TextAncestorContext.js +2 -2
- package/dist/esm/views/TextAncestorContext.js.map +1 -1
- package/package.json +7 -7
- package/reset.css +4 -0
- package/types/ThemeManager.d.ts +1 -1
- package/types/ThemeManager.d.ts.map +1 -1
- package/types/createComponent.d.ts +2 -4
- package/types/createComponent.d.ts.map +1 -1
- package/types/createVariable.d.ts.map +1 -1
- package/types/helpers/generateAtomicStyles.d.ts +2 -2
- package/types/helpers/generateAtomicStyles.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +1 -1
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +2 -0
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts +1 -1
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/helpers/{pseudos.d.ts → pseudoDescriptors.d.ts} +3 -3
- package/types/helpers/pseudoDescriptors.d.ts.map +1 -0
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/insertFont.d.ts +1 -1
- package/types/insertFont.d.ts.map +1 -1
- package/types/static.d.ts +1 -1
- package/types/static.d.ts.map +1 -1
- package/types/types.d.ts +2 -2
- package/types/types.d.ts.map +1 -1
- package/dist/cjs/helpers/pseudos.js.map +0 -7
- package/dist/esm/helpers/pseudos.js +0 -18
- package/dist/esm/helpers/pseudos.js.map +0 -7
- package/dist/jsx/Pressability.js +0 -4
- package/dist/jsx/Pressability.native.js +0 -4
- package/dist/jsx/Tamagui.js +0 -38
- package/dist/jsx/ThemeContext.js +0 -5
- package/dist/jsx/ThemeManager.js +0 -194
- package/dist/jsx/conf.js +0 -38
- package/dist/jsx/constants/constants.js +0 -17
- package/dist/jsx/constants/platform.js +0 -25
- package/dist/jsx/constants/rnw.js +0 -10
- package/dist/jsx/contexts/ButtonInsideButtonContext.js +0 -5
- package/dist/jsx/createComponent.js +0 -1036
- package/dist/jsx/createFont.js +0 -25
- package/dist/jsx/createShorthands.js +0 -6
- package/dist/jsx/createTamagui.js +0 -245
- package/dist/jsx/createTheme.js +0 -6
- package/dist/jsx/createTokens.js +0 -11
- package/dist/jsx/createVariable.js +0 -64
- package/dist/jsx/createVariables.js +0 -31
- package/dist/jsx/defaultComponentState.js +0 -0
- package/dist/jsx/helpers/RNComponents.js +0 -11
- package/dist/jsx/helpers/areEqualSets.js +0 -13
- package/dist/jsx/helpers/calc.js +0 -46
- package/dist/jsx/helpers/createMediaStyle.js +0 -29
- package/dist/jsx/helpers/createPropMapper.js +0 -243
- package/dist/jsx/helpers/createShallowUpdate.js +0 -16
- package/dist/jsx/helpers/createTamaguiProvider.js +0 -28
- package/dist/jsx/helpers/extendStaticConfig.js +0 -62
- package/dist/jsx/helpers/fixNativeShadow.js +0 -5
- package/dist/jsx/helpers/fixNativeShadow.native.js +0 -28
- package/dist/jsx/helpers/generateAtomicStyles.js +0 -410
- package/dist/jsx/helpers/getExpandedShorthands.js +0 -15
- package/dist/jsx/helpers/getSize.js +0 -19
- package/dist/jsx/helpers/getSplitStyles.js +0 -380
- package/dist/jsx/helpers/getStackSize.js +0 -15
- package/dist/jsx/helpers/getStylesAtomic.js +0 -61
- package/dist/jsx/helpers/getStylesAtomic.native.js +0 -6
- package/dist/jsx/helpers/getTextSize.js +0 -31
- package/dist/jsx/helpers/getVariantExtras.js +0 -22
- package/dist/jsx/helpers/insertStyleRule.js +0 -91
- package/dist/jsx/helpers/isObj.js +0 -4
- package/dist/jsx/helpers/isTamaguiComponent.js +0 -12
- package/dist/jsx/helpers/isTamaguiElement.js +0 -8
- package/dist/jsx/helpers/matchMedia.js +0 -15
- package/dist/jsx/helpers/matchMedia.native.js +0 -6
- package/dist/jsx/helpers/mergeProps.js +0 -15
- package/dist/jsx/helpers/mergeTransform.js +0 -16
- package/dist/jsx/helpers/nativeGestureHandler.native.js +0 -1
- package/dist/jsx/helpers/proxyThemeVariables.js +0 -14
- package/dist/jsx/helpers/registerCSSVariable.js +0 -14
- package/dist/jsx/helpers/themeable.js +0 -22
- package/dist/jsx/helpers/validate.js +0 -73
- package/dist/jsx/helpers/withStaticProperties.js +0 -7
- package/dist/jsx/helpers/wrapThemeManagerContext.js +0 -7
- package/dist/jsx/hooks/useConstant.js +0 -11
- package/dist/jsx/hooks/useFeatures.js +0 -165
- package/dist/jsx/hooks/useId.js +0 -32
- package/dist/jsx/hooks/useIsMounted.js +0 -15
- package/dist/jsx/hooks/useIsTouchDevice.js +0 -14
- package/dist/jsx/hooks/useMedia.js +0 -153
- package/dist/jsx/hooks/usePressable.js +0 -11
- package/dist/jsx/hooks/usePrevious.js +0 -0
- package/dist/jsx/hooks/useTheme.js +0 -164
- package/dist/jsx/hooks/useUnmountEffect.js +0 -7
- package/dist/jsx/index.js +0 -64
- package/dist/jsx/insertFont.js +0 -51
- package/dist/jsx/static.js +0 -18
- package/dist/jsx/styled.js +0 -49
- package/dist/jsx/types-rnw.js +0 -0
- package/dist/jsx/types.js +0 -0
- package/dist/jsx/views/Slot.js +0 -70
- package/dist/jsx/views/Stack.js +0 -12
- package/dist/jsx/views/Text.js +0 -57
- package/dist/jsx/views/TextAncestorContext.js +0 -13
- package/dist/jsx/views/Theme.js +0 -27
- package/dist/jsx/views/ThemeInverse.js +0 -24
- package/dist/jsx/views/ThemeProvider.js +0 -34
- package/dist/jsx/views/ThemeReset.js +0 -32
- package/types/helpers/pseudos.d.ts.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "react-native-gesture-handler";
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
function proxyThemeVariables(obj) {
|
|
2
|
-
return new Proxy(obj, {
|
|
3
|
-
has(target, key) {
|
|
4
|
-
return Reflect.has(target, removeStarting$(key));
|
|
5
|
-
},
|
|
6
|
-
get(target, key) {
|
|
7
|
-
return Reflect.get(target, removeStarting$(key));
|
|
8
|
-
}
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
const removeStarting$ = (str) => typeof str === "string" && str[0] === "$" ? str.slice(1) : str;
|
|
12
|
-
export {
|
|
13
|
-
proxyThemeVariables
|
|
14
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { createCSSVariable } from "../createVariable";
|
|
2
|
-
const registerCSSVariable = (v) => {
|
|
3
|
-
tokensValueToVariable.set(v.val, v);
|
|
4
|
-
const val = `--${createCSSVariable(v.name, false)}:${typeof v.val === "number" ? `${v.val}px` : v.val}`;
|
|
5
|
-
tokenRules.add(val);
|
|
6
|
-
return val;
|
|
7
|
-
};
|
|
8
|
-
const tokensValueToVariable = /* @__PURE__ */ new Map();
|
|
9
|
-
const tokenRules = /* @__PURE__ */ new Set();
|
|
10
|
-
export {
|
|
11
|
-
registerCSSVariable,
|
|
12
|
-
tokenRules,
|
|
13
|
-
tokensValueToVariable
|
|
14
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from "react";
|
|
2
|
-
import { Theme } from "../views/Theme";
|
|
3
|
-
import { ThemeInverse } from "../views/ThemeInverse";
|
|
4
|
-
function themeable(component, opts) {
|
|
5
|
-
const withThemeComponent = forwardRef(function WithTheme(props, ref) {
|
|
6
|
-
const { themeInverse, theme, ...rest } = props;
|
|
7
|
-
const element = React.createElement(component, { ...rest, ref });
|
|
8
|
-
if (themeInverse) {
|
|
9
|
-
return <ThemeInverse>{element}</ThemeInverse>;
|
|
10
|
-
}
|
|
11
|
-
if (theme || opts) {
|
|
12
|
-
return <Theme componentName={opts == null ? void 0 : opts.componentName} name={theme || null}>{element}</Theme>;
|
|
13
|
-
}
|
|
14
|
-
return element;
|
|
15
|
-
});
|
|
16
|
-
const withTheme = withThemeComponent;
|
|
17
|
-
withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;
|
|
18
|
-
return withTheme;
|
|
19
|
-
}
|
|
20
|
-
export {
|
|
21
|
-
themeable
|
|
22
|
-
};
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
const { default: ow } = require("@tamagui/ow/dev-only");
|
|
2
|
-
let Config;
|
|
3
|
-
let Tokens;
|
|
4
|
-
let FontRequired;
|
|
5
|
-
let FontOptional;
|
|
6
|
-
const validateConfig = (conf) => {
|
|
7
|
-
if (!conf) {
|
|
8
|
-
console.warn("no conf?");
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
try {
|
|
12
|
-
ow(conf, Config);
|
|
13
|
-
} catch (err) {
|
|
14
|
-
console.warn("Given config:\n", JSON.stringify(conf, null, 2), err);
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
const validateTokens = (tokens) => {
|
|
18
|
-
try {
|
|
19
|
-
ow(tokens, Tokens);
|
|
20
|
-
} catch (err) {
|
|
21
|
-
console.warn("Given tokens:\n", JSON.stringify(tokens, null, 2), err);
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
const validateFont = (font) => {
|
|
25
|
-
try {
|
|
26
|
-
const { style, transform, color, ...required } = font;
|
|
27
|
-
ow(required, FontRequired);
|
|
28
|
-
ow({ style, transform, color }, FontOptional);
|
|
29
|
-
} catch (err) {
|
|
30
|
-
console.warn("Given font:\n", JSON.stringify(font, null, 2), err);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
if (process.env.NODE_ENV === "development") {
|
|
34
|
-
const fontReq = {
|
|
35
|
-
family: ow.string,
|
|
36
|
-
size: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
37
|
-
lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
38
|
-
weight: ow.object.nonEmpty.valuesOfType(ow.string),
|
|
39
|
-
letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
|
|
40
|
-
};
|
|
41
|
-
const fontOpt = {
|
|
42
|
-
style: ow.optional.object.valuesOfType(ow.string),
|
|
43
|
-
transform: ow.optional.object.valuesOfType(ow.string),
|
|
44
|
-
color: ow.optional.object.valuesOfType(ow.any(ow.string, ow.object))
|
|
45
|
-
};
|
|
46
|
-
Config = ow.object.exactShape({
|
|
47
|
-
defaultTheme: ow.optional.string,
|
|
48
|
-
disableRootThemeClass: ow.optional.boolean,
|
|
49
|
-
shorthands: ow.optional.object.valuesOfType(ow.string),
|
|
50
|
-
themes: ow.object.valuesOfType(ow.object),
|
|
51
|
-
tokens: ow.object.valuesOfType(ow.object),
|
|
52
|
-
media: ow.object.valuesOfType(ow.object),
|
|
53
|
-
animations: ow.object.valuesOfType(ow.object),
|
|
54
|
-
fonts: ow.object.valuesOfType(ow.object.partialShape({
|
|
55
|
-
...fontReq,
|
|
56
|
-
...fontOpt
|
|
57
|
-
}))
|
|
58
|
-
});
|
|
59
|
-
FontRequired = ow.object.exactShape(fontReq);
|
|
60
|
-
FontOptional = ow.object.partialShape(fontOpt);
|
|
61
|
-
Tokens = ow.object.exactShape({
|
|
62
|
-
size: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
|
|
63
|
-
space: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
|
|
64
|
-
zIndex: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
|
|
65
|
-
radius: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
|
|
66
|
-
color: ow.object.nonEmpty.valuesOfType(ow.any(ow.string, ow.object))
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
export {
|
|
70
|
-
validateConfig,
|
|
71
|
-
validateFont,
|
|
72
|
-
validateTokens
|
|
73
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { ThemeManagerContext } from "../ThemeManager";
|
|
2
|
-
function wrapThemeManagerContext(children, themeManager) {
|
|
3
|
-
return themeManager ? <ThemeManagerContext.Provider value={themeManager}>{children}</ThemeManagerContext.Provider> : children;
|
|
4
|
-
}
|
|
5
|
-
export {
|
|
6
|
-
wrapThemeManagerContext
|
|
7
|
-
};
|
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
import { useIsomorphicLayoutEffect } from "../constants/platform";
|
|
2
|
-
import { getSubStyle } from "../helpers/getSplitStyles";
|
|
3
|
-
import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
|
|
4
|
-
const createDefinition = ({
|
|
5
|
-
Component,
|
|
6
|
-
propNames
|
|
7
|
-
}) => ({
|
|
8
|
-
isEnabled: (props) => propNames.some((name) => !!props[name]),
|
|
9
|
-
Component
|
|
10
|
-
});
|
|
11
|
-
let featureDefinitions = null;
|
|
12
|
-
const useFeatures = (props, utils) => {
|
|
13
|
-
if (!featureDefinitions) {
|
|
14
|
-
featureDefinitions = loadFeatures();
|
|
15
|
-
}
|
|
16
|
-
const elements = [];
|
|
17
|
-
const enabled = {};
|
|
18
|
-
for (const name in featureDefinitions) {
|
|
19
|
-
const { isEnabled, Component } = featureDefinitions[name];
|
|
20
|
-
if (isEnabled(props) && Component) {
|
|
21
|
-
enabled[name] = true;
|
|
22
|
-
elements.push(<Component key={name} {...props} _utils={utils} />);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return {
|
|
26
|
-
elements,
|
|
27
|
-
enabled
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
function loadFeatures() {
|
|
31
|
-
return {
|
|
32
|
-
animation: loadAnimationFeature(),
|
|
33
|
-
mediaQuery: loadMediaQueryFeature()
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
function loadAnimationFeature() {
|
|
37
|
-
return createDefinition({
|
|
38
|
-
Component: ({ _utils, ...props }) => {
|
|
39
|
-
const {
|
|
40
|
-
state,
|
|
41
|
-
useAnimations,
|
|
42
|
-
pseudos,
|
|
43
|
-
style: inStyle,
|
|
44
|
-
setStateShallow,
|
|
45
|
-
staticConfig,
|
|
46
|
-
theme,
|
|
47
|
-
onDidAnimate
|
|
48
|
-
} = _utils;
|
|
49
|
-
if (!useAnimations) {
|
|
50
|
-
console.error("no useAnimations hook provided");
|
|
51
|
-
return null;
|
|
52
|
-
}
|
|
53
|
-
const propsWithAnimation = props;
|
|
54
|
-
const res = useAnimations(propsWithAnimation, {
|
|
55
|
-
state,
|
|
56
|
-
pseudos,
|
|
57
|
-
onDidAnimate,
|
|
58
|
-
staticConfig,
|
|
59
|
-
getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
|
|
60
|
-
var _a, _b, _c, _d;
|
|
61
|
-
const style = inStyle || {};
|
|
62
|
-
const enterStyle = isEntering ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
|
|
63
|
-
const exitStyle = isExiting ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
|
|
64
|
-
ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
|
|
65
|
-
enterStyle && merge(style, enterStyle);
|
|
66
|
-
state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
|
|
67
|
-
state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
|
|
68
|
-
state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
|
|
69
|
-
exitStyle && merge(style, exitStyle);
|
|
70
|
-
return style;
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
useIsomorphicLayoutEffect(() => {
|
|
74
|
-
setStateShallow({
|
|
75
|
-
animation: res
|
|
76
|
-
});
|
|
77
|
-
}, [res]);
|
|
78
|
-
return null;
|
|
79
|
-
},
|
|
80
|
-
propNames: ["animation"]
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
const defaults = {
|
|
84
|
-
left: 0,
|
|
85
|
-
right: 0,
|
|
86
|
-
top: 0,
|
|
87
|
-
bottom: 0,
|
|
88
|
-
opacity: 1,
|
|
89
|
-
translateX: 0,
|
|
90
|
-
translateY: 0,
|
|
91
|
-
skew: 0,
|
|
92
|
-
skewX: 0,
|
|
93
|
-
skewY: 0,
|
|
94
|
-
scale: 1,
|
|
95
|
-
rotate: "0deg",
|
|
96
|
-
rotateY: "0deg",
|
|
97
|
-
rotateX: "0deg"
|
|
98
|
-
};
|
|
99
|
-
function ensureBaseHasDefaults(base, ...pseudos) {
|
|
100
|
-
for (const pseudo of pseudos) {
|
|
101
|
-
if (!pseudo)
|
|
102
|
-
continue;
|
|
103
|
-
for (const key in pseudo) {
|
|
104
|
-
const val = pseudo[key];
|
|
105
|
-
if (key === "transform") {
|
|
106
|
-
for (const t of val) {
|
|
107
|
-
const tkey = Object.keys(t)[0];
|
|
108
|
-
const defaultVal = defaults[tkey];
|
|
109
|
-
const tDefaultVal = { [tkey]: defaultVal };
|
|
110
|
-
if (!base.transform) {
|
|
111
|
-
base.transform = [tDefaultVal];
|
|
112
|
-
} else {
|
|
113
|
-
if (!base.transform.find((x) => x[tkey])) {
|
|
114
|
-
base.transform.push(tDefaultVal);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
} else {
|
|
119
|
-
if (!(key in base)) {
|
|
120
|
-
base[key] = defaults[key];
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
function merge(base, next) {
|
|
127
|
-
if (!next.transform || !base.transform) {
|
|
128
|
-
Object.assign(base, next);
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
const { transform, ...rest } = next;
|
|
132
|
-
Object.assign(base, rest);
|
|
133
|
-
for (const t of transform) {
|
|
134
|
-
const key = Object.keys(t)[0];
|
|
135
|
-
const existing = base.transform.find((x) => key in x);
|
|
136
|
-
if (existing) {
|
|
137
|
-
existing[key] = t[key];
|
|
138
|
-
} else {
|
|
139
|
-
base.transform.push(t);
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
function loadMediaQueryFeature() {
|
|
144
|
-
const mediaPropNames = Object.keys(mediaState);
|
|
145
|
-
return createDefinition({
|
|
146
|
-
Component: (props) => {
|
|
147
|
-
const mediaKeys = mediaPropNames.filter((x) => x in props);
|
|
148
|
-
useIsomorphicLayoutEffect(() => {
|
|
149
|
-
for (const key of mediaKeys) {
|
|
150
|
-
addMediaQueryListener(key, props._utils.forceUpdate);
|
|
151
|
-
}
|
|
152
|
-
return () => {
|
|
153
|
-
for (const key of mediaKeys) {
|
|
154
|
-
removeMediaQueryListener(key, props._utils.forceUpdate);
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
}, [mediaKeys.join(",")]);
|
|
158
|
-
return null;
|
|
159
|
-
},
|
|
160
|
-
propNames: mediaPropNames
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
export {
|
|
164
|
-
useFeatures
|
|
165
|
-
};
|
package/dist/jsx/hooks/useId.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
|
|
3
|
-
let serverHandoffComplete = false;
|
|
4
|
-
let id = 0;
|
|
5
|
-
function genId() {
|
|
6
|
-
return ++id;
|
|
7
|
-
}
|
|
8
|
-
function useId(providedId) {
|
|
9
|
-
var _a;
|
|
10
|
-
if (isWeb) {
|
|
11
|
-
if (typeof React.useId === "function") {
|
|
12
|
-
let id3 = React.useId(providedId);
|
|
13
|
-
return providedId != null ? providedId : id3;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
let initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;
|
|
17
|
-
let [id2, setId] = React.useState(initialId);
|
|
18
|
-
useIsomorphicLayoutEffect(() => {
|
|
19
|
-
if (id2 === null) {
|
|
20
|
-
setId(genId());
|
|
21
|
-
}
|
|
22
|
-
}, []);
|
|
23
|
-
React.useEffect(() => {
|
|
24
|
-
if (serverHandoffComplete === false) {
|
|
25
|
-
serverHandoffComplete = true;
|
|
26
|
-
}
|
|
27
|
-
}, []);
|
|
28
|
-
return (_a = providedId != null ? providedId : id2) != null ? _a : void 0;
|
|
29
|
-
}
|
|
30
|
-
export {
|
|
31
|
-
useId
|
|
32
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { useRef } from "react";
|
|
2
|
-
import { useIsomorphicLayoutEffect } from "../constants/platform";
|
|
3
|
-
function useIsMounted() {
|
|
4
|
-
const isMounted = useRef(false);
|
|
5
|
-
useIsomorphicLayoutEffect(() => {
|
|
6
|
-
isMounted.current = true;
|
|
7
|
-
return () => {
|
|
8
|
-
isMounted.current = false;
|
|
9
|
-
};
|
|
10
|
-
}, []);
|
|
11
|
-
return isMounted;
|
|
12
|
-
}
|
|
13
|
-
export {
|
|
14
|
-
useIsMounted
|
|
15
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
2
|
-
import { isTouchable, useIsomorphicLayoutEffect } from "../constants/platform";
|
|
3
|
-
const useIsTouchDevice = () => {
|
|
4
|
-
const [touchOnly, setTouchOnly] = useState(false);
|
|
5
|
-
useIsomorphicLayoutEffect(() => {
|
|
6
|
-
if (isTouchable) {
|
|
7
|
-
setTouchOnly(true);
|
|
8
|
-
}
|
|
9
|
-
}, []);
|
|
10
|
-
return touchOnly;
|
|
11
|
-
};
|
|
12
|
-
export {
|
|
13
|
-
useIsTouchDevice
|
|
14
|
-
};
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
import { useForceUpdate } from "@tamagui/use-force-update";
|
|
2
|
-
import { useRef } from "react";
|
|
3
|
-
import { useIsomorphicLayoutEffect } from "../constants/platform";
|
|
4
|
-
import { matchMedia } from "../helpers/matchMedia";
|
|
5
|
-
import { useConstant } from "./useConstant";
|
|
6
|
-
const mediaState = {};
|
|
7
|
-
const mediaQueryListeners = {};
|
|
8
|
-
const addMediaQueryListener = (key, cb) => {
|
|
9
|
-
mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
|
|
10
|
-
mediaQueryListeners[key].add(cb);
|
|
11
|
-
};
|
|
12
|
-
const removeMediaQueryListener = (key, cb) => {
|
|
13
|
-
var _a;
|
|
14
|
-
(_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
|
|
15
|
-
};
|
|
16
|
-
let hasConfigured = false;
|
|
17
|
-
const mediaQueryConfig = {};
|
|
18
|
-
const getMedia = () => {
|
|
19
|
-
return mediaState;
|
|
20
|
-
};
|
|
21
|
-
const configureMedia = ({
|
|
22
|
-
queries,
|
|
23
|
-
defaultActive = ["sm", "xs"]
|
|
24
|
-
} = {}) => {
|
|
25
|
-
var _a;
|
|
26
|
-
if (hasConfigured) {
|
|
27
|
-
console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
|
|
28
|
-
}
|
|
29
|
-
if (queries) {
|
|
30
|
-
Object.assign(mediaQueryConfig, queries);
|
|
31
|
-
hasConfigured = true;
|
|
32
|
-
}
|
|
33
|
-
for (const key in queries) {
|
|
34
|
-
const str = mediaObjectToString(queries[key]);
|
|
35
|
-
const propKey = `$${key}`;
|
|
36
|
-
try {
|
|
37
|
-
let update = function() {
|
|
38
|
-
const next = !!getMatch().matches;
|
|
39
|
-
if (next === mediaState[propKey])
|
|
40
|
-
return;
|
|
41
|
-
mediaState[propKey] = next;
|
|
42
|
-
const listeners = mediaQueryListeners[propKey];
|
|
43
|
-
if (listeners == null ? void 0 : listeners.size) {
|
|
44
|
-
for (const cb of [...listeners]) {
|
|
45
|
-
cb();
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const getMatch = () => matchMedia(str);
|
|
50
|
-
const match = getMatch();
|
|
51
|
-
if (!match || typeof match.addListener !== "function") {
|
|
52
|
-
throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
|
|
53
|
-
}
|
|
54
|
-
mediaState[propKey] = !!match.matches;
|
|
55
|
-
match.addListener(update);
|
|
56
|
-
update();
|
|
57
|
-
} catch (err) {
|
|
58
|
-
console.error("Error running media query", str, err.message, err.stack);
|
|
59
|
-
const isDefaultActive = (_a = defaultActive == null ? void 0 : defaultActive.includes(key)) != null ? _a : true;
|
|
60
|
-
mediaState[propKey] = isDefaultActive;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
const useMedia = () => {
|
|
65
|
-
const forceUpdate = useForceUpdate();
|
|
66
|
-
const state = useRef();
|
|
67
|
-
if (!state.current) {
|
|
68
|
-
state.current = {
|
|
69
|
-
selections: {},
|
|
70
|
-
nextSelections: {},
|
|
71
|
-
isUnmounted: false,
|
|
72
|
-
isRendering: true
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
state.current.isRendering = true;
|
|
76
|
-
useIsomorphicLayoutEffect(() => {
|
|
77
|
-
const st = state.current;
|
|
78
|
-
st.isRendering = false;
|
|
79
|
-
for (const key in st.selections) {
|
|
80
|
-
if (!(key in st.nextSelections)) {
|
|
81
|
-
removeMediaQueryListener(key, forceUpdate);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
for (const key in st.nextSelections) {
|
|
85
|
-
if (!(key in st.selections)) {
|
|
86
|
-
addMediaQueryListener(key, forceUpdate);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
useIsomorphicLayoutEffect(() => {
|
|
91
|
-
return () => {
|
|
92
|
-
const st = state.current;
|
|
93
|
-
st.isUnmounted = true;
|
|
94
|
-
const allKeys = {
|
|
95
|
-
...st.selections,
|
|
96
|
-
...st.nextSelections
|
|
97
|
-
};
|
|
98
|
-
for (const key in allKeys) {
|
|
99
|
-
removeMediaQueryListener(key, forceUpdate);
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
}, []);
|
|
103
|
-
return useConstant(() => {
|
|
104
|
-
const st = state.current;
|
|
105
|
-
return new Proxy(mediaState, {
|
|
106
|
-
get(target, key) {
|
|
107
|
-
if (key[0] !== "$") {
|
|
108
|
-
key = `$${key}`;
|
|
109
|
-
}
|
|
110
|
-
if (!(key in mediaState)) {
|
|
111
|
-
return Reflect.get(target, key);
|
|
112
|
-
}
|
|
113
|
-
if (!st.isUnmounted) {
|
|
114
|
-
if (st.isRendering) {
|
|
115
|
-
st.nextSelections[key] = true;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
if (key in mediaState) {
|
|
119
|
-
return mediaState[key];
|
|
120
|
-
}
|
|
121
|
-
return Reflect.get(mediaState, key);
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
});
|
|
125
|
-
};
|
|
126
|
-
function camelToHyphen(str) {
|
|
127
|
-
return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
|
|
128
|
-
}
|
|
129
|
-
function mediaObjectToString(query) {
|
|
130
|
-
if (typeof query === "string") {
|
|
131
|
-
return query;
|
|
132
|
-
}
|
|
133
|
-
return Object.entries(query).map(([feature, value]) => {
|
|
134
|
-
feature = camelToHyphen(feature);
|
|
135
|
-
if (typeof value === "string") {
|
|
136
|
-
return `(${feature}: ${value})`;
|
|
137
|
-
}
|
|
138
|
-
if (typeof value === "number" && /[height|width]$/.test(feature)) {
|
|
139
|
-
value = `${value}px`;
|
|
140
|
-
}
|
|
141
|
-
return `(${feature}: ${value})`;
|
|
142
|
-
}).join(" and ");
|
|
143
|
-
}
|
|
144
|
-
export {
|
|
145
|
-
addMediaQueryListener,
|
|
146
|
-
configureMedia,
|
|
147
|
-
getMedia,
|
|
148
|
-
mediaObjectToString,
|
|
149
|
-
mediaQueryConfig,
|
|
150
|
-
mediaState,
|
|
151
|
-
removeMediaQueryListener,
|
|
152
|
-
useMedia
|
|
153
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var _a, _b;
|
|
2
|
-
import { Pressable } from "react-native";
|
|
3
|
-
const getPressable = (_b = (_a = Pressable) == null ? void 0 : _a["type"]) == null ? void 0 : _b["render"];
|
|
4
|
-
const usePressable = (props) => {
|
|
5
|
-
const out = getPressable(props);
|
|
6
|
-
const { children, style, ...pressableProps } = out.props;
|
|
7
|
-
return [pressableProps, style];
|
|
8
|
-
};
|
|
9
|
-
export {
|
|
10
|
-
usePressable
|
|
11
|
-
};
|
|
File without changes
|