Merge pull request #18 from imdevan/example-code-snippets

Author: imdevan

examples/babel.config.js

@@ -2,5 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

examples/example-src-files/CodeSnippet.tsx

@@ -0,0 +1,84 @@
+
+import React, { useState } from 'react';
+import {
+  LayoutChangeEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useColorScheme,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { ghcolors, tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface CodeSnippetProps {
+  code: string;
+}
+
+export default function CodeSnippet({ code }: CodeSnippetProps): JSX.Element {
+  const colorScheme = useColorScheme();
+  const backgroundColor = colorScheme === 'dark' ? '#333' : '#f5f5f5';
+  const color = colorScheme === 'dark' ? '#fff' : '#222';
+  const syntaxStyle = colorScheme === 'dark' ? tomorrow : ghcolors;
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const height = useSharedValue(0);
+  const contentHeight = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: height.value,
+  }));
+
+  const toggle = () => {
+    height.value = withTiming(isExpanded ? 0 : contentHeight.value, {
+      duration: 300,
+    });
+    setIsExpanded(!isExpanded);
+  };
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    contentHeight.value = event.nativeEvent.layout.height;
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor }]}>
+      <Pressable onPress={toggle} style={styles.header}>
+        <Text style={[styles.headerText, { color }]}>
+          {isExpanded ? 'Hide Code' : 'Show Code'}
+        </Text>
+      </Pressable>
+      <Animated.View style={animatedStyle}>
+        <View onLayout={onLayout} style={styles.codeContainer}>
+          <SyntaxHighlighter language='jsx' style={syntaxStyle}>
+            {code}
+          </SyntaxHighlighter>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+    borderRadius: 5,
+    overflow: 'hidden',
+  },
+  header: {
+    padding: 10,
+  },
+  headerText: {
+    fontWeight: 'bold',
+  },
+  codeContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

examples/example-src-files/example.tsx

@@ -6,6 +6,7 @@ import DropDownPicker, {
   ItemType,
   ValueType,
 } from 'react-native-dropdown-picker';
+import CodeSnippet from './CodeSnippet';
 
 // Omit these types from the example props
 type CommonOmitKeys = 'setValue' | 'value' | 'open' | 'items' | 'setOpen';
@@ -23,6 +24,7 @@ type MultipleDropdownProps<T extends ValueType> = Omit<
 export interface ExampleProps {
   title: string;
   description?: string;
+  code?: string;
   placeholder?: string;
   multipleText?: string;
   items?: Array<ItemType<ValueType>>;
@@ -154,6 +156,31 @@ export default function DropDownPickerExample({
             else setSingleValue(null);
           }}
         />
+
+          <CodeSnippet
+            code={`<DropDownPicker              
+${dropdownProps ? 
+Object.entries(dropdownProps || {})
+  .map(([key, value]) => {
+    if (typeof value === 'string') {
+      return `  ${key}='${value}'`;
+    }
+    return `  ${key}={${JSON.stringify(value)}}`;
+  })
+  .join('\n') + '\n\n' : ''}  /* Boilerplate */
+  open={open}              
+  items={items}
+  setOpen={setOpen}
+  setItems={setItems}
+  theme={theme}
+  placeholder={placeholder}
+${isMultiple ? 
+`  setValue={setMultiValue}
+  value={multiValue}` : 
+`  setValue={setSingleValue}
+  value={singleValue}`}
+/>`}
+          />
       </View>
     </View>
   );