discourse/app/assets/javascripts/select-kit/components/single-select.js.es6

243 lines
7.5 KiB
JavaScript

import SelectKitComponent from "select-kit/components/select-kit";
import { default as computed, on } from 'ember-addons/ember-computed-decorators';
const { get, isNone, isEmpty, isPresent, run, makeArray } = Ember;
import {
applyOnSelectPluginApiCallbacks,
} from "select-kit/mixins/plugin-api";
export default SelectKitComponent.extend({
pluginApiIdentifiers: ["single-select"],
layoutName: "select-kit/templates/components/single-select",
classNames: "single-select",
computedValue: null,
value: null,
allowInitialValueMutation: false,
@on("didReceiveAttrs")
_compute() {
run.scheduleOnce("afterRender", () => {
this.willComputeAttributes();
let content = this.get("content") || [];
let asyncContent = this.get("asyncContent") || [];
content = this.willComputeContent(content);
asyncContent = this.willComputeAsyncContent(asyncContent);
let value = this._beforeWillComputeValue(this.get("value"));
content = this.computeContent(content);
asyncContent = this.computeAsyncContent(asyncContent);
content = this._beforeDidComputeContent(content);
asyncContent = this._beforeDidComputeAsyncContent(asyncContent);
value = this.willComputeValue(value);
value = this.computeValue(value);
value = this._beforeDidComputeValue(value);
this.didComputeContent(content);
this.didComputeAsyncContent(asyncContent);
this.didComputeValue(value);
this.didComputeAttributes();
if (this.get("allowInitialValueMutation")) this.mutateAttributes();
});
},
mutateAttributes() {
run.next(() => {
if (this.get("isDestroyed") || this.get("isDestroying")) return;
this.mutateContent(this.get("computedContent"));
this.mutateValue(this.get("computedValue"));
});
},
mutateContent() {},
mutateValue(computedValue) {
this.set("value", computedValue);
},
_beforeWillComputeValue(value) {
if (!isEmpty(this.get("content")) &&
isEmpty(value) &&
isNone(this.get("none")) &&
this.get("allowAutoSelectFirst")) {
value = this.valueForContentItem(get(this.get("content"), "firstObject"));
}
switch (typeof value) {
case "string":
case "number":
return this._castInteger(value === "" ? null : value);
default:
return value;
}
},
willComputeValue(value) { return value; },
computeValue(value) { return value; },
_beforeDidComputeValue(value) {
this.setProperties({ computedValue: value });
return value;
},
didComputeValue(value) { return value; },
filterComputedContent(computedContent, computedValue, filter) {
const lowerFilter = filter.toLowerCase();
return computedContent.filter(c => {
return get(c, "name").toLowerCase().indexOf(lowerFilter) > -1;
});
},
computeHeaderContent() {
let content = {
title: this.get("title"),
icons: makeArray(this.getWithDefault("headerIcon", [])),
value: this.get("selection.value"),
name: this.get("selection.name") || this.get("noneRowComputedContent.name")
};
if (this.get("noneLabel") && !this.get("hasSelection")) {
content.title = content.name = I18n.t(this.get("noneLabel"));
}
return content;
},
@computed("computedAsyncContent.[]", "computedValue")
filteredAsyncComputedContent(computedAsyncContent, computedValue) {
computedAsyncContent = computedAsyncContent.filter(c => {
return computedValue !== get(c, "value");
});
if (this.get("limitMatches")) {
return computedAsyncContent.slice(0, this.get("limitMatches"));
}
return computedAsyncContent;
},
@computed("computedContent.[]", "computedValue", "filter", "shouldFilter")
filteredComputedContent(computedContent, computedValue, filter, shouldFilter) {
if (shouldFilter) {
computedContent = this.filterComputedContent(computedContent, computedValue, filter);
}
if (this.get("limitMatches")) {
return computedContent.slice(0, this.get("limitMatches"));
}
return computedContent;
},
@computed("computedValue", "computedContent.[]")
selection(computedValue, computedContent) {
return computedContent.findBy("value", computedValue);
},
@computed("selection")
hasSelection(selection) {
return selection !== this.get("noneRowComputedContent") && !isNone(selection);
},
@computed("computedValue", "filter", "collectionComputedContent.[]", "hasReachedMaximum", "hasReachedMinimum")
shouldDisplayCreateRow(computedValue, filter) {
return this._super() && computedValue !== filter;
},
autoHighlight() {
run.schedule("afterRender", () => {
if (this.get("shouldDisplayCreateRow")) {
this.highlight(this.get("createRowComputedContent"));
return;
}
if (!isEmpty(this.get("filter")) && !isEmpty(this.get("collectionComputedContent"))) {
this.highlight(this.get("collectionComputedContent.firstObject"));
return;
}
if (!this.get("isAsync") && this.get("hasSelection") && isEmpty(this.get("filter"))) {
this.highlight(get(makeArray(this.get("selection")), "firstObject"));
return;
}
if (!this.get("isAsync") && !this.get("hasSelection") && isEmpty(this.get("filter")) && !isEmpty(this.get("collectionComputedContent"))) {
this.highlight(this.get("collectionComputedContent.firstObject"));
return;
}
if (isPresent(this.get("noneRowComputedContent"))) {
this.highlight(this.get("noneRowComputedContent"));
return;
}
});
},
select(computedContentItem) {
if (!computedContentItem || computedContentItem.__sk_row_type === "noneRow") {
this.clearSelection();
return;
}
if (computedContentItem.__sk_row_type === "createRow") {
if (this.get("computedValue") !== computedContentItem.value &&
this.validateCreate(computedContentItem.value)) {
this.willCreate(computedContentItem);
computedContentItem.__sk_row_type = null;
this.get("computedContent").pushObject(computedContentItem);
run.schedule("afterRender", () => {
this.didCreate(computedContentItem);
this._boundaryActionHandler("onCreate");
});
this.select(computedContentItem);
return;
} else {
this._boundaryActionHandler("onCreateFailure");
return;
}
}
if (this.validateSelect(computedContentItem)) {
this.willSelect(computedContentItem);
this.clearFilter();
this.setProperties({ highlighted: null, computedValue: computedContentItem.value });
run.next(() => this.mutateAttributes());
run.schedule("afterRender", () => {
this.didSelect(computedContentItem);
applyOnSelectPluginApiCallbacks(
this.get("pluginApiIdentifiers"),
computedContentItem.value,
this
);
this._boundaryActionHandler("onSelect", computedContentItem.value);
this.autoHighlight();
});
} else {
this._boundaryActionHandler("onSelectFailure");
}
},
deselect(computedContentItem) {
makeArray(computedContentItem).forEach((item) => {
this.willDeselect(item);
this.clearFilter();
this.setProperties({
computedValue: null,
highlighted: null,
highlightedSelection: []
});
run.next(() => this.mutateAttributes());
run.schedule("afterRender", () => {
this.didDeselect(item);
this._boundaryActionHandler("onDeselect", item);
this.autoHighlight();
});
});
}
});