mirror of https://github.com/embarklabs/embark.git
refactor(cockpit/TextEditorToolbar): make toolbar tabs generation more generic
This commit is contained in:
parent
c25c644b5a
commit
3c0e360540
|
@ -4,12 +4,12 @@ import {Button, Nav, NavLink} from 'reactstrap';
|
|||
import classnames from 'classnames';
|
||||
import FontAwesomeIcon from 'react-fontawesome';
|
||||
|
||||
const TextEditorToolbarTabs = {
|
||||
Overview: 'overview',
|
||||
Detail: 'detail',
|
||||
Transactions: 'transactions',
|
||||
Debugger: 'debugger',
|
||||
Browser: 'browser'
|
||||
export const TextEditorToolbarTabs = {
|
||||
Interact: { label: 'Interact', icon: 'bolt' },
|
||||
Ietails: { label: 'Details', icon: 'info-cicle' },
|
||||
Debugger: { label: 'Debugger', icon: 'bug' },
|
||||
Transactions: { label: 'Transactions', icon: 'list-alt' },
|
||||
Browser: { label: 'Browser', icon: 'eye' }
|
||||
};
|
||||
|
||||
class TextEditorToolbar extends Component {
|
||||
|
@ -18,6 +18,18 @@ class TextEditorToolbar extends Component {
|
|||
return this.props.activeTab === tab;
|
||||
}
|
||||
|
||||
isBrowserTab(tab) {
|
||||
return tab === TextEditorToolbarTabs.Browser;
|
||||
}
|
||||
|
||||
renderTab(tab) {
|
||||
return (
|
||||
<NavLink key={tab.label} className={classnames('btn', { active: this.isActiveTab(tab)})} onClick={() => this.props.openAsideTab(tab)}>
|
||||
<FontAwesomeIcon className="mr-2" name={tab.icon} /> {tab.label}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ol className="breadcrumb mb-0">
|
||||
|
@ -33,27 +45,9 @@ class TextEditorToolbar extends Component {
|
|||
</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="bolt" />Interact
|
||||
</NavLink>
|
||||
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
|
||||
<FontAwesomeIcon className="mr-2" name="info-circle" />Details
|
||||
</NavLink>
|
||||
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Transactions)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Transactions)}>
|
||||
<FontAwesomeIcon className="mr-2" name="list-alt" />Transactions
|
||||
</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="eye" /> Preview
|
||||
</NavLink>
|
||||
{this.props.isContract && Object.values(TextEditorToolbarTabs).map(tab => !this.isBrowserTab(tab) && this.renderTab(tab))}
|
||||
{this.renderTab(TextEditorToolbarTabs.Browser)}
|
||||
</Nav>
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
);
|
||||
|
@ -66,7 +60,7 @@ TextEditorToolbar.propTypes = {
|
|||
remove: PropTypes.func,
|
||||
toggleShowHiddenFiles: PropTypes.func,
|
||||
openAsideTab: PropTypes.func,
|
||||
activeTab: PropTypes.string
|
||||
activeTab: PropTypes.object
|
||||
};
|
||||
|
||||
export default TextEditorToolbar;
|
||||
|
|
|
@ -15,7 +15,7 @@ import './EditorContainer.css';
|
|||
class EditorContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {currentAsideTab: '', showHiddenFiles: false, currentFile: this.props.currentFile};
|
||||
this.state = {currentAsideTab: {}, showHiddenFiles: false, currentFile: this.props.currentFile};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -43,19 +43,19 @@ class EditorContainer extends React.Component {
|
|||
}
|
||||
|
||||
openAsideTab(newTab) {
|
||||
if (newTab === this.state.currentAsideTab) {
|
||||
return this.setState({currentAsideTab: ''});
|
||||
if (newTab.label === this.state.currentAsideTab.label) {
|
||||
return this.setState({currentAsideTab: {}});
|
||||
}
|
||||
this.setState({currentAsideTab: newTab});
|
||||
}
|
||||
|
||||
textEditorMdSize() {
|
||||
return this.state.currentAsideTab.length ? 7 : 10;
|
||||
return this.state.currentAsideTab.label ? 7 : 10;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row noGutters className={classnames('h-100', 'editor--grid', {'aside-opened': this.state.currentAsideTab.length})}>
|
||||
<Row noGutters className={classnames('h-100', 'editor--grid', {'aside-opened': this.state.currentAsideTab.label})}>
|
||||
<Col xs={12}>
|
||||
<TextEditorToolbarContainer openAsideTab={(newTab) => this.openAsideTab(newTab)}
|
||||
isContract={this.isContract()}
|
||||
|
|
|
@ -10,6 +10,7 @@ import ContractDetail from '../components/ContractDetail';
|
|||
import ContractTransactionsContainer from './ContractTransactionsContainer';
|
||||
import ContractOverviewContainer from '../containers/ContractOverviewContainer';
|
||||
import ContractDebuggerContainer from '../containers/ContractDebuggerContainer';
|
||||
import { TextEditorToolbarTabs } from '../components/TextEditorToolbar';
|
||||
|
||||
class TextEditorAsideContainer extends Component {
|
||||
componentDidMount() {
|
||||
|
@ -18,28 +19,28 @@ class TextEditorAsideContainer extends Component {
|
|||
|
||||
renderContent(contract, index) {
|
||||
switch (this.props.currentAsideTab) {
|
||||
case 'debugger':
|
||||
case TextEditorToolbarTabs.Debugger:
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2>{contract.className} - Debugger</h2>
|
||||
<ContractDebuggerContainer key={index} contract={contract}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
case 'detail':
|
||||
case TextEditorToolbarTabs.Details:
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2>{contract.className} - Details</h2>
|
||||
<ContractDetail key={index} contract={contract}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
case 'transactions':
|
||||
case TextEditorToolbarTabs.Transactions:
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2>{contract.className} - Transactions</h2>
|
||||
<ContractTransactionsContainer key={index} contract={contract}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
case 'overview':
|
||||
case TextEditorToolbarTabs.Interact:
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2>{contract.className} - Interact</h2>
|
||||
|
@ -52,7 +53,7 @@ class TextEditorAsideContainer extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
if (this.props.currentAsideTab === 'browser') {
|
||||
if (this.props.currentAsideTab === TextEditorToolbarTabs.Browser) {
|
||||
return <Preview/>;
|
||||
}
|
||||
return this.props.contracts.map((contract, index) => {
|
||||
|
@ -75,7 +76,7 @@ function mapStateToProps(state, props) {
|
|||
|
||||
TextEditorAsideContainer.propTypes = {
|
||||
currentFile: PropTypes.object,
|
||||
currentAsideTab: PropTypes.string,
|
||||
currentAsideTab: PropTypes.object,
|
||||
contract: PropTypes.array,
|
||||
fetchContracts: PropTypes.func,
|
||||
contracts: PropTypes.array
|
||||
|
|
|
@ -34,7 +34,7 @@ TextEditorToolbarContainer.propTypes = {
|
|||
removeFile: PropTypes.func,
|
||||
toggleShowHiddenFiles: PropTypes.func,
|
||||
openAsideTab: PropTypes.func,
|
||||
activeTab: PropTypes.string
|
||||
activeTab: PropTypes.object
|
||||
};
|
||||
|
||||
export default connect(
|
||||
|
|
Loading…
Reference in New Issue