mirror of
https://github.com/discourse/discourse.git
synced 2024-12-05 11:53:39 +08:00
fe588cc7f8
* DEV: Fix the function prototype observers deprecation DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.observes('foo') to observer('foo', function() {}). [deprecation id: function-prototype-extensions.observes] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-observes for more details. * DEV: Fix the function prototype event listeners deprecation DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.on('foo') to on('foo', function() {}). [deprecation id: function-prototype-extensions.on] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-on for more details. * DEV: Simplify `default as` imports Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
320 lines
8.5 KiB
JavaScript
320 lines
8.5 KiB
JavaScript
import SelectKitComponent from "select-kit/components/select-kit";
|
|
import discourseComputed, { on } from "discourse-common/utils/decorators";
|
|
const { get, isNone, isEmpty, isPresent, run, makeArray } = Ember;
|
|
|
|
import {
|
|
applyOnSelectPluginApiCallbacks,
|
|
applyOnSelectNonePluginApiCallbacks
|
|
} 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("didUpdateAttrs", "init")
|
|
_compute() {
|
|
run.scheduleOnce("afterRender", () => {
|
|
this.willComputeAttributes();
|
|
let content = this.content || [];
|
|
let asyncContent = this.asyncContent || [];
|
|
content = this.willComputeContent(content);
|
|
asyncContent = this.willComputeAsyncContent(asyncContent);
|
|
let value = this._beforeWillComputeValue(this.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.allowInitialValueMutation) this.mutateAttributes();
|
|
});
|
|
},
|
|
|
|
mutateAttributes() {
|
|
run.next(() => {
|
|
if (this.isDestroyed || this.isDestroying) return;
|
|
|
|
this.mutateContent(this.computedContent);
|
|
this.mutateValue(this.computedValue);
|
|
});
|
|
},
|
|
mutateContent() {},
|
|
mutateValue(computedValue) {
|
|
this.set("value", computedValue);
|
|
},
|
|
|
|
forceValue(value) {
|
|
this.mutateValue(value);
|
|
this._compute();
|
|
},
|
|
|
|
_beforeWillComputeValue(value) {
|
|
if (
|
|
!isEmpty(this.content) &&
|
|
isEmpty(value) &&
|
|
isNone(this.none) &&
|
|
this.allowAutoSelectFirst
|
|
) {
|
|
value = this.valueForContentItem(get(this.content, "firstObject"));
|
|
}
|
|
|
|
switch (typeof value) {
|
|
case "string":
|
|
case "number":
|
|
return this._cast(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) {
|
|
return computedContent.filter(c => {
|
|
return this._normalize(get(c, "name")).indexOf(filter) > -1;
|
|
});
|
|
},
|
|
|
|
computeHeaderContent() {
|
|
let content = {
|
|
title: this.title,
|
|
icons: makeArray(this.getWithDefault("headerIcon", [])),
|
|
value: this.get("selection.value"),
|
|
name:
|
|
this.get("selection.name") || this.get("noneRowComputedContent.name")
|
|
};
|
|
|
|
if (this.noneLabel && !this.hasSelection) {
|
|
content.title = content.name = I18n.t(this.noneLabel);
|
|
}
|
|
|
|
return content;
|
|
},
|
|
|
|
@discourseComputed("computedAsyncContent.[]", "computedValue")
|
|
filteredAsyncComputedContent(computedAsyncContent, computedValue) {
|
|
computedAsyncContent = (computedAsyncContent || []).filter(c => {
|
|
return computedValue !== get(c, "value");
|
|
});
|
|
|
|
if (this.limitMatches) {
|
|
return computedAsyncContent.slice(0, this.limitMatches);
|
|
}
|
|
|
|
return computedAsyncContent;
|
|
},
|
|
|
|
@discourseComputed(
|
|
"computedContent.[]",
|
|
"computedValue",
|
|
"filter",
|
|
"shouldFilter"
|
|
)
|
|
filteredComputedContent(
|
|
computedContent,
|
|
computedValue,
|
|
filter,
|
|
shouldFilter
|
|
) {
|
|
if (shouldFilter) {
|
|
computedContent = this.filterComputedContent(
|
|
computedContent,
|
|
computedValue,
|
|
this._normalize(filter)
|
|
);
|
|
}
|
|
|
|
if (this.limitMatches) {
|
|
return computedContent.slice(0, this.limitMatches);
|
|
}
|
|
|
|
return computedContent;
|
|
},
|
|
|
|
@discourseComputed("computedValue", "computedContent.[]")
|
|
selection(computedValue, computedContent) {
|
|
return computedContent.findBy("value", computedValue);
|
|
},
|
|
|
|
@discourseComputed("selection")
|
|
hasSelection(selection) {
|
|
return selection !== this.noneRowComputedContent && !isNone(selection);
|
|
},
|
|
|
|
@discourseComputed(
|
|
"computedValue",
|
|
"filter",
|
|
"collectionComputedContent.[]",
|
|
"hasReachedMaximum",
|
|
"hasReachedMinimum"
|
|
)
|
|
shouldDisplayCreateRow(computedValue, filter) {
|
|
return this._super() && computedValue !== filter;
|
|
},
|
|
|
|
autoHighlight() {
|
|
run.schedule("afterRender", () => {
|
|
if (this.shouldDisplayCreateRow) {
|
|
this.highlight(this.createRowComputedContent);
|
|
return;
|
|
}
|
|
|
|
if (!isEmpty(this.filter) && !isEmpty(this.collectionComputedContent)) {
|
|
this.highlight(this.get("collectionComputedContent.firstObject"));
|
|
return;
|
|
}
|
|
|
|
if (!this.isAsync && this.hasSelection && isEmpty(this.filter)) {
|
|
this.highlight(get(makeArray(this.selection), "firstObject"));
|
|
return;
|
|
}
|
|
|
|
if (
|
|
!this.isAsync &&
|
|
!this.hasSelection &&
|
|
isEmpty(this.filter) &&
|
|
!isEmpty(this.collectionComputedContent)
|
|
) {
|
|
this.highlight(this.get("collectionComputedContent.firstObject"));
|
|
return;
|
|
}
|
|
|
|
if (isPresent(this.noneRowComputedContent)) {
|
|
this.highlight(this.noneRowComputedContent);
|
|
return;
|
|
}
|
|
});
|
|
},
|
|
|
|
select(computedContentItem) {
|
|
if (computedContentItem.__sk_row_type === "noopRow") {
|
|
applyOnSelectPluginApiCallbacks(
|
|
this.pluginApiIdentifiers,
|
|
computedContentItem.value,
|
|
this
|
|
);
|
|
|
|
this._boundaryActionHandler("onSelect", computedContentItem.value);
|
|
this._boundaryActionHandler("onSelectAny", computedContentItem);
|
|
return;
|
|
}
|
|
|
|
if (this.hasSelection) {
|
|
this.deselect(this.get("selection.value"));
|
|
}
|
|
|
|
if (
|
|
!computedContentItem ||
|
|
computedContentItem.__sk_row_type === "noneRow"
|
|
) {
|
|
applyOnSelectNonePluginApiCallbacks(this.pluginApiIdentifiers, this);
|
|
this._boundaryActionHandler("onSelectNone");
|
|
this._boundaryActionHandler("onSelectAny", computedContentItem);
|
|
this.clearSelection();
|
|
return;
|
|
}
|
|
|
|
if (computedContentItem.__sk_row_type === "createRow") {
|
|
if (
|
|
this.computedValue !== computedContentItem.value &&
|
|
this.validateCreate(computedContentItem.value)
|
|
) {
|
|
this.willCreate(computedContentItem);
|
|
computedContentItem.__sk_row_type = null;
|
|
this.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();
|
|
|
|
const action = computedContentItem.originalContent.action;
|
|
if (action) {
|
|
action();
|
|
} else {
|
|
this.setProperties({
|
|
highlighted: null,
|
|
computedValue: computedContentItem.value
|
|
});
|
|
|
|
run.next(() => this.mutateAttributes());
|
|
}
|
|
|
|
run.schedule("afterRender", () => {
|
|
this.didSelect(computedContentItem);
|
|
|
|
applyOnSelectPluginApiCallbacks(
|
|
this.pluginApiIdentifiers,
|
|
computedContentItem.value,
|
|
this
|
|
);
|
|
|
|
this._boundaryActionHandler(
|
|
"onSelect",
|
|
computedContentItem.value,
|
|
computedContentItem.originalContent
|
|
);
|
|
this._boundaryActionHandler("onSelectAny", computedContentItem);
|
|
|
|
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();
|
|
});
|
|
});
|
|
}
|
|
});
|