forked from enviPath/enviPy
76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
/****************************************************************************
|
|
* 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;
|