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() { return { title: this.get("title"), icons: makeArray(this.getWithDefault("headerIcon", [])), value: this.get("selection.value"), name: this.get("selection.name") || this.get("noneRowComputedContent.name") }; }, @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.[]", "hasReachedLimit") 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(); }); }); } });