@tamagui/web 1.45.1 → 1.45.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/createComponent.js +6 -7
- package/dist/cjs/createComponent.js.map +1 -1
- package/dist/cjs/createTamagui.js +1 -1
- package/dist/cjs/createTamagui.js.map +1 -1
- package/dist/cjs/helpers/getSplitStyles.js +3 -5
- package/dist/cjs/helpers/getSplitStyles.js.map +1 -1
- package/dist/cjs/hooks/useAnimationDriver.js +0 -3
- package/dist/cjs/hooks/useAnimationDriver.js.map +1 -1
- package/dist/cjs/hooks/useStyle.js +1 -1
- package/dist/cjs/hooks/useStyle.js.map +1 -1
- package/dist/cjs/hooks/useTheme.js +6 -21
- package/dist/cjs/hooks/useTheme.js.map +1 -1
- package/dist/cjs/hooks/useThemeName.js +0 -5
- package/dist/cjs/hooks/useThemeName.js.map +1 -1
- package/dist/cjs/views/TamaguiProvider.js +1 -11
- package/dist/cjs/views/TamaguiProvider.js.map +1 -1
- package/dist/cjs/views/Theme.js +6 -5
- package/dist/cjs/views/Theme.js.map +1 -1
- package/dist/esm/createComponent.js +9 -15
- package/dist/esm/createComponent.js.map +1 -1
- package/dist/esm/createTamagui.js +2 -2
- package/dist/esm/createTamagui.js.map +1 -1
- package/dist/esm/helpers/getSplitStyles.js +3 -6
- package/dist/esm/helpers/getSplitStyles.js.map +1 -1
- package/dist/esm/hooks/useAnimationDriver.js +0 -3
- package/dist/esm/hooks/useAnimationDriver.js.map +1 -1
- package/dist/esm/hooks/useStyle.js +2 -2
- package/dist/esm/hooks/useStyle.js.map +1 -1
- package/dist/esm/hooks/useTheme.js +8 -23
- package/dist/esm/hooks/useTheme.js.map +1 -1
- package/dist/esm/hooks/useThemeName.js +1 -6
- package/dist/esm/hooks/useThemeName.js.map +1 -1
- package/dist/esm/views/TamaguiProvider.js +2 -12
- package/dist/esm/views/TamaguiProvider.js.map +1 -1
- package/dist/esm/views/Theme.js +7 -6
- package/dist/esm/views/Theme.js.map +1 -1
- package/package.json +9 -9
- package/src/createComponent.tsx +8 -15
- package/src/createTamagui.ts +3 -3
- package/src/helpers/getSplitStyles.tsx +3 -6
- package/src/hooks/useAnimationDriver.tsx +0 -2
- package/src/hooks/useStyle.tsx +2 -2
- package/src/hooks/useTheme.tsx +13 -29
- package/src/hooks/useThemeName.tsx +1 -7
- package/src/views/TamaguiProvider.tsx +2 -13
- package/src/views/Theme.tsx +6 -4
- package/types/createComponent.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/hooks/useAnimationDriver.d.ts.map +1 -1
- package/types/hooks/useTheme.d.ts.map +1 -1
- package/types/hooks/useThemeName.d.ts.map +1 -1
- package/types/views/TamaguiProvider.d.ts.map +1 -1
- package/types/views/Theme.d.ts +2 -1
- package/types/views/Theme.d.ts.map +1 -1
- package/src/hooks/useServerHooks.tsx +0 -12
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/views/Theme.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/web",
|
|
3
|
-
"version": "1.45.
|
|
3
|
+
"version": "1.45.3",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
"reset.css"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@tamagui/compose-refs": "1.45.
|
|
31
|
-
"@tamagui/constants": "1.45.
|
|
32
|
-
"@tamagui/helpers": "1.45.
|
|
33
|
-
"@tamagui/normalize-css-color": "1.45.
|
|
34
|
-
"@tamagui/use-did-finish-ssr": "1.45.
|
|
35
|
-
"@tamagui/use-event": "1.45.
|
|
36
|
-
"@tamagui/use-force-update": "1.45.
|
|
30
|
+
"@tamagui/compose-refs": "1.45.3",
|
|
31
|
+
"@tamagui/constants": "1.45.3",
|
|
32
|
+
"@tamagui/helpers": "1.45.3",
|
|
33
|
+
"@tamagui/normalize-css-color": "1.45.3",
|
|
34
|
+
"@tamagui/use-did-finish-ssr": "1.45.3",
|
|
35
|
+
"@tamagui/use-event": "1.45.3",
|
|
36
|
+
"@tamagui/use-force-update": "1.45.3"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"react": "*"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@tamagui/build": "1.45.
|
|
42
|
+
"@tamagui/build": "1.45.3",
|
|
43
43
|
"@testing-library/react": "^13.4.0",
|
|
44
44
|
"csstype": "^3.0.10",
|
|
45
45
|
"react": "^18.2.0",
|
package/src/createComponent.tsx
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { useComposedRefs } from '@tamagui/compose-refs'
|
|
2
|
-
import {
|
|
3
|
-
isClient,
|
|
4
|
-
isRSC,
|
|
5
|
-
isServer,
|
|
6
|
-
isWeb,
|
|
7
|
-
useIsomorphicLayoutEffect,
|
|
8
|
-
} from '@tamagui/constants'
|
|
2
|
+
import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
|
|
9
3
|
import { validStyles } from '@tamagui/helpers'
|
|
10
4
|
import React, {
|
|
11
5
|
Children,
|
|
@@ -16,8 +10,8 @@ import React, {
|
|
|
16
10
|
useCallback,
|
|
17
11
|
useContext,
|
|
18
12
|
useId,
|
|
19
|
-
useMemo,
|
|
20
13
|
useRef,
|
|
14
|
+
useState,
|
|
21
15
|
} from 'react'
|
|
22
16
|
|
|
23
17
|
import { getConfig, onConfiguredOnce } from './config'
|
|
@@ -33,7 +27,6 @@ import { themeable } from './helpers/themeable'
|
|
|
33
27
|
import { useShallowSetState } from './helpers/useShallowSetState'
|
|
34
28
|
import { useAnimationDriver } from './hooks/useAnimationDriver'
|
|
35
29
|
import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
|
|
36
|
-
import { useServerRef, useServerState } from './hooks/useServerHooks'
|
|
37
30
|
import { useThemeWithState } from './hooks/useTheme'
|
|
38
31
|
import { hooks } from './setupHooks'
|
|
39
32
|
import {
|
|
@@ -253,7 +246,7 @@ export function createComponent<
|
|
|
253
246
|
)
|
|
254
247
|
stateRef.current ||= {}
|
|
255
248
|
|
|
256
|
-
const hostRef =
|
|
249
|
+
const hostRef = useRef<TamaguiElement>(null)
|
|
257
250
|
|
|
258
251
|
/**
|
|
259
252
|
* Component state for tracking animations, pseudos
|
|
@@ -277,7 +270,7 @@ export function createComponent<
|
|
|
277
270
|
})()
|
|
278
271
|
|
|
279
272
|
const usePresence = animationsConfig?.usePresence
|
|
280
|
-
const presence = (
|
|
273
|
+
const presence = (willBeAnimated && usePresence?.()) || null
|
|
281
274
|
|
|
282
275
|
const hasEnterStyle = !!props.enterStyle
|
|
283
276
|
|
|
@@ -293,7 +286,7 @@ export function createComponent<
|
|
|
293
286
|
? defaultComponentStateShouldEnter!
|
|
294
287
|
: defaultComponentState!
|
|
295
288
|
: defaultComponentStateMounted!
|
|
296
|
-
const states =
|
|
289
|
+
const states = useState<TamaguiComponentState>(initialState)
|
|
297
290
|
|
|
298
291
|
const state = propsIn.forceStyle
|
|
299
292
|
? { ...states[0], [propsIn.forceStyle]: true }
|
|
@@ -327,7 +320,7 @@ export function createComponent<
|
|
|
327
320
|
? `is_${props.componentName}`
|
|
328
321
|
: defaultComponentClassName
|
|
329
322
|
const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
|
|
330
|
-
const languageContext =
|
|
323
|
+
const languageContext = useContext(FontLanguageContext)
|
|
331
324
|
const isDisabled = props.disabled ?? props.accessibilityState?.disabled
|
|
332
325
|
|
|
333
326
|
const isTaggable = !Component || typeof Component === 'string'
|
|
@@ -522,7 +515,7 @@ export function createComponent<
|
|
|
522
515
|
// once you set animation prop don't remove it, you can set to undefined/false
|
|
523
516
|
// reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
|
|
524
517
|
let animationStyles: any
|
|
525
|
-
if (
|
|
518
|
+
if (willBeAnimated && useAnimations && !isHOC) {
|
|
526
519
|
const animations = useAnimations({
|
|
527
520
|
props: propsWithAnimation,
|
|
528
521
|
// if hydrating, send empty style
|
|
@@ -755,7 +748,7 @@ export function createComponent<
|
|
|
755
748
|
)
|
|
756
749
|
|
|
757
750
|
const events: TamaguiComponentEvents | null =
|
|
758
|
-
shouldAttach && !
|
|
751
|
+
shouldAttach && !isDisabled && !asChild
|
|
759
752
|
? {
|
|
760
753
|
onPressOut: attachPress
|
|
761
754
|
? (e) => {
|
package/src/createTamagui.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isWeb } from '@tamagui/constants'
|
|
2
2
|
|
|
3
3
|
import { configListeners, setConfig } from './config'
|
|
4
|
-
import { Variable
|
|
4
|
+
import { Variable } from './createVariable'
|
|
5
5
|
import { createVariables } from './createVariables'
|
|
6
6
|
import { getThemeCSSRules } from './helpers/getThemeCSSRules'
|
|
7
7
|
import {
|
|
@@ -203,7 +203,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
|
|
|
203
203
|
// then, generate CSS from de-duped
|
|
204
204
|
let themeRuleSets: string[] = []
|
|
205
205
|
|
|
206
|
-
if (isWeb
|
|
206
|
+
if (isWeb) {
|
|
207
207
|
for (const themeName in dedupedThemes) {
|
|
208
208
|
const nextRules = getThemeCSSRules({
|
|
209
209
|
config: configIn,
|
|
@@ -2,7 +2,6 @@ import {
|
|
|
2
2
|
currentPlatform,
|
|
3
3
|
isAndroid,
|
|
4
4
|
isClient,
|
|
5
|
-
isRSC,
|
|
6
5
|
isServer,
|
|
7
6
|
isWeb,
|
|
8
7
|
useIsomorphicLayoutEffect,
|
|
@@ -1226,11 +1225,9 @@ const useInsertEffectCompat = isWeb
|
|
|
1226
1225
|
export const useSplitStyles: StyleSplitter = (...args) => {
|
|
1227
1226
|
const res = getSplitStyles(...args)
|
|
1228
1227
|
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
}, [res.rulesToInsert])
|
|
1233
|
-
}
|
|
1228
|
+
useInsertEffectCompat(() => {
|
|
1229
|
+
insertStyleRules(res.rulesToInsert)
|
|
1230
|
+
}, [res.rulesToInsert])
|
|
1234
1231
|
|
|
1235
1232
|
return res
|
|
1236
1233
|
}
|
|
@@ -2,9 +2,7 @@ import { useContext } from 'react'
|
|
|
2
2
|
|
|
3
3
|
import { AnimationDriverContext } from '../contexts/AnimationDriverContext'
|
|
4
4
|
import { getAnimationDriver } from '../helpers/getAnimationDriver'
|
|
5
|
-
import { isRSC } from '@tamagui/constants'
|
|
6
5
|
|
|
7
6
|
export const useAnimationDriver = () => {
|
|
8
|
-
if (isRSC) return getAnimationDriver()
|
|
9
7
|
return useContext(AnimationDriverContext) ?? getAnimationDriver()
|
|
10
8
|
}
|
package/src/hooks/useStyle.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isWeb } from '@tamagui/constants'
|
|
2
2
|
import { useContext } from 'react'
|
|
3
3
|
|
|
4
4
|
import { FontLanguageContext } from '../contexts/FontLanguageContext'
|
|
@@ -24,7 +24,7 @@ export function useStyle<
|
|
|
24
24
|
) {
|
|
25
25
|
const isText = base.staticConfig.isText
|
|
26
26
|
const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
|
|
27
|
-
const languageContext =
|
|
27
|
+
const languageContext = useContext(FontLanguageContext)
|
|
28
28
|
const themeState = useThemeWithState({})
|
|
29
29
|
const media = useMedia()
|
|
30
30
|
const out = useSplitStyles(
|
package/src/hooks/useTheme.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable no-console */
|
|
2
|
-
import { isClient,
|
|
3
|
-
import { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'
|
|
2
|
+
import { isClient, isServer, isWeb } from '@tamagui/constants'
|
|
3
|
+
import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
|
4
4
|
|
|
5
5
|
import { getConfig } from '../config'
|
|
6
6
|
import { isDevTools } from '../constants/isDevTools'
|
|
@@ -14,7 +14,6 @@ import {
|
|
|
14
14
|
import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
|
|
15
15
|
import type { ThemeParsed, ThemeProps } from '../types'
|
|
16
16
|
import { GetThemeUnwrapped } from './getThemeUnwrapped'
|
|
17
|
-
import { useServerRef } from './useServerHooks'
|
|
18
17
|
|
|
19
18
|
export type ChangedThemeResponse = {
|
|
20
19
|
isNewTheme: boolean
|
|
@@ -49,11 +48,11 @@ type UseThemeResult = {
|
|
|
49
48
|
}
|
|
50
49
|
|
|
51
50
|
export const useTheme = (props: ThemeProps = emptyProps): UseThemeResult => {
|
|
52
|
-
return
|
|
51
|
+
return useThemeWithState(props)?.theme || getDefaultThemeProxied()
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
export const useThemeWithState = (props: ThemeProps) => {
|
|
56
|
-
const keys =
|
|
55
|
+
const keys = useRef<string[]>([])
|
|
57
56
|
|
|
58
57
|
const changedTheme = useChangeThemeEffect(
|
|
59
58
|
props,
|
|
@@ -158,15 +157,6 @@ export const useChangeThemeEffect = (
|
|
|
158
157
|
keys?: string[],
|
|
159
158
|
shouldUpdate?: () => boolean | undefined
|
|
160
159
|
): ChangedThemeResponse => {
|
|
161
|
-
if (isRSC) {
|
|
162
|
-
// we need context working for this to work well
|
|
163
|
-
return {
|
|
164
|
-
isNewTheme: false,
|
|
165
|
-
...createState().state,
|
|
166
|
-
themeManager: null,
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
160
|
const {
|
|
171
161
|
// @ts-expect-error internal use only
|
|
172
162
|
disable,
|
|
@@ -186,7 +176,6 @@ export const useChangeThemeEffect = (
|
|
|
186
176
|
|
|
187
177
|
const [themeState, setThemeState] = useState<State>(createState)
|
|
188
178
|
const { state, mounted, isNewTheme, themeManager } = themeState
|
|
189
|
-
|
|
190
179
|
const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)
|
|
191
180
|
|
|
192
181
|
function getShouldUpdateTheme(
|
|
@@ -223,19 +212,13 @@ export const useChangeThemeEffect = (
|
|
|
223
212
|
|
|
224
213
|
const nextState = getShouldUpdateTheme(themeManager)
|
|
225
214
|
|
|
226
|
-
if (nextState) {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
}
|
|
215
|
+
// if (nextState && isNewTheme) {
|
|
216
|
+
// // if it's a new theme we can just update + publish to children
|
|
217
|
+
// themeManager.updateState(nextState, true)
|
|
218
|
+
// }
|
|
231
219
|
|
|
232
|
-
|
|
220
|
+
if (nextState || isNewTheme) {
|
|
233
221
|
setThemeState(createState)
|
|
234
|
-
} else {
|
|
235
|
-
if (isNewTheme) {
|
|
236
|
-
// need to revert to parent
|
|
237
|
-
setThemeState(createState)
|
|
238
|
-
}
|
|
239
222
|
}
|
|
240
223
|
|
|
241
224
|
// for updateTheme/replaceTheme
|
|
@@ -249,9 +232,9 @@ export const useChangeThemeEffect = (
|
|
|
249
232
|
const force = shouldUpdate?.()
|
|
250
233
|
const doUpdate = force ?? Boolean(keys?.length || isNewTheme)
|
|
251
234
|
if (process.env.NODE_ENV === 'development' && props.debug) {
|
|
252
|
-
|
|
235
|
+
// prettier-ignore
|
|
253
236
|
// rome-ignore lint/nursery/noConsoleLog: <explanation>
|
|
254
|
-
console.log(` 🔸 onChange`, themeManager.id,
|
|
237
|
+
console.log(` 🔸 onChange`, themeManager.id, { force, doUpdate, props, name, manager, keys })
|
|
255
238
|
}
|
|
256
239
|
if (doUpdate) {
|
|
257
240
|
setThemeState(createState)
|
|
@@ -264,13 +247,14 @@ export const useChangeThemeEffect = (
|
|
|
264
247
|
activeThemeManagers.delete(themeManager)
|
|
265
248
|
}
|
|
266
249
|
}, [
|
|
250
|
+
themeManager,
|
|
267
251
|
parentManager,
|
|
268
252
|
isNewTheme,
|
|
269
253
|
props.componentName,
|
|
270
254
|
props.inverse,
|
|
271
255
|
props.name,
|
|
272
256
|
props.reset,
|
|
273
|
-
|
|
257
|
+
mounted,
|
|
274
258
|
])
|
|
275
259
|
|
|
276
260
|
if (process.env.NODE_ENV === 'development') {
|
|
@@ -1,16 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useIsomorphicLayoutEffect } from '@tamagui/constants'
|
|
2
2
|
import { useContext, useState } from 'react'
|
|
3
3
|
|
|
4
|
-
import { getConfig } from '../config'
|
|
5
4
|
import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
|
|
6
5
|
import { ThemeName } from '../types'
|
|
7
6
|
|
|
8
7
|
export function useThemeName(opts?: { parent?: true }): ThemeName {
|
|
9
|
-
if (isRSC) {
|
|
10
|
-
const config = getConfig()
|
|
11
|
-
return config.themes[Object.keys(config.themes)[0]] as any
|
|
12
|
-
}
|
|
13
|
-
|
|
14
8
|
const manager = useContext(ThemeManagerContext)
|
|
15
9
|
const [name, setName] = useState(manager?.state.name || '')
|
|
16
10
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { isClient,
|
|
1
|
+
import { isClient, isServer, isWeb } from '@tamagui/constants'
|
|
2
2
|
import * as React from 'react'
|
|
3
3
|
|
|
4
|
+
import { AnimationDriverContext } from '../contexts/AnimationDriverContext'
|
|
4
5
|
import { ButtonNestingContext } from '../contexts/ButtonNestingContext'
|
|
5
6
|
import { TextAncestorContext } from '../contexts/TextAncestorContext'
|
|
6
7
|
import { useMediaListeners } from '../hooks/useMedia'
|
|
7
8
|
import type { TamaguiProviderProps } from '../types'
|
|
8
9
|
import { ThemeProvider } from './ThemeProvider'
|
|
9
|
-
import { AnimationDriverContext } from '../contexts/AnimationDriverContext'
|
|
10
10
|
|
|
11
11
|
export function TamaguiProvider({
|
|
12
12
|
children,
|
|
@@ -14,17 +14,6 @@ export function TamaguiProvider({
|
|
|
14
14
|
config,
|
|
15
15
|
...themePropsProvider
|
|
16
16
|
}: TamaguiProviderProps) {
|
|
17
|
-
if (isRSC) {
|
|
18
|
-
return (
|
|
19
|
-
<span
|
|
20
|
-
style={{ display: 'contents' }}
|
|
21
|
-
className={`t_${Object.keys(config.themes)[0] || 'light'}`}
|
|
22
|
-
>
|
|
23
|
-
{children}
|
|
24
|
-
</span>
|
|
25
|
-
)
|
|
26
|
-
}
|
|
27
|
-
|
|
28
17
|
if (!(isWeb && isServer)) {
|
|
29
18
|
useMediaListeners(config)
|
|
30
19
|
}
|
package/src/views/Theme.tsx
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { isWeb } from '@tamagui/constants'
|
|
2
|
-
import React, { Children, cloneElement, forwardRef, isValidElement,
|
|
2
|
+
import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react'
|
|
3
3
|
|
|
4
4
|
import { variableToString } from '../createVariable'
|
|
5
5
|
import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
|
|
6
|
-
import { useServerRef } from '../hooks/useServerHooks'
|
|
7
6
|
import { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'
|
|
8
7
|
import type { DebugProp, ThemeProps } from '../types'
|
|
9
8
|
import { ThemeDebug } from './ThemeDebug'
|
|
@@ -60,7 +59,7 @@ export function useThemedChildren(
|
|
|
60
59
|
) {
|
|
61
60
|
const { themeManager, isNewTheme } = themeState
|
|
62
61
|
const { shallow, forceClassName } = props
|
|
63
|
-
const hasEverThemed =
|
|
62
|
+
const hasEverThemed = useRef(false)
|
|
64
63
|
if (isNewTheme) {
|
|
65
64
|
hasEverThemed.current = true
|
|
66
65
|
}
|
|
@@ -104,6 +103,7 @@ export function useThemedChildren(
|
|
|
104
103
|
return wrapThemeElements({
|
|
105
104
|
children: elementsWithContext,
|
|
106
105
|
themeState,
|
|
106
|
+
forceClassName,
|
|
107
107
|
})
|
|
108
108
|
}
|
|
109
109
|
|
|
@@ -113,11 +113,13 @@ export function useThemedChildren(
|
|
|
113
113
|
export function wrapThemeElements({
|
|
114
114
|
children,
|
|
115
115
|
themeState,
|
|
116
|
+
forceClassName,
|
|
116
117
|
}: {
|
|
117
118
|
children?: React.ReactNode
|
|
118
119
|
themeState: ChangedThemeResponse
|
|
120
|
+
forceClassName?: boolean
|
|
119
121
|
}) {
|
|
120
|
-
if (!themeState.isNewTheme) {
|
|
122
|
+
if (!themeState.isNewTheme && !forceClassName) {
|
|
121
123
|
return <span className="_dsp_contents is_Theme">{children}</span>
|
|
122
124
|
}
|
|
123
125
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAWN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAEhB,qBAAqB,EACrB,cAAc,EAIf,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAwBD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAqB3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,4DAs2B3D;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAkGxD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAEV,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,kBAAkB,EAGlB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAqBtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE;IACV,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,EACD,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAU7B,eAAO,MAAM,cAAc,EAAE,aAm+B5B,CAAA;AAkFD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA;AA6BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimationDriver.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimationDriver.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAnimationDriver.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimationDriver.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,oCAE9B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,YAAY,EAGb,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,YAAY,EAGb,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAGvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAA;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAoBD,KAAK,cAAc,GAAG;KACnB,GAAG,IAAI,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG;QAC7C,GAAG,EAAE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAA;KAC5C;CACF,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,KAAgB,cAEzD,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,UAAU;;gBAnCrC,OAAO;kBACL,YAAY,GAAG,IAAI;UAC3B,MAAM;;QA8Eb,CAAA;AAED,wBAAgB,eAAe,CAC7B,EACE,KAAK,EACL,YAAY,GACb,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG;IACjC,KAAK,EAAE,WAAW,CAAA;CACnB,EACD,IAAI,CAAC,EAAE,MAAM,EAAE,GACd,cAAc,CAyChB;AAED,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAE1D,eAAO,MAAM,oBAAoB,UACxB,UAAU,yBAEV,MAAM,EAAE,iBACA,MAAM,OAAO,GAAG,SAAS,KACvC,oBAoOF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeName.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeName.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useThemeName.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeName.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,wBAAgB,YAAY,CAAC,IAAI,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,CAehE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TamaguiProvider.d.ts","sourceRoot":"","sources":["../../src/views/TamaguiProvider.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TamaguiProvider.d.ts","sourceRoot":"","sources":["../../src/views/TamaguiProvider.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAGpD,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,GAAG,kBAAkB,EACtB,EAAE,oBAAoB,eA2CtB"}
|
package/types/views/Theme.d.ts
CHANGED
|
@@ -8,8 +8,9 @@ export declare function useThemedChildren(themeState: ChangedThemeResponse, chil
|
|
|
8
8
|
passPropsToChildren?: boolean;
|
|
9
9
|
debug?: DebugProp;
|
|
10
10
|
}, isRoot?: boolean): any;
|
|
11
|
-
export declare function wrapThemeElements({ children, themeState, }: {
|
|
11
|
+
export declare function wrapThemeElements({ children, themeState, forceClassName, }: {
|
|
12
12
|
children?: React.ReactNode;
|
|
13
13
|
themeState: ChangedThemeResponse;
|
|
14
|
+
forceClassName?: boolean;
|
|
14
15
|
}): JSX.Element;
|
|
15
16
|
//# sourceMappingURL=Theme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqE,MAAM,OAAO,CAAA;AAIzF,OAAO,EAAE,oBAAoB,EAAwB,MAAM,mBAAmB,CAAA;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAGrD,eAAO,MAAM,KAAK,4EAmChB,CAAA;AAIF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,oBAAoB,EAChC,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE;IACL,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,EACD,MAAM,UAAQ,OAqDf;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,UAAU,EACV,cAAc,GACf,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,EAAE,oBAAoB,CAAA;IAChC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,eAkCA"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { isRSC } from '@tamagui/constants'
|
|
2
|
-
import { useRef, useState } from 'react'
|
|
3
|
-
|
|
4
|
-
export const useServerState = isRSC
|
|
5
|
-
? (((val: any) => [val, idFn]) as unknown as typeof useState)
|
|
6
|
-
: useState
|
|
7
|
-
|
|
8
|
-
export const useServerRef = isRSC
|
|
9
|
-
? (((val: any) => ({ current: val })) as unknown as typeof useRef)
|
|
10
|
-
: useRef
|
|
11
|
-
|
|
12
|
-
const idFn = () => {}
|