39f3dbd945
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:
```
computeValue()
computeContent()
mutateValue()
```
59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import { on } from 'ember-addons/ember-computed-decorators';
|
|
import computed from 'ember-addons/ember-computed-decorators';
|
|
const { run, isPresent, makeArray, isEmpty } = Ember;
|
|
import UtilsMixin from "select-kit/mixins/utils";
|
|
|
|
export default Ember.Component.extend(UtilsMixin, {
|
|
layoutName: "select-kit/templates/components/select-kit/select-kit-row",
|
|
classNames: ["select-kit-row", "select-box-kit-row"],
|
|
tagName: "li",
|
|
tabIndex: -1,
|
|
attributeBindings: [
|
|
"tabIndex",
|
|
"title",
|
|
"computedContent.value:data-value",
|
|
"computedContent.name:data-name"
|
|
],
|
|
classNameBindings: ["isHighlighted", "isSelected"],
|
|
|
|
@computed("computedContent.title", "computedContent.name")
|
|
title(title, name) { return title || name; },
|
|
|
|
@computed("templateForRow")
|
|
template(templateForRow) { return templateForRow(this); },
|
|
|
|
@on("didReceiveAttrs")
|
|
_setSelectionState() {
|
|
const contentValue = this.get("computedContent.value");
|
|
|
|
this.set("isSelected", this.get("computedValue") === contentValue);
|
|
this.set("isHighlighted", this.get("highlightedValue") === contentValue);
|
|
},
|
|
|
|
@on("willDestroyElement")
|
|
_clearDebounce() {
|
|
const hoverDebounce = this.get("hoverDebounce");
|
|
if (isPresent(hoverDebounce)) { run.cancel(hoverDebounce); }
|
|
},
|
|
|
|
@computed("computedContent.icon", "computedContent.icons", "computedContent.originalContent.icon")
|
|
icons(icon, icons, originalIcon) {
|
|
return makeArray(icon)
|
|
.concat(icons)
|
|
.concat(makeArray(originalIcon))
|
|
.filter(i => !isEmpty(i));
|
|
},
|
|
|
|
mouseEnter() {
|
|
this.set("hoverDebounce", run.debounce(this, this._sendOnHighlightAction, 32));
|
|
},
|
|
|
|
click() {
|
|
this.sendAction("onSelect", this.get("computedContent"));
|
|
},
|
|
|
|
_sendOnHighlightAction() {
|
|
this.sendAction("onHighlight", this.get("computedContent"));
|
|
}
|
|
});
|