@tamagui/core 1.0.0-alpha.10 → 1.0.0-alpha.11
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 +2 -1
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +20 -13
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +4 -2
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/views/Theme.js +15 -12
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/createComponent.js +2 -1
- package/dist/createComponent.js.map +2 -2
- package/dist/helpers/createPropMapper.js +14 -7
- package/dist/helpers/createPropMapper.js.map +2 -2
- package/dist/hooks/useMedia.js +4 -2
- package/dist/hooks/useMedia.js.map +2 -2
- package/dist/views/Theme.js +15 -12
- package/dist/views/Theme.js.map +2 -2
- package/package.json +2 -2
- package/src/createComponent.tsx +3 -1
- package/src/helpers/createPropMapper.ts +14 -6
- package/src/hooks/useMedia.tsx +5 -3
- package/src/views/Theme.tsx +24 -20
- package/types.d.ts +1 -1
|
@@ -121,12 +121,13 @@ function createComponent(configIn) {
|
|
|
121
121
|
}
|
|
122
122
|
const hasTextAncestor = import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false;
|
|
123
123
|
const hostRef = (0, import_react.useRef)(null);
|
|
124
|
+
const theme = manager.theme || initialTheme;
|
|
124
125
|
const {
|
|
125
126
|
viewProps: viewPropsIn,
|
|
126
127
|
pseudos,
|
|
127
128
|
style,
|
|
128
129
|
classNames
|
|
129
|
-
} = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig,
|
|
130
|
+
} = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme);
|
|
130
131
|
const _a = viewPropsIn, {
|
|
131
132
|
tag,
|
|
132
133
|
hitSlop,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createComponent.tsx"],
|
|
4
|
-
"sourcesContent": ["import { concatClassName, stylePropsView } from '@tamagui/helpers'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, {\n Children,\n Fragment,\n createElement,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { StyleSheet, Text, View, ViewStyle } from 'react-native'\n\nimport { stackDefaultStyles } from './constants/constants'\nimport { isTouchDevice, isWeb } from './constants/platform'\nimport { rnw } from './constants/rnw'\nimport { onConfiguredOnce } from './createTamagui'\nimport { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStylesUsingClassname'\nimport { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'\nimport { getSplitStyles } from './helpers/getSplitStyles'\nimport { useFeatures } from './hooks/useFeatures'\nimport { usePressable } from './hooks/usePressable'\nimport {\n SpaceTokens,\n StaticComponent,\n StaticConfig,\n StaticConfigParsed,\n TamaguiInternalConfig,\n} from './types'\nimport { TextAncestorContext } from './views/TextAncestorContext'\nimport { ThemeManagerContext } from './views/ThemeManagerContext'\n\nexport const mouseUps = new Set<Function>()\n\nif (typeof document !== 'undefined') {\n document.addEventListener('mouseup', () => {\n mouseUps.forEach((x) => x())\n mouseUps.clear()\n })\n}\n\ntype DefaultProps = {}\n\nexport function createComponent<A extends Object = DefaultProps>(\n configIn: Partial<StaticConfig> | StaticConfigParsed\n) {\n let staticConfig: StaticConfigParsed\n if ('parsed' in configIn) {\n staticConfig = configIn\n } else {\n staticConfig = parseStaticConfig(configIn)\n }\n\n const { Component, validStyles, isText, isZStack } = staticConfig\n const validStyleProps = validStyles ?? stylePropsView\n\n // split out default styles vs props so we can assign it to component.defaultProps\n let defaultProps = null as any\n let tamaguiConfig: TamaguiInternalConfig\n\n // web uses className, native uses style\n let defaultsStyle: any\n let defaultsClassName = ''\n let initialTheme: any\n\n // see onConfiguredOnce below which attaches a name then to this component\n\n const component = forwardRef<View, A>((props: any, forwardedRef) => {\n const forceUpdate = useForceUpdate()\n const features = useFeatures(props, { forceUpdate })\n const manager = useContext(ThemeManagerContext)\n const [state, set_] = useState(() => ({\n hover: false,\n press: false,\n pressIn: false,\n theme: manager.name,\n }))\n const set = (next: Partial<typeof state>) =>\n set_((prev) => {\n for (const key in next) {\n if (prev[key] !== next[key]) {\n return { ...prev, ...next }\n }\n }\n return prev\n })\n\n // from react-native-web\n if (process.env.NODE_ENV === 'development' && !isText && isWeb) {\n Children.toArray(props.children).forEach((item) => {\n if (typeof item === 'string') {\n console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)\n }\n })\n }\n\n const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false\n const hostRef = useRef(null)\n\n const {\n viewProps: viewPropsIn,\n pseudos,\n style,\n classNames,\n } = getSplitStyles(props, staticConfig, (manager.theme as any) || initialTheme)\n\n const {\n tag,\n hitSlop,\n children,\n pointerEvents,\n onPress,\n onPressIn,\n onPressOut,\n onHoverIn,\n onHoverOut,\n space,\n disabled,\n onMouseEnter,\n onMouseLeave,\n hrefAttrs,\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n onMouseDown,\n onClick,\n\n accessible,\n accessibilityRole,\n\n // TODO feature load layout hook\n onLayout,\n ...viewProps\n } = viewPropsIn\n\n if (!isWeb) {\n if (accessible) viewProps.accessible = accessible\n if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole\n }\n\n if (isWeb) {\n // from react-native-web\n rnw.useResponderEvents(hostRef, {\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n })\n }\n\n const isTracking = useRef(false)\n\n // hasEverHadEvents prevents repareting if you remove onPress or similar...\n const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()\n if (!internal.current) {\n internal.current = {\n isMounted: true,\n }\n }\n\n useEffect(() => {\n internal.current!.isMounted = true\n const dispose = manager?.onChangeTheme((name) => {\n if (isTracking.current) {\n set({ theme: name })\n }\n })\n return () => {\n dispose()\n mouseUps.delete(unPress)\n isTracking.current = false\n internal.current!.isMounted = false\n }\n }, [manager])\n\n // element\n const element = isWeb\n ? !Component || typeof Component === 'string'\n ? // default to tag, fallback to component (when both strings)\n tag || Component\n : Component\n : Component\n const ReactView = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')\n const ReactText = !isWeb ? Text : element || 'span'\n const ViewComponent = isText ? ReactText : ReactView\n\n // styles\n const isHovering = !isTouchDevice && !disabled && pseudos && state.hover\n const isPressing = !disabled && pseudos && state.press\n\n const styles = [\n // parity w react-native-web, only for text in text\n // TODO this should be able to be done w css to replicate after extraction:\n // (.text .text { display: inline-flex; }) (but if they set display we'd need stronger precendence)\n // isText && hasTextAncestor && isWeb ? { display: 'inline-flex' } : null,\n style,\n isHovering ? pseudos.hoverStyle || null : null,\n isPressing ? pseudos.pressStyle || null : null,\n ]\n\n if (isWeb) {\n const stylesClassNames = useStylesAsClassname(styles)\n const classList = isText\n ? [\n defaultsClassName,\n // hasTextAncestor === true && cssText.textHasAncestor,\n // TODO MOVE TO VARIANTS [number] [any]\n // numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,\n classNames,\n stylesClassNames,\n props.className,\n ]\n : [defaultsClassName, props.className, classNames, stylesClassNames]\n\n // @ts-expect-error\n const className = concatClassName(...classList)\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // prettier-ignore\n console.log('\uD83E\uDD5A className', { style, styles, classList, stylesClassNames, className })\n }\n }\n viewProps.className = className\n } else {\n viewProps.style = styles\n }\n\n if (pointerEvents) {\n viewProps.pointerEvents = pointerEvents\n }\n\n if (isWeb) {\n // from react-native-web\n const platformMethodsRef = rnw.usePlatformMethods(viewProps)\n const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef)\n viewProps.ref = setRef\n if (props.href != null && hrefAttrs != null) {\n const { download, rel, target } = hrefAttrs\n if (download != null) {\n viewProps.download = download\n }\n if (rel != null) {\n viewProps.rel = rel\n }\n if (typeof target === 'string') {\n viewProps.target = target.charAt(0) !== '_' ? '_' + target : target\n }\n }\n } else {\n if (forwardedRef) {\n viewProps.ref = forwardedRef\n }\n }\n\n const attachPress = !!(\n (pseudos && pseudos.pressStyle) ||\n onPress ||\n onPressOut ||\n onPressIn ||\n onClick\n )\n const attachHover =\n isWeb &&\n !isTouchDevice &&\n !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)\n\n // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage\n // while avoiding reparenting...\n // once proper reparenting is supported, we can remove this and use that...\n const shouldAttach =\n internal.current.hasEverHadEvents ||\n attachPress ||\n attachHover ||\n 'pressStyle' in props ||\n 'onPress' in props ||\n 'onPressIn' in props ||\n 'onPressOut' in props ||\n (isWeb &&\n ('hoverStyle' in props ||\n 'onClick' in props ||\n 'onHoverIn' in props ||\n 'onHoverOut' in props ||\n 'onMouseEnter' in props ||\n 'onMouseLeave' in props))\n\n // never remove events as we wrap in a div (for now, may be able to remove..)\n if (shouldAttach) {\n internal.current.hasEverHadEvents = true\n }\n\n const unPress = useCallback(() => {\n if (!internal.current!.isMounted) return\n set({\n press: false,\n pressIn: false,\n })\n }, [])\n\n const events = shouldAttach\n ? {\n ...(!isWeb && {\n // non web\n onPressOut: (e) => {\n unPress()\n onPressOut?.(e)\n },\n }),\n ...(isWeb &&\n !isTouchDevice && {\n onMouseEnter:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n if (attachHover) {\n next.hover = true\n }\n if (state.pressIn) {\n next.press = true\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverIn?.(e)\n onMouseEnter?.(e)\n }\n : undefined,\n onMouseLeave:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n mouseUps.add(unPress)\n if (attachHover) {\n next.hover = false\n }\n if (state.pressIn) {\n next.press = false\n next.pressIn = false\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverOut?.(e)\n onMouseLeave?.(e)\n }\n : undefined,\n }),\n onMouseDown: attachPress\n ? (e) => {\n set({\n press: true,\n pressIn: true,\n })\n onPressIn?.(e)\n onMouseDown?.(e)\n }\n : (onPressIn as any),\n onClick: attachPress\n ? (e) => {\n // this caused issue with next.js passing href\n // e.preventDefault()\n onPress?.(e)\n onClick?.(e)\n unPress()\n onPressOut?.(e)\n }\n : (onPressOut as any),\n }\n : null\n\n if (events) {\n if (typeof ViewComponent !== 'string') {\n // TODO once we do the above we can then rely entirely on pressStyle returned here isntead of above pressStyle logic\n const [pressProps] = usePressable({\n disabled,\n hitSlop,\n onPressIn: events.onMouseDown,\n onPressOut: events.onPressOut,\n onPress: events.onClick,\n })\n Object.assign(viewProps, pressProps)\n } else {\n Object.assign(viewProps, events)\n }\n }\n\n const childEls = spacedChildren({\n children,\n space,\n flexDirection: props.flexDirection || defaultProps?.flexDirection,\n isZStack: isZStack,\n })\n\n let content: any\n\n // replicate react-native-web's `createElement`\n if (isWeb && rnw) {\n const domProps = rnw.createDOMProps(viewProps)\n const className =\n domProps.className && domProps.className !== viewProps.className\n ? `${domProps.className} ${viewProps.className}`\n : viewProps.className\n Object.assign(viewProps, domProps)\n viewProps.className = className\n content = createElement(ViewComponent, viewProps, childEls)\n } else {\n content = createElement(ViewComponent, viewProps, childEls)\n }\n\n const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor\n if (shouldWrapTextAncestor) {\n // from react-native-web\n // @ts-ignore\n content = createElement(TextAncestorContext.Provider, { value: true }, content)\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n viewProps['debug'] = true\n console.log('\uD83E\uDD5A props in:', props)\n console.log('\uD83E\uDD5A props out:', viewProps)\n console.log(props.onClick?.toString())\n // prettier-ignore\n console.log('\uD83E\uDD5A etc:', { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls })\n // only on browser because node expands it huge\n if (isWeb) {\n console.log('\uD83E\uDD5A component info', { staticConfig, tamaguiConfig })\n }\n }\n }\n\n return (\n <>\n {features}\n {content}\n </>\n )\n })\n\n // Once configuration is run and all components are registered\n // get default props + className and analyze styles\n onConfiguredOnce((conf) => {\n tamaguiConfig = conf\n initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]\n const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true)\n if (isWeb) {\n if (next.classNames) {\n defaultsClassName += next.classNames + ' '\n }\n defaultsClassName += addStylesUsingClassname([next.style, next.pseudos])\n } else {\n if (!hasWarnedOnce) {\n hasWarnedOnce = true\n console.log('\u26A0\uFE0F TODO account for default styles for media queries')\n }\n }\n // @ts-ignore\n component.defaultProps = {\n ...next.viewProps,\n ...component.defaultProps,\n }\n if (process.env.NODE_ENV === 'development') {\n if (staticConfig.defaultProps?.debug) {\n console.log('tamagui debug component:', next, defaultsClassName, component.defaultProps)\n }\n }\n })\n\n component['staticConfig'] = {\n validStyles: validStyleProps,\n ...staticConfig,\n }\n\n const res = component as any as StaticComponent<A, void>\n\n // add extractable HoC\n res['extractable'] = (Component: any, conf?: StaticConfig) => {\n Component['staticConfig'] = extendStaticConfig(res, {\n ...conf,\n neverFlatten: true,\n defaultProps: {\n ...Component.defaultProps,\n ...conf?.defaultProps,\n },\n })\n return Component\n }\n\n return res\n}\n\nlet hasWarnedOnce = false\n\n// dont used styled() here to avoid circular deps\n// keep inline to avoid circular deps\n\nexport const Spacer = createComponent<{ size?: number | SpaceTokens; flex?: boolean | number }>({\n defaultProps: {\n ...stackDefaultStyles,\n size: true,\n },\n variants: {\n size: {\n '...size': (size, { tokens }) => {\n size = size == true ? '$true' : size\n return {\n width: tokens.size[size] ?? size,\n height: tokens.size[size] ?? size,\n }\n },\n },\n\n direction: {\n horizontal: {\n height: 0,\n },\n vertical: {\n width: 0,\n },\n },\n },\n})\n\nexport function spacedChildren({\n isZStack,\n children,\n space,\n flexDirection,\n}: {\n isZStack?: boolean\n children: any\n space?: any\n flexDirection?: ViewStyle['flexDirection']\n}) {\n if (!space && !isZStack) {\n return children\n }\n const childrenList = Children.toArray(children)\n const len = childrenList.length\n if (len === 1) {\n return children\n }\n const next: any[] = []\n for (const [index, child] of childrenList.entries()) {\n if (child === null || child === undefined) {\n continue\n }\n\n const key = `${child?.['key'] ?? index}`\n\n next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>)\n\n // allows for custom visually hidden components that dont insert spacing\n if (child?.['type']?.['isVisuallyHidden']) {\n continue\n }\n\n if (index !== len - 1) {\n if (space) {\n next.push(\n <Spacer\n key={`${key}_spacer`}\n // @ts-ignore TODO\n direction={\n flexDirection === 'row' || flexDirection === 'row-reverse' ? 'horizontal' : 'vertical'\n }\n size={space}\n />\n )\n }\n }\n }\n return next\n}\n\n// for now not so \"tamagui-y\"\nconst Absolute = ({ children }) => <View style={sheet.fullscreen}>{children}</View>\nconst sheet = StyleSheet.create({\n fullscreen: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n})\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgD;AAChD,8BAA+B;AAC/B,mBAUO;AACP,0BAAkD;AAElD,uBAAmC;AACnC,sBAAqC;AACrC,iBAAoB;AACpB,2BAAiC;AACjC,qCAA8D;AAC9D,gCAAsD;AACtD,4BAA+B;AAC/B,yBAA4B;AAC5B,0BAA6B;AAQ7B,iCAAoC;AACpC,iCAAoC;AAE7B,MAAM,WAAW,IAAI;AAE5B,IAAI,OAAO,aAAa,aAAa;AACnC,WAAS,iBAAiB,WAAW,MAAM;AACzC,aAAS,QAAQ,CAAC,MAAM;AACxB,aAAS;AAAA;AAAA;AAMN,yBACL,UACA;AACA,MAAI;AACJ,MAAI,YAAY,UAAU;AACxB,mBAAe;AAAA,SACV;AACL,mBAAe,iDAAkB;AAAA;AAGnC,QAAM,EAAE,WAAW,aAAa,QAAQ,aAAa;AACrD,QAAM,kBAAkB,eAAe;AAGvC,MAAI,eAAe;AACnB,MAAI;AAGJ,MAAI;AACJ,MAAI,oBAAoB;AACxB,MAAI;AAIJ,QAAM,YAAY,6BAAoB,CAAC,OAAY,iBAAiB;AArEtE;AAsEI,UAAM,cAAc;AACpB,UAAM,WAAW,oCAAY,OAAO,EAAE;AACtC,UAAM,UAAU,6BAAW;AAC3B,UAAM,CAAC,OAAO,QAAQ,2BAAS,MAAO;AAAA,MACpC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO,QAAQ;AAAA;AAEjB,UAAM,MAAM,wBAAC,SACX,KAAK,CAAC,SAAS;AACb,iBAAW,OAAO,MAAM;AACtB,YAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,iBAAO,kCAAK,OAAS;AAAA;AAAA;AAGzB,aAAO;AAAA,QAPC;AAWZ,QAAI,QAAQ,IAAI,aAAa,iBAAiB,CAAC,UAAU,uBAAO;AAC9D,4BAAS,QAAQ,MAAM,UAAU,QAAQ,CAAC,SAAS;AACjD,YAAI,OAAO,SAAS,UAAU;AAC5B,kBAAQ,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAK7C,UAAM,kBAAkB,wBAAQ,6BAAW,kDAAuB;AAClE,UAAM,UAAU,yBAAO;AAEvB,UAAM;AAAA,MACJ,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,QACE,0CAAe,OAAO,
|
|
4
|
+
"sourcesContent": ["import { concatClassName, stylePropsView } from '@tamagui/helpers'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, {\n Children,\n Fragment,\n createElement,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { StyleSheet, Text, View, ViewStyle } from 'react-native'\n\nimport { stackDefaultStyles } from './constants/constants'\nimport { isTouchDevice, isWeb } from './constants/platform'\nimport { rnw } from './constants/rnw'\nimport { onConfiguredOnce } from './createTamagui'\nimport { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStylesUsingClassname'\nimport { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'\nimport { getSplitStyles } from './helpers/getSplitStyles'\nimport { useFeatures } from './hooks/useFeatures'\nimport { usePressable } from './hooks/usePressable'\nimport {\n SpaceTokens,\n StaticComponent,\n StaticConfig,\n StaticConfigParsed,\n TamaguiInternalConfig,\n} from './types'\nimport { TextAncestorContext } from './views/TextAncestorContext'\nimport { ThemeManagerContext } from './views/ThemeManagerContext'\n\nexport const mouseUps = new Set<Function>()\n\nif (typeof document !== 'undefined') {\n document.addEventListener('mouseup', () => {\n mouseUps.forEach((x) => x())\n mouseUps.clear()\n })\n}\n\ntype DefaultProps = {}\n\nexport function createComponent<A extends Object = DefaultProps>(\n configIn: Partial<StaticConfig> | StaticConfigParsed\n) {\n let staticConfig: StaticConfigParsed\n if ('parsed' in configIn) {\n staticConfig = configIn\n } else {\n staticConfig = parseStaticConfig(configIn)\n }\n\n const { Component, validStyles, isText, isZStack } = staticConfig\n const validStyleProps = validStyles ?? stylePropsView\n\n // split out default styles vs props so we can assign it to component.defaultProps\n let defaultProps = null as any\n let tamaguiConfig: TamaguiInternalConfig\n\n // web uses className, native uses style\n let defaultsStyle: any\n let defaultsClassName = ''\n let initialTheme: any\n\n // see onConfiguredOnce below which attaches a name then to this component\n\n const component = forwardRef<View, A>((props: any, forwardedRef) => {\n const forceUpdate = useForceUpdate()\n const features = useFeatures(props, { forceUpdate })\n const manager = useContext(ThemeManagerContext)\n const [state, set_] = useState(() => ({\n hover: false,\n press: false,\n pressIn: false,\n theme: manager.name,\n }))\n const set = (next: Partial<typeof state>) =>\n set_((prev) => {\n for (const key in next) {\n if (prev[key] !== next[key]) {\n return { ...prev, ...next }\n }\n }\n return prev\n })\n\n // from react-native-web\n if (process.env.NODE_ENV === 'development' && !isText && isWeb) {\n Children.toArray(props.children).forEach((item) => {\n if (typeof item === 'string') {\n console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)\n }\n })\n }\n\n const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false\n const hostRef = useRef(null)\n\n const theme = (manager.theme as any) || initialTheme\n\n const {\n viewProps: viewPropsIn,\n pseudos,\n style,\n classNames,\n } = getSplitStyles(props, staticConfig, theme)\n\n const {\n tag,\n hitSlop,\n children,\n pointerEvents,\n onPress,\n onPressIn,\n onPressOut,\n onHoverIn,\n onHoverOut,\n space,\n disabled,\n onMouseEnter,\n onMouseLeave,\n hrefAttrs,\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n onMouseDown,\n onClick,\n\n accessible,\n accessibilityRole,\n\n // TODO feature load layout hook\n onLayout,\n ...viewProps\n } = viewPropsIn\n\n if (!isWeb) {\n if (accessible) viewProps.accessible = accessible\n if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole\n }\n\n if (isWeb) {\n // from react-native-web\n rnw.useResponderEvents(hostRef, {\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n })\n }\n\n const isTracking = useRef(false)\n\n // hasEverHadEvents prevents repareting if you remove onPress or similar...\n const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()\n if (!internal.current) {\n internal.current = {\n isMounted: true,\n }\n }\n\n useEffect(() => {\n internal.current!.isMounted = true\n const dispose = manager?.onChangeTheme((name) => {\n if (isTracking.current) {\n set({ theme: name })\n }\n })\n return () => {\n dispose()\n mouseUps.delete(unPress)\n isTracking.current = false\n internal.current!.isMounted = false\n }\n }, [manager])\n\n // element\n const element = isWeb\n ? !Component || typeof Component === 'string'\n ? // default to tag, fallback to component (when both strings)\n tag || Component\n : Component\n : Component\n const ReactView = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')\n const ReactText = !isWeb ? Text : element || 'span'\n const ViewComponent = isText ? ReactText : ReactView\n\n // styles\n const isHovering = !isTouchDevice && !disabled && pseudos && state.hover\n const isPressing = !disabled && pseudos && state.press\n\n const styles = [\n // parity w react-native-web, only for text in text\n // TODO this should be able to be done w css to replicate after extraction:\n // (.text .text { display: inline-flex; }) (but if they set display we'd need stronger precendence)\n // isText && hasTextAncestor && isWeb ? { display: 'inline-flex' } : null,\n style,\n isHovering ? pseudos.hoverStyle || null : null,\n isPressing ? pseudos.pressStyle || null : null,\n ]\n\n if (isWeb) {\n const stylesClassNames = useStylesAsClassname(styles)\n const classList = isText\n ? [\n defaultsClassName,\n // hasTextAncestor === true && cssText.textHasAncestor,\n // TODO MOVE TO VARIANTS [number] [any]\n // numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,\n classNames,\n stylesClassNames,\n props.className,\n ]\n : [defaultsClassName, props.className, classNames, stylesClassNames]\n\n // @ts-expect-error\n const className = concatClassName(...classList)\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // prettier-ignore\n console.log('\uD83E\uDD5A className', { style, styles, classList, stylesClassNames, className })\n }\n }\n viewProps.className = className\n } else {\n viewProps.style = styles\n }\n\n if (pointerEvents) {\n viewProps.pointerEvents = pointerEvents\n }\n\n if (isWeb) {\n // from react-native-web\n const platformMethodsRef = rnw.usePlatformMethods(viewProps)\n const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef)\n viewProps.ref = setRef\n if (props.href != null && hrefAttrs != null) {\n const { download, rel, target } = hrefAttrs\n if (download != null) {\n viewProps.download = download\n }\n if (rel != null) {\n viewProps.rel = rel\n }\n if (typeof target === 'string') {\n viewProps.target = target.charAt(0) !== '_' ? '_' + target : target\n }\n }\n } else {\n if (forwardedRef) {\n viewProps.ref = forwardedRef\n }\n }\n\n const attachPress = !!(\n (pseudos && pseudos.pressStyle) ||\n onPress ||\n onPressOut ||\n onPressIn ||\n onClick\n )\n const attachHover =\n isWeb &&\n !isTouchDevice &&\n !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)\n\n // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage\n // while avoiding reparenting...\n // once proper reparenting is supported, we can remove this and use that...\n const shouldAttach =\n internal.current.hasEverHadEvents ||\n attachPress ||\n attachHover ||\n 'pressStyle' in props ||\n 'onPress' in props ||\n 'onPressIn' in props ||\n 'onPressOut' in props ||\n (isWeb &&\n ('hoverStyle' in props ||\n 'onClick' in props ||\n 'onHoverIn' in props ||\n 'onHoverOut' in props ||\n 'onMouseEnter' in props ||\n 'onMouseLeave' in props))\n\n // never remove events as we wrap in a div (for now, may be able to remove..)\n if (shouldAttach) {\n internal.current.hasEverHadEvents = true\n }\n\n const unPress = useCallback(() => {\n if (!internal.current!.isMounted) return\n set({\n press: false,\n pressIn: false,\n })\n }, [])\n\n const events = shouldAttach\n ? {\n ...(!isWeb && {\n // non web\n onPressOut: (e) => {\n unPress()\n onPressOut?.(e)\n },\n }),\n ...(isWeb &&\n !isTouchDevice && {\n onMouseEnter:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n if (attachHover) {\n next.hover = true\n }\n if (state.pressIn) {\n next.press = true\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverIn?.(e)\n onMouseEnter?.(e)\n }\n : undefined,\n onMouseLeave:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n mouseUps.add(unPress)\n if (attachHover) {\n next.hover = false\n }\n if (state.pressIn) {\n next.press = false\n next.pressIn = false\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverOut?.(e)\n onMouseLeave?.(e)\n }\n : undefined,\n }),\n onMouseDown: attachPress\n ? (e) => {\n set({\n press: true,\n pressIn: true,\n })\n onPressIn?.(e)\n onMouseDown?.(e)\n }\n : (onPressIn as any),\n onClick: attachPress\n ? (e) => {\n // this caused issue with next.js passing href\n // e.preventDefault()\n onPress?.(e)\n onClick?.(e)\n unPress()\n onPressOut?.(e)\n }\n : (onPressOut as any),\n }\n : null\n\n if (events) {\n if (typeof ViewComponent !== 'string') {\n // TODO once we do the above we can then rely entirely on pressStyle returned here isntead of above pressStyle logic\n const [pressProps] = usePressable({\n disabled,\n hitSlop,\n onPressIn: events.onMouseDown,\n onPressOut: events.onPressOut,\n onPress: events.onClick,\n })\n Object.assign(viewProps, pressProps)\n } else {\n Object.assign(viewProps, events)\n }\n }\n\n const childEls = spacedChildren({\n children,\n space,\n flexDirection: props.flexDirection || defaultProps?.flexDirection,\n isZStack: isZStack,\n })\n\n let content: any\n\n // replicate react-native-web's `createElement`\n if (isWeb && rnw) {\n const domProps = rnw.createDOMProps(viewProps)\n const className =\n domProps.className && domProps.className !== viewProps.className\n ? `${domProps.className} ${viewProps.className}`\n : viewProps.className\n Object.assign(viewProps, domProps)\n viewProps.className = className\n content = createElement(ViewComponent, viewProps, childEls)\n } else {\n content = createElement(ViewComponent, viewProps, childEls)\n }\n\n const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor\n if (shouldWrapTextAncestor) {\n // from react-native-web\n // @ts-ignore\n content = createElement(TextAncestorContext.Provider, { value: true }, content)\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n viewProps['debug'] = true\n console.log('\uD83E\uDD5A props in:', props)\n console.log('\uD83E\uDD5A props out:', viewProps)\n console.log(props.onClick?.toString())\n // prettier-ignore\n console.log('\uD83E\uDD5A etc:', { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls })\n // only on browser because node expands it huge\n if (isWeb) {\n console.log('\uD83E\uDD5A component info', { staticConfig, tamaguiConfig })\n }\n }\n }\n\n return (\n <>\n {features}\n {content}\n </>\n )\n })\n\n // Once configuration is run and all components are registered\n // get default props + className and analyze styles\n onConfiguredOnce((conf) => {\n tamaguiConfig = conf\n initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]\n const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true)\n if (isWeb) {\n if (next.classNames) {\n defaultsClassName += next.classNames + ' '\n }\n defaultsClassName += addStylesUsingClassname([next.style, next.pseudos])\n } else {\n if (!hasWarnedOnce) {\n hasWarnedOnce = true\n console.log('\u26A0\uFE0F TODO account for default styles for media queries')\n }\n }\n // @ts-ignore\n component.defaultProps = {\n ...next.viewProps,\n ...component.defaultProps,\n }\n if (process.env.NODE_ENV === 'development') {\n if (staticConfig.defaultProps?.debug) {\n console.log('tamagui debug component:', next, defaultsClassName, component.defaultProps)\n }\n }\n })\n\n component['staticConfig'] = {\n validStyles: validStyleProps,\n ...staticConfig,\n }\n\n const res = component as any as StaticComponent<A, void>\n\n // add extractable HoC\n res['extractable'] = (Component: any, conf?: StaticConfig) => {\n Component['staticConfig'] = extendStaticConfig(res, {\n ...conf,\n neverFlatten: true,\n defaultProps: {\n ...Component.defaultProps,\n ...conf?.defaultProps,\n },\n })\n return Component\n }\n\n return res\n}\n\nlet hasWarnedOnce = false\n\n// dont used styled() here to avoid circular deps\n// keep inline to avoid circular deps\n\nexport const Spacer = createComponent<{ size?: number | SpaceTokens; flex?: boolean | number }>({\n defaultProps: {\n ...stackDefaultStyles,\n size: true,\n },\n variants: {\n size: {\n '...size': (size, { tokens }) => {\n size = size == true ? '$true' : size\n return {\n width: tokens.size[size] ?? size,\n height: tokens.size[size] ?? size,\n }\n },\n },\n\n direction: {\n horizontal: {\n height: 0,\n },\n vertical: {\n width: 0,\n },\n },\n },\n})\n\nexport function spacedChildren({\n isZStack,\n children,\n space,\n flexDirection,\n}: {\n isZStack?: boolean\n children: any\n space?: any\n flexDirection?: ViewStyle['flexDirection']\n}) {\n if (!space && !isZStack) {\n return children\n }\n const childrenList = Children.toArray(children)\n const len = childrenList.length\n if (len === 1) {\n return children\n }\n const next: any[] = []\n for (const [index, child] of childrenList.entries()) {\n if (child === null || child === undefined) {\n continue\n }\n\n const key = `${child?.['key'] ?? index}`\n\n next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>)\n\n // allows for custom visually hidden components that dont insert spacing\n if (child?.['type']?.['isVisuallyHidden']) {\n continue\n }\n\n if (index !== len - 1) {\n if (space) {\n next.push(\n <Spacer\n key={`${key}_spacer`}\n // @ts-ignore TODO\n direction={\n flexDirection === 'row' || flexDirection === 'row-reverse' ? 'horizontal' : 'vertical'\n }\n size={space}\n />\n )\n }\n }\n }\n return next\n}\n\n// for now not so \"tamagui-y\"\nconst Absolute = ({ children }) => <View style={sheet.fullscreen}>{children}</View>\nconst sheet = StyleSheet.create({\n fullscreen: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,6 +39,7 @@ var __toModule = (module2) => {
|
|
|
39
39
|
__export(exports, {
|
|
40
40
|
createPropMapper: () => createPropMapper
|
|
41
41
|
});
|
|
42
|
+
var import_platform = __toModule(require("../constants/platform"));
|
|
42
43
|
var import_createTamagui = __toModule(require("../createTamagui"));
|
|
43
44
|
var import_createVariable = __toModule(require("../createVariable"));
|
|
44
45
|
var import_isObj = __toModule(require("./isObj"));
|
|
@@ -61,7 +62,7 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
61
62
|
const val = value === true ? variant["$true"] || variant["true"] : variant[value] ?? variant["..."] ?? value;
|
|
62
63
|
const res = typeof val === "function" ? val(value, { tokens: conf.tokensParsed, theme, props }) : (0, import_isObj.isObj)(val) ? __spreadValues({}, val) : val;
|
|
63
64
|
if ((0, import_isObj.isObj)(res)) {
|
|
64
|
-
resolveTokens(res, conf, fontFamily);
|
|
65
|
+
resolveTokens(res, conf, theme, fontFamily);
|
|
65
66
|
}
|
|
66
67
|
return res;
|
|
67
68
|
}
|
|
@@ -72,7 +73,7 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
72
73
|
}
|
|
73
74
|
if (value && value[0] === "$") {
|
|
74
75
|
shouldReturn = true;
|
|
75
|
-
value = getToken(key, value, conf, fontFamily);
|
|
76
|
+
value = getToken(key, value, conf, theme, fontFamily);
|
|
76
77
|
}
|
|
77
78
|
if (value instanceof import_createVariable.Variable) {
|
|
78
79
|
shouldReturn = true;
|
|
@@ -85,42 +86,48 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
85
86
|
}
|
|
86
87
|
};
|
|
87
88
|
}, "createPropMapper");
|
|
88
|
-
const resolveTokens = /* @__PURE__ */ __name((res, conf, fontFamily) => {
|
|
89
|
+
const resolveTokens = /* @__PURE__ */ __name((res, conf, theme, fontFamily) => {
|
|
89
90
|
for (const rKey in res) {
|
|
90
91
|
const fKey = conf.shorthands[rKey] || rKey;
|
|
91
92
|
const val = res[rKey];
|
|
92
93
|
if (val instanceof import_createVariable.Variable) {
|
|
93
94
|
res[fKey] = val.variable;
|
|
94
95
|
} else if (typeof val === "string") {
|
|
95
|
-
const fVal = val[0] === "$" ? getToken(fKey, val, conf, fontFamily) : val;
|
|
96
|
+
const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily) : val;
|
|
96
97
|
res[fKey] = fVal;
|
|
97
98
|
} else {
|
|
98
99
|
if ((0, import_isObj.isObj)(val)) {
|
|
99
|
-
resolveTokens(val, conf, fontFamily);
|
|
100
|
+
resolveTokens(val, conf, theme, fontFamily);
|
|
100
101
|
}
|
|
101
102
|
}
|
|
102
103
|
}
|
|
103
104
|
}, "resolveTokens");
|
|
104
|
-
const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, fontFamily = "$body") => {
|
|
105
|
-
var _a, _b, _c, _d, _e;
|
|
105
|
+
const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, theme, fontFamily = "$body") => {
|
|
106
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
106
107
|
if (themeParsed[value]) {
|
|
107
|
-
|
|
108
|
+
if (import_platform.isWeb && themeParsed[value].variable) {
|
|
109
|
+
return themeParsed[value].variable;
|
|
110
|
+
} else {
|
|
111
|
+
if (value && value[0] === "$") {
|
|
112
|
+
return ((_a = theme[`${value.slice(1)}`]) == null ? void 0 : _a.val) || ((_b = themeParsed[value]) == null ? void 0 : _b.val);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
108
115
|
}
|
|
109
116
|
let valOrVar;
|
|
110
117
|
if (key === "fontFamily") {
|
|
111
|
-
valOrVar = ((
|
|
118
|
+
valOrVar = ((_c = tokensParsed.font[value]) == null ? void 0 : _c.family) || value;
|
|
112
119
|
}
|
|
113
120
|
if (key === "fontSize") {
|
|
114
|
-
valOrVar = ((
|
|
121
|
+
valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.size[value]) || value;
|
|
115
122
|
}
|
|
116
123
|
if (key === "lineHeight") {
|
|
117
|
-
valOrVar = ((
|
|
124
|
+
valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.lineHeight[value]) || value;
|
|
118
125
|
}
|
|
119
126
|
if (key === "letterSpacing") {
|
|
120
|
-
valOrVar = ((
|
|
127
|
+
valOrVar = ((_f = tokensParsed.font[fontFamily]) == null ? void 0 : _f.letterSpacing[value]) || value;
|
|
121
128
|
}
|
|
122
129
|
if (key === "fontWeight") {
|
|
123
|
-
valOrVar = ((
|
|
130
|
+
valOrVar = ((_g = tokensParsed.font[fontFamily]) == null ? void 0 : _g.weight[value]) || value;
|
|
124
131
|
}
|
|
125
132
|
if (typeof valOrVar !== "undefined") {
|
|
126
133
|
if (valOrVar instanceof import_createVariable.Variable) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/createPropMapper.ts"],
|
|
4
|
-
"sourcesContent": ["import { getTamagui } from '../createTamagui'\nimport { Variable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport const createPropMapper = (c: StaticConfig) => {\n const variants = c.variants\n let variantsParsed\n const defaultProps = c.defaultProps || {}\n\n return (key: string, value: any, theme: any, props: any) => {\n const conf = getTamagui()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n if (variants && !variantsParsed) {\n variantsParsed = parseVariants(variants, conf)\n }\n\n // handled here because we need to resolve this off tokens, its the only one-off like this\n let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n // expand variants\n const variant = variantsParsed?.[key]\n if (variant && typeof value !== 'undefined') {\n const val =\n value === true\n ? variant['$true'] || variant['true']\n : variant[value] ?? variant['...'] ?? value\n\n const res =\n typeof val === 'function'\n ? val(value, { tokens: conf.tokensParsed, theme, props })\n : isObj(val)\n ? { ...val }\n : val\n\n if (isObj(res)) {\n resolveTokens(res, conf, fontFamily)\n }\n\n return res\n }\n\n let shouldReturn = false\n\n // handle shorthands\n if (conf.shorthands[key]) {\n shouldReturn = true\n key = conf.shorthands[key]\n }\n\n if (value && value[0] === '$') {\n shouldReturn = true\n value = getToken(key, value, conf, fontFamily)\n }\n\n if (value instanceof Variable) {\n shouldReturn = true\n value = value.variable\n }\n\n if (shouldReturn) {\n return {\n [key]: value,\n }\n }\n }\n}\n\nconst resolveTokens = (res: any, conf: TamaguiInternalConfig, fontFamily: any) => {\n for (const rKey in res) {\n const fKey = conf.shorthands[rKey] || rKey\n const val = res[rKey]\n if (val instanceof Variable) {\n res[fKey] = val.variable\n } else if (typeof val === 'string') {\n const fVal = val[0] === '$' ? getToken(fKey, val, conf, fontFamily) : val\n res[fKey] = fVal\n } else {\n if (isObj(val)) {\n // for things like shadowOffset which is a sub-object\n resolveTokens(val, conf, fontFamily)\n }\n // nullish values cant be tokens so need no exrta parsing\n }\n }\n}\n\nconst getToken = (\n key: string,\n value: string,\n { tokensParsed, themeParsed }: TamaguiInternalConfig,\n fontFamily: string | undefined = '$body'\n) => {\n if (themeParsed[value]) {\n return themeParsed[value].variable\n }\n let valOrVar: any\n if (key === 'fontFamily') {\n valOrVar = tokensParsed.font[value]?.family || value\n }\n if (key === 'fontSize') {\n valOrVar = tokensParsed.font[fontFamily]?.size[value] || value\n }\n if (key === 'lineHeight') {\n valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value\n }\n if (key === 'letterSpacing') {\n valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value\n }\n if (key === 'fontWeight') {\n valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value\n }\n if (typeof valOrVar !== 'undefined') {\n if (valOrVar instanceof Variable) {\n return valOrVar.variable\n } else {\n return valOrVar\n }\n }\n for (const cat in tokenCategories) {\n if (tokenCategories[cat][key]) {\n const res = tokensParsed[cat][value]\n if (res) {\n return res.variable\n } else {\n const themeVar = themeParsed[value]\n if (themeVar) {\n return themeVar.variable\n }\n }\n }\n }\n const spaceVar = tokensParsed.space[value]\n if (spaceVar) {\n return spaceVar.variable\n }\n return value\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n size: {\n width: true,\n height: true,\n minWidth: true,\n minHeight: true,\n maxWidth: true,\n maxHeight: true,\n },\n color: {\n color: true,\n backgroundColor: true,\n borderColor: true,\n borderBottomColor: true,\n borderTopColor: true,\n borderLeftColor: true,\n borderRightColor: true,\n },\n}\n\n// turns variant spreads into individual lookups\nfunction parseVariants(variants: any, conf: TamaguiInternalConfig) {\n return Object.keys(variants).reduce((acc, key) => {\n acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {\n const variantVal = variants[key][vkey]\n if (vkey.startsWith('...')) {\n // set the default one at '...' for easy fallback on non-exact-variant-match\n vacc['...'] = variantVal\n const tokenKey = vkey.slice(3)\n const tokens = conf.tokens[tokenKey]\n for (const tkey in tokens) {\n vacc[`$${tkey}`] = variantVal\n }\n } else {\n vacc[vkey] = variantVal\n }\n return vacc\n }, {})\n return acc\n }, {})\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,2BAA2B;AAC3B,4BAAyB;AAEzB,mBAAsB;AAEf,MAAM,mBAAmB,wBAAC,MAAoB;AACnD,QAAM,WAAW,EAAE;AACnB,MAAI;AACJ,QAAM,eAAe,EAAE,gBAAgB;AAEvC,SAAO,CAAC,KAAa,OAAY,OAAY,UAAe;AAC1D,UAAM,OAAO;AACb,QAAI,CAAC,MAAM;AACT,cAAQ,MAAM;AACd;AAAA;AAEF,QAAI,YAAY,CAAC,gBAAgB;AAC/B,uBAAiB,cAAc,UAAU;AAAA;AAI3C,QAAI,aAAa,MAAM,cAAc,aAAa,cAAc;AAGhE,UAAM,UAAU,iDAAiB;AACjC,QAAI,WAAW,OAAO,UAAU,aAAa;AAC3C,YAAM,MACJ,UAAU,OACN,QAAQ,YAAY,QAAQ,UAC5B,QAAQ,UAAU,QAAQ,UAAU;AAE1C,YAAM,MACJ,OAAO,QAAQ,aACX,IAAI,OAAO,EAAE,QAAQ,KAAK,cAAc,OAAO,WAC/C,wBAAM,OACN,mBAAK,OACL;AAEN,UAAI,wBAAM,MAAM;AACd,sBAAc,KAAK,MAAM;AAAA;
|
|
4
|
+
"sourcesContent": ["import { isWeb } from '../constants/platform'\nimport { getTamagui } from '../createTamagui'\nimport { Variable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport const createPropMapper = (c: StaticConfig) => {\n const variants = c.variants\n let variantsParsed\n const defaultProps = c.defaultProps || {}\n\n return (key: string, value: any, theme: any, props: any) => {\n const conf = getTamagui()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n if (variants && !variantsParsed) {\n variantsParsed = parseVariants(variants, conf)\n }\n\n // handled here because we need to resolve this off tokens, its the only one-off like this\n let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n // expand variants\n const variant = variantsParsed?.[key]\n if (variant && typeof value !== 'undefined') {\n const val =\n value === true\n ? variant['$true'] || variant['true']\n : variant[value] ?? variant['...'] ?? value\n\n const res =\n typeof val === 'function'\n ? val(value, { tokens: conf.tokensParsed, theme, props })\n : isObj(val)\n ? { ...val }\n : val\n\n if (isObj(res)) {\n resolveTokens(res, conf, theme, fontFamily)\n }\n\n return res\n }\n\n let shouldReturn = false\n\n // handle shorthands\n if (conf.shorthands[key]) {\n shouldReturn = true\n key = conf.shorthands[key]\n }\n\n if (value && value[0] === '$') {\n shouldReturn = true\n value = getToken(key, value, conf, theme, fontFamily)\n }\n\n if (value instanceof Variable) {\n shouldReturn = true\n value = value.variable\n }\n\n if (shouldReturn) {\n return {\n [key]: value,\n }\n }\n }\n}\n\nconst resolveTokens = (res: any, conf: TamaguiInternalConfig, theme: any, fontFamily: any) => {\n for (const rKey in res) {\n const fKey = conf.shorthands[rKey] || rKey\n const val = res[rKey]\n if (val instanceof Variable) {\n res[fKey] = val.variable\n } else if (typeof val === 'string') {\n const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily) : val\n res[fKey] = fVal\n } else {\n if (isObj(val)) {\n // for things like shadowOffset which is a sub-object\n resolveTokens(val, conf, theme, fontFamily)\n }\n // nullish values cant be tokens so need no exrta parsing\n }\n }\n}\n\nconst getToken = (\n key: string,\n value: string,\n { tokensParsed, themeParsed }: TamaguiInternalConfig,\n theme: any,\n fontFamily: string | undefined = '$body'\n) => {\n if (themeParsed[value]) {\n if (isWeb && themeParsed[value].variable) {\n return themeParsed[value].variable\n } else {\n if (value && value[0] === '$') {\n return theme[`${value.slice(1)}`]?.val || themeParsed[value]?.val\n }\n }\n }\n let valOrVar: any\n if (key === 'fontFamily') {\n valOrVar = tokensParsed.font[value]?.family || value\n }\n if (key === 'fontSize') {\n valOrVar = tokensParsed.font[fontFamily]?.size[value] || value\n }\n if (key === 'lineHeight') {\n valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value\n }\n if (key === 'letterSpacing') {\n valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value\n }\n if (key === 'fontWeight') {\n valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value\n }\n if (typeof valOrVar !== 'undefined') {\n if (valOrVar instanceof Variable) {\n return valOrVar.variable\n } else {\n return valOrVar\n }\n }\n for (const cat in tokenCategories) {\n if (tokenCategories[cat][key]) {\n const res = tokensParsed[cat][value]\n if (res) {\n return res.variable\n } else {\n const themeVar = themeParsed[value]\n if (themeVar) {\n return themeVar.variable\n }\n }\n }\n }\n const spaceVar = tokensParsed.space[value]\n if (spaceVar) {\n return spaceVar.variable\n }\n return value\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n size: {\n width: true,\n height: true,\n minWidth: true,\n minHeight: true,\n maxWidth: true,\n maxHeight: true,\n },\n color: {\n color: true,\n backgroundColor: true,\n borderColor: true,\n borderBottomColor: true,\n borderTopColor: true,\n borderLeftColor: true,\n borderRightColor: true,\n },\n}\n\n// turns variant spreads into individual lookups\nfunction parseVariants(variants: any, conf: TamaguiInternalConfig) {\n return Object.keys(variants).reduce((acc, key) => {\n acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {\n const variantVal = variants[key][vkey]\n if (vkey.startsWith('...')) {\n // set the default one at '...' for easy fallback on non-exact-variant-match\n vacc['...'] = variantVal\n const tokenKey = vkey.slice(3)\n const tokens = conf.tokens[tokenKey]\n for (const tkey in tokens) {\n vacc[`$${tkey}`] = variantVal\n }\n } else {\n vacc[vkey] = variantVal\n }\n return vacc\n }, {})\n return acc\n }, {})\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -64,13 +64,15 @@ let conf = null;
|
|
|
64
64
|
const mediaQueryConfig = new Proxy({}, {
|
|
65
65
|
get(target, key) {
|
|
66
66
|
if (!conf) {
|
|
67
|
-
|
|
67
|
+
console.warn("Warning: accessing media query before init");
|
|
68
|
+
return null;
|
|
68
69
|
}
|
|
69
70
|
return Reflect.get(conf, key);
|
|
70
71
|
},
|
|
71
72
|
ownKeys() {
|
|
72
73
|
if (!conf) {
|
|
73
|
-
|
|
74
|
+
console.warn("Warning: accessing media query before init");
|
|
75
|
+
return [];
|
|
74
76
|
}
|
|
75
77
|
return Object.keys(conf);
|
|
76
78
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAAuB;AAEvB,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key].delete(cb)\n}\n\nlet conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n get(target, key) {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return null\n }\n return Reflect.get(conf, key)\n },\n ownKeys() {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return []\n }\n return Object.keys(conf)\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n }\n },\n})\n\nexport const getMedia = () => {\n if (!conf) {\n throw new Error(`not configured yet`)\n }\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (conf) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n conf = queries\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[key] = !!match.matches\n match.addListener(() => {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n })\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[key] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(mediaState, {\n get(target, key: string) {\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n })\n })\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/views/Theme.js
CHANGED
|
@@ -40,11 +40,10 @@ const Theme = /* @__PURE__ */ __name((props) => {
|
|
|
40
40
|
console.warn("Error, no themes in context", props);
|
|
41
41
|
return props.children;
|
|
42
42
|
}
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
const
|
|
46
|
-
const
|
|
47
|
-
const theme = activeName ? themes[activeName] : null;
|
|
43
|
+
const nextNameParent = `${props.name}-${parentName}`;
|
|
44
|
+
const nextNameParentParent = `${props.name}-${parent.parentName}`;
|
|
45
|
+
const name = !props.name ? null : props.name in themes ? props.name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
|
|
46
|
+
const theme = name ? themes[name] : null;
|
|
48
47
|
const themeManager = (0, import_useConstant.useConstant)(() => {
|
|
49
48
|
if (!theme) {
|
|
50
49
|
return null;
|
|
@@ -59,14 +58,16 @@ const Theme = /* @__PURE__ */ __name((props) => {
|
|
|
59
58
|
if (!themeManager) {
|
|
60
59
|
return;
|
|
61
60
|
}
|
|
62
|
-
|
|
61
|
+
if (name) {
|
|
62
|
+
themeManager.setActiveTheme({ name, theme, parentName });
|
|
63
|
+
}
|
|
63
64
|
return parent.onChangeTheme((next) => {
|
|
64
65
|
if (next) {
|
|
65
66
|
themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
|
|
66
67
|
setParentName(next);
|
|
67
68
|
}
|
|
68
69
|
});
|
|
69
|
-
}, [themes,
|
|
70
|
+
}, [themes, name, parentName]);
|
|
70
71
|
if (!name || !theme) {
|
|
71
72
|
return props.children;
|
|
72
73
|
}
|
|
@@ -77,11 +78,13 @@ const Theme = /* @__PURE__ */ __name((props) => {
|
|
|
77
78
|
if (props.disableThemeClass) {
|
|
78
79
|
return contents;
|
|
79
80
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
if (name) {
|
|
82
|
+
const color = (_b = (_a = themes[name]) == null ? void 0 : _a["color"]) == null ? void 0 : _b["variable"];
|
|
83
|
+
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
84
|
+
className: (0, import_createTamagui.getThemeParentClassName)(props.name),
|
|
85
|
+
style: { display: "contents", color }
|
|
86
|
+
}, contents);
|
|
87
|
+
}
|
|
85
88
|
}
|
|
86
89
|
return contents;
|
|
87
90
|
}, "Theme");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/views/Theme.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n disableThemeClass?: boolean\n name: ThemeName | null\n children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n const parent = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const [parentName, setParentName] = useState(parent.name || 'light')\n if (!themes) {\n console.warn('Error, no themes in context', props)\n return props.children\n }\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAE5C,sBAAiD;AACjD,2BAAwC;AACxC,yBAA4B;AAE5B,0BAA6B;AAC7B,iCAAkD;AAQ3C,MAAM,QAAQ,wBAAC,UAAsB;AAf5C;AAgBE,QAAM,SAAS,6BAAW;AAC1B,QAAM,SAAS,6BAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,2BAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B;AAC5C,WAAO,MAAM;AAAA;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n const parent = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const [parentName, setParentName] = useState(parent.name || 'light')\n if (!themes) {\n console.warn('Error, no themes in context', props)\n return props.children\n }\n\n const nextNameParent = `${props.name}-${parentName}`\n const nextNameParentParent = `${props.name}-${parent.parentName}`\n const name = !props.name\n ? null\n : props.name in themes\n ? props.name\n : nextNameParent in themes\n ? nextNameParent\n : nextNameParentParent in themes\n ? nextNameParentParent\n : null\n const theme = name ? themes[name] : null\n const themeManager = useConstant<ThemeManager | null>(() => {\n if (!theme) {\n return null\n }\n const manager = new ThemeManager()\n if (name) {\n manager.setActiveTheme({ name, theme: themes[name], parentName })\n }\n return manager\n })\n\n useIsomorphicLayoutEffect(() => {\n if (!themeManager) {\n return\n }\n if (name) {\n themeManager.setActiveTheme({ name, theme, parentName })\n }\n return parent.onChangeTheme((next) => {\n if (next) {\n themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })\n setParentName(next)\n }\n })\n }, [themes, name, parentName])\n\n if (!name || !theme) {\n return props.children\n }\n\n const contents = themeManager ? (\n <ThemeManagerContext.Provider value={themeManager}>\n {props.children}\n </ThemeManagerContext.Provider>\n ) : (\n props.children\n )\n\n if (isWeb) {\n if (props.disableThemeClass) {\n return contents\n }\n if (name) {\n const color = themes[name]?.['color']?.['variable']\n return (\n <div\n className={getThemeParentClassName(props.name)}\n // in order to provide currentColor, set color by default\n style={{ display: 'contents', color }}\n >\n {contents}\n </div>\n )\n }\n }\n\n return contents\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAE5C,sBAAiD;AACjD,2BAAwC;AACxC,yBAA4B;AAE5B,0BAA6B;AAC7B,iCAAkD;AAQ3C,MAAM,QAAQ,wBAAC,UAAsB;AAf5C;AAgBE,QAAM,SAAS,6BAAW;AAC1B,QAAM,SAAS,6BAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,2BAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B;AAC5C,WAAO,MAAM;AAAA;AAGf,QAAM,iBAAiB,GAAG,MAAM,QAAQ;AACxC,QAAM,uBAAuB,GAAG,MAAM,QAAQ,OAAO;AACrD,QAAM,OAAO,CAAC,MAAM,OAChB,OACA,MAAM,QAAQ,SACd,MAAM,OACN,kBAAkB,SAClB,iBACA,wBAAwB,SACxB,uBACA;AACJ,QAAM,QAAQ,OAAO,OAAO,QAAQ;AACpC,QAAM,eAAe,oCAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,EAAE,MAAM,OAAO,OAAO,OAAO;AAAA;AAEtD,WAAO;AAAA;AAGT,iDAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,QAAI,MAAM;AACR,mBAAa,eAAe,EAAE,MAAM,OAAO;AAAA;AAE7C,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO;AAC/D,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ,MAAM;AAElB,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,mDAAC,+CAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,uBAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,QAAI,MAAM;AACR,YAAM,QAAQ,mBAAO,UAAP,mBAAe,aAAf,mBAA0B;AACxC,aACE,mDAAC,OAAD;AAAA,QACE,WAAW,kDAAwB,MAAM;AAAA,QAEzC,OAAO,EAAE,SAAS,YAAY;AAAA,SAE7B;AAAA;AAAA;AAMT,SAAO;AAAA,GA7EY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/createComponent.js
CHANGED
|
@@ -73,12 +73,13 @@ function createComponent(configIn) {
|
|
|
73
73
|
}
|
|
74
74
|
const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
|
|
75
75
|
const hostRef = useRef(null);
|
|
76
|
+
const theme = manager.theme || initialTheme;
|
|
76
77
|
const {
|
|
77
78
|
viewProps: viewPropsIn,
|
|
78
79
|
pseudos,
|
|
79
80
|
style,
|
|
80
81
|
classNames
|
|
81
|
-
} = getSplitStyles(props, staticConfig,
|
|
82
|
+
} = getSplitStyles(props, staticConfig, theme);
|
|
82
83
|
const {
|
|
83
84
|
tag,
|
|
84
85
|
hitSlop,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/createComponent.tsx"],
|
|
4
|
-
"sourcesContent": ["import { concatClassName, stylePropsView } from '@tamagui/helpers'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, {\n Children,\n Fragment,\n createElement,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { StyleSheet, Text, View, ViewStyle } from 'react-native'\n\nimport { stackDefaultStyles } from './constants/constants'\nimport { isTouchDevice, isWeb } from './constants/platform'\nimport { rnw } from './constants/rnw'\nimport { onConfiguredOnce } from './createTamagui'\nimport { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStylesUsingClassname'\nimport { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'\nimport { getSplitStyles } from './helpers/getSplitStyles'\nimport { useFeatures } from './hooks/useFeatures'\nimport { usePressable } from './hooks/usePressable'\nimport {\n SpaceTokens,\n StaticComponent,\n StaticConfig,\n StaticConfigParsed,\n TamaguiInternalConfig,\n} from './types'\nimport { TextAncestorContext } from './views/TextAncestorContext'\nimport { ThemeManagerContext } from './views/ThemeManagerContext'\n\nexport const mouseUps = new Set<Function>()\n\nif (typeof document !== 'undefined') {\n document.addEventListener('mouseup', () => {\n mouseUps.forEach((x) => x())\n mouseUps.clear()\n })\n}\n\ntype DefaultProps = {}\n\nexport function createComponent<A extends Object = DefaultProps>(\n configIn: Partial<StaticConfig> | StaticConfigParsed\n) {\n let staticConfig: StaticConfigParsed\n if ('parsed' in configIn) {\n staticConfig = configIn\n } else {\n staticConfig = parseStaticConfig(configIn)\n }\n\n const { Component, validStyles, isText, isZStack } = staticConfig\n const validStyleProps = validStyles ?? stylePropsView\n\n // split out default styles vs props so we can assign it to component.defaultProps\n let defaultProps = null as any\n let tamaguiConfig: TamaguiInternalConfig\n\n // web uses className, native uses style\n let defaultsStyle: any\n let defaultsClassName = ''\n let initialTheme: any\n\n // see onConfiguredOnce below which attaches a name then to this component\n\n const component = forwardRef<View, A>((props: any, forwardedRef) => {\n const forceUpdate = useForceUpdate()\n const features = useFeatures(props, { forceUpdate })\n const manager = useContext(ThemeManagerContext)\n const [state, set_] = useState(() => ({\n hover: false,\n press: false,\n pressIn: false,\n theme: manager.name,\n }))\n const set = (next: Partial<typeof state>) =>\n set_((prev) => {\n for (const key in next) {\n if (prev[key] !== next[key]) {\n return { ...prev, ...next }\n }\n }\n return prev\n })\n\n // from react-native-web\n if (process.env.NODE_ENV === 'development' && !isText && isWeb) {\n Children.toArray(props.children).forEach((item) => {\n if (typeof item === 'string') {\n console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)\n }\n })\n }\n\n const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false\n const hostRef = useRef(null)\n\n const {\n viewProps: viewPropsIn,\n pseudos,\n style,\n classNames,\n } = getSplitStyles(props, staticConfig, (manager.theme as any) || initialTheme)\n\n const {\n tag,\n hitSlop,\n children,\n pointerEvents,\n onPress,\n onPressIn,\n onPressOut,\n onHoverIn,\n onHoverOut,\n space,\n disabled,\n onMouseEnter,\n onMouseLeave,\n hrefAttrs,\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n onMouseDown,\n onClick,\n\n accessible,\n accessibilityRole,\n\n // TODO feature load layout hook\n onLayout,\n ...viewProps\n } = viewPropsIn\n\n if (!isWeb) {\n if (accessible) viewProps.accessible = accessible\n if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole\n }\n\n if (isWeb) {\n // from react-native-web\n rnw.useResponderEvents(hostRef, {\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n })\n }\n\n const isTracking = useRef(false)\n\n // hasEverHadEvents prevents repareting if you remove onPress or similar...\n const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()\n if (!internal.current) {\n internal.current = {\n isMounted: true,\n }\n }\n\n useEffect(() => {\n internal.current!.isMounted = true\n const dispose = manager?.onChangeTheme((name) => {\n if (isTracking.current) {\n set({ theme: name })\n }\n })\n return () => {\n dispose()\n mouseUps.delete(unPress)\n isTracking.current = false\n internal.current!.isMounted = false\n }\n }, [manager])\n\n // element\n const element = isWeb\n ? !Component || typeof Component === 'string'\n ? // default to tag, fallback to component (when both strings)\n tag || Component\n : Component\n : Component\n const ReactView = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')\n const ReactText = !isWeb ? Text : element || 'span'\n const ViewComponent = isText ? ReactText : ReactView\n\n // styles\n const isHovering = !isTouchDevice && !disabled && pseudos && state.hover\n const isPressing = !disabled && pseudos && state.press\n\n const styles = [\n // parity w react-native-web, only for text in text\n // TODO this should be able to be done w css to replicate after extraction:\n // (.text .text { display: inline-flex; }) (but if they set display we'd need stronger precendence)\n // isText && hasTextAncestor && isWeb ? { display: 'inline-flex' } : null,\n style,\n isHovering ? pseudos.hoverStyle || null : null,\n isPressing ? pseudos.pressStyle || null : null,\n ]\n\n if (isWeb) {\n const stylesClassNames = useStylesAsClassname(styles)\n const classList = isText\n ? [\n defaultsClassName,\n // hasTextAncestor === true && cssText.textHasAncestor,\n // TODO MOVE TO VARIANTS [number] [any]\n // numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,\n classNames,\n stylesClassNames,\n props.className,\n ]\n : [defaultsClassName, props.className, classNames, stylesClassNames]\n\n // @ts-expect-error\n const className = concatClassName(...classList)\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // prettier-ignore\n console.log('\uD83E\uDD5A className', { style, styles, classList, stylesClassNames, className })\n }\n }\n viewProps.className = className\n } else {\n viewProps.style = styles\n }\n\n if (pointerEvents) {\n viewProps.pointerEvents = pointerEvents\n }\n\n if (isWeb) {\n // from react-native-web\n const platformMethodsRef = rnw.usePlatformMethods(viewProps)\n const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef)\n viewProps.ref = setRef\n if (props.href != null && hrefAttrs != null) {\n const { download, rel, target } = hrefAttrs\n if (download != null) {\n viewProps.download = download\n }\n if (rel != null) {\n viewProps.rel = rel\n }\n if (typeof target === 'string') {\n viewProps.target = target.charAt(0) !== '_' ? '_' + target : target\n }\n }\n } else {\n if (forwardedRef) {\n viewProps.ref = forwardedRef\n }\n }\n\n const attachPress = !!(\n (pseudos && pseudos.pressStyle) ||\n onPress ||\n onPressOut ||\n onPressIn ||\n onClick\n )\n const attachHover =\n isWeb &&\n !isTouchDevice &&\n !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)\n\n // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage\n // while avoiding reparenting...\n // once proper reparenting is supported, we can remove this and use that...\n const shouldAttach =\n internal.current.hasEverHadEvents ||\n attachPress ||\n attachHover ||\n 'pressStyle' in props ||\n 'onPress' in props ||\n 'onPressIn' in props ||\n 'onPressOut' in props ||\n (isWeb &&\n ('hoverStyle' in props ||\n 'onClick' in props ||\n 'onHoverIn' in props ||\n 'onHoverOut' in props ||\n 'onMouseEnter' in props ||\n 'onMouseLeave' in props))\n\n // never remove events as we wrap in a div (for now, may be able to remove..)\n if (shouldAttach) {\n internal.current.hasEverHadEvents = true\n }\n\n const unPress = useCallback(() => {\n if (!internal.current!.isMounted) return\n set({\n press: false,\n pressIn: false,\n })\n }, [])\n\n const events = shouldAttach\n ? {\n ...(!isWeb && {\n // non web\n onPressOut: (e) => {\n unPress()\n onPressOut?.(e)\n },\n }),\n ...(isWeb &&\n !isTouchDevice && {\n onMouseEnter:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n if (attachHover) {\n next.hover = true\n }\n if (state.pressIn) {\n next.press = true\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverIn?.(e)\n onMouseEnter?.(e)\n }\n : undefined,\n onMouseLeave:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n mouseUps.add(unPress)\n if (attachHover) {\n next.hover = false\n }\n if (state.pressIn) {\n next.press = false\n next.pressIn = false\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverOut?.(e)\n onMouseLeave?.(e)\n }\n : undefined,\n }),\n onMouseDown: attachPress\n ? (e) => {\n set({\n press: true,\n pressIn: true,\n })\n onPressIn?.(e)\n onMouseDown?.(e)\n }\n : (onPressIn as any),\n onClick: attachPress\n ? (e) => {\n // this caused issue with next.js passing href\n // e.preventDefault()\n onPress?.(e)\n onClick?.(e)\n unPress()\n onPressOut?.(e)\n }\n : (onPressOut as any),\n }\n : null\n\n if (events) {\n if (typeof ViewComponent !== 'string') {\n // TODO once we do the above we can then rely entirely on pressStyle returned here isntead of above pressStyle logic\n const [pressProps] = usePressable({\n disabled,\n hitSlop,\n onPressIn: events.onMouseDown,\n onPressOut: events.onPressOut,\n onPress: events.onClick,\n })\n Object.assign(viewProps, pressProps)\n } else {\n Object.assign(viewProps, events)\n }\n }\n\n const childEls = spacedChildren({\n children,\n space,\n flexDirection: props.flexDirection || defaultProps?.flexDirection,\n isZStack: isZStack,\n })\n\n let content: any\n\n // replicate react-native-web's `createElement`\n if (isWeb && rnw) {\n const domProps = rnw.createDOMProps(viewProps)\n const className =\n domProps.className && domProps.className !== viewProps.className\n ? `${domProps.className} ${viewProps.className}`\n : viewProps.className\n Object.assign(viewProps, domProps)\n viewProps.className = className\n content = createElement(ViewComponent, viewProps, childEls)\n } else {\n content = createElement(ViewComponent, viewProps, childEls)\n }\n\n const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor\n if (shouldWrapTextAncestor) {\n // from react-native-web\n // @ts-ignore\n content = createElement(TextAncestorContext.Provider, { value: true }, content)\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n viewProps['debug'] = true\n console.log('\uD83E\uDD5A props in:', props)\n console.log('\uD83E\uDD5A props out:', viewProps)\n console.log(props.onClick?.toString())\n // prettier-ignore\n console.log('\uD83E\uDD5A etc:', { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls })\n // only on browser because node expands it huge\n if (isWeb) {\n console.log('\uD83E\uDD5A component info', { staticConfig, tamaguiConfig })\n }\n }\n }\n\n return (\n <>\n {features}\n {content}\n </>\n )\n })\n\n // Once configuration is run and all components are registered\n // get default props + className and analyze styles\n onConfiguredOnce((conf) => {\n tamaguiConfig = conf\n initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]\n const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true)\n if (isWeb) {\n if (next.classNames) {\n defaultsClassName += next.classNames + ' '\n }\n defaultsClassName += addStylesUsingClassname([next.style, next.pseudos])\n } else {\n if (!hasWarnedOnce) {\n hasWarnedOnce = true\n console.log('\u26A0\uFE0F TODO account for default styles for media queries')\n }\n }\n // @ts-ignore\n component.defaultProps = {\n ...next.viewProps,\n ...component.defaultProps,\n }\n if (process.env.NODE_ENV === 'development') {\n if (staticConfig.defaultProps?.debug) {\n console.log('tamagui debug component:', next, defaultsClassName, component.defaultProps)\n }\n }\n })\n\n component['staticConfig'] = {\n validStyles: validStyleProps,\n ...staticConfig,\n }\n\n const res = component as any as StaticComponent<A, void>\n\n // add extractable HoC\n res['extractable'] = (Component: any, conf?: StaticConfig) => {\n Component['staticConfig'] = extendStaticConfig(res, {\n ...conf,\n neverFlatten: true,\n defaultProps: {\n ...Component.defaultProps,\n ...conf?.defaultProps,\n },\n })\n return Component\n }\n\n return res\n}\n\nlet hasWarnedOnce = false\n\n// dont used styled() here to avoid circular deps\n// keep inline to avoid circular deps\n\nexport const Spacer = createComponent<{ size?: number | SpaceTokens; flex?: boolean | number }>({\n defaultProps: {\n ...stackDefaultStyles,\n size: true,\n },\n variants: {\n size: {\n '...size': (size, { tokens }) => {\n size = size == true ? '$true' : size\n return {\n width: tokens.size[size] ?? size,\n height: tokens.size[size] ?? size,\n }\n },\n },\n\n direction: {\n horizontal: {\n height: 0,\n },\n vertical: {\n width: 0,\n },\n },\n },\n})\n\nexport function spacedChildren({\n isZStack,\n children,\n space,\n flexDirection,\n}: {\n isZStack?: boolean\n children: any\n space?: any\n flexDirection?: ViewStyle['flexDirection']\n}) {\n if (!space && !isZStack) {\n return children\n }\n const childrenList = Children.toArray(children)\n const len = childrenList.length\n if (len === 1) {\n return children\n }\n const next: any[] = []\n for (const [index, child] of childrenList.entries()) {\n if (child === null || child === undefined) {\n continue\n }\n\n const key = `${child?.['key'] ?? index}`\n\n next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>)\n\n // allows for custom visually hidden components that dont insert spacing\n if (child?.['type']?.['isVisuallyHidden']) {\n continue\n }\n\n if (index !== len - 1) {\n if (space) {\n next.push(\n <Spacer\n key={`${key}_spacer`}\n // @ts-ignore TODO\n direction={\n flexDirection === 'row' || flexDirection === 'row-reverse' ? 'horizontal' : 'vertical'\n }\n size={space}\n />\n )\n }\n }\n }\n return next\n}\n\n// for now not so \"tamagui-y\"\nconst Absolute = ({ children }) => <View style={sheet.fullscreen}>{children}</View>\nconst sheet = StyleSheet.create({\n fullscreen: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n})\n"],
|
|
5
|
-
"mappings": ";;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AAEO,MAAM,WAAW,IAAI;AAE5B,IAAI,OAAO,aAAa,aAAa;AACnC,WAAS,iBAAiB,WAAW,MAAM;AACzC,aAAS,QAAQ,CAAC,MAAM;AACxB,aAAS;AAAA;AAAA;AAMN,yBACL,UACA;AACA,MAAI;AACJ,MAAI,YAAY,UAAU;AACxB,mBAAe;AAAA,SACV;AACL,mBAAe,kBAAkB;AAAA;AAGnC,QAAM,EAAE,WAAW,aAAa,QAAQ,aAAa;AACrD,QAAM,kBAAkB,eAAe;AAGvC,MAAI,eAAe;AACnB,MAAI;AAGJ,MAAI;AACJ,MAAI,oBAAoB;AACxB,MAAI;AAIJ,QAAM,YAAY,WAAoB,CAAC,OAAY,iBAAiB;AAClE,UAAM,cAAc;AACpB,UAAM,WAAW,YAAY,OAAO,EAAE;AACtC,UAAM,UAAU,WAAW;AAC3B,UAAM,CAAC,OAAO,QAAQ,SAAS,MAAO;AAAA,MACpC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO,QAAQ;AAAA;AAEjB,UAAM,MAAM,wBAAC,SACX,KAAK,CAAC,SAAS;AACb,iBAAW,OAAO,MAAM;AACtB,YAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,iBAAO,KAAK,SAAS;AAAA;AAAA;AAGzB,aAAO;AAAA,QAPC;AAWZ,QAAI,QAAQ,IAAI,aAAa,iBAAiB,CAAC,UAAU,OAAO;AAC9D,eAAS,QAAQ,MAAM,UAAU,QAAQ,CAAC,SAAS;AACjD,YAAI,OAAO,SAAS,UAAU;AAC5B,kBAAQ,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAK7C,UAAM,kBAAkB,QAAQ,WAAW,uBAAuB;AAClE,UAAM,UAAU,OAAO;AAEvB,UAAM;AAAA,MACJ,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,QACE,eAAe,OAAO,
|
|
4
|
+
"sourcesContent": ["import { concatClassName, stylePropsView } from '@tamagui/helpers'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, {\n Children,\n Fragment,\n createElement,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { StyleSheet, Text, View, ViewStyle } from 'react-native'\n\nimport { stackDefaultStyles } from './constants/constants'\nimport { isTouchDevice, isWeb } from './constants/platform'\nimport { rnw } from './constants/rnw'\nimport { onConfiguredOnce } from './createTamagui'\nimport { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStylesUsingClassname'\nimport { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'\nimport { getSplitStyles } from './helpers/getSplitStyles'\nimport { useFeatures } from './hooks/useFeatures'\nimport { usePressable } from './hooks/usePressable'\nimport {\n SpaceTokens,\n StaticComponent,\n StaticConfig,\n StaticConfigParsed,\n TamaguiInternalConfig,\n} from './types'\nimport { TextAncestorContext } from './views/TextAncestorContext'\nimport { ThemeManagerContext } from './views/ThemeManagerContext'\n\nexport const mouseUps = new Set<Function>()\n\nif (typeof document !== 'undefined') {\n document.addEventListener('mouseup', () => {\n mouseUps.forEach((x) => x())\n mouseUps.clear()\n })\n}\n\ntype DefaultProps = {}\n\nexport function createComponent<A extends Object = DefaultProps>(\n configIn: Partial<StaticConfig> | StaticConfigParsed\n) {\n let staticConfig: StaticConfigParsed\n if ('parsed' in configIn) {\n staticConfig = configIn\n } else {\n staticConfig = parseStaticConfig(configIn)\n }\n\n const { Component, validStyles, isText, isZStack } = staticConfig\n const validStyleProps = validStyles ?? stylePropsView\n\n // split out default styles vs props so we can assign it to component.defaultProps\n let defaultProps = null as any\n let tamaguiConfig: TamaguiInternalConfig\n\n // web uses className, native uses style\n let defaultsStyle: any\n let defaultsClassName = ''\n let initialTheme: any\n\n // see onConfiguredOnce below which attaches a name then to this component\n\n const component = forwardRef<View, A>((props: any, forwardedRef) => {\n const forceUpdate = useForceUpdate()\n const features = useFeatures(props, { forceUpdate })\n const manager = useContext(ThemeManagerContext)\n const [state, set_] = useState(() => ({\n hover: false,\n press: false,\n pressIn: false,\n theme: manager.name,\n }))\n const set = (next: Partial<typeof state>) =>\n set_((prev) => {\n for (const key in next) {\n if (prev[key] !== next[key]) {\n return { ...prev, ...next }\n }\n }\n return prev\n })\n\n // from react-native-web\n if (process.env.NODE_ENV === 'development' && !isText && isWeb) {\n Children.toArray(props.children).forEach((item) => {\n if (typeof item === 'string') {\n console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)\n }\n })\n }\n\n const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false\n const hostRef = useRef(null)\n\n const theme = (manager.theme as any) || initialTheme\n\n const {\n viewProps: viewPropsIn,\n pseudos,\n style,\n classNames,\n } = getSplitStyles(props, staticConfig, theme)\n\n const {\n tag,\n hitSlop,\n children,\n pointerEvents,\n onPress,\n onPressIn,\n onPressOut,\n onHoverIn,\n onHoverOut,\n space,\n disabled,\n onMouseEnter,\n onMouseLeave,\n hrefAttrs,\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n onMouseDown,\n onClick,\n\n accessible,\n accessibilityRole,\n\n // TODO feature load layout hook\n onLayout,\n ...viewProps\n } = viewPropsIn\n\n if (!isWeb) {\n if (accessible) viewProps.accessible = accessible\n if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole\n }\n\n if (isWeb) {\n // from react-native-web\n rnw.useResponderEvents(hostRef, {\n onMoveShouldSetResponder,\n onMoveShouldSetResponderCapture,\n onResponderEnd,\n onResponderGrant,\n onResponderMove,\n onResponderReject,\n onResponderRelease,\n onResponderStart,\n onResponderTerminate,\n onResponderTerminationRequest,\n onScrollShouldSetResponder,\n onScrollShouldSetResponderCapture,\n onSelectionChangeShouldSetResponder,\n onSelectionChangeShouldSetResponderCapture,\n onStartShouldSetResponder,\n onStartShouldSetResponderCapture,\n })\n }\n\n const isTracking = useRef(false)\n\n // hasEverHadEvents prevents repareting if you remove onPress or similar...\n const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()\n if (!internal.current) {\n internal.current = {\n isMounted: true,\n }\n }\n\n useEffect(() => {\n internal.current!.isMounted = true\n const dispose = manager?.onChangeTheme((name) => {\n if (isTracking.current) {\n set({ theme: name })\n }\n })\n return () => {\n dispose()\n mouseUps.delete(unPress)\n isTracking.current = false\n internal.current!.isMounted = false\n }\n }, [manager])\n\n // element\n const element = isWeb\n ? !Component || typeof Component === 'string'\n ? // default to tag, fallback to component (when both strings)\n tag || Component\n : Component\n : Component\n const ReactView = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')\n const ReactText = !isWeb ? Text : element || 'span'\n const ViewComponent = isText ? ReactText : ReactView\n\n // styles\n const isHovering = !isTouchDevice && !disabled && pseudos && state.hover\n const isPressing = !disabled && pseudos && state.press\n\n const styles = [\n // parity w react-native-web, only for text in text\n // TODO this should be able to be done w css to replicate after extraction:\n // (.text .text { display: inline-flex; }) (but if they set display we'd need stronger precendence)\n // isText && hasTextAncestor && isWeb ? { display: 'inline-flex' } : null,\n style,\n isHovering ? pseudos.hoverStyle || null : null,\n isPressing ? pseudos.pressStyle || null : null,\n ]\n\n if (isWeb) {\n const stylesClassNames = useStylesAsClassname(styles)\n const classList = isText\n ? [\n defaultsClassName,\n // hasTextAncestor === true && cssText.textHasAncestor,\n // TODO MOVE TO VARIANTS [number] [any]\n // numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,\n classNames,\n stylesClassNames,\n props.className,\n ]\n : [defaultsClassName, props.className, classNames, stylesClassNames]\n\n // @ts-expect-error\n const className = concatClassName(...classList)\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // prettier-ignore\n console.log('\uD83E\uDD5A className', { style, styles, classList, stylesClassNames, className })\n }\n }\n viewProps.className = className\n } else {\n viewProps.style = styles\n }\n\n if (pointerEvents) {\n viewProps.pointerEvents = pointerEvents\n }\n\n if (isWeb) {\n // from react-native-web\n const platformMethodsRef = rnw.usePlatformMethods(viewProps)\n const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef)\n viewProps.ref = setRef\n if (props.href != null && hrefAttrs != null) {\n const { download, rel, target } = hrefAttrs\n if (download != null) {\n viewProps.download = download\n }\n if (rel != null) {\n viewProps.rel = rel\n }\n if (typeof target === 'string') {\n viewProps.target = target.charAt(0) !== '_' ? '_' + target : target\n }\n }\n } else {\n if (forwardedRef) {\n viewProps.ref = forwardedRef\n }\n }\n\n const attachPress = !!(\n (pseudos && pseudos.pressStyle) ||\n onPress ||\n onPressOut ||\n onPressIn ||\n onClick\n )\n const attachHover =\n isWeb &&\n !isTouchDevice &&\n !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)\n\n // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage\n // while avoiding reparenting...\n // once proper reparenting is supported, we can remove this and use that...\n const shouldAttach =\n internal.current.hasEverHadEvents ||\n attachPress ||\n attachHover ||\n 'pressStyle' in props ||\n 'onPress' in props ||\n 'onPressIn' in props ||\n 'onPressOut' in props ||\n (isWeb &&\n ('hoverStyle' in props ||\n 'onClick' in props ||\n 'onHoverIn' in props ||\n 'onHoverOut' in props ||\n 'onMouseEnter' in props ||\n 'onMouseLeave' in props))\n\n // never remove events as we wrap in a div (for now, may be able to remove..)\n if (shouldAttach) {\n internal.current.hasEverHadEvents = true\n }\n\n const unPress = useCallback(() => {\n if (!internal.current!.isMounted) return\n set({\n press: false,\n pressIn: false,\n })\n }, [])\n\n const events = shouldAttach\n ? {\n ...(!isWeb && {\n // non web\n onPressOut: (e) => {\n unPress()\n onPressOut?.(e)\n },\n }),\n ...(isWeb &&\n !isTouchDevice && {\n onMouseEnter:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n if (attachHover) {\n next.hover = true\n }\n if (state.pressIn) {\n next.press = true\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverIn?.(e)\n onMouseEnter?.(e)\n }\n : undefined,\n onMouseLeave:\n attachHover || attachPress\n ? (e) => {\n let next: Partial<typeof state> = {}\n mouseUps.add(unPress)\n if (attachHover) {\n next.hover = false\n }\n if (state.pressIn) {\n next.press = false\n next.pressIn = false\n }\n if (Object.keys(next).length) {\n set(next)\n }\n onHoverOut?.(e)\n onMouseLeave?.(e)\n }\n : undefined,\n }),\n onMouseDown: attachPress\n ? (e) => {\n set({\n press: true,\n pressIn: true,\n })\n onPressIn?.(e)\n onMouseDown?.(e)\n }\n : (onPressIn as any),\n onClick: attachPress\n ? (e) => {\n // this caused issue with next.js passing href\n // e.preventDefault()\n onPress?.(e)\n onClick?.(e)\n unPress()\n onPressOut?.(e)\n }\n : (onPressOut as any),\n }\n : null\n\n if (events) {\n if (typeof ViewComponent !== 'string') {\n // TODO once we do the above we can then rely entirely on pressStyle returned here isntead of above pressStyle logic\n const [pressProps] = usePressable({\n disabled,\n hitSlop,\n onPressIn: events.onMouseDown,\n onPressOut: events.onPressOut,\n onPress: events.onClick,\n })\n Object.assign(viewProps, pressProps)\n } else {\n Object.assign(viewProps, events)\n }\n }\n\n const childEls = spacedChildren({\n children,\n space,\n flexDirection: props.flexDirection || defaultProps?.flexDirection,\n isZStack: isZStack,\n })\n\n let content: any\n\n // replicate react-native-web's `createElement`\n if (isWeb && rnw) {\n const domProps = rnw.createDOMProps(viewProps)\n const className =\n domProps.className && domProps.className !== viewProps.className\n ? `${domProps.className} ${viewProps.className}`\n : viewProps.className\n Object.assign(viewProps, domProps)\n viewProps.className = className\n content = createElement(ViewComponent, viewProps, childEls)\n } else {\n content = createElement(ViewComponent, viewProps, childEls)\n }\n\n const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor\n if (shouldWrapTextAncestor) {\n // from react-native-web\n // @ts-ignore\n content = createElement(TextAncestorContext.Provider, { value: true }, content)\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n viewProps['debug'] = true\n console.log('\uD83E\uDD5A props in:', props)\n console.log('\uD83E\uDD5A props out:', viewProps)\n console.log(props.onClick?.toString())\n // prettier-ignore\n console.log('\uD83E\uDD5A etc:', { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls })\n // only on browser because node expands it huge\n if (isWeb) {\n console.log('\uD83E\uDD5A component info', { staticConfig, tamaguiConfig })\n }\n }\n }\n\n return (\n <>\n {features}\n {content}\n </>\n )\n })\n\n // Once configuration is run and all components are registered\n // get default props + className and analyze styles\n onConfiguredOnce((conf) => {\n tamaguiConfig = conf\n initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]\n const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true)\n if (isWeb) {\n if (next.classNames) {\n defaultsClassName += next.classNames + ' '\n }\n defaultsClassName += addStylesUsingClassname([next.style, next.pseudos])\n } else {\n if (!hasWarnedOnce) {\n hasWarnedOnce = true\n console.log('\u26A0\uFE0F TODO account for default styles for media queries')\n }\n }\n // @ts-ignore\n component.defaultProps = {\n ...next.viewProps,\n ...component.defaultProps,\n }\n if (process.env.NODE_ENV === 'development') {\n if (staticConfig.defaultProps?.debug) {\n console.log('tamagui debug component:', next, defaultsClassName, component.defaultProps)\n }\n }\n })\n\n component['staticConfig'] = {\n validStyles: validStyleProps,\n ...staticConfig,\n }\n\n const res = component as any as StaticComponent<A, void>\n\n // add extractable HoC\n res['extractable'] = (Component: any, conf?: StaticConfig) => {\n Component['staticConfig'] = extendStaticConfig(res, {\n ...conf,\n neverFlatten: true,\n defaultProps: {\n ...Component.defaultProps,\n ...conf?.defaultProps,\n },\n })\n return Component\n }\n\n return res\n}\n\nlet hasWarnedOnce = false\n\n// dont used styled() here to avoid circular deps\n// keep inline to avoid circular deps\n\nexport const Spacer = createComponent<{ size?: number | SpaceTokens; flex?: boolean | number }>({\n defaultProps: {\n ...stackDefaultStyles,\n size: true,\n },\n variants: {\n size: {\n '...size': (size, { tokens }) => {\n size = size == true ? '$true' : size\n return {\n width: tokens.size[size] ?? size,\n height: tokens.size[size] ?? size,\n }\n },\n },\n\n direction: {\n horizontal: {\n height: 0,\n },\n vertical: {\n width: 0,\n },\n },\n },\n})\n\nexport function spacedChildren({\n isZStack,\n children,\n space,\n flexDirection,\n}: {\n isZStack?: boolean\n children: any\n space?: any\n flexDirection?: ViewStyle['flexDirection']\n}) {\n if (!space && !isZStack) {\n return children\n }\n const childrenList = Children.toArray(children)\n const len = childrenList.length\n if (len === 1) {\n return children\n }\n const next: any[] = []\n for (const [index, child] of childrenList.entries()) {\n if (child === null || child === undefined) {\n continue\n }\n\n const key = `${child?.['key'] ?? index}`\n\n next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>)\n\n // allows for custom visually hidden components that dont insert spacing\n if (child?.['type']?.['isVisuallyHidden']) {\n continue\n }\n\n if (index !== len - 1) {\n if (space) {\n next.push(\n <Spacer\n key={`${key}_spacer`}\n // @ts-ignore TODO\n direction={\n flexDirection === 'row' || flexDirection === 'row-reverse' ? 'horizontal' : 'vertical'\n }\n size={space}\n />\n )\n }\n }\n }\n return next\n}\n\n// for now not so \"tamagui-y\"\nconst Absolute = ({ children }) => <View style={sheet.fullscreen}>{children}</View>\nconst sheet = StyleSheet.create({\n fullscreen: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { isWeb } from "../constants/platform";
|
|
3
4
|
import { getTamagui } from "../createTamagui";
|
|
4
5
|
import { Variable } from "../createVariable";
|
|
5
6
|
import { isObj } from "./isObj";
|
|
@@ -22,7 +23,7 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
22
23
|
const val = value === true ? variant["$true"] || variant["true"] : variant[value] ?? variant["..."] ?? value;
|
|
23
24
|
const res = typeof val === "function" ? val(value, { tokens: conf.tokensParsed, theme, props }) : isObj(val) ? { ...val } : val;
|
|
24
25
|
if (isObj(res)) {
|
|
25
|
-
resolveTokens(res, conf, fontFamily);
|
|
26
|
+
resolveTokens(res, conf, theme, fontFamily);
|
|
26
27
|
}
|
|
27
28
|
return res;
|
|
28
29
|
}
|
|
@@ -33,7 +34,7 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
33
34
|
}
|
|
34
35
|
if (value && value[0] === "$") {
|
|
35
36
|
shouldReturn = true;
|
|
36
|
-
value = getToken(key, value, conf, fontFamily);
|
|
37
|
+
value = getToken(key, value, conf, theme, fontFamily);
|
|
37
38
|
}
|
|
38
39
|
if (value instanceof Variable) {
|
|
39
40
|
shouldReturn = true;
|
|
@@ -46,25 +47,31 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
|
|
|
46
47
|
}
|
|
47
48
|
};
|
|
48
49
|
}, "createPropMapper");
|
|
49
|
-
const resolveTokens = /* @__PURE__ */ __name((res, conf, fontFamily) => {
|
|
50
|
+
const resolveTokens = /* @__PURE__ */ __name((res, conf, theme, fontFamily) => {
|
|
50
51
|
for (const rKey in res) {
|
|
51
52
|
const fKey = conf.shorthands[rKey] || rKey;
|
|
52
53
|
const val = res[rKey];
|
|
53
54
|
if (val instanceof Variable) {
|
|
54
55
|
res[fKey] = val.variable;
|
|
55
56
|
} else if (typeof val === "string") {
|
|
56
|
-
const fVal = val[0] === "$" ? getToken(fKey, val, conf, fontFamily) : val;
|
|
57
|
+
const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily) : val;
|
|
57
58
|
res[fKey] = fVal;
|
|
58
59
|
} else {
|
|
59
60
|
if (isObj(val)) {
|
|
60
|
-
resolveTokens(val, conf, fontFamily);
|
|
61
|
+
resolveTokens(val, conf, theme, fontFamily);
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
65
|
}, "resolveTokens");
|
|
65
|
-
const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, fontFamily = "$body") => {
|
|
66
|
+
const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, theme, fontFamily = "$body") => {
|
|
66
67
|
if (themeParsed[value]) {
|
|
67
|
-
|
|
68
|
+
if (isWeb && themeParsed[value].variable) {
|
|
69
|
+
return themeParsed[value].variable;
|
|
70
|
+
} else {
|
|
71
|
+
if (value && value[0] === "$") {
|
|
72
|
+
return theme[`${value.slice(1)}`]?.val || themeParsed[value]?.val;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
68
75
|
}
|
|
69
76
|
let valOrVar;
|
|
70
77
|
if (key === "fontFamily") {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/helpers/createPropMapper.ts"],
|
|
4
|
-
"sourcesContent": ["import { getTamagui } from '../createTamagui'\nimport { Variable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport const createPropMapper = (c: StaticConfig) => {\n const variants = c.variants\n let variantsParsed\n const defaultProps = c.defaultProps || {}\n\n return (key: string, value: any, theme: any, props: any) => {\n const conf = getTamagui()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n if (variants && !variantsParsed) {\n variantsParsed = parseVariants(variants, conf)\n }\n\n // handled here because we need to resolve this off tokens, its the only one-off like this\n let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n // expand variants\n const variant = variantsParsed?.[key]\n if (variant && typeof value !== 'undefined') {\n const val =\n value === true\n ? variant['$true'] || variant['true']\n : variant[value] ?? variant['...'] ?? value\n\n const res =\n typeof val === 'function'\n ? val(value, { tokens: conf.tokensParsed, theme, props })\n : isObj(val)\n ? { ...val }\n : val\n\n if (isObj(res)) {\n resolveTokens(res, conf, fontFamily)\n }\n\n return res\n }\n\n let shouldReturn = false\n\n // handle shorthands\n if (conf.shorthands[key]) {\n shouldReturn = true\n key = conf.shorthands[key]\n }\n\n if (value && value[0] === '$') {\n shouldReturn = true\n value = getToken(key, value, conf, fontFamily)\n }\n\n if (value instanceof Variable) {\n shouldReturn = true\n value = value.variable\n }\n\n if (shouldReturn) {\n return {\n [key]: value,\n }\n }\n }\n}\n\nconst resolveTokens = (res: any, conf: TamaguiInternalConfig, fontFamily: any) => {\n for (const rKey in res) {\n const fKey = conf.shorthands[rKey] || rKey\n const val = res[rKey]\n if (val instanceof Variable) {\n res[fKey] = val.variable\n } else if (typeof val === 'string') {\n const fVal = val[0] === '$' ? getToken(fKey, val, conf, fontFamily) : val\n res[fKey] = fVal\n } else {\n if (isObj(val)) {\n // for things like shadowOffset which is a sub-object\n resolveTokens(val, conf, fontFamily)\n }\n // nullish values cant be tokens so need no exrta parsing\n }\n }\n}\n\nconst getToken = (\n key: string,\n value: string,\n { tokensParsed, themeParsed }: TamaguiInternalConfig,\n fontFamily: string | undefined = '$body'\n) => {\n if (themeParsed[value]) {\n return themeParsed[value].variable\n }\n let valOrVar: any\n if (key === 'fontFamily') {\n valOrVar = tokensParsed.font[value]?.family || value\n }\n if (key === 'fontSize') {\n valOrVar = tokensParsed.font[fontFamily]?.size[value] || value\n }\n if (key === 'lineHeight') {\n valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value\n }\n if (key === 'letterSpacing') {\n valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value\n }\n if (key === 'fontWeight') {\n valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value\n }\n if (typeof valOrVar !== 'undefined') {\n if (valOrVar instanceof Variable) {\n return valOrVar.variable\n } else {\n return valOrVar\n }\n }\n for (const cat in tokenCategories) {\n if (tokenCategories[cat][key]) {\n const res = tokensParsed[cat][value]\n if (res) {\n return res.variable\n } else {\n const themeVar = themeParsed[value]\n if (themeVar) {\n return themeVar.variable\n }\n }\n }\n }\n const spaceVar = tokensParsed.space[value]\n if (spaceVar) {\n return spaceVar.variable\n }\n return value\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n size: {\n width: true,\n height: true,\n minWidth: true,\n minHeight: true,\n maxWidth: true,\n maxHeight: true,\n },\n color: {\n color: true,\n backgroundColor: true,\n borderColor: true,\n borderBottomColor: true,\n borderTopColor: true,\n borderLeftColor: true,\n borderRightColor: true,\n },\n}\n\n// turns variant spreads into individual lookups\nfunction parseVariants(variants: any, conf: TamaguiInternalConfig) {\n return Object.keys(variants).reduce((acc, key) => {\n acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {\n const variantVal = variants[key][vkey]\n if (vkey.startsWith('...')) {\n // set the default one at '...' for easy fallback on non-exact-variant-match\n vacc['...'] = variantVal\n const tokenKey = vkey.slice(3)\n const tokens = conf.tokens[tokenKey]\n for (const tkey in tokens) {\n vacc[`$${tkey}`] = variantVal\n }\n } else {\n vacc[vkey] = variantVal\n }\n return vacc\n }, {})\n return acc\n }, {})\n}\n"],
|
|
5
|
-
"mappings": ";;AAAA;AACA;AAEA;AAEO,MAAM,mBAAmB,wBAAC,MAAoB;AACnD,QAAM,WAAW,EAAE;AACnB,MAAI;AACJ,QAAM,eAAe,EAAE,gBAAgB;AAEvC,SAAO,CAAC,KAAa,OAAY,OAAY,UAAe;AAC1D,UAAM,OAAO;AACb,QAAI,CAAC,MAAM;AACT,cAAQ,MAAM;AACd;AAAA;AAEF,QAAI,YAAY,CAAC,gBAAgB;AAC/B,uBAAiB,cAAc,UAAU;AAAA;AAI3C,QAAI,aAAa,MAAM,cAAc,aAAa,cAAc;AAGhE,UAAM,UAAU,iBAAiB;AACjC,QAAI,WAAW,OAAO,UAAU,aAAa;AAC3C,YAAM,MACJ,UAAU,OACN,QAAQ,YAAY,QAAQ,UAC5B,QAAQ,UAAU,QAAQ,UAAU;AAE1C,YAAM,MACJ,OAAO,QAAQ,aACX,IAAI,OAAO,EAAE,QAAQ,KAAK,cAAc,OAAO,WAC/C,MAAM,OACN,KAAK,QACL;AAEN,UAAI,MAAM,MAAM;AACd,sBAAc,KAAK,MAAM;AAAA;
|
|
4
|
+
"sourcesContent": ["import { isWeb } from '../constants/platform'\nimport { getTamagui } from '../createTamagui'\nimport { Variable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport const createPropMapper = (c: StaticConfig) => {\n const variants = c.variants\n let variantsParsed\n const defaultProps = c.defaultProps || {}\n\n return (key: string, value: any, theme: any, props: any) => {\n const conf = getTamagui()\n if (!conf) {\n console.trace('no conf! err')\n return\n }\n if (variants && !variantsParsed) {\n variantsParsed = parseVariants(variants, conf)\n }\n\n // handled here because we need to resolve this off tokens, its the only one-off like this\n let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n // expand variants\n const variant = variantsParsed?.[key]\n if (variant && typeof value !== 'undefined') {\n const val =\n value === true\n ? variant['$true'] || variant['true']\n : variant[value] ?? variant['...'] ?? value\n\n const res =\n typeof val === 'function'\n ? val(value, { tokens: conf.tokensParsed, theme, props })\n : isObj(val)\n ? { ...val }\n : val\n\n if (isObj(res)) {\n resolveTokens(res, conf, theme, fontFamily)\n }\n\n return res\n }\n\n let shouldReturn = false\n\n // handle shorthands\n if (conf.shorthands[key]) {\n shouldReturn = true\n key = conf.shorthands[key]\n }\n\n if (value && value[0] === '$') {\n shouldReturn = true\n value = getToken(key, value, conf, theme, fontFamily)\n }\n\n if (value instanceof Variable) {\n shouldReturn = true\n value = value.variable\n }\n\n if (shouldReturn) {\n return {\n [key]: value,\n }\n }\n }\n}\n\nconst resolveTokens = (res: any, conf: TamaguiInternalConfig, theme: any, fontFamily: any) => {\n for (const rKey in res) {\n const fKey = conf.shorthands[rKey] || rKey\n const val = res[rKey]\n if (val instanceof Variable) {\n res[fKey] = val.variable\n } else if (typeof val === 'string') {\n const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily) : val\n res[fKey] = fVal\n } else {\n if (isObj(val)) {\n // for things like shadowOffset which is a sub-object\n resolveTokens(val, conf, theme, fontFamily)\n }\n // nullish values cant be tokens so need no exrta parsing\n }\n }\n}\n\nconst getToken = (\n key: string,\n value: string,\n { tokensParsed, themeParsed }: TamaguiInternalConfig,\n theme: any,\n fontFamily: string | undefined = '$body'\n) => {\n if (themeParsed[value]) {\n if (isWeb && themeParsed[value].variable) {\n return themeParsed[value].variable\n } else {\n if (value && value[0] === '$') {\n return theme[`${value.slice(1)}`]?.val || themeParsed[value]?.val\n }\n }\n }\n let valOrVar: any\n if (key === 'fontFamily') {\n valOrVar = tokensParsed.font[value]?.family || value\n }\n if (key === 'fontSize') {\n valOrVar = tokensParsed.font[fontFamily]?.size[value] || value\n }\n if (key === 'lineHeight') {\n valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value\n }\n if (key === 'letterSpacing') {\n valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value\n }\n if (key === 'fontWeight') {\n valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value\n }\n if (typeof valOrVar !== 'undefined') {\n if (valOrVar instanceof Variable) {\n return valOrVar.variable\n } else {\n return valOrVar\n }\n }\n for (const cat in tokenCategories) {\n if (tokenCategories[cat][key]) {\n const res = tokensParsed[cat][value]\n if (res) {\n return res.variable\n } else {\n const themeVar = themeParsed[value]\n if (themeVar) {\n return themeVar.variable\n }\n }\n }\n }\n const spaceVar = tokensParsed.space[value]\n if (spaceVar) {\n return spaceVar.variable\n }\n return value\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n size: {\n width: true,\n height: true,\n minWidth: true,\n minHeight: true,\n maxWidth: true,\n maxHeight: true,\n },\n color: {\n color: true,\n backgroundColor: true,\n borderColor: true,\n borderBottomColor: true,\n borderTopColor: true,\n borderLeftColor: true,\n borderRightColor: true,\n },\n}\n\n// turns variant spreads into individual lookups\nfunction parseVariants(variants: any, conf: TamaguiInternalConfig) {\n return Object.keys(variants).reduce((acc, key) => {\n acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {\n const variantVal = variants[key][vkey]\n if (vkey.startsWith('...')) {\n // set the default one at '...' for easy fallback on non-exact-variant-match\n vacc['...'] = variantVal\n const tokenKey = vkey.slice(3)\n const tokens = conf.tokens[tokenKey]\n for (const tkey in tokens) {\n vacc[`$${tkey}`] = variantVal\n }\n } else {\n vacc[vkey] = variantVal\n }\n return vacc\n }, {})\n return acc\n }, {})\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/hooks/useMedia.js
CHANGED
|
@@ -18,13 +18,15 @@ let conf = null;
|
|
|
18
18
|
const mediaQueryConfig = new Proxy({}, {
|
|
19
19
|
get(target, key) {
|
|
20
20
|
if (!conf) {
|
|
21
|
-
|
|
21
|
+
console.warn("Warning: accessing media query before init");
|
|
22
|
+
return null;
|
|
22
23
|
}
|
|
23
24
|
return Reflect.get(conf, key);
|
|
24
25
|
},
|
|
25
26
|
ownKeys() {
|
|
26
27
|
if (!conf) {
|
|
27
|
-
|
|
28
|
+
console.warn("Warning: accessing media query before init");
|
|
29
|
+
return [];
|
|
28
30
|
}
|
|
29
31
|
return Object.keys(conf);
|
|
30
32
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/useMedia.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport {
|
|
5
|
-
"mappings": ";;AAAA;AACA;AAEA;AACA;AAOA;AAEO,MAAM,aAA0D;AACvE,MAAM,sBAAwD;AAEvD,MAAM,wBAAwB,wBAAC,KAAa,OAAY;AAC7D,sBAAoB,OAAO,oBAAoB,QAAQ,IAAI;AAC3D,sBAAoB,KAAK,IAAI;AAAA,GAFM;AAK9B,MAAM,2BAA2B,wBAAC,KAAa,OAAY;AAChE,sBAAoB,KAAK,OAAO;AAAA,GADM;AAIxC,IAAI,OAA4B;AAEzB,MAAM,mBAAmB,IAAI,MAAoB,IAAW;AAAA,EACjE,IAAI,QAAQ,KAAK;AACf,QAAI,CAAC,MAAM;AACT,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n mediaQueryListeners[key].delete(cb)\n}\n\nlet conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n get(target, key) {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return null\n }\n return Reflect.get(conf, key)\n },\n ownKeys() {\n if (!conf) {\n console.warn('Warning: accessing media query before init')\n return []\n }\n return Object.keys(conf)\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n }\n },\n})\n\nexport const getMedia = () => {\n if (!conf) {\n throw new Error(`not configured yet`)\n }\n return mediaState\n}\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (conf) {\n console.warn(\n `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n )\n }\n\n if (queries) {\n conf = queries\n }\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[key] = !!match.matches\n match.addListener(() => {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n })\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[key] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useIsomorphicLayoutEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(mediaState, {\n get(target, key: string) {\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n })\n })\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/views/Theme.js
CHANGED
|
@@ -14,11 +14,10 @@ const Theme = /* @__PURE__ */ __name((props) => {
|
|
|
14
14
|
console.warn("Error, no themes in context", props);
|
|
15
15
|
return props.children;
|
|
16
16
|
}
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const theme = activeName ? themes[activeName] : null;
|
|
17
|
+
const nextNameParent = `${props.name}-${parentName}`;
|
|
18
|
+
const nextNameParentParent = `${props.name}-${parent.parentName}`;
|
|
19
|
+
const name = !props.name ? null : props.name in themes ? props.name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
|
|
20
|
+
const theme = name ? themes[name] : null;
|
|
22
21
|
const themeManager = useConstant(() => {
|
|
23
22
|
if (!theme) {
|
|
24
23
|
return null;
|
|
@@ -33,14 +32,16 @@ const Theme = /* @__PURE__ */ __name((props) => {
|
|
|
33
32
|
if (!themeManager) {
|
|
34
33
|
return;
|
|
35
34
|
}
|
|
36
|
-
|
|
35
|
+
if (name) {
|
|
36
|
+
themeManager.setActiveTheme({ name, theme, parentName });
|
|
37
|
+
}
|
|
37
38
|
return parent.onChangeTheme((next) => {
|
|
38
39
|
if (next) {
|
|
39
40
|
themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
|
|
40
41
|
setParentName(next);
|
|
41
42
|
}
|
|
42
43
|
});
|
|
43
|
-
}, [themes,
|
|
44
|
+
}, [themes, name, parentName]);
|
|
44
45
|
if (!name || !theme) {
|
|
45
46
|
return props.children;
|
|
46
47
|
}
|
|
@@ -51,11 +52,13 @@ const Theme = /* @__PURE__ */ __name((props) => {
|
|
|
51
52
|
if (props.disableThemeClass) {
|
|
52
53
|
return contents;
|
|
53
54
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
if (name) {
|
|
56
|
+
const color = themes[name]?.["color"]?.["variable"];
|
|
57
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
58
|
+
className: getThemeParentClassName(props.name),
|
|
59
|
+
style: { display: "contents", color }
|
|
60
|
+
}, contents);
|
|
61
|
+
}
|
|
59
62
|
}
|
|
60
63
|
return contents;
|
|
61
64
|
}, "Theme");
|
package/dist/views/Theme.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/views/Theme.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n disableThemeClass?: boolean\n name: ThemeName | null\n children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n const parent = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const [parentName, setParentName] = useState(parent.name || 'light')\n if (!themes) {\n console.warn('Error, no themes in context', props)\n return props.children\n }\n
|
|
5
|
-
"mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B;AAC5C,WAAO,MAAM;AAAA;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n const parent = useContext(ThemeManagerContext)\n const themes = useContext(ThemeContext)\n const [parentName, setParentName] = useState(parent.name || 'light')\n if (!themes) {\n console.warn('Error, no themes in context', props)\n return props.children\n }\n\n const nextNameParent = `${props.name}-${parentName}`\n const nextNameParentParent = `${props.name}-${parent.parentName}`\n const name = !props.name\n ? null\n : props.name in themes\n ? props.name\n : nextNameParent in themes\n ? nextNameParent\n : nextNameParentParent in themes\n ? nextNameParentParent\n : null\n const theme = name ? themes[name] : null\n const themeManager = useConstant<ThemeManager | null>(() => {\n if (!theme) {\n return null\n }\n const manager = new ThemeManager()\n if (name) {\n manager.setActiveTheme({ name, theme: themes[name], parentName })\n }\n return manager\n })\n\n useIsomorphicLayoutEffect(() => {\n if (!themeManager) {\n return\n }\n if (name) {\n themeManager.setActiveTheme({ name, theme, parentName })\n }\n return parent.onChangeTheme((next) => {\n if (next) {\n themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })\n setParentName(next)\n }\n })\n }, [themes, name, parentName])\n\n if (!name || !theme) {\n return props.children\n }\n\n const contents = themeManager ? (\n <ThemeManagerContext.Provider value={themeManager}>\n {props.children}\n </ThemeManagerContext.Provider>\n ) : (\n props.children\n )\n\n if (isWeb) {\n if (props.disableThemeClass) {\n return contents\n }\n if (name) {\n const color = themes[name]?.['color']?.['variable']\n return (\n <div\n className={getThemeParentClassName(props.name)}\n // in order to provide currentColor, set color by default\n style={{ display: 'contents', color }}\n >\n {contents}\n </div>\n )\n }\n }\n\n return contents\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B;AAC5C,WAAO,MAAM;AAAA;AAGf,QAAM,iBAAiB,GAAG,MAAM,QAAQ;AACxC,QAAM,uBAAuB,GAAG,MAAM,QAAQ,OAAO;AACrD,QAAM,OAAO,CAAC,MAAM,OAChB,OACA,MAAM,QAAQ,SACd,MAAM,OACN,kBAAkB,SAClB,iBACA,wBAAwB,SACxB,uBACA;AACJ,QAAM,QAAQ,OAAO,OAAO,QAAQ;AACpC,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,EAAE,MAAM,OAAO,OAAO,OAAO;AAAA;AAEtD,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,QAAI,MAAM;AACR,mBAAa,eAAe,EAAE,MAAM,OAAO;AAAA;AAE7C,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO;AAC/D,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ,MAAM;AAElB,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,QAAI,MAAM;AACR,YAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,aACE,oCAAC,OAAD;AAAA,QACE,WAAW,wBAAwB,MAAM;AAAA,QAEzC,OAAO,EAAE,SAAS,YAAY;AAAA,SAE7B;AAAA;AAAA;AAMT,SAAO;AAAA,GA7EY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.11",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"engines": {
|
|
39
39
|
"node": ">=16"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "23209099ee7f37baf2597a9dcded9345ba294fe4"
|
|
42
42
|
}
|
package/src/createComponent.tsx
CHANGED
|
@@ -99,12 +99,14 @@ export function createComponent<A extends Object = DefaultProps>(
|
|
|
99
99
|
const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false
|
|
100
100
|
const hostRef = useRef(null)
|
|
101
101
|
|
|
102
|
+
const theme = (manager.theme as any) || initialTheme
|
|
103
|
+
|
|
102
104
|
const {
|
|
103
105
|
viewProps: viewPropsIn,
|
|
104
106
|
pseudos,
|
|
105
107
|
style,
|
|
106
108
|
classNames,
|
|
107
|
-
} = getSplitStyles(props, staticConfig,
|
|
109
|
+
} = getSplitStyles(props, staticConfig, theme)
|
|
108
110
|
|
|
109
111
|
const {
|
|
110
112
|
tag,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isWeb } from '../constants/platform'
|
|
1
2
|
import { getTamagui } from '../createTamagui'
|
|
2
3
|
import { Variable } from '../createVariable'
|
|
3
4
|
import { StaticConfig, TamaguiInternalConfig } from '../types'
|
|
@@ -37,7 +38,7 @@ export const createPropMapper = (c: StaticConfig) => {
|
|
|
37
38
|
: val
|
|
38
39
|
|
|
39
40
|
if (isObj(res)) {
|
|
40
|
-
resolveTokens(res, conf, fontFamily)
|
|
41
|
+
resolveTokens(res, conf, theme, fontFamily)
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
return res
|
|
@@ -53,7 +54,7 @@ export const createPropMapper = (c: StaticConfig) => {
|
|
|
53
54
|
|
|
54
55
|
if (value && value[0] === '$') {
|
|
55
56
|
shouldReturn = true
|
|
56
|
-
value = getToken(key, value, conf, fontFamily)
|
|
57
|
+
value = getToken(key, value, conf, theme, fontFamily)
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
if (value instanceof Variable) {
|
|
@@ -69,19 +70,19 @@ export const createPropMapper = (c: StaticConfig) => {
|
|
|
69
70
|
}
|
|
70
71
|
}
|
|
71
72
|
|
|
72
|
-
const resolveTokens = (res: any, conf: TamaguiInternalConfig, fontFamily: any) => {
|
|
73
|
+
const resolveTokens = (res: any, conf: TamaguiInternalConfig, theme: any, fontFamily: any) => {
|
|
73
74
|
for (const rKey in res) {
|
|
74
75
|
const fKey = conf.shorthands[rKey] || rKey
|
|
75
76
|
const val = res[rKey]
|
|
76
77
|
if (val instanceof Variable) {
|
|
77
78
|
res[fKey] = val.variable
|
|
78
79
|
} else if (typeof val === 'string') {
|
|
79
|
-
const fVal = val[0] === '$' ? getToken(fKey, val, conf, fontFamily) : val
|
|
80
|
+
const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily) : val
|
|
80
81
|
res[fKey] = fVal
|
|
81
82
|
} else {
|
|
82
83
|
if (isObj(val)) {
|
|
83
84
|
// for things like shadowOffset which is a sub-object
|
|
84
|
-
resolveTokens(val, conf, fontFamily)
|
|
85
|
+
resolveTokens(val, conf, theme, fontFamily)
|
|
85
86
|
}
|
|
86
87
|
// nullish values cant be tokens so need no exrta parsing
|
|
87
88
|
}
|
|
@@ -92,10 +93,17 @@ const getToken = (
|
|
|
92
93
|
key: string,
|
|
93
94
|
value: string,
|
|
94
95
|
{ tokensParsed, themeParsed }: TamaguiInternalConfig,
|
|
96
|
+
theme: any,
|
|
95
97
|
fontFamily: string | undefined = '$body'
|
|
96
98
|
) => {
|
|
97
99
|
if (themeParsed[value]) {
|
|
98
|
-
|
|
100
|
+
if (isWeb && themeParsed[value].variable) {
|
|
101
|
+
return themeParsed[value].variable
|
|
102
|
+
} else {
|
|
103
|
+
if (value && value[0] === '$') {
|
|
104
|
+
return theme[`${value.slice(1)}`]?.val || themeParsed[value]?.val
|
|
105
|
+
}
|
|
106
|
+
}
|
|
99
107
|
}
|
|
100
108
|
let valOrVar: any
|
|
101
109
|
if (key === 'fontFamily') {
|
package/src/hooks/useMedia.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useForceUpdate } from '@tamagui/use-force-update'
|
|
2
2
|
import { useRef } from 'react'
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { useIsomorphicLayoutEffect } from '../constants/platform'
|
|
5
5
|
import { matchMedia } from '../helpers/matchMedia'
|
|
6
6
|
import {
|
|
7
7
|
ConfigureMediaQueryOptions,
|
|
@@ -28,13 +28,15 @@ let conf: MediaQueries | null = null
|
|
|
28
28
|
export const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {
|
|
29
29
|
get(target, key) {
|
|
30
30
|
if (!conf) {
|
|
31
|
-
|
|
31
|
+
console.warn('Warning: accessing media query before init')
|
|
32
|
+
return null
|
|
32
33
|
}
|
|
33
34
|
return Reflect.get(conf, key)
|
|
34
35
|
},
|
|
35
36
|
ownKeys() {
|
|
36
37
|
if (!conf) {
|
|
37
|
-
|
|
38
|
+
console.warn('Warning: accessing media query before init')
|
|
39
|
+
return []
|
|
38
40
|
}
|
|
39
41
|
return Object.keys(conf)
|
|
40
42
|
},
|
package/src/views/Theme.tsx
CHANGED
|
@@ -9,7 +9,7 @@ import { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'
|
|
|
9
9
|
|
|
10
10
|
export type ThemeProps = {
|
|
11
11
|
disableThemeClass?: boolean
|
|
12
|
-
name: ThemeName | null
|
|
12
|
+
name: Exclude<ThemeName, number> | null
|
|
13
13
|
children?: any
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -21,19 +21,19 @@ export const Theme = (props: ThemeProps) => {
|
|
|
21
21
|
console.warn('Error, no themes in context', props)
|
|
22
22
|
return props.children
|
|
23
23
|
}
|
|
24
|
-
|
|
25
|
-
const nextNameParent = `${name}-${parentName}`
|
|
26
|
-
const nextNameParentParent = `${name}-${parent.parentName}`
|
|
27
|
-
const
|
|
24
|
+
|
|
25
|
+
const nextNameParent = `${props.name}-${parentName}`
|
|
26
|
+
const nextNameParentParent = `${props.name}-${parent.parentName}`
|
|
27
|
+
const name = !props.name
|
|
28
28
|
? null
|
|
29
|
-
: name in themes
|
|
30
|
-
? name
|
|
29
|
+
: props.name in themes
|
|
30
|
+
? props.name
|
|
31
31
|
: nextNameParent in themes
|
|
32
32
|
? nextNameParent
|
|
33
33
|
: nextNameParentParent in themes
|
|
34
34
|
? nextNameParentParent
|
|
35
35
|
: null
|
|
36
|
-
const theme =
|
|
36
|
+
const theme = name ? themes[name] : null
|
|
37
37
|
const themeManager = useConstant<ThemeManager | null>(() => {
|
|
38
38
|
if (!theme) {
|
|
39
39
|
return null
|
|
@@ -49,14 +49,16 @@ export const Theme = (props: ThemeProps) => {
|
|
|
49
49
|
if (!themeManager) {
|
|
50
50
|
return
|
|
51
51
|
}
|
|
52
|
-
|
|
52
|
+
if (name) {
|
|
53
|
+
themeManager.setActiveTheme({ name, theme, parentName })
|
|
54
|
+
}
|
|
53
55
|
return parent.onChangeTheme((next) => {
|
|
54
56
|
if (next) {
|
|
55
57
|
themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })
|
|
56
58
|
setParentName(next)
|
|
57
59
|
}
|
|
58
60
|
})
|
|
59
|
-
}, [themes,
|
|
61
|
+
}, [themes, name, parentName])
|
|
60
62
|
|
|
61
63
|
if (!name || !theme) {
|
|
62
64
|
return props.children
|
|
@@ -74,16 +76,18 @@ export const Theme = (props: ThemeProps) => {
|
|
|
74
76
|
if (props.disableThemeClass) {
|
|
75
77
|
return contents
|
|
76
78
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
79
|
+
if (name) {
|
|
80
|
+
const color = themes[name]?.['color']?.['variable']
|
|
81
|
+
return (
|
|
82
|
+
<div
|
|
83
|
+
className={getThemeParentClassName(props.name)}
|
|
84
|
+
// in order to provide currentColor, set color by default
|
|
85
|
+
style={{ display: 'contents', color }}
|
|
86
|
+
>
|
|
87
|
+
{contents}
|
|
88
|
+
</div>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
87
91
|
}
|
|
88
92
|
|
|
89
93
|
return contents
|
package/types.d.ts
CHANGED
|
@@ -542,7 +542,7 @@ export declare const Stack: StaticComponent;
|
|
|
542
542
|
export declare const Text: StaticComponent;
|
|
543
543
|
export declare type ThemeProps = {
|
|
544
544
|
disableThemeClass?: boolean;
|
|
545
|
-
name: ThemeName | null;
|
|
545
|
+
name: Exclude<ThemeName, number> | null;
|
|
546
546
|
children?: any;
|
|
547
547
|
};
|
|
548
548
|
export declare const Theme: (props: ThemeProps) => any;
|