From 7e9a7d2b81c52e2191239d997cdc17d5f4196509 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Thu, 15 Jul 2021 20:49:49 +0200 Subject: basic accordion for tweaks --- app/components/tweaks/tweaks.tsx | 196 ++++++++++++++++++++++++++++++++++++++- package.json | 3 + yarn.lock | 19 ++++ 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: + + + { setPhysics({...physics, charge: value}) }} + value={physics.charge} + step={1}/> + + { setPhysics({...physics, linkStrength: value}) }} + value={physics.linkStrength} + step={0.1} + /> + + { setPhysics({...physics, linkIts: value}) }} + value={physics.linkIts} + step={1}/> + + {setPhysics({...physics, collision: !physics.collision})}} + /> + , + }, + { + title: 'Visual', + content: + + + { setPhysics({...physics, particles: value}) }} + value={physics.particles} + step={1}/> + , + }, + { + title: 'Modes', + content: + + + {setPhysics({...physics, collapse: !physics.collapse})}} + /> + + {setPhysics({...physics, threedim: !physics.threedim})}} + /> + + }, + ]; + + const [activeSections, setActiveSections] = useState([]); + + const setSections = (sections) => { + setActiveSections( + sections.includes(undefined) ? [] : sections + ); + }; + + const renderHeader = (section, _, isActive) => { return ( - + + {section.title} + + ); + }; + + const renderContent = (section, _, isActive) => { + return ( + + {section.content} + + ); + } + if (true) { + return( + + + + + + ) + } else { + return ( + {setPhysics({...physics, threedim: !physics.threedim})}} /> - ) + );} }) + +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/react-native@0.63.2": 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" -- cgit v1.2.3