@tamagui/core 1.0.1-beta.76 → 1.0.1-beta.79
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/constants/rnw.js +5 -7
- package/dist/cjs/constants/rnw.js.map +2 -2
- package/dist/cjs/createComponent.js +4 -3
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +1 -15
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +3 -0
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/validate.js +33 -30
- package/dist/cjs/helpers/validate.js.map +2 -2
- package/dist/cjs/index.js +0 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/insertFont.js +1 -2
- package/dist/cjs/insertFont.js.map +2 -2
- package/dist/esm/ThemeManager.js +4 -4
- package/dist/esm/ThemeManager.js.map +2 -2
- package/dist/esm/constants/rnw.js +2 -7
- package/dist/esm/constants/rnw.js.map +2 -2
- package/dist/esm/createComponent.js +4 -3
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +1 -17
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +3 -0
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/validate.js +1 -1
- package/dist/esm/helpers/validate.js.map +2 -2
- package/dist/esm/index.js +0 -3
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/insertFont.js +1 -2
- package/dist/esm/insertFont.js.map +2 -2
- package/package.json +7 -7
- package/types/ThemeManager.d.ts +1 -1
- package/types/ThemeManager.d.ts.map +1 -1
- package/types/constants/rnw.d.ts.map +1 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/helpers/createTamaguiProvider.d.ts +1 -0
- package/types/helpers/createTamaguiProvider.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/dist/cjs/helpers/pseudos.js +0 -41
- 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/pseudos.js +0 -17
- 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 -64
- 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 +0 -16
- 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
|