49 lines
1.8 KiB
JavaScript
49 lines
1.8 KiB
JavaScript
|
import Component from '@glimmer/component';
|
||
|
|
import { action } from '@ember/object';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @module AutocompleteInput
|
||
|
|
* AutocompleteInput components are used as standard string inputs or optionally select options to append to input value
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```js
|
||
|
|
* <AutocompleteInput @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
|
||
|
|
* ```
|
||
|
|
* @callback inputChangeCallback
|
||
|
|
* @param {string} value - input value
|
||
|
|
* @param {inputChangeCallback} onChange - fires when input value changes to mutate value param by caller
|
||
|
|
* @param {string} [optionsTrigger] - display options dropdown when trigger character is input
|
||
|
|
* @param {Object[]} [options] - array of { label, value } objects where label is displayed in options dropdown and value is appended to input value
|
||
|
|
* @param {string} [label] - label to display above input
|
||
|
|
* @param {string} [subText] - text to display below label
|
||
|
|
* @param {string} [placeholder] - input placeholder
|
||
|
|
*/
|
||
|
|
|
||
|
|
export default class AutocompleteInput extends Component {
|
||
|
|
dropdownAPI;
|
||
|
|
inputElement;
|
||
|
|
|
||
|
|
@action
|
||
|
|
setElement(element) {
|
||
|
|
this.inputElement = element.querySelector('.input');
|
||
|
|
}
|
||
|
|
@action
|
||
|
|
onInput(event) {
|
||
|
|
const { options = [], optionsTrigger } = this.args;
|
||
|
|
if (optionsTrigger && options.length) {
|
||
|
|
const method = event.data === optionsTrigger ? 'open' : 'close';
|
||
|
|
this.dropdownAPI.actions[method]();
|
||
|
|
}
|
||
|
|
this.args.onChange(event.target.value);
|
||
|
|
}
|
||
|
|
@action
|
||
|
|
selectOption(value) {
|
||
|
|
// if trigger character is at start of value it needs to be trimmed
|
||
|
|
const appendValue = value.startsWith(this.args.optionsTrigger) ? value.slice(1) : value;
|
||
|
|
const newValue = this.args.value + appendValue;
|
||
|
|
this.args.onChange(newValue);
|
||
|
|
this.dropdownAPI.actions.close();
|
||
|
|
this.inputElement.focus();
|
||
|
|
}
|
||
|
|
}
|