fix: navbars work not with carousel; feature: buttons for selecting g…

…raph
jcw780 · Jul 13, 2020 · f252d66 · f252d66
1 parent 2e20fb2
commit f252d66
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -321,9 +321,9 @@ class App extends React.Component<{},{}> {
 	}
 	componentDidMount(){
 		this.links.parameters.push(
-			['Shell Parameters', this.SFCref], 
-			['Target Parameters', this.TFCref], 
-			['Settings', this.Settingsref]
+			['Shell Parameters', this.SFCref.current!.scrollRef], 
+			['Target Parameters', this.TFCref.current!.scrollRef], 
+			['Settings', this.Settingsref.current!.scrollRef]
 		);
 		this.navRef.current!.updateAll();
 	}

diff --git a/src/components/Charts.tsx b/src/components/Charts.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Chart from 'chart.js';
 import {Scatter, defaults} from 'react-chartjs-2';
 import 'chartjs-plugin-annotation';
-import {Button, Collapse, Row, Col, Carousel} from 'react-bootstrap';
+import {Button, Collapse, Row, Col, Carousel, ToggleButtonGroup, ToggleButton, ButtonGroup} from 'react-bootstrap';
 import {Icon} from 'semantic-ui-react';
 
 import * as T from './commonTypes';
@@ -103,7 +103,7 @@ export class SingleChart extends React.Component<singleChartProps, singleChartSt
             );
         }else{
             return(
-                <div>
+                <div ref={this.scrollRef}>
                     {this.renderContent()}
                 </div>
             );
@@ -122,9 +122,28 @@ interface subGroupProps {
 class SubGroup extends React.Component<subGroupProps, {index: number}>{
     public static defaultProps = {updateLinks: false, carousel: true};
     state = {index: 0};
-    private handleSelect = (selectedIndex, e) => {
+    scrollRef = React.createRef<any>();
+    private handleSelect = (selectedIndex:number, e) => {
         this.setState({index: selectedIndex});
     }
+    private handleSelectButton = event => {
+        this.setState({index: parseInt(event.target.value)});
+    }
+    private addButtons = () => {
+        return (
+            <ToggleButtonGroup toggle 
+                type="radio" name="radio" 
+                value={this.state.index}>
+                {this.props.config.map((config, i) => {
+                    return(
+                    <ToggleButton key={i} value={i} type="radio" onChange={this.handleSelectButton}>
+                        {config[singleChartIndex.name]}
+                    </ToggleButton>
+                    );
+                })}
+            </ToggleButtonGroup>
+        );
+    }
     private addChart = () => {
         const {props} = this;
         const singleChart = (value, i) : JSX.Element => {
@@ -155,29 +174,34 @@ class SubGroup extends React.Component<subGroupProps, {index: number}>{
             return chartTarget.map(singleChart);
         }
     }
-    //private addChart = this.addChartInternal();
     render(){
         if(this.props.carousel){
             return (
-                <Carousel activeIndex={this.state.index} onSelect={this.handleSelect}>
-                    {this.addChart()}
-                </Carousel>
+                <div ref={this.scrollRef}>
+                    {this.addButtons()}
+                    <Carousel
+                        interval={null}
+                        activeIndex={this.state.index} 
+                        onSelect={this.handleSelect}>
+                        {this.addChart()}
+                    </Carousel>
+                </div>
             );
         }else{
-            return (
-                <>
-                    {this.addChart()}
-                </>
-            );
+            return (<>{this.addChart()}</>);
         }
     }
     private updateLinks = () => {
-        const {links, config} = this.props; //Initialize Links Names
+        const {links, config, carousel} = this.props; //Initialize Links Names
         for(const[i, chart] of config.entries()){
             if(links.length === i){ links.push(['', React.createRef<SingleChart>()]);}
             const link = links[i];
-            link[T.singleLinkIndex.name] = chart[singleChartIndex.name]; 
-            link[T.singleLinkIndex.ref] = chart[singleChartIndex.ref];
+            link[T.singleLinkIndex.name] = chart[singleChartIndex.name];
+            if(carousel){
+                link[T.singleLinkIndex.ref] = this.scrollRef;
+            }else{
+                link[T.singleLinkIndex.ref] = chart[singleChartIndex.ref].current!.scrollRef;
+            }
         }
     }
     componentDidMount(){this.updateLinks();}

diff --git a/src/components/Navbar/NavDropdownContainer.tsx b/src/components/Navbar/NavDropdownContainer.tsx
@@ -9,9 +9,10 @@ interface propsT{
     links: T.singleLinkT[], title: string,
 }
 export class NavDropdownContainer extends React.Component<propsT>{
-    private makeScroller = (ref : T.chartRefT | T.parameterRefT) => {
-        const scrollToRef = (ref : T.chartRefT | T.parameterRefT) => {
-            window.scrollTo(0, ref.current!.scrollRef.current!.offsetTop);
+    private makeScroller = (ref : React.RefObject<any>) => {
+        const scrollToRef = (ref : React.RefObject<any>) => {
+            const {current} = ref;
+            if(current !== undefined || current !== null) window.scrollTo(0, ref.current!.offsetTop);
         }
         return _ => scrollToRef(ref);
     }

diff --git a/src/components/commonTypes.tsx b/src/components/commonTypes.tsx
@@ -84,7 +84,7 @@ export type chartRefT = React.RefObject<SingleChart>;
 
 //Navbar Links
 export enum singleLinkIndex {name, ref}
-export type singleLinkT = [string, chartRefT | parameterRefT];
+export type singleLinkT = [string, React.RefObject<any>];
 export type parameterRefT = React.RefObject<ShellFormsContainer 
 | TargetFormsContainer | SettingsBar>;
 export type linkKeyT = chartT | 'parameters';