chore(demo): wip zustand

demo/components/HeaderButtons.tsx → demo/components/HeaderRight.tsx

@@ -5,9 +5,8 @@ import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useToggleLegacyMode } from '../state/ToggleLegacyContext';
 import { useLegacyMode } from '../state/LegacyContext';
-import snippets from '../snippets';
 
-const HeaderRight = memo(function HeaderRight({ tintColor, snippetId }: any) {
+const HeaderRight = memo(function HeaderRight({ tintColor }: any) {
  const toggleUseLegacy = useToggleLegacyMode();
  const navigation = useNavigation();
  const legacyMode = useLegacyMode();
@@ -26,12 +25,11 @@ const HeaderRight = memo(function HeaderRight({ tintColor, snippetId }: any) {
  icon="xml"
  color={tintColor}
  style={{ marginHorizontal: 0 }}
- onPress={() =>
- navigation.navigate('source', snippets[snippetId].html as any)
- }
+ onPress={() => navigation.navigate('source')}
  />
  <Appbar.Action
  icon="file-tree"
+ disabled={legacyMode}
  color={tintColor}
  style={{ marginHorizontal: 0 }}
  onPress={() => navigation.navigate('ttree')}

demo/components/Snippet.tsx

@@ -6,6 +6,7 @@ import Constants from 'expo-constants';
 import { useThemeColor } from './Themed';
 import snippets from '../snippets';
 import { useTTree } from '../state/TTreeContextProvider';
+import { useLoadedHTML } from '../state/LoadedHTMLContext';
 
 const DEFAULT_PROPS: Pick<RenderHTMLProps, 'onLinkPress' | 'debug'> = {
  onLinkPress(evt, href) {
@@ -47,6 +48,7 @@ const Snippet = React.memo(
  }) => {
  const { width: contentWidth } = useWindowDimensions();
  const { setTTree } = useTTree();
+ const { setHTML } = useLoadedHTML();
  const additionalProps = snippets[exampleId].props || {};
  const baseStyle = {
  color: useThemeColor({}, 'text'),
@@ -90,6 +92,7 @@ const Snippet = React.memo(
  debug={false}
  systemFonts={Constants.systemFonts}
  onTTreeChange={setTTree}
+ onHTMLLoaded={setHTML}
  />
  );
  return (

demo/navigation/index.tsx

@@ -12,6 +12,10 @@ import {
 } from 'react-native-paper';
 import merge from 'deepmerge';
 import RootNavigator from './RootNavigator';
+import SelectedSnippetContext, {
+ defaultSelectedSnippet
+} from '../state/SelectedSnippetContext';
+import LoadedHTMLContext from '../state/LoadedHTMLContext';
 
 const CombinedLightTheme = merge(PaperLightTheme, NavLightTheme);
 const CombinedDarkTheme = merge(PaperDarkTheme, NavDarkTheme);
@@ -21,16 +25,30 @@ export default function Navigation({
 }: {
  colorScheme: ColorSchemeName;
 }) {
+ const [selectedSnippet, setSelectedSnippet] = React.useState(
+ defaultSelectedSnippet
+ );
+ const [loadedHTML, setLoadedHTML] = React.useState<string | null>(null);
  const theme = colorScheme === 'dark' ? CombinedDarkTheme : CombinedLightTheme;
  return (
  <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
- <PaperProvider theme={theme}>
- <NavigationContainer
- // linking={LinkingConfiguration}
- theme={theme}>
- <RootNavigator />
- </NavigationContainer>
- </PaperProvider>
+ <LoadedHTMLContext.Provider
+ value={{ html: loadedHTML, setHTML: setLoadedHTML }}>
+ <SelectedSnippetContext.Provider value={selectedSnippet}>
+ <PaperProvider theme={theme}>
+ <NavigationContainer
+ onStateChange={(s) => {
+ const drawer = s?.routes[0];
+ const index = drawer!.state?.index as number;
+ setSelectedSnippet(drawer!.state?.routeNames![index] as any);
+ }}
+ // linking={LinkingConfiguration}
+ theme={theme}>
+ <RootNavigator />
+ </NavigationContainer>
+ </PaperProvider>
+ </SelectedSnippetContext.Provider>
+ </LoadedHTMLContext.Provider>
  </View>
  );
 }

demo/package.json

@@ -41,7 +41,8 @@
  "react-native-web": "~0.13.12",
  "react-native-webview": "10.7.0",
  "react-syntax-highlighter": "6.0.4",
- "rnrh-legacy": "workspace:*"
+ "rnrh-legacy": "workspace:*",
+ "zustand": "^3.2.0"
  },
  "devDependencies": {
  "@babel/core": "~7.12.3",

demo/screens/HomeScreen.tsx

@@ -8,7 +8,7 @@ import {
 import { useTheme } from '@react-navigation/native';
 import { StackScreenProps } from '@react-navigation/stack';
 import VersionDisplay from '../components/VersionDisplay';
-import HeaderRight from '../components/HeaderButtons';
+import HeaderRight from '../components/HeaderRight';
 import SnippetScreen from '../screens/SnippetScreen';
 import snippets from '../snippets';
 import { Platform } from 'react-native';
@@ -70,7 +70,7 @@ export default function HomeScreen({}: StackScreenProps<any>) {
  options={{
  title: snippets[snippetId].name,
  headerRight: ({ tintColor }) => (
- <HeaderRight tintColor={tintColor} snippetId={snippetId} />
+ <HeaderRight tintColor={tintColor} />
  )
  }}
  key={snippets[snippetId].name}

demo/screens/SourceScreen.tsx

@@ -1,9 +1,9 @@
-import { StackScreenProps } from '@react-navigation/stack';
 import React, { PropsWithChildren } from 'react';
-import { useColorScheme, ViewProps } from 'react-native';
+import { useColorScheme, View, Text, ViewProps } from 'react-native';
 import SyntaxHighlighter from 'react-native-syntax-highlighter';
 import { solarizedlight, darcula } from 'react-syntax-highlighter/styles/prism';
 import BidirectionalScrollView from '../components/BidirectionalScrollView';
+import { useLoadedHTML } from '../state/LoadedHTMLContext';
 
 export interface SourceRenderer {
  htmlSource: string;
@@ -15,10 +15,10 @@ function Container({ children }: PropsWithChildren<ViewProps>) {
  );
 }
 
-export default function SourceScreen({ route }: StackScreenProps<any>) {
- const html = route.params;
+export default function SourceScreen() {
+ const { html } = useLoadedHTML();
  const colorMode = useColorScheme();
- return (
+ return html ? (
  <SyntaxHighlighter
  language="html"
  fontSize={12}
@@ -27,5 +27,9 @@ export default function SourceScreen({ route }: StackScreenProps<any>) {
  style={colorMode === 'dark' ? darcula : solarizedlight}>
  {html}
  </SyntaxHighlighter>
+ ) : (
+ <View>
+ <Text>HTML unavailable</Text>
+ </View>
  );
 }

demo/state/LoadedHTMLContext.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+const LoadedHTMLContext = React.createContext<{
+ html: string | null;
+ setHTML: (html: string) => void;
+}>({
+ html: null,
+ setHTML: () => void 0
+});
+
+export const useLoadedHTML = () => React.useContext(LoadedHTMLContext);
+
+export default LoadedHTMLContext;

demo/state/SelectedSnippetContext.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import snippets from '../snippets';
+
+export const defaultSelectedSnippet: keyof typeof snippets = 'whitespace';
+
+const SelectedSnippetContext = React.createContext(defaultSelectedSnippet);
+
+export const useSelectedSnippet = () =>
+ React.useContext(SelectedSnippetContext);
+
+export default SelectedSnippetContext;

demo/state/TTreeContextProvider.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { TNode } from '@native-html/transient-render-engine';
 
-const TTreeContext = React.createContext<{ ttree: TNode | null, setTTree: (ttree: TNode) => void; }>({ ttree: null, setTTree: () => null });
+const TTreeContext = React.createContext<{
+ ttree: TNode | null;
+ setTTree: (ttree: TNode) => void;
+}>({ ttree: null, setTTree: () => null });
 export const useTTree = () => React.useContext(TTreeContext);
-const TTreeContextProvider = TTreeContext.Provider
+const TTreeContextProvider = TTreeContext.Provider;
 
 export default TTreeContextProvider;