mirror of
https://github.com/discourse/discourse.git
synced 2025-05-28 22:47:46 +08:00
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
@ -1,4 +1,4 @@
|
||||
const { isNone, run } = Ember;
|
||||
const { get, isNone, run, isEmpty, makeArray } = Ember;
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
import UtilsMixin from "select-kit/mixins/utils";
|
||||
import DomHelpersMixin from "select-kit/mixins/dom-helpers";
|
||||
@ -7,7 +7,6 @@ import PluginApiMixin from "select-kit/mixins/plugin-api";
|
||||
import {
|
||||
applyContentPluginApiCallbacks,
|
||||
applyHeaderContentPluginApiCallbacks,
|
||||
applyOnSelectPluginApiCallbacks,
|
||||
applyCollectionHeaderCallbacks
|
||||
} from "select-kit/mixins/plugin-api";
|
||||
|
||||
@ -26,6 +25,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
"isLeftAligned",
|
||||
"isRightAligned",
|
||||
"hasSelection",
|
||||
"hasReachedLimit",
|
||||
],
|
||||
isDisabled: false,
|
||||
isExpanded: false,
|
||||
@ -37,13 +37,13 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
renderedFilterOnce: false,
|
||||
tabindex: 0,
|
||||
none: null,
|
||||
highlightedValue: null,
|
||||
highlighted: null,
|
||||
valueAttribute: "id",
|
||||
nameProperty: "name",
|
||||
autoFilterable: false,
|
||||
filterable: false,
|
||||
filter: "",
|
||||
previousFilter: null,
|
||||
previousFilter: "",
|
||||
filterPlaceholder: "select_kit.filter_placeholder",
|
||||
filterIcon: "search",
|
||||
headerIcon: null,
|
||||
@ -70,6 +70,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
allowContentReplacement: false,
|
||||
collectionHeader: null,
|
||||
allowAutoSelectFirst: true,
|
||||
highlightedSelection: null,
|
||||
|
||||
init() {
|
||||
this._super();
|
||||
@ -78,6 +79,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
this.set("headerComponentOptions", Ember.Object.create());
|
||||
this.set("rowComponentOptions", Ember.Object.create());
|
||||
this.set("computedContent", []);
|
||||
this.set("highlightedSelection", []);
|
||||
|
||||
if (this.site && this.site.isMobileDevice) {
|
||||
this.setProperties({
|
||||
@ -99,6 +101,22 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
}
|
||||
},
|
||||
|
||||
keyDown(event) {
|
||||
if (!isEmpty(this.get("filter"))) return true;
|
||||
|
||||
const keyCode = event.keyCode || event.which;
|
||||
|
||||
if (event.metaKey === true && keyCode === this.keys.A) {
|
||||
this.didPressSelectAll();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (keyCode === this.keys.BACKSPACE) {
|
||||
this.didPressBackspace();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this.removeObserver(`content.@each.${this.get("nameProperty")}`, this, this._compute);
|
||||
this.removeObserver(`content.[]`, this, this._compute);
|
||||
@ -132,28 +150,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
},
|
||||
didComputeAsyncContent() {},
|
||||
|
||||
computeHeaderContent() {
|
||||
return this.baseHeaderComputedContent();
|
||||
},
|
||||
|
||||
computeContentItem(contentItem, options) {
|
||||
return this.baseComputedContentItem(contentItem, options);
|
||||
},
|
||||
|
||||
computeAsyncContentItem(contentItem, options) {
|
||||
return this.computeContentItem(contentItem, options);
|
||||
},
|
||||
|
||||
@computed("isAsync", "filteredAsyncComputedContent.[]", "filteredComputedContent.[]")
|
||||
collectionComputedContent(isAsync, filteredAsyncComputedContent, filteredComputedContent) {
|
||||
return isAsync ? filteredAsyncComputedContent : filteredComputedContent;
|
||||
},
|
||||
|
||||
validateCreate() { return true; },
|
||||
|
||||
validateSelect() { return true; },
|
||||
|
||||
baseComputedContentItem(contentItem, options) {
|
||||
let originalContent;
|
||||
options = options || {};
|
||||
const name = options.name;
|
||||
@ -166,13 +163,39 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
originalContent = contentItem;
|
||||
}
|
||||
|
||||
return {
|
||||
let computedContentItem = {
|
||||
value: this._castInteger(this.valueForContentItem(contentItem)),
|
||||
name: name || this._nameForContent(contentItem),
|
||||
locked: false,
|
||||
created: options.created || false,
|
||||
__sk_row_type: options.created ? "createRow" : null,
|
||||
originalContent
|
||||
};
|
||||
|
||||
return computedContentItem;
|
||||
},
|
||||
|
||||
computeAsyncContentItem(contentItem, options) {
|
||||
return this.computeContentItem(contentItem, options);
|
||||
},
|
||||
|
||||
@computed("isAsync", "isLoading", "filteredAsyncComputedContent.[]", "filteredComputedContent.[]")
|
||||
collectionComputedContent(isAsync, isLoading, filteredAsyncComputedContent, filteredComputedContent) {
|
||||
if (isAsync) {
|
||||
return isLoading ? [] : filteredAsyncComputedContent;
|
||||
} else {
|
||||
return filteredComputedContent;
|
||||
}
|
||||
},
|
||||
|
||||
validateCreate() { return !this.get("hasReachedLimit"); },
|
||||
|
||||
validateSelect() { return !this.get("hasReachedLimit"); },
|
||||
|
||||
@computed("limit", "selection.[]")
|
||||
hasReachedLimit(limit, selection) {
|
||||
if (!limit) return false;
|
||||
return selection.length >= limit;
|
||||
},
|
||||
|
||||
@computed("shouldFilter", "allowAny", "filter")
|
||||
@ -182,16 +205,16 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
return false;
|
||||
},
|
||||
|
||||
@computed("filter", "collectionComputedContent.[]")
|
||||
noContentRow(filter, collectionComputedContent) {
|
||||
if (filter.length > 0 && collectionComputedContent.length === 0) {
|
||||
@computed("filter", "collectionComputedContent.[]", "isLoading")
|
||||
noContentRow(filter, collectionComputedContent, isLoading) {
|
||||
if (filter.length > 0 && collectionComputedContent.length === 0 && !isLoading) {
|
||||
return I18n.t("select_kit.no_content");
|
||||
}
|
||||
},
|
||||
|
||||
@computed("limitReached", "limit")
|
||||
maxContentRow(limitReached, limit) {
|
||||
if (limitReached) {
|
||||
@computed("hasReachedLimit", "limit")
|
||||
maxContentRow(hasReachedLimit, limit) {
|
||||
if (hasReachedLimit) {
|
||||
return I18n.t("select_kit.max_content_reached", { count: limit });
|
||||
}
|
||||
},
|
||||
@ -204,9 +227,9 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
return false;
|
||||
},
|
||||
|
||||
@computed("computedValue", "filter", "collectionComputedContent.[]", "limitReached")
|
||||
shouldDisplayCreateRow(computedValue, filter, collectionComputedContent, limitReached) {
|
||||
if (limitReached) return false;
|
||||
@computed("computedValue", "filter", "collectionComputedContent.[]", "hasReachedLimit", "isLoading")
|
||||
shouldDisplayCreateRow(computedValue, filter, collectionComputedContent, hasReachedLimit, isLoading) {
|
||||
if (isLoading || hasReachedLimit) return false;
|
||||
if (collectionComputedContent.map(c => c.value).includes(filter)) return false;
|
||||
if (this.get("allowAny") && filter.length > 0 && this.validateCreate(filter)) return true;
|
||||
return false;
|
||||
@ -216,7 +239,9 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
createRowComputedContent(filter, shouldDisplayCreateRow) {
|
||||
if (shouldDisplayCreateRow) {
|
||||
let content = this.createContentFromInput(filter);
|
||||
return this.computeContentItem(content, { created: true });
|
||||
let computedContentItem = this.computeContentItem(content, { created: true });
|
||||
computedContentItem.__sk_row_type = "createRow";
|
||||
return computedContentItem;
|
||||
}
|
||||
},
|
||||
|
||||
@ -238,90 +263,100 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
@computed("none")
|
||||
noneRowComputedContent(none) {
|
||||
if (isNone(none)) { return null; }
|
||||
let noneRowComputedContent;
|
||||
|
||||
switch (typeof none) {
|
||||
case "string":
|
||||
return this.computeContentItem(this.noneValue, {
|
||||
noneRowComputedContent = this.computeContentItem(this.noneValue, {
|
||||
name: (I18n.t(none) || "").htmlSafe()
|
||||
});
|
||||
break;
|
||||
default:
|
||||
return this.computeContentItem(none);
|
||||
noneRowComputedContent = this.computeContentItem(none);
|
||||
}
|
||||
|
||||
noneRowComputedContent.__sk_row_type = "noneRow";
|
||||
|
||||
return noneRowComputedContent;
|
||||
},
|
||||
|
||||
createContentFromInput(input) { return input; },
|
||||
|
||||
willSelect() {
|
||||
this.clearFilter();
|
||||
this.set("highlightedValue", null);
|
||||
},
|
||||
didSelect() {
|
||||
this.collapse();
|
||||
this.focus();
|
||||
|
||||
applyOnSelectPluginApiCallbacks(
|
||||
this.get("pluginApiIdentifiers"),
|
||||
this.get("computedValue"),
|
||||
this
|
||||
);
|
||||
|
||||
this._boundaryActionHandler("onSelect", this.get("computedValue"));
|
||||
highlightSelection(items) {
|
||||
this.propertyWillChange("highlightedSelection");
|
||||
this.set("highlightedSelection", makeArray(items));
|
||||
this.propertyDidChange("highlightedSelection");
|
||||
},
|
||||
|
||||
willDeselect() {
|
||||
this.clearFilter();
|
||||
this.set("highlightedValue", null);
|
||||
},
|
||||
didDeselect(rowComputedContentItem) {
|
||||
this.collapse();
|
||||
this.focus();
|
||||
this._boundaryActionHandler("onDeselect", rowComputedContentItem);
|
||||
clearHighlightSelection() {
|
||||
this.highlightSelection([]);
|
||||
},
|
||||
|
||||
willSelect() {},
|
||||
didSelect() {},
|
||||
|
||||
willCreate() {},
|
||||
didCreate() {},
|
||||
|
||||
willDeselect() {},
|
||||
didDeselect() {},
|
||||
|
||||
clearFilter() {
|
||||
this.$filterInput().val("");
|
||||
this.setProperties({ filter: "" });
|
||||
this.setProperties({ filter: "", previousFilter: "" });
|
||||
},
|
||||
|
||||
startLoading() {
|
||||
this.set("isLoading", true);
|
||||
this.set("highlighted", null);
|
||||
this._boundaryActionHandler("onStartLoading");
|
||||
},
|
||||
|
||||
stopLoading() {
|
||||
this.focus();
|
||||
this.set("isLoading", false);
|
||||
this._boundaryActionHandler("onStopLoading");
|
||||
},
|
||||
|
||||
_setCollectionHeaderComputedContent() {
|
||||
const collectionHeaderComputedContent = applyCollectionHeaderCallbacks(
|
||||
@computed("selection.[]", "isExpanded", "filter", "highlightedSelection.[]")
|
||||
collectionHeaderComputedContent() {
|
||||
return applyCollectionHeaderCallbacks(
|
||||
this.get("pluginApiIdentifiers"),
|
||||
this.get("collectionHeader"),
|
||||
this
|
||||
);
|
||||
this.set("collectionHeaderComputedContent", collectionHeaderComputedContent);
|
||||
},
|
||||
|
||||
_setHeaderComputedContent() {
|
||||
const headerComputedContent = applyHeaderContentPluginApiCallbacks(
|
||||
@computed("selection.[]", "isExpanded", "headerIcon")
|
||||
headerComputedContent() {
|
||||
return applyHeaderContentPluginApiCallbacks(
|
||||
this.get("pluginApiIdentifiers"),
|
||||
this.computeHeaderContent(),
|
||||
this
|
||||
);
|
||||
this.set("headerComputedContent", headerComputedContent);
|
||||
},
|
||||
|
||||
_boundaryActionHandler(actionName, ...params) {
|
||||
if (Ember.get(this.actions, actionName)) {
|
||||
if (get(this.actions, actionName)) {
|
||||
run.next(() => this.send(actionName, ...params));
|
||||
} else if (this.get(actionName)) {
|
||||
run.next(() => this.get(actionName)());
|
||||
}
|
||||
},
|
||||
|
||||
highlight(computedContent) {
|
||||
this.set("highlighted", computedContent);
|
||||
this._boundaryActionHandler("onHighlight", computedContent);
|
||||
},
|
||||
|
||||
clearSelection() {
|
||||
this.deselect(this.get("selection"));
|
||||
this.focus();
|
||||
},
|
||||
|
||||
actions: {
|
||||
toggle() {
|
||||
this._boundaryActionHandler("onToggle", this);
|
||||
onToggle() {
|
||||
this.clearHighlightSelection();
|
||||
|
||||
if (this.get("isExpanded")) {
|
||||
this._boundaryActionHandler("onCollapse", this);
|
||||
@ -332,16 +367,29 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||
}
|
||||
},
|
||||
|
||||
highlight(rowComputedContent) {
|
||||
this.set("highlightedValue", rowComputedContent.value);
|
||||
this._boundaryActionHandler("onHighlight", rowComputedContent);
|
||||
onClickRow(computedContentItem) {
|
||||
this.didClickRow(computedContentItem);
|
||||
},
|
||||
|
||||
filterComputedContent(filter) {
|
||||
onClickSelectionItem(computedContentItem) {
|
||||
this.didClickSelectionItem(computedContentItem);
|
||||
},
|
||||
|
||||
onClearSelection() {
|
||||
this.clearSelection();
|
||||
},
|
||||
|
||||
onMouseoverRow(computedContentItem) {
|
||||
this.highlight(computedContentItem);
|
||||
},
|
||||
|
||||
onFilterComputedContent(filter) {
|
||||
if (filter === this.get("previousFilter")) return;
|
||||
|
||||
this.clearHighlightSelection();
|
||||
|
||||
this.setProperties({
|
||||
highlightedValue: null,
|
||||
highlighted: null,
|
||||
renderedFilterOnce: true,
|
||||
previousFilter: filter,
|
||||
filter
|
||||
|
||||
Reference in New Issue
Block a user