Speed
diff --git a/src/views/Base/RunningJobs/__snapshots__/RunningJobs.test.js.snap b/src/views/Base/RunningJobs/__snapshots__/RunningJobs.test.js.snap
index 7c8fdc9e9..5d758161c 100644
--- a/src/views/Base/RunningJobs/__snapshots__/RunningJobs.test.js.snap
+++ b/src/views/Base/RunningJobs/__snapshots__/RunningJobs.test.js.snap
@@ -14,7 +14,7 @@ exports[`Running Jobs renders should match snapshot 1`] = `
}
>
-
- clickHandler(e, item)} id={"file" + itemIdx}>
- {Name}
-
-
+ clickHandler(e, item)}>
+ {" "}{Name}
{Size === -1 ? "-" : formatBytes(Size, 2)}
{modTime.toLocaleDateString()}
diff --git a/src/views/Explorer/FilesView/FilesView.js b/src/views/Explorer/FilesView/FilesView.js
index 7318432cc..b2a708fde 100644
--- a/src/views/Explorer/FilesView/FilesView.js
+++ b/src/views/Explorer/FilesView/FilesView.js
@@ -1,15 +1,15 @@
import React from "react";
import axiosInstance from "../../../utils/API/API";
-import {Alert, Button, Col, Container, Row, Spinner, Table} from "reactstrap";
+import {Alert, Col, Container, Row, Spinner, Table} from "reactstrap";
import {DropTarget} from "react-dnd";
import FileComponent from "./FileComponent";
import {ItemTypes} from "./Constants";
import {toast} from "react-toastify";
-import {addColonAtLast, changeListVisibility, changeSearchFilter, isEmpty} from "../../../utils/Tools";
+import {addColonAtLast, changeListVisibility, changeSearchFilter, isEmpty, getSortCompareFunction} from "../../../utils/Tools";
import {connect} from "react-redux";
import {getFiles} from "../../../actions/explorerActions";
import {compose} from "redux";
-import {changePath, navigateUp} from "../../../actions/explorerStateActions";
+import {changePath, navigateUp, changeSortFilter} from "../../../actions/explorerStateActions";
import LinkShareModal from "../../Base/LinkShareModal/LinkShareModal";
import ScrollableDiv from "../../Base/ScrollableDiv/ScrollableDiv";
import {FILES_VIEW_HEIGHT} from "../../../utils/Constants";
@@ -90,21 +90,21 @@ function renderOverlay() {
* */
// Provides the up button view in the files view
-function UpButtonComponent({upButtonHandle, gridMode}) {
- if (gridMode === "card") {
- return (
-
- upButtonHandle()}>Go Up
-
- )
- } else {
- return (
- upButtonHandle()} className={"pointer-cursor"}>
-
- Go Up...
- );
- }
-}
+// function UpButtonComponent({upButtonHandle, gridMode}) {
+// if (gridMode === "card") {
+// return (
+//
+// upButtonHandle()}>Go Up
+//
+// )
+// } else {
+// return (
+// upButtonHandle()} className={"pointer-cursor"}>
+//
+// Go Up...
+// );
+// }
+// }
/**
* FilesView component renders files in the file explorer.
@@ -122,6 +122,7 @@ class FilesView extends React.PureComponent {
showLinkShareModal: false,
generatedLink: "",
+
};
this.handleFileClick = this.handleFileClick.bind(this);
this.downloadHandle = this.downloadHandle.bind(this);
@@ -294,14 +295,14 @@ class FilesView extends React.PureComponent {
const {remoteName, remotePath} = this.props.currentPath;
// console.log(fsInfo, files);
if (fsInfo && !isEmpty(fsInfo)) {
- return files.map((item, idx) => {
+ let finalResult = files.reduce((result, item) => {
let {ID, Name} = item;
- // Using fallback as fileName when the ID is not available (for local file system)
+ // Using fallback as fileName when the ID is not available (especially for local file system)
if (ID === undefined) {
ID = Name;
}
if (item.IsDir === isDir) {
- return (
+ result.push(
+ canCopy={fsInfo.Features.Copy} canMove={fsInfo.Features.Move} itemIdx={1}>
);
}
- return null;
- });
+ return result;
+ }, []);
+ return finalResult;
}
};
+ applySortFilter = (sortFilter) => {
+ const {changeSortFilter, containerID} = this.props;
+
+ if(this.props.sortFilter === sortFilter){
+ return changeSortFilter(containerID, sortFilter, (this.props.sortFilterAscending === true ? false : true));
+ }else{
+ return changeSortFilter(containerID, sortFilter, true);
+ }
+
+ }
+
+ // TODO: Dont sort everytime you render
+ // componentDidUpdate (prevProps, prevState) {
+ // const {sortFilter, sortFilterAscending} = this.state;
+ // if(prevState.sortFilter !== sortFilter || prevState.sortFilterAscending !== sortFilterAscending){
+
+ // }
+ // }
render() {
const {isLoading, isDownloadProgress, downloadingItems, generatedLink, showLinkShareModal} = this.state;
- const {connectDropTarget, isOver, files, navigateUp, containerID, gridMode, canDrop} = this.props;
+ const {connectDropTarget, isOver, files, gridMode, canDrop, sortFilter, sortFilterAscending} = this.props;
const {remoteName} = this.props.currentPath;
- // console.log(this.props.searchQuery);
-
if (isLoading || !files) {
return ( Loading
);
} else {
@@ -350,9 +368,7 @@ class FilesView extends React.PureComponent {
renderElement = (
-
- navigateUp(containerID)} gridMode={gridMode}/>
-
+
Directories
@@ -376,45 +392,39 @@ class FilesView extends React.PureComponent {
)
} else {
-
-
+ let filterIconClass = "fa fa-lg fa-arrow-down";
+ if(sortFilterAscending){
+ filterIconClass = "fa fa-lg fa-arrow-up";
+ }
renderElement = (
-
+
-
+
-
- x
- Name
- Size
- Modified
- Actions
-
+
+ this.applySortFilter("name")}>Name {sortFilter === "name" && }
+ this.applySortFilter("size")}>Size {sortFilter === "size" && }
+ this.applySortFilter("modified")}>Modified {sortFilter === "modified" && }
+ Actions
+
- navigateUp(containerID)} gridMode={gridMode}/>
{files.length > 0 ? (
-
Directories
{dirComponentMap}
-
- Files
-
-
-
+ Files
{fileComponentMap}
) :
-
Files
}
@@ -468,11 +478,15 @@ FilesView.defaultProps = defaultProps;
const mapStateToProps = (state, ownProps) => {
- const currentPath = state.explorer.currentPaths[ownProps.containerID];
- const visibilityFilter = state.explorer.visibilityFilters[ownProps.containerID];
- const gridMode = state.explorer.gridMode[ownProps.containerID];
- const searchQuery = state.explorer.searchQueries[ownProps.containerID];
- const loadImages = state.explorer.loadImages[ownProps.containerID];
+ const {currentPaths, visibilityFilters, gridMode, searchQueries, loadImages, sortFilters, sortFiltersAscending} = state.explorer;
+ const {containerID} = ownProps;
+ const currentPath = currentPaths[containerID];
+ const visibilityFilter = visibilityFilters[containerID];
+ const mgridMode = gridMode[containerID];
+ const searchQuery = searchQueries[containerID];
+ const mloadImages = loadImages[containerID];
+ const sortFilter = sortFilters[containerID];
+ const sortFilterAscending = sortFiltersAscending[containerID];
let fsInfo = {};
const {remoteName, remotePath} = currentPath;
@@ -481,7 +495,6 @@ const mapStateToProps = (state, ownProps) => {
const tempRemoteName = remoteName.split(':')[0];
if (state.remote.configs[tempRemoteName])
-
fsInfo = state.remote.configs[tempRemoteName];
}
@@ -496,25 +509,32 @@ const mapStateToProps = (state, ownProps) => {
files = changeListVisibility(files, visibilityFilter);
}
- //Filter according to search query, if ny
+ //Filter according to search query, if any
if (searchQuery) {
files = changeSearchFilter(files, searchQuery);
}
+ files.sort(getSortCompareFunction(sortFilter, sortFilterAscending));
+
}
+ // Sort the files
+
+
return {
files,
currentPath,
fsInfo,
- gridMode,
+ gridMode: mgridMode,
searchQuery,
- loadImages
+ loadImages: mloadImages,
+ sortFilter,
+ sortFilterAscending
}
};
export default compose(
connect(
- mapStateToProps, {getFiles, navigateUp, changePath}
+ mapStateToProps, {getFiles, navigateUp, changePath, changeSortFilter}
),
DropTarget(ItemTypes.FILECOMPONENT, filesTarget, collect)
)(FilesView)
diff --git a/src/views/Explorer/RemoteExplorer/RemoteExplorer.js b/src/views/Explorer/RemoteExplorer/RemoteExplorer.js
index 1fb2d6dcf..426ace4da 100644
--- a/src/views/Explorer/RemoteExplorer/RemoteExplorer.js
+++ b/src/views/Explorer/RemoteExplorer/RemoteExplorer.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {Card, CardBody, CardHeader} from "reactstrap";
+import {Card, CardBody, CardHeader, Container} from "reactstrap";
import RemotesList from "../RemotesList";
import FilesView from "../FilesView/FilesView";
import {addColonAtLast} from "../../../utils/Tools";
@@ -60,31 +60,34 @@ class RemoteExplorer extends React.Component {
const isValidPath = remoteName && remoteName !== "";
+
+
return (
- {/*Render remotes array*/}
+
{(!distractionFreeMode) &&
-
- Remotes
-
-
-
-
+
+ Remotes
+
+
+ {/*Render remotes array*/}
+
+
+ {isValidPath && (
+ <>
+
+
+ >
+ )}
+
+
+
+
}
- {/*Render the files in the selected remote*/}
- {isValidPath &&
-
-
-
-
-
-
- }
-
);
diff --git a/src/views/Explorer/RemoteExplorer/__snapshots__/RemoteExplorer.test.js.snap b/src/views/Explorer/RemoteExplorer/__snapshots__/RemoteExplorer.test.js.snap
index ad8145ca8..5e6be8496 100644
--- a/src/views/Explorer/RemoteExplorer/__snapshots__/RemoteExplorer.test.js.snap
+++ b/src/views/Explorer/RemoteExplorer/__snapshots__/RemoteExplorer.test.js.snap
@@ -13,28 +13,21 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
-
-
-
-
-
-
-
-
-
+
+
+
+
+
diff --git a/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js b/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js
index d4376df51..aeb2a4f4f 100644
--- a/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js
+++ b/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js
@@ -1,5 +1,5 @@
import React from "react";
-import {Button, Card, CardBody, CardHeader, Col, Row} from "reactstrap";
+import {Button, Col, Row} from "reactstrap";
import RemoteExplorer from "../RemoteExplorer";
import HTML5Backend from "react-dnd-html5-backend";
@@ -11,18 +11,33 @@ import * as PropTypes from 'prop-types';
import {changeDistractionFreeMode, changeNumCols} from "../../../actions/explorerActions";
import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary";
-
-function RemoteExplorerList({cols, distractionFreeMode}) {
+import singlePaneImg from '../../../assets/img/single-pane.png';
+import doublePaneImg from '../../../assets/img/double-pane1.png';
+import triplePaneImg from '../../../assets/img/triple-pane.png';
+function RemoteExplorerList({cols, distractionFreeMode, splitMode}) {
let remoteExplorers = [];
- const lgSize = 12 / cols;
- for (let i = 0; i < cols; i++) {
+ if(splitMode === "horizontal"){
+ const lgSize = 12 / cols;
+ for (let i = 0; i < cols; i++) {
- remoteExplorers.push((
-
+ remoteExplorers.push((
+
-
-
- ));
+
+
+ ));
+ }
+ }else if(splitMode === "vertical"){
+ for (let i = 0; i < cols; i++) {
+
+ remoteExplorers.push((
+
+
+
+
+ ));
+ }
+
}
return remoteExplorers;
}
@@ -30,16 +45,11 @@ function RemoteExplorerList({cols, distractionFreeMode}) {
class RemoteExplorerLayout extends React.Component {
- constructor(props) {
- super(props);
- this.changeLayout = this.changeLayout.bind(this);
- }
-
changeLayout = (nos, mode) => {
const {changeNumCols} = this.props;
- // console.log("changing layout");
- if (mode === "side" && nos !== changeNumCols) {
- changeNumCols(nos);
+ // Check if the current layout is not same as previous
+ if(nos !== changeNumCols){
+ changeNumCols(nos, mode);
}
};
@@ -48,7 +58,7 @@ class RemoteExplorerLayout extends React.Component {
const {numCols, changeNumCols} = this.props;
if (numCols < 1) {
- changeNumCols(1);
+ changeNumCols(1, "horizontal");
}
}
@@ -64,7 +74,7 @@ class RemoteExplorerLayout extends React.Component {
render() {
/*Divide the 12 bootstrap columns to fit number of explorers*/
- const {numCols, backStacks, distractionFreeMode} = this.props;
+ const {numCols, backStacks, distractionFreeMode, splitMode} = this.props;
return (
@@ -76,42 +86,38 @@ class RemoteExplorerLayout extends React.Component {
}
{(!distractionFreeMode) &&
-
-
-
-
- Choose Layout
-
-
- this.changeLayout(1, "side")}>
- 1 - side by side
-
- this.changeLayout(2, "side")}>
- 2 - side by side
-
- this.changeLayout(3, "side")}>
- 3 - side by side
-
- this.changeLayout(4, "side")}>
- 4 - side by side
-
-
-
- {/*4 - grid */}
-
-
-
+
+
+
+
+ Choose Layout: {" "}
+
+
+ this.changeLayout(1, "horizontal")}>
+
+
+ this.changeLayout(2, "horizontal")}>
+
+
+ this.changeLayout(3, "horizontal")}>
+
+
+
+ Full Screen
+
+ {/*4 - grid */}
+
+
}
-
@@ -124,7 +130,8 @@ class RemoteExplorerLayout extends React.Component {
const mapStateToProps = (state) => ({
backStacks: state.explorer.backStacks,
numCols: state.remote.numCols,
- distractionFreeMode: state.remote.distractionFreeMode
+ distractionFreeMode: state.remote.distractionFreeMode,
+ splitMode: state.remote.splitMode
});
RemoteExplorerLayout.propTypes = {
diff --git a/src/views/Explorer/RemoteExplorerLayout/__snapshots__/RemoteExplorerLayout.test.js.snap b/src/views/Explorer/RemoteExplorerLayout/__snapshots__/RemoteExplorerLayout.test.js.snap
index 8916ab654..1ee274003 100644
--- a/src/views/Explorer/RemoteExplorerLayout/__snapshots__/RemoteExplorerLayout.test.js.snap
+++ b/src/views/Explorer/RemoteExplorerLayout/__snapshots__/RemoteExplorerLayout.test.js.snap
@@ -6,6 +6,7 @@ exports[`Remote Explorer Layout renders should match snapshot 1`] = `
data-test="remoteExplorerLayout"
>
-
-
- Choose Layout
-
-
-
- 1 - side by side
-
-
- 2 - side by side
-
-
- 3 - side by side
-
-
- 4 - side by side
-
-
-
-
-
-
+ Choose Layout:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Full Screen
+
`;
diff --git a/src/views/Explorer/RemotesList/RemoteListAutoSuggest.js b/src/views/Explorer/RemotesList/RemoteListAutoSuggest.js
index 5236910df..6fd18a61a 100644
--- a/src/views/Explorer/RemotesList/RemoteListAutoSuggest.js
+++ b/src/views/Explorer/RemotesList/RemoteListAutoSuggest.js
@@ -81,6 +81,7 @@ class RemoteListAutoSuggest extends React.Component {
renderSuggestion={renderSuggestion}
highlightFirstSuggestion={true}
inputProps={inputProps}
+ style={{width:"100%"}}
/>
);
}
diff --git a/src/views/Explorer/RemotesList/RemotesList.js b/src/views/Explorer/RemotesList/RemotesList.js
index 6a20558b1..9a8a2f9f7 100644
--- a/src/views/Explorer/RemotesList/RemotesList.js
+++ b/src/views/Explorer/RemotesList/RemotesList.js
@@ -4,7 +4,7 @@ import {connect} from "react-redux";
import {getFsInfo, getRemoteNames} from "../../../actions/explorerActions";
import PropTypes from 'prop-types'
import {changeRemoteName} from "../../../actions/explorerStateActions";
-import {Button, Col, Form, Row} from "reactstrap";
+import {Button, Col, Form} from "reactstrap";
import {PROP_CURRENT_PATH} from "../../../utils/RclonePropTypes";
class RemotesList extends React.Component {
@@ -72,19 +72,18 @@ class RemotesList extends React.Component {
} else {
return (
-
);
diff --git a/src/views/Home/Home.js b/src/views/Home/Home.js
index 2c9fe0527..528caabab 100644
--- a/src/views/Home/Home.js
+++ b/src/views/Home/Home.js
@@ -15,15 +15,11 @@ class Home extends React.Component {
const ipAddress = localStorage.getItem(IP_ADDRESS_KEY);
return (
-
Welcome to Rclone dashboard.
-
Begin by creating a new remote config from the left sidebar.
-
-
-
+
-
+
diff --git a/src/views/Home/__snapshots__/Home.test.js.snap b/src/views/Home/__snapshots__/Home.test.js.snap
index b7e851dc3..9ed89f648 100644
--- a/src/views/Home/__snapshots__/Home.test.js.snap
+++ b/src/views/Home/__snapshots__/Home.test.js.snap
@@ -4,12 +4,6 @@ exports[`Home Component renders should match snapshot 1`] = `
-
- Welcome to Rclone dashboard.
-
-
- Begin by creating a new remote config from the left sidebar.
-
Date: Sun, 29 Mar 2020 10:23:24 +0530
Subject: [PATCH 02/14] Add pointer cursor to table title in explorer
---
src/reducers/explorerStateReducer.js | 3 ---
src/views/Explorer/FilesView/FilesView.js | 6 +++---
2 files changed, 3 insertions(+), 6 deletions(-)
diff --git a/src/reducers/explorerStateReducer.js b/src/reducers/explorerStateReducer.js
index 29fffbd6f..496324aca 100644
--- a/src/reducers/explorerStateReducer.js
+++ b/src/reducers/explorerStateReducer.js
@@ -50,9 +50,6 @@ export default function (state = initialState, action) {
}
}
-
- // let arrayLen = array.length - 1 ;
-
let remoteName = action.remoteName;
let remotePath = action.remotePath;
diff --git a/src/views/Explorer/FilesView/FilesView.js b/src/views/Explorer/FilesView/FilesView.js
index b2a708fde..4ad2f7094 100644
--- a/src/views/Explorer/FilesView/FilesView.js
+++ b/src/views/Explorer/FilesView/FilesView.js
@@ -405,9 +405,9 @@ class FilesView extends React.PureComponent {
- this.applySortFilter("name")}>Name {sortFilter === "name" && }
- this.applySortFilter("size")}>Size {sortFilter === "size" && }
- this.applySortFilter("modified")}>Modified {sortFilter === "modified" && }
+ this.applySortFilter("name")}>Name {sortFilter === "name" && }
+ this.applySortFilter("size")}>Size {sortFilter === "size" && }
+ this.applySortFilter("modified")}>Modified {sortFilter === "modified" && }
Actions
From 5672220923da9b7f632dc20cab79aa1b013d0618 Mon Sep 17 00:00:00 2001
From: Chaitanya
Date: Sun, 29 Mar 2020 10:25:00 +0530
Subject: [PATCH 03/14] Add 0 padding to table in explorer
---
src/views/Explorer/FilesView/FilesView.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/views/Explorer/FilesView/FilesView.js b/src/views/Explorer/FilesView/FilesView.js
index 4ad2f7094..fbdebb8bc 100644
--- a/src/views/Explorer/FilesView/FilesView.js
+++ b/src/views/Explorer/FilesView/FilesView.js
@@ -398,7 +398,7 @@ class FilesView extends React.PureComponent {
}
renderElement = (
-
+
From 943c468d1e8e4a945763de6075b3416f0d0d6069 Mon Sep 17 00:00:00 2001
From: Chaitanya
Date: Mon, 30 Mar 2020 13:30:37 +0530
Subject: [PATCH 04/14] Config Screen redesign
---
src/scss/_custom.scss | 66 ++++
.../RemoteManagement/NewDrive/NewDrive.js | 298 +++++++++++-------
2 files changed, 254 insertions(+), 110 deletions(-)
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 841f3c56e..4c69abbbc 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -101,6 +101,72 @@ body{
}
// END Explorer
+
+// START REMOTE CONFIG
+
+.btn-blue {
+ background-color: rgba(63,121,173,1);
+ color: #ffffff;
+}
+
+.btn-blue :hover{
+ background-color: rgba(63,121,173,1);
+ color: #ffffff;
+
+}
+
+.btn-no-background {
+ background: none;
+ border: none;
+ font-weight: bold;
+ color: rgba(44,44,44,1);
+}
+.timeline {
+
+ padding-top: 20px;
+ padding-bottom: 20px;
+
+ h4 {
+ padding-top: 10px;
+ font-weight: bold;
+ color: rgba(140,140,140,1);
+
+ }
+
+ .btn-step-count {
+ border-radius: 100px;
+ background-color: none;
+ border: 5px solid rgba(140,140,140,1);
+ color:rgba(66,66,66,1);
+ font-weight: bold;
+
+ }
+
+ .timeline-divider {
+ border: 2px solid rgba(66,66,66,1);
+ margin-top: 24px;
+
+ }
+
+ .step-active{
+ .btn {
+ border: 5px solid rgba(63,121,173,1);
+ }
+ h4 {
+ color: rgba(66,66,66,1);
+ }
+ }
+ .btn-step-active {
+ border: 5px solid rgba(63,121,173,1);
+ }
+
+}
+
+
+// Timeline code
+
+// END Remote Config
+
.text-red {
color: #FF0000;
}
diff --git a/src/views/RemoteManagement/NewDrive/NewDrive.js b/src/views/RemoteManagement/NewDrive/NewDrive.js
index 8b2430afe..e210dae82 100644
--- a/src/views/RemoteManagement/NewDrive/NewDrive.js
+++ b/src/views/RemoteManagement/NewDrive/NewDrive.js
@@ -3,15 +3,14 @@ import {
Button,
Card,
CardBody,
- CardFooter,
- CardHeader,
Col,
Collapse,
- Form,
+ Row,
FormFeedback,
FormGroup,
Input,
- Label
+ Label,
+ Container
} from "reactstrap";
// import {config} from "./config.js";
import NewDriveAuthModal from "../../Base/NewDriveAuthModal";
@@ -192,6 +191,8 @@ class NewDrive extends React.Component {
optionTypes: {},
isValid: {},
+ currentStepNumber: 1
+
};
this.configCheckInterval = null;
// console.log("Params", this.props.match.params);
@@ -428,7 +429,7 @@ class NewDrive extends React.Component {
* Validate form and submit request.
* */
async handleSubmit(e) {
- e.preventDefault();
+ e && e.preventDefault();
// console.log("Submitted form");
const {formValues, drivePrefix} = this.state;
@@ -503,13 +504,13 @@ class NewDrive extends React.Component {
}
}
} else {
- if (!this.state.colSetup) {
- this.openSetupDrive();
- }
+ // if (!this.state.colSetup) {
+ // this.openSetupDrive();
+ // }
- if (this.state.advancedOptions && !this.state.colAdvanced) {
- this.openAdvancedSettings();
- }
+ // if (this.state.advancedOptions && !this.state.colAdvanced) {
+ // this.openAdvancedSettings();
+ // }
toast.warn(`Check for errors before submitting.`, {
autoClose: false
});
@@ -530,7 +531,6 @@ class NewDrive extends React.Component {
* */
changeName = e => {
const {driveNameIsEditable} = this.state;
- console.log("changeName");
if (driveNameIsEditable) {
const value = e.target.value;
@@ -610,113 +610,192 @@ class NewDrive extends React.Component {
this.configCheckInterval = null;
}
+ gotoNextStep = () => {
+ const {currentStepNumber, advancedOptions} = this.state;
+ if((advancedOptions && currentStepNumber === 3) || (!advancedOptions && currentStepNumber === 2)){
+ this.handleSubmit(null);
+ }else{
+ this.setCurrentStep(currentStepNumber + 1);
+ }
+ }
+
+ gotoPrevStep = () => {
+ const {currentStepNumber} = this.state;
+ this.setCurrentStep(currentStepNumber - 1);
+ }
+
+
+ setCurrentStep = (stepNo) => {
+ this.setState({currentStepNumber: stepNo});
+ // const {currentStepNumber, advancedOptions} = this.state;
+ // if((advancedOptions && currentStepNumber === 3) || (!advancedOptions && currentStepNumber === 2)){
+ // this.handleSubmit(null);
+ // }else{
+ // this.setState({currentStepNumber: stepNo});
+ // }
+
+ }
+
+ StepShowCase = ({currentStepNumber}) => {
+ const { advancedOptions} = this.state;
+ const buttonActiveclassName = "step-active";
+ const stepTitles = [
+ "Set up Remote Config",
+ "Set up Drive",
+ "Advanced Config"
+ ]
+
+ return (
+
+
+ {stepTitles.map((item, idx) => {
+ idx += 1;
+ return (
+
+
+ this.setCurrentStep(idx)}>{idx}
+ {item}
+
+ {idx !== stepTitles.length &&
+
+
+ }
+
+ )
+ })}
+
+
+
+ )
+
+ }
+
+ /* return (
+
+
+ 1
+
+
Shift Created
+
+
+
+
+
+
Shift Created
+
+
+
+
+
Shift Created
+
+
+
+ ) */
+
+
+
render() {
- const {colRconfig, colSetup, colAdvanced, drivePrefix, advancedOptions, driveName, driveNameIsValid} = this.state;
+ const {drivePrefix, advancedOptions, driveName, driveNameIsValid, currentStepNumber} = this.state;
const {providers} = this.props;
- // console.log("config", config);
return (
This 3 step process will guide you through creating a new config. For auto config, leave the
- parameters as is.
-