basic accordion for tweaks

3 files changed, 213 insertions, 5 deletions

diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 431191c..778cfd0 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -1,11 +1,13 @@
 import * as React from "react"
-import { StyleProp, Switch, TextStyle, View, ViewStyle } from "react-native"
+import { ScrollView, StyleProp, Switch, TextStyle, TouchableOpacity, View, ViewStyle, StyleSheet } from "react-native"
 import { observer } from "mobx-react-lite"
 import { color, typography } from "../../theme"
 import { Text } from "../"
 import { flatten } from "ramda"
 import Slider from "@react-native-community/slider"
 import { useState } from "react"
+import Accordion from 'react-native-collapsible/Accordion'
+import * as Animatable from 'react-native-animatable'
 
 const CONTAINER: ViewStyle = {
     justifyContent: "center",
@@ -29,12 +31,128 @@ export interface TweaksProps {
 /**
  * Describe your component here
  */
-export const Tweaks = observer(function Tweaks(props: TweaksProps) {
+export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element {
     const { style, physics, setPhysics } = props
-    const styles = flatten([CONTAINER, style])
+//    const styles = flatten([CONTAINER, style])
 
+    const content = [
+        {
+            title: "Physics",
+            content:
+        <View>
+        <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge}/>
+            <Slider style={{height: 40 , width: "90%"}}
+                minimumValue={-400}
+                maximumValue={100}
+        onValueChange={(value) => { setPhysics({...physics, charge: value}) }}
+                value={physics.charge}
+                step={1}/>
+        <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength}/>
+            <Slider style={{height: 40 , width: "90%"}}
+                minimumValue={0}
+                maximumValue={2}
+                    onValueChange={(value) => { setPhysics({...physics, linkStrength: value}) }}
+                value={physics.linkStrength}
+                step={0.1}
+                />
+            <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts}/>
+            <Slider style={{ height: 40 , width: "90%"}}
+                minimumValue={1}
+                maximumValue={10}
+                    onValueChange={(value) => { setPhysics({...physics, linkIts: value}) }}
+                value={physics.linkIts}
+                step={1}/>
+            <Text preset="fieldLabel" text="Collision"/>
+            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
+                value={physics.collision}
+                    onValueChange={()=>{setPhysics({...physics, collision: !physics.collision})}}
+                />
+            </View>,
+        },
+        {
+            title: 'Visual',
+            content:
+            <View>
+            <Text preset="fieldLabel" text={"Particles: " + physics.particles}/>
+            <Slider style={{ height: 40 , width: "90%"}}
+                minimumValue={0}
+                maximumValue={5}
+                    onValueChange={(value) => { setPhysics({...physics, particles: value}) }}
+                value={physics.particles}
+                step={1}/>
+            </View>,
+        },
+        {
+            title: 'Modes',
+            content:
+        <View>
+            <Text preset="fieldLabel" text="Expandable Graph"/>
+            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
+                value={physics.collapse}
+                    onValueChange={()=>{setPhysics({...physics, collapse: !physics.collapse})}}
+                />
+            <Text preset="fieldLabel" text="3D"/>
+            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
+                value={physics.threedim}
+                    onValueChange={()=>{setPhysics({...physics, threedim: !physics.threedim})}}
+                />
+        </View>
+        },
+    ];
+
+    const [activeSections, setActiveSections] = useState([]);
+
+    const setSections = (sections) => {
+    setActiveSections(
+      sections.includes(undefined) ? [] : sections
+    );
+  };
+
+  const renderHeader = (section, _, isActive) => {
     return (
-        <View style={{position: "absolute", top: "5%", left: "5%", zIndex: 100, width: "20%", backgroundColor: "#000000", padding: 20}}>
+      <Animatable.View
+        duration={400}
+        style={[styles.header, isActive ? styles.active : styles.inactive]}
+        transition="backgroundColor"
+      >
+        <Text style={styles.headerText}>{section.title}</Text>
+      </Animatable.View>
+    );
+  };
+
+  const renderContent = (section, _, isActive) => {
+    return (
+      <Animatable.View
+        duration={400}
+        style={[styles.content, isActive ? styles.active : styles.inactive]}
+        transition="backgroundColor"
+      >
+          {section.content}
+      </Animatable.View>
+    );
+  }
+    if (true) {
+        return(
+             <View style={styles.container}>
+        <ScrollView contentContainerStyle={{ paddingTop: 30 }}>
+            <Accordion
+            activeSections={activeSections}
+            sections={content}
+            touchAbleComponent={TouchableOpacity}
+            expandMultiple={true}
+            renderHeader = {renderHeader}
+                        renderContent = {renderContent}
+                duration={200}
+                onChange={setSections}
+                renderAsFlatList={false}
+
+            />
+            </ScrollView>
+            </View>
+        )
+    } else {
+    return (
+        <View style={{position: "absolute", top: "5%", left: "5%", zIndex: 100, width: 300, backgroundColor: "#000000", padding: 20}}>
         <Text preset="bold" text="Physics"/>
         <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge}/>
             <Slider style={{height: 40 , width: "90%"}}
@@ -83,5 +201,73 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps) {
                     onValueChange={()=>{setPhysics({...physics, threedim: !physics.threedim})}}
                 />
         </View>
-    )
+    );}
 })
+
+const styles = StyleSheet.create ({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+    paddingTop: 10,
+    position: "absolute",
+    zIndex: 100,
+    left: 50,
+    top: 50,
+    width: 300,
+  },
+  title: {
+    textAlign: 'left',
+    fontSize: 22,
+    fontWeight: '300',
+    marginBottom: 20,
+    paddingLeft: 20,
+  },
+  header: {
+    backgroundColor: '#F5FCFF',
+    padding: 10,
+    textAlign: "left",
+  },
+  headerText: {
+    textAlign: 'left',
+    paddingLeft: 30,
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  content: {
+    padding: 20,
+    backgroundColor: '#fff',
+  },
+  active: {
+    backgroundColor: 'rgba(255,255,255,1)',
+  },
+  inactive: {
+    backgroundColor: 'rgba(245,252,255,1)',
+  },
+  selectors: {
+    marginBottom: 10,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  selector: {
+    backgroundColor: '#F5FCFF',
+    padding: 10,
+  },
+  activeSelector: {
+    fontWeight: 'bold',
+  },
+  selectTitle: {
+    fontSize: 14,
+    fontWeight: '500',
+    padding: 10,
+  },
+  multipleToggle: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginVertical: 30,
+    alignItems: 'center',
+  },
+  multipleToggle__title: {
+    fontSize: 16,
+    marginRight: 8,
+  },
+});
diff --git a/package.json b/package.json
index 57ee0bd..6180a25 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@react-native-community/slider": "^3.0.3",
     "@react-navigation/native": "5.9.3",
     "@react-navigation/stack": "5.12.8",
+    "@types/react-native-collapsible": "^0.11.0",
     "@unimodules/core": "6.0.0",
     "apisauce": "2.0.0",
     "d3-force": "^3.0.0",
@@ -50,6 +51,8 @@
     "react-force-graph": "^1.41.7",
     "react-force-graph-2d": "^1.23.8",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-animatable": "^1.3.3",
+    "react-native-collapsible": "^1.6.0",
     "react-native-gesture-handler": "1.10.3",
     "react-native-keychain": "6.2.0",
     "react-native-safe-area-context": "3.1.9",
diff --git a/yarn.lock b/yarn.lock
index 13088af..8b243fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3519,6 +3519,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-native-collapsible@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@types/react-native-collapsible/-/react-native-collapsible-0.11.0.tgz#2f8c42843d1602709ad8c9cd6180bc690dbd0879"
+  integrity sha512-UL4MgDKjevhbGL13t4G7WAxFzlPPzbB5LuHyinEwrXuROt3EujoEc8M6RD244nNEREYDqGVhvCVicx86wCRW/w==
+  dependencies:
+    react-native-collapsible "*"
+
 "@types/[email protected]":
   version "0.63.2"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.2.tgz#428a4d71351ccbc31ab170b5f32477c7ce78dfd7"
@@ -16014,11 +16021,23 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-native-animatable@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
+  integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-clean-project@^3.6.3:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/react-native-clean-project/-/react-native-clean-project-3.6.4.tgz#7589fffe82a184f1bcc0554d6a95c7bac4b1e9ef"
   integrity sha512-bQij/EktcOb9VnEUg+UaC4bePWlGeqsLk0dyCJyQmHc4s1Cw7lo+cnnFVbuyFnjT0sEMSkDvDF0/rLD6437XMw==
 
+react-native-collapsible@*, react-native-collapsible@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-1.6.0.tgz#ca261ffff16914f872059bb0972e3a78c4b37f9c"
+  integrity sha512-beZjdgbT9Y/Pg591Xy5XkKG20HffJiVad4n9bfcUF/f783A+tvOVXnqvbS58Lkaym93mi4jcDPMuW9Vc1t6rqg==
+
 react-native-flipper@^0.34.0:
   version "0.34.0"
   resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.34.0.tgz#7df1f38ba5d97a9321125fe0fccbe47d99e6fa1d"