Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(adapt): Adapt.Contents forwards space props when they exist
- Loading branch information
Showing
7 changed files
with
125 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { | ||
| MediaQueryKey, | ||
| isTouchable, | ||
| isWeb, | ||
| useIsomorphicLayoutEffect, | ||
| withStaticProperties, | ||
| } from '@tamagui/core' | ||
| import { createContext, createElement, useContext, useMemo, useState } from 'react' | ||
|
|
||
| export type AdaptProps = { | ||
| when?: MediaQueryKey | ||
| platform?: 'native' | 'web' | 'touch' | ||
| children?: any | ||
| } | ||
|
|
||
| type Component = (props: any) => any | ||
| type AdaptParentContextI = { | ||
| Contents: Component | ||
| setWhen: (when: MediaQueryKey) => any | ||
| } | ||
|
|
||
| const AdaptParentContext = createContext<AdaptParentContextI | null>(null) | ||
|
|
||
| // forward props | ||
| export const AdaptContents = (props: any) => { | ||
| const context = useContext(AdaptParentContext) | ||
| if (!context || !context.Contents) { | ||
| throw new Error(`Adapt not supported by this component`) | ||
| } | ||
| return createElement(context.Contents, props) | ||
| } | ||
|
|
||
| AdaptContents['shouldForwardSpace'] = true | ||
|
|
||
| export const useAdaptParent = ({ Contents }: { Contents: AdaptParentContextI['Contents'] }) => { | ||
| const [when, setWhen] = useState<MediaQueryKey | null>(null) | ||
|
|
||
| const AdaptProvider = useMemo(() => { | ||
| const context: AdaptParentContextI = { | ||
| Contents, | ||
| setWhen, | ||
| } | ||
|
|
||
| return (props: { children?: any }) => { | ||
| return ( | ||
| <AdaptParentContext.Provider value={context}>{props.children}</AdaptParentContext.Provider> | ||
| ) | ||
| } | ||
| }, [Contents]) | ||
|
|
||
| return { | ||
| AdaptProvider, | ||
| when, | ||
| } | ||
| } | ||
|
|
||
| export const Adapt = withStaticProperties( | ||
| function Adapt({ platform, when, children }: AdaptProps) { | ||
| const context = useContext(AdaptParentContext) | ||
|
|
||
| let enabled = !platform | ||
| if (platform === 'touch') enabled = isTouchable | ||
| if (platform === 'native') enabled = !isWeb | ||
| if (platform === 'web') enabled = isWeb | ||
|
|
||
| useIsomorphicLayoutEffect(() => { | ||
| if (!enabled) return | ||
| context?.setWhen(when as MediaQueryKey) | ||
| }, [when, context, enabled]) | ||
|
|
||
| if (!enabled) { | ||
| return null | ||
| } | ||
|
|
||
| return children | ||
| }, | ||
| { | ||
| Contents: AdaptContents, | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1 @@ | ||
| import { | ||
| MediaQueryKey, | ||
| isTouchable, | ||
| isWeb, | ||
| useIsomorphicLayoutEffect, | ||
| withStaticProperties, | ||
| } from '@tamagui/core' | ||
| import { createContext, createElement, useContext, useMemo, useState } from 'react' | ||
|
|
||
| export type AdaptProps = { | ||
| when?: MediaQueryKey | ||
| platform?: 'native' | 'web' | 'touch' | ||
| children?: any | ||
| } | ||
|
|
||
| type Component = (props: any) => any | ||
| type AdaptParentContextI = { | ||
| Contents: Component | ||
| setWhen: (when: MediaQueryKey) => any | ||
| } | ||
|
|
||
| const AdaptParentContext = createContext<AdaptParentContextI | null>(null) | ||
|
|
||
| export const AdaptContents = () => { | ||
| const context = useContext(AdaptParentContext) | ||
| if (!context || !context.Contents) { | ||
| throw new Error(`Missing parent adapatable component, Adapt not supported here`) | ||
| } | ||
| return createElement(context.Contents) | ||
| } | ||
|
|
||
| export const useAdaptParent = ({ Contents }: { Contents: AdaptParentContextI['Contents'] }) => { | ||
| const [when, setWhen] = useState<MediaQueryKey | null>(null) | ||
|
|
||
| const AdaptProvider = useMemo(() => { | ||
| const context: AdaptParentContextI = { | ||
| Contents, | ||
| setWhen, | ||
| } | ||
|
|
||
| return (props: { children?: any }) => ( | ||
| <AdaptParentContext.Provider value={context}>{props.children}</AdaptParentContext.Provider> | ||
| ) | ||
| }, [Contents]) | ||
|
|
||
| return { | ||
| AdaptProvider, | ||
| when, | ||
| } | ||
| } | ||
|
|
||
| export const Adapt = withStaticProperties( | ||
| function Adapt({ platform, when, children }: AdaptProps) { | ||
| const context = useContext(AdaptParentContext) | ||
|
|
||
| let enabled = !platform | ||
| if (platform === 'touch') enabled = isTouchable | ||
| if (platform === 'native') enabled = !isWeb | ||
| if (platform === 'web') enabled = isWeb | ||
|
|
||
| useIsomorphicLayoutEffect(() => { | ||
| if (!enabled) return | ||
| context?.setWhen(when as MediaQueryKey) | ||
| }, [when, context, enabled]) | ||
|
|
||
| if (!enabled) { | ||
| return null | ||
| } | ||
|
|
||
| return children | ||
| }, | ||
| { | ||
| Contents: AdaptContents, | ||
| } | ||
| ) | ||
| export * from './Adapt' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters