add drop down connection select
MODIFY
app/components/Settings/DialectSelector/DialectSelector.react.js
app/components/Settings/DialectSelector/DialectSelector.react.js
import React from 'react';
import PropTypes from 'prop-types';
-import {values} from 'ramda';
+import Select from 'react-select';
import {
DIALECTS, LOGOS
} from '../../../constants/constants';
-import classnames from 'classnames';
+
+class DialectOption extends React.Component {
+ static propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ isDisabled: PropTypes.bool,
+ isFocused: PropTypes.bool,
+ isSelected: PropTypes.bool,
+ onFocus: PropTypes.func,
+ onSelect: PropTypes.func,
+ option: PropTypes.object.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.handleMouseEnter = this.handleMouseEnter.bind(this);
+ this.handleMouseMove = this.handleMouseMove.bind(this);
+ }
+
+ handleMouseDown(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ this.props.onSelect(this.props.option, event);
+ }
+
+ handleMouseEnter(event) {
+ this.props.onFocus(this.props.option, event);
+ }
+
+ handleMouseMove(event) {
+ if (this.props.isFocused) return;
+ this.props.onFocus(this.props.option, event);
+ }
+
+ render() {
+ const logoStyle = {
+ display: 'inline-block',
+ height: '100%',
+ width: '100%',
+ objectFit: 'contain',
+ position: 'relative'
+ };
+
+ const logoContainerStyle = {height: '100%', width: 64, marginRight: 16};
+
+ const optionStyle = {
+ height: 56,
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'center'
+ };
+
+ return (
+ <div
+ style={optionStyle}
+ className={this.props.className}
+ onMouseDown={this.handleMouseDown}
+ onMouseEnter={this.handleMouseEnter}
+ onMouseMove={this.handleMouseMove}
+ title={this.props.option.title}
+ >
+ <div style={logoContainerStyle}>
+ <img style={logoStyle} className={'logoImage'} src={LOGOS[this.props.option.label]} />
+ </div>
+ {this.props.children}
+ </div>
+ );
+ }
+}
+
+class DialectValue extends React.Component {
+ static propTypes = {
+ children: PropTypes.node,
+ value: PropTypes.object
+ };
+
+ render () {
+ const logoStyle = {
+ display: 'inline-block',
+ marginRight: 10,
+ position: 'relative',
+ verticalAlign: 'middle'
+ };
+
+ return (
+ <div className="Select-value">
+ <span className="Select-value-label">
+ <img style={logoStyle} className={'logoImage'} src={LOGOS[this.props.value.label]} />
+ {this.props.children}
+ </span>
+ </div>
+ );
+ }
+}
/**
* The following is the Dialect Selector
@@ -17,30 +112,36 @@ import classnames from 'classnames';
const DialectSelector = function DialectSelector(props) {
const {connectionObject, updateConnection} = props;
- const logos = values(DIALECTS).map(DIALECT => (
- <div
- key={DIALECT}
- data-tip={DIALECT}
- className={classnames(
- 'logo', {
- ['logoSelected']: connectionObject.dialect === DIALECT
- }
- )}
- onClick={() => {
- updateConnection(
- {dialect: DIALECT}
- );
- }}
- id={`test-logo-${DIALECT}`}
- >
- <img
- className={'logoImage'}
- src={LOGOS[DIALECT]}
+ // react-select requires options to have `label` and `value` keys
+ const DIALECT_OPTIONS = Object.entries(DIALECTS).map(DIALECT => ({
+ label: DIALECT[1],
+ value: DIALECT[0]
+ }));
+
+ const placeholder = <span>Select a database type...</span>;
+
+ const onChange = ({ label }) => updateConnection({dialect: label});
+
+ const currentValue = DIALECT_OPTIONS.filter(DIALECT =>
+ DIALECT.label === connectionObject.dialect)[0];
+
+ return (
+ <div>
+ <label className={'label'}>Database Type</label>
+ <div className={'wrapInput'}>
+ <Select
+ searchable={false}
+ clearable={false}
+ onChange={onChange}
+ optionComponent={DialectOption}
+ options={DIALECT_OPTIONS}
+ placeholder={placeholder}
+ value={currentValue}
+ valueComponent={DialectValue}
/>
</div>
- ));
-
- return <div className={'logoContainer'}>{logos}</div>;
+ </div>
+ );
};
DialectSelector.propTypes = {

MODIFY
app/components/Settings/Settings.react.js
app/components/Settings/Settings.react.js
@@ -122,7 +122,6 @@ class Settings extends Component {
)}
>
<div className={'dialectSelector'}>
- <ReactToolTip place={'top'} type={'dark'} effect={'solid'} />
<DialectSelector
connectionObject={connectionObject}
updateConnection={updateConnection}

MODIFY
static/css/DialectSelector.css
static/css/DialectSelector.css
-.logoContainer {
- margin: 20px;
- width: 800px;
- text-align: center;
-}
-
-.logo {
- display: inline-block;
- width: 100px;
- height: 70px;
- padding: 2px;
- margin: 5px;
- border-color: #BEC8D9;
- border-width: 2px;
- border-style: solid;
- border-radius: 5px;
- vertical-align: middle;
-}
-
.logoImage {
height: auto;
- max-height: 100%;
+ max-height: 75%;
max-width: 100%;
width: auto;
}
-
-.logo:hover, .logoSelected {
- border-color: #8BB5FE;
- cursor: pointer;
- border-width: 4px;
- margin: 3px;
-}
-
-.dialectInput {
- display: inline-block;
-}
-
-.dialectLabel {
- display: inline-block;
-}

MODIFY
static/css/Settings.css
static/css/Settings.css
}
.dialectSelector {
- display: inline-block;
+ margin-top: 32px;
+}
+
+.dialectSelector .Select {
+ width: 56%;
+ height: 40px;
+ margin-left: 20px;
+ font-size: 14px;
+ font-weight: 300;
+ text-align: left;
}
.editButtonContainer {

MODIFY
test/app/components/Settings/DialectSelector/DialectSelector.test.js
test/app/components/Settings/DialectSelector/DialectSelector.test.js
@@ -24,10 +24,10 @@ describe('Dialog Selector Test', () => {
/>);
// Number of Logos should match number of images
- expect(selector.find('.logo').length).toEqual(Object.keys(DIALECTS).length);
+ expect(selector.find('.dialectSelector .Select-option').length).toEqual(Object.keys(DIALECTS).length);
// Dialect not selected so should not be found
- expect(selector.find('.logoSelected').length).toBe(0);
+ expect(selector.find('.dialectSelector .Select-option .is-selected').length).toBe(0);
});
it('should verify Dialect Selector created with dialect', () => {
@@ -42,6 +42,7 @@ describe('Dialog Selector Test', () => {
/>);
// Dialect not selected so should not be found
- expect(selector.find('.logoSelected').first().key()).toBe(connectionObject.dialect);
+ expect(selector.find('.dialectSelector .Select-option .is-selected')
+ .first().key()).toBe(connectionObject.dialect);
});
});

add drop down connection select