diff --git a/embark-ui/package-lock.json b/embark-ui/package-lock.json index 435d31b3..72a1042f 100644 --- a/embark-ui/package-lock.json +++ b/embark-ui/package-lock.json @@ -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", diff --git a/embark-ui/package.json b/embark-ui/package.json index 4850d07f..5559ef52 100644 --- a/embark-ui/package.json +++ b/embark-ui/package.json @@ -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", diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js index 6731b5c6..0e5db9d3 100644 --- a/embark-ui/src/components/Console.js +++ b/embark-ui/src/components/Console.js @@ -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 { ))} - + ) } renderTabs() { const {processLogs, processes} = this.props; - + return ( {processes.map(process => ( @@ -81,18 +83,39 @@ class Console extends Component { - + {this.renderNav()} {this.renderTabs()} - - {this.props.isEmbark() && -
this.handleSubmit(event)} autoComplete="off"> - this.handleChange(event)} - name="command" - placeholder="Type a command (e.g help)"/> -
- } + + {this.props.isEmbark() && + 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..." + /> + } @@ -108,4 +131,4 @@ Console.propTypes = { updateTab: PropTypes.func }; -export default Console; \ No newline at end of file +export default Console;