mirror of https://github.com/embarklabs/embark.git
switch to type ahead input box
This commit is contained in:
Iuri Matias
Pascal Precht
parent
5a6a70e226
commit
2209aab934
|
|
@ -8905,6 +8905,25 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"prop-types-extra": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
|
||||
"integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
|
||||
"requires": {
|
||||
"react-is": "^16.3.2",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"warning": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
|
||||
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"proxy-addr": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
|
||||
|
|
@ -9113,6 +9132,23 @@
|
|||
"pure-color": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"react-bootstrap-typeahead": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.2.4.tgz",
|
||||
"integrity": "sha512-wFXIKbOHY4Q1AtnhSQIAnUvSDxmcFdDc5wIX/yd7YJug2jL5TvKspJ3XfX/FaWEWyn1pgHukRuFGnbYnL8rtUQ==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.0",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"invariant": "^2.2.1",
|
||||
"lodash": "^4.17.2",
|
||||
"prop-types": "^15.5.8",
|
||||
"prop-types-extra": "^1.0.1",
|
||||
"react-onclickoutside": "^6.1.1",
|
||||
"react-overlays": "^0.8.1",
|
||||
"react-popper": "^1.0.0",
|
||||
"warning": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"react-copy-to-clipboard": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
|
||||
|
|
@ -9163,6 +9199,11 @@
|
|||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
|
||||
"integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz",
|
||||
"integrity": "sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ=="
|
||||
},
|
||||
"react-json-tree": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.11.0.tgz",
|
||||
|
|
@ -9183,6 +9224,34 @@
|
|||
"resolved": "https://registry.npmjs.org/react-onclickout/-/react-onclickout-2.0.8.tgz",
|
||||
"integrity": "sha1-0XixP7h6SBNWdhtFSqYN9wabLaQ="
|
||||
},
|
||||
"react-onclickoutside": {
|
||||
"version": "6.7.1",
|
||||
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz",
|
||||
"integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg=="
|
||||
},
|
||||
"react-overlays": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",
|
||||
"integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"dom-helpers": "^3.2.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"prop-types-extra": "^1.0.1",
|
||||
"react-transition-group": "^2.2.0",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"warning": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
|
||||
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-perfect-scrollbar": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.2.2.tgz",
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
"qs": "^6.5.2",
|
||||
"raf": "3.4.0",
|
||||
"react": "^16.4.2",
|
||||
"react-bootstrap-typeahead": "^3.2.4",
|
||||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-dev-utils": "^5.0.1",
|
||||
"react-dom": "^16.4.1",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import PropTypes from "prop-types";
|
||||
import React, {Component} from 'react';
|
||||
import Convert from 'ansi-to-html';
|
||||
|
||||
import { Form, Col, Row, Card, CardBody, Input, CardFooter, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
|
||||
import classnames from 'classnames';
|
||||
import {AsyncTypeahead} from 'react-bootstrap-typeahead'
|
||||
|
||||
import Logs from "./Logs";
|
||||
import "./Console.css";
|
||||
|
|
@ -13,18 +15,18 @@ const convert = new Convert();
|
|||
class Console extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {value: '', activeTab: EMBARK_PROCESS_NAME};
|
||||
this.state = {value: '', isLoading: true, options: [], activeTab: EMBARK_PROCESS_NAME};
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
this.props.postCommand(this.state.value);
|
||||
this.setState({value: ''});
|
||||
this.typeahead.getInstance().clear()
|
||||
}
|
||||
|
||||
handleChange(event) {
|
||||
event.preventDefault();
|
||||
this.setState({value: event.target.value});
|
||||
handleChange(value) {
|
||||
this.setState({value: value});
|
||||
}
|
||||
|
||||
toggle(tab) {
|
||||
|
|
@ -49,14 +51,14 @@ class Console extends Component {
|
|||
</NavLink>
|
||||
</NavItem>
|
||||
))}
|
||||
|
||||
|
||||
</Nav>
|
||||
)
|
||||
}
|
||||
|
||||
renderTabs() {
|
||||
const {processLogs, processes} = this.props;
|
||||
|
||||
|
||||
return (
|
||||
<TabContent activeTab={this.state.activeTab}>
|
||||
{processes.map(process => (
|
||||
|
|
@ -81,18 +83,39 @@ class Console extends Component {
|
|||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardBody className="console-container">
|
||||
<Card.Body className="console-container">
|
||||
{this.renderNav()}
|
||||
{this.renderTabs()}
|
||||
</CardBody>
|
||||
{this.props.isEmbark() && <CardFooter>
|
||||
<Form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
|
||||
<Input value={value}
|
||||
onChange={(event) => this.handleChange(event)}
|
||||
name="command"
|
||||
placeholder="Type a command (e.g help)"/>
|
||||
</Form>
|
||||
</CardFooter>}
|
||||
</Card.Body>
|
||||
{this.props.isEmbark() && <Card.Footer>
|
||||
<AsyncTypeahead
|
||||
search={value}
|
||||
autoFocus={true}
|
||||
emptyLabel={false}
|
||||
labelKey="name"
|
||||
multiple={false}
|
||||
emptyLabel={false}
|
||||
maxResults={10}
|
||||
isLoading={this.state.isLoading}
|
||||
defaultInputValue={value}
|
||||
onInputChange={(text) => this.handleChange(text)}
|
||||
ref={(typeahead) => this.typeahead = typeahead}
|
||||
searchText={false}
|
||||
onKeyDown={(e) => {
|
||||
if (e.keyCode === 13) {
|
||||
this.handleSubmit(e)
|
||||
}
|
||||
}}
|
||||
onSearch={(value) => {
|
||||
console.dir(value);
|
||||
this.setState({ isLoading: false, options: ['hello', 'dude', 'dude1'] })
|
||||
}}
|
||||
maxHeight="200px"
|
||||
placeholder="Type a command (e.g help)"
|
||||
options={this.state.options}
|
||||
placeholder="Choose a state..."
|
||||
/>
|
||||
</Card.Footer>}
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -108,4 +131,4 @@ Console.propTypes = {
|
|||
updateTab: PropTypes.func
|
||||
};
|
||||
|
||||
export default Console;
|
||||
export default Console;
|
||||
|
|
|
|||
Loading…
Reference in New Issue