diff options
Diffstat (limited to 'app/components')
| -rw-r--r-- | app/components/tweaks/tweaks.tsx | 196 |
1 files changed, 191 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, + }, +}); |