@tamagui/core 1.0.1-beta.218 → 1.0.1-beta.220

package/src/views/ThemeInverse.tsx

@@ -1,32 +1,43 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import React, { useState } from 'react'
 
 import { useDefaultThemeName, useThemeName } from '../hooks/useTheme'
 import { Theme } from './Theme'
 
-export const ThemeInverse = ({
-  children,
-  disable,
-}: {
-  children: React.ReactNode
+export type ThemeInverseProps = {
   disable?: boolean
-}) => {
+}
+
+const toggleTheme = (themeName: string) => {
+  return themeName.startsWith('light') ? 'dark' : 'light'
+}
+
+export const useThemeInverse = (props: ThemeInverseProps = {}) => {
   const themeName = useThemeName()
   const defaultTheme = useDefaultThemeName()
   const [name, setName] = useState<null | string>(null)
+  const curName = themeName || defaultTheme || ''
 
-  // ssr
-  useIsomorphicLayoutEffect(() => {
-    if (themeName.startsWith('dark')) {
-      setName('light')
-    } else if (themeName.startsWith('light')) {
-      setName('dark')
-    }
-  }, [defaultTheme, themeName])
-
-  if (disable) {
-    return children as JSX.Element
+  if (isWeb) {
+    // for SSR must be in effect
+    useIsomorphicLayoutEffect(() => {
+      setName(toggleTheme(curName))
+    }, [defaultTheme, themeName])
+
+    return props.disable ? null : name
   }
 
-  return <Theme name={name}>{children}</Theme>
+  return props.disable ? null : toggleTheme(curName)
+}
+
+export const ThemeInverse = ({
+  children,
+  disable,
+}: ThemeInverseProps & {
+  children: React.ReactNode
+}) => {
+  const inverseTheme = useThemeInverse({
+    disable,
+  })
+  return <Theme name={inverseTheme}>{children}</Theme>
 }

package/types/createFont.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createFont.test.d.ts.map

package/types/views/ThemeInverse.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-export declare const ThemeInverse: ({ children, disable, }: {
+export declare type ThemeInverseProps = {
+    disable?: boolean;
+};
+export declare const useThemeInverse: (props?: ThemeInverseProps) => string | null;
+export declare const ThemeInverse: ({ children, disable, }: ThemeInverseProps & {
     children: React.ReactNode;
-    disable?: boolean | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=ThemeInverse.d.ts.map