@tamagui/core 1.0.0-alpha.7 → 1.0.0-beta.0

package/src/views/Text.tsx

@@ -1,66 +0,0 @@
-import { isWeb } from '../constants/platform'
-import { createComponent } from '../createComponent'
-import { stylePropsTextOnly, validStyles } from '../static'
-import { TextProps } from '../types'
-
-const ellipseStyle = {
-  maxWidth: '100%',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}
-
-export const Text = createComponent<TextProps>({
-  isText: true,
-  defaultProps: {
-    display: isWeb ? 'inline' : 'inline-flex',
-    boxSizing: 'border-box',
-    fontFamily: 'System',
-    wordWrap: 'break-word',
-  },
-  variants: {
-    numberOfLines: {
-      1: ellipseStyle,
-      // TODO imply fn, test 1, could do types `>1` `<2`
-      '[number]': (lines) => (lines > 1 ? { WebkitLineClamp: 1 } : null),
-    },
-
-    selectable: {
-      true: {
-        userSelect: 'text',
-      },
-      false: {
-        userSelect: 'none',
-      },
-    },
-
-    pressable: {
-      true: {
-        cursor: 'pointer',
-      },
-    },
-
-    ellipse: {
-      true: isWeb
-        ? ellipseStyle
-        : {
-            numberOfLines: 1,
-            lineBreakMode: 'clip',
-          },
-    },
-  },
-  // TODO document
-  deoptProps: new Set(isWeb ? [] : ['ellipse']),
-  validStyles: {
-    ...validStyles,
-    ...stylePropsTextOnly,
-    ...(isWeb && {
-      userSelect: true,
-      textOverflow: true,
-      whiteSpace: true,
-      wordWrap: true,
-      selectable: true,
-      cursor: true,
-    }),
-  },
-})

package/src/views/TextAncestorContext.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-import { rnw } from '../constants/rnw'
-
-export const TextAncestorContext = rnw?.TextAncestorContext
-
-export const TextAncestorProvider = (props) => {
-  if (TextAncestorContext) {
-    return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>
-  }
-  return props.children
-}

package/src/views/Theme.tsx

@@ -1,90 +0,0 @@
-import React, { useContext, useState } from 'react'
-
-import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
-import { getThemeParentClassName } from '../createTamagui'
-import { useConstant } from '../hooks/useConstant'
-import { ThemeName } from '../types'
-import { ThemeContext } from './ThemeContext'
-import { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'
-
-export type ThemeProps = {
-  disableThemeClass?: boolean
-  name: ThemeName | null
-  children?: any
-}
-
-export const Theme = (props: ThemeProps) => {
-  const parent = useContext(ThemeManagerContext)
-  const themes = useContext(ThemeContext)
-  const [parentName, setParentName] = useState(parent.name || 'light')
-  if (!themes) {
-    console.warn('Error, no themes in context', props)
-    return props.children
-  }
-  const name = props.name as string
-  const nextNameParent = `${name}-${parentName}`
-  const nextNameParentParent = `${name}-${parent.parentName}`
-  const activeName = !name
-    ? null
-    : name in themes
-    ? name
-    : nextNameParent in themes
-    ? nextNameParent
-    : nextNameParentParent in themes
-    ? nextNameParentParent
-    : null
-  const theme = activeName ? themes[activeName] : null
-  const themeManager = useConstant<ThemeManager | null>(() => {
-    if (!theme) {
-      return null
-    }
-    const manager = new ThemeManager()
-    if (name) {
-      manager.setActiveTheme({ name, theme: themes[name], parentName })
-    }
-    return manager
-  })
-
-  useIsomorphicLayoutEffect(() => {
-    if (!themeManager) {
-      return
-    }
-    themeManager.setActiveTheme({ name: activeName, theme, parentName })
-    return parent.onChangeTheme((next) => {
-      if (next) {
-        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })
-        setParentName(next)
-      }
-    })
-  }, [themes, activeName, parentName])
-
-  if (!name || !theme) {
-    return props.children
-  }
-
-  const contents = themeManager ? (
-    <ThemeManagerContext.Provider value={themeManager}>
-      {props.children}
-    </ThemeManagerContext.Provider>
-  ) : (
-    props.children
-  )
-
-  if (isWeb) {
-    if (props.disableThemeClass) {
-      return contents
-    }
-    const color = themes[name]?.['color']?.['variable']
-    return (
-      <div
-        className={getThemeParentClassName(name)}
-        // in order to provide currentColor, set color by default
-        style={{ display: 'contents', color }}
-      >
-        {contents}
-      </div>
-    )
-  }
-
-  return contents
-}

package/src/views/ThemeContext.tsx

@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-import { Themes } from '../types'
-
-export const ThemeContext = createContext<Themes>(null as any)

package/src/views/ThemeInverse.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { useDefaultThemeName, useThemeName } from '../hooks/useTheme'
-import { Theme } from './Theme'
-
-type StringRecord = { [key: string]: string }
-
-let inversions: StringRecord = {
-  light: 'dark',
-  dark: 'light',
-}
-
-export function setThemeInversions(next: StringRecord) {
-  inversions = next
-}
-
-export const ThemeInverse = (props: { children: any }) => {
-  const themeName = useThemeName()
-  const defaultTheme = useDefaultThemeName()
-  const name = inversions[themeName] || inversions[defaultTheme] || null
-  return <Theme name={name}>{props.children}</Theme>
-}

package/src/views/ThemeManagerContext.tsx

@@ -1,60 +0,0 @@
-import { createContext } from 'react'
-
-export class ThemeManager {
-  name: string | null = 'light'
-  parentName: string | null = null
-  keys = new Map<any, Set<string>>()
-  listeners = new Map<any, Function>()
-  callbacks = new Set<Function>()
-  theme = null
-
-  setActiveTheme({
-    name,
-    theme,
-    parentName,
-  }: {
-    parentName?: string | null
-    name: string | null
-    theme?: any
-  }) {
-    if (name === this.name) return
-    this.name = name
-    this.theme = theme
-    this.parentName = parentName || null
-    this.update()
-  }
-
-  track(uuid: any, keys: Set<string>) {
-    if (!this.name) return
-    this.keys.set(uuid, keys)
-  }
-
-  update() {
-    if (!this.name) {
-      this.keys.clear()
-    }
-    for (const [uuid, keys] of this.keys.entries()) {
-      if (keys.size) {
-        this.listeners.get(uuid)?.()
-      }
-    }
-    this.callbacks.forEach((cb) => cb(this.name))
-  }
-
-  onChangeTheme(cb: (name: string | null) => void) {
-    this.callbacks.add(cb)
-    return () => {
-      this.callbacks.delete(cb)
-    }
-  }
-
-  onUpdate(uuid: any, cb: Function) {
-    this.listeners.set(uuid, cb)
-    return () => {
-      this.listeners.delete(uuid)
-      this.keys.delete(uuid)
-    }
-  }
-}
-
-export const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())

package/src/views/ThemeProvider.tsx

@@ -1,52 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { useIsomorphicLayoutEffect } from '../constants/platform'
-import { getHasConfigured, getThemeParentClassName } from '../createTamagui'
-import { Theme } from './Theme'
-import { ThemeContext } from './ThemeContext'
-
-export type ThemeProviderProps = {
-  themes: any
-  defaultTheme: string
-  disableRootThemeClass?: boolean
-  children?: any
-}
-
-export const GET_DEFAULT_THEME = '___TGUI'
-
-export const ThemeProvider = (props: ThemeProviderProps) => {
-  if (!getHasConfigured()) {
-    throw new Error(`Missing configureThemes() call, add to your root file`)
-  }
-
-  // ensure theme is attached to root body node as well to work with modals by default
-  useIsomorphicLayoutEffect(() => {
-    if (props.disableRootThemeClass) {
-      return
-    }
-    if (typeof document !== 'undefined') {
-      const cns = getThemeParentClassName(`${props.defaultTheme}`).split(' ')
-      cns.forEach((cn) => document.body.classList.add(cn))
-      return () => {
-        cns.forEach((cn) => document.body.classList.remove(cn))
-      }
-    }
-  }, [])
-
-  const themeContext = useMemo(() => {
-    return new Proxy(props.themes, {
-      get(target, key) {
-        if (key === GET_DEFAULT_THEME) return props.defaultTheme
-        return Reflect.get(target, key)
-      },
-    })
-  }, [props.themes])
-
-  return (
-    <ThemeContext.Provider value={themeContext}>
-      <Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>
-        {props.children}
-      </Theme>
-    </ThemeContext.Provider>
-  )
-}