Ignacio Bona Piedrabuena 89c78551cc
1604086049622-ui-sync (#1981)
Co-authored-by: Ignacio Bona <ibonapiedrabuena@linkedin.com>
2020-11-09 12:17:51 -08:00

61 lines
1.8 KiB
TypeScript

import Component from '@ember/component';
import { classNames } from '@ember-decorators/component';
import { computed, action } from '@ember/object';
import { noop } from 'lodash-es';
interface IOption<T> {
value: T;
label?: string;
isDisabled?: boolean;
isSelected?: boolean;
}
// TODO META-7964 replace Ember Selector with nacho component
@classNames('nacho-select')
export default class EmberSelector<T extends Partial<IOption<T>>> extends Component {
selected: T;
values: Array<T> = [];
selectionDidChange: (selected: T) => void = noop;
/**
* Parse and transform the values list into a list of objects with the currently
* selected option flagged as `isSelected`
*/
@computed('selected', 'values')
get content(): Array<IOption<T>> {
const { selected = null, values = [] } = this;
const content = values.map(
(option: T): IOption<T> => {
if (typeof option === 'object' && typeof option.value !== 'undefined') {
const isSelected = option.value === selected;
return { value: option.value, label: option.label, isSelected, isDisabled: option.isDisabled || false };
}
return { value: option, isSelected: option === selected };
}
);
return content;
}
// Reflect UI changes in the component and bubble the `selectionDidChange` action
@action
change(e: Event): void {
const select = this.element.querySelector('select');
if (e && select && e.target === select) {
const { selectedIndex = 0 } = select;
const { values } = this;
const _selected = values[selectedIndex];
const selected = typeof _selected.value !== 'undefined' ? _selected.value : _selected;
this.set('selected', selected);
this.selectionDidChange(_selected);
}
}
}