summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/components/tweaks/tweaks.tsx196
-rw-r--r--package.json3
-rw-r--r--yarn.lock19
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"
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 16:31:31 +0000