status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(cockpit/TextEditorToolbar): set active state on selected tabs 

This commit ensures that the `activeTab` state for the Editor toolbar tabs
is properly passed down to `TextEditorToolbar` component, so it can be used
to set the active state accordingly.
This commit is contained in:
Pascal Precht 2018-10-28 16:07:41 +01:00
parent e77e08c84e
commit 2e4e6a3381
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
3 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
embark-ui/src/components/TextEditorToolbar.js
View File

@ -1,51 +1,72 @@
import React from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button, Nav, NavLink} from 'reactstrap';
import classnames from 'classnames';
import FontAwesomeIcon from 'react-fontawesome';
const TextEditorToolbar = (props) => (
<ol className="breadcrumb mb-0">
<li className="breadcrumb-item">
<Button color="success" size="sm" className="mr-1" onClick={props.save}>
<FontAwesomeIcon className="mr-2" name="save"/>
Save
</Button>
<Button color="danger" size="sm" onClick={props.remove}>
<FontAwesomeIcon className="mr-2" name="trash"/>
Delete
</Button>
</li>
<li className="breadcrumb-menu">
<Nav className="btn-group">
{props.isContract &&
<React.Fragment>
<NavLink className="btn" href="#" onClick={() => props.openAsideTab('overview')}>
<FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
</NavLink>
<NavLink className="btn" href="#" onClick={() => props.openAsideTab('detail')}>
<FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
</NavLink>
<NavLink className="btn" href="#" onClick={() => props.openAsideTab('logger')}>Logger</NavLink>
<NavLink className="btn" href="#" onClick={() => props.openAsideTab('debugger')}>
<FontAwesomeIcon className="mr-2" name="bug" /> Debugger
</NavLink>
</React.Fragment>
}
<NavLink className="btn" href="#" onClick={() => props.openAsideTab('browser')}>
<FontAwesomeIcon className="mr-2" name="compass" /> Browser
</NavLink>
</Nav>
const TextEditorToolbarTabs = {
Overview: 'overview',
Detail: 'detail',
Logger: 'logger',
Debugger: 'debugger',
Browser: 'browser'
};
</li>
</ol>
);
class TextEditorToolbar extends Component {
isActiveTab(tab) {
return this.props.activeTab === tab;
}
render() {
return (
<ol className="breadcrumb mb-0">
<li className="breadcrumb-item">
<Button color="success" size="sm" className="mr-1" onClick={this.props.save}>
<FontAwesomeIcon className="mr-2" name="save"/>
Save
</Button>
<Button color="danger" size="sm" onClick={this.props.remove}>
<FontAwesomeIcon className="mr-2" name="trash"/>
Delete
</Button>
</li>
<li className="breadcrumb-menu">
<Nav className="btn-group">
{this.props.isContract &&
<React.Fragment>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}>
<FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
</NavLink>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
<FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
</NavLink>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Logger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Logger)}>
<FontAwesomeIcon className="mr-2" name="file-text-o" /> Logger
</NavLink>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}>
<FontAwesomeIcon className="mr-2" name="bug" /> Debugger
</NavLink>
</React.Fragment>
}
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Browser)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Browser)}>
<FontAwesomeIcon className="mr-2" name="compass" /> Browser
</NavLink>
</Nav>
</li>
</ol>
);
}
}
TextEditorToolbar.propTypes = {
isContract: PropTypes.bool,
save: PropTypes.func,
remove: PropTypes.func,
toggleShowHiddenFiles: PropTypes.func,
openAsideTab: PropTypes.func
openAsideTab: PropTypes.func,
activeTab: PropTypes.string
};
export default TextEditorToolbar;

3
embark-ui/src/containers/EditorContainer.js
View File

@ -62,7 +62,8 @@ class EditorContainer extends React.Component {
<Col xs={12}>
<TextEditorToolbarContainer openAsideTab={(newTab) => this.openAsideTab(newTab)}
isContract={this.isContract()}
currentFile={this.props.currentFile} />
currentFile={this.props.currentFile}
activeTab={this.state.currentAsideTab}/>
</Col>
<Col xs={4} md={2} xl={2} lg={2} className="border-right">
<FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} />

6
embark-ui/src/containers/TextEditorToolbarContainer.js
View File

@ -22,7 +22,8 @@ class TextEditorToolbarContainer extends Component {
toggleShowHiddenFiles={this.props.toggleShowHiddenFiles}
openAsideTab={this.props.openAsideTab}
save={() => this.save()}
remove={() => this.remove()} />;
remove={() => this.remove()}
activeTab={this.props.activeTab} />;
}
}
@ -32,7 +33,8 @@ TextEditorToolbarContainer.propTypes = {
saveFile: PropTypes.func,
removeFile: PropTypes.func,
toggleShowHiddenFiles: PropTypes.func,
openAsideTab: PropTypes.func
openAsideTab: PropTypes.func,
activeTab: PropTypes.string
};
export default connect(