FIX: select-kit refactoring

- improve mini-tag-chooser keyboard behavior
- all multil select now respond to select all and left/right arrows
- improve events handling
- many minor tweaks
This commit is contained in:
Joffrey JAFFEUX
2018-03-22 11:29:55 +01:00
committed by GitHub
parent e053697cfa
commit d48542796e
54 changed files with 717 additions and 573 deletions

View File

@ -0,0 +1,14 @@
import computed from "ember-addons/ember-computed-decorators";
const { isEmpty } = Ember;
import SelectKitFilterComponent from "select-kit/components/select-kit/select-kit-filter";
export default SelectKitFilterComponent.extend({
layoutName: "select-kit/templates/components/select-kit/select-kit-filter",
classNames: ["multi-select-filter"],
@computed("placeholder", "hasSelection")
computedPlaceholder(placeholder, hasSelection) {
if (hasSelection) return "";
return isEmpty(placeholder) ? "" : I18n.t(placeholder);
}
});

View File

@ -34,12 +34,12 @@ export default SelectKitHeaderComponent.extend({
$filter.width(availableSpace - parentRightPadding * 4);
},
@computed("computedContent.selectedComputedContents.[]")
@computed("computedContent.selection.[]")
names(selection) {
return Ember.makeArray(selection).map(s => s.name).join(",");
},
@computed("computedContent.selectedComputedContents.[]")
@computed("computedContent.selection.[]")
values(selection) {
return Ember.makeArray(selection).map(s => s.value).join(",");
}

View File

@ -28,20 +28,6 @@ export default Ember.Component.extend({
return null;
},
didInsertElement() {
this._super();
$(this.element).on("backspace.selected-name", () => {
this._handleBackspace();
});
},
willDestroyElement() {
this._super();
$(this.element).off("backspace.selected-name");
},
label: Ember.computed.or("computedContent.label", "title", "name"),
name: Ember.computed.alias("computedContent.name"),
@ -52,19 +38,14 @@ export default Ember.Component.extend({
return this.getWithDefault("computedContent.locked", false);
}),
click() {
if (this.get("isLocked") === true) return false;
this.sendAction("deselect", [this.get("computedContent")]);
return false;
@computed("computedContent", "highlightedSelection.[]")
isHighlighted(computedContent, highlightedSelection) {
return highlightedSelection.includes(this.get("computedContent"));
},
_handleBackspace() {
if (this.get("isLocked") === true) return false;
if (this.get("isHighlighted")) {
this.sendAction("deselect", [this.get("computedContent")]);
} else {
this.set("isHighlighted", true);
}
click() {
if (this.get("isLocked")) return false;
this.sendAction("onClickSelectionItem", [this.get("computedContent")]);
return false;
}
});