Current Dev State

static/js/ketcher2/script/ui/component/combobox.jsx

@@ -0,0 +1,75 @@
+/****************************************************************************
+ * Copyright 2017 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { h, Component } from 'preact';
+/** @jsx h */
+
+class ComboBox extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			suggestsHidden: true
+		};
+
+		this.click = this.click.bind(this);
+		this.blur = this.blur.bind(this);
+		this.updateInput = this.updateInput.bind(this);
+	}
+
+	updateInput(event) {
+		const value = (event.target.value || event.target.textContent);
+		this.setState({ suggestsHidden: true });
+		this.props.onChange(value);
+	}
+
+	click() {
+		this.setState({ suggestsHidden: false });
+	}
+
+	blur() {
+		this.setState({ suggestsHidden: true });
+	}
+
+	render(props) {
+		const { value, type = 'text', schema } = props;
+
+		const suggestList = schema.enumNames
+			.filter(item => item !== value)
+			.map(item => <li onMouseDown={this.updateInput}>{item}</li>);
+
+		return (
+			<div>
+				<input type={type} value={value} onClick={this.click}
+					   onBlur={this.blur} onInput={this.updateInput} autocomplete="off"
+				/>
+				{
+					suggestList.length !== 0 ?
+						(
+							<ui className='suggestList'
+								style={`display: ${this.state.suggestsHidden ? 'none' : 'block'}`}
+							>
+								{
+									suggestList
+								}
+							</ui>
+						) : ''
+				}
+			</div>
+		);
+	}
+}
+
+export default ComboBox;