kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-16 19:51:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add feature preview flag

Browse Source
This commit is contained in:
Mark Lawlor
2022-05-05 13:38:53 +10:00
parent c6ef6391fc
commit 9397e67cff
6 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -203,11 +203,11 @@ function MyAppsProviders ({ children }) {
You don't need to provide these props if you are using Babel or spreading the CLI output. You don't need to provide these props if you are using Babel or spreading the CLI output.
| Prop | Values | Default | Description | | Prop | Values | Default | Description |
| -------- | ------------------------------------------------------------------- | ----------- | ----------------------------------------- | | -------- | ----------------------------------------------------- | ----------- | ----------------------------------------- |
| platform | `web`, `native`, `ios`, `android`, `windows`, `macos`, `web-inline` | Platform.OS | Specifies how the styles are transformed. | | platform | `web`, `native`, `ios`, `android`, `windows`, `macos` | Platform.OS | Specifies how the styles are transformed. |
| style | Compiled style object | | | | style | Compiled style object | | |
| media | Compiled media object | | | | media | Compiled media object | | |
## Component API ## Component API

2
__tests__/custom-tailwindcss/platform-prefixes.ts
View File

@@ -52,7 +52,7 @@ tailwindRunner("Platform Prefixes", [
"web_w-px.0": { width: 1 }, "web_w-px.0": { width: 1 },
}, },
media: { media: {
"web_w-px": ["web-inline"], "web_w-px": ["web"],
}, },
}, },
], ],

2
src/context.ts
View File

@@ -31,3 +31,5 @@ export const TailwindSetColorSchemeContext = createContext<
export const TailwindPlatformContext = createContext<Platform | undefined>( export const TailwindPlatformContext = createContext<Platform | undefined>(
undefined undefined
); );
export const TailwindPreviewContext = createContext<boolean>(false);

2
src/plugin/index.ts
View File

@@ -10,6 +10,4 @@ export default plugin(function ({ addVariant }) {
"native", "native",
nativePlatforms.map((platform) => `@media ${platform}`) nativePlatforms.map((platform) => `@media ${platform}`)
); );
addVariant("web", "@media web-inline");
}); });

19
src/provider.tsx
View File

@@ -7,6 +7,7 @@ import {
TailwindColorSchemeContext, TailwindColorSchemeContext,
TailwindMediaContext, TailwindMediaContext,
TailwindPlatformContext, TailwindPlatformContext,
TailwindPreviewContext,
TailwindSetColorSchemeContext, TailwindSetColorSchemeContext,
TailwindStyleContext, TailwindStyleContext,
} from "./context"; } from "./context";
@@ -16,6 +17,7 @@ export interface TailwindProviderProps {
media?: MediaRecord; media?: MediaRecord;
colorScheme?: ColorSchemeName; colorScheme?: ColorSchemeName;
platform?: typeof Platform.OS | "native"; platform?: typeof Platform.OS | "native";
preview?: boolean;
} }
export function TailwindProvider({ export function TailwindProvider({
@@ -23,6 +25,7 @@ export function TailwindProvider({
media = globalThis.tailwindcss_react_native_media, media = globalThis.tailwindcss_react_native_media,
colorScheme: overrideColorScheme, colorScheme: overrideColorScheme,
platform = Platform.OS, platform = Platform.OS,
preview = false,
children, children,
}: PropsWithChildren<TailwindProviderProps>) { }: PropsWithChildren<TailwindProviderProps>) {
const [colorScheme, setColorScheme] = useState<ColorSchemeName>( const [colorScheme, setColorScheme] = useState<ColorSchemeName>(
@@ -33,13 +36,15 @@ export function TailwindProvider({
<TailwindStyleContext.Provider value={styles}> <TailwindStyleContext.Provider value={styles}>
<TailwindMediaContext.Provider value={media}> <TailwindMediaContext.Provider value={media}>
<TailwindPlatformContext.Provider value={platform}> <TailwindPlatformContext.Provider value={platform}>
<TailwindColorSchemeContext.Provider <TailwindPreviewContext.Provider value={preview}>
value={overrideColorScheme || colorScheme} <TailwindColorSchemeContext.Provider
> value={overrideColorScheme || colorScheme}
<TailwindSetColorSchemeContext.Provider value={setColorScheme}> >
{children} <TailwindSetColorSchemeContext.Provider value={setColorScheme}>
</TailwindSetColorSchemeContext.Provider> {children}
</TailwindColorSchemeContext.Provider> </TailwindSetColorSchemeContext.Provider>
</TailwindColorSchemeContext.Provider>
</TailwindPreviewContext.Provider>
</TailwindPlatformContext.Provider> </TailwindPlatformContext.Provider>
</TailwindMediaContext.Provider> </TailwindMediaContext.Provider>
</TailwindStyleContext.Provider> </TailwindStyleContext.Provider>

3
src/shared/platforms.ts
View File

@@ -1,6 +1,6 @@
import { Platform } from "react-native"; import { Platform } from "react-native";
export type Platform = typeof Platform.OS | "native" | "web-inline"; export type Platform = typeof Platform.OS | "native";
export const platforms: Platform[] = [ export const platforms: Platform[] = [
"android", "android",
@@ -9,7 +9,6 @@ export const platforms: Platform[] = [
"native", "native",
"windows", "windows",
"macos", "macos",
"web-inline",
]; ];
export const nativePlatforms: Platform[] = [ export const nativePlatforms: Platform[] = [