import discourseComputed from "discourse-common/utils/decorators"; import EmberObject from "@ember/object"; import Component from "@ember/component"; const { get, isNone, run, isEmpty, makeArray } = Ember; import UtilsMixin from "select-kit/mixins/utils"; import DomHelpersMixin from "select-kit/mixins/dom-helpers"; import EventsMixin from "select-kit/mixins/events"; import PluginApiMixin from "select-kit/mixins/plugin-api"; import { applyContentPluginApiCallbacks, applyHeaderContentPluginApiCallbacks, applyCollectionHeaderCallbacks } from "select-kit/mixins/plugin-api"; export default Component.extend( UtilsMixin, PluginApiMixin, DomHelpersMixin, EventsMixin, { pluginApiIdentifiers: ["select-kit"], layoutName: "select-kit/templates/components/select-kit", classNames: ["select-kit"], classNameBindings: [ "isLoading", "isFocused", "isExpanded", "isDisabled", "isHidden", "hasSelection", "hasReachedMaximum", "hasReachedMinimum" ], isDisabled: false, isExpanded: false, isFocused: false, isHidden: false, isLoading: false, isAsync: false, renderedBodyOnce: false, renderedFilterOnce: false, tabindex: 0, none: null, highlighted: null, valueAttribute: "id", nameProperty: "name", autoFilterable: false, filterable: false, filter: "", previousFilter: "", filterIcon: "search", headerIcon: null, rowComponent: "select-kit/select-kit-row", rowComponentOptions: null, noneRowComponent: "select-kit/select-kit-none-row", createRowComponent: "select-kit/select-kit-create-row", filterComponent: "select-kit/select-kit-filter", headerComponent: "select-kit/select-kit-header", headerComponentOptions: null, headerComputedContent: null, collectionHeaderComputedContent: null, collectionComponent: "select-kit/select-kit-collection", verticalOffset: 0, horizontalOffset: 0, fullWidthOnMobile: false, castInteger: false, castBoolean: false, allowAny: false, allowInitialValueMutation: false, content: null, computedContent: null, limitMatches: null, nameChanges: false, allowContentReplacement: false, collectionHeader: null, allowAutoSelectFirst: true, highlightedSelection: null, maximum: null, minimum: null, minimumLabel: null, maximumLabel: null, forceEscape: false, init() { this._super(...arguments); this.selectKitComponent = true; this.noneValue = "__none__"; this.set( "headerComponentOptions", EmberObject.create({ forceEscape: this.forceEscape }) ); this.set( "rowComponentOptions", EmberObject.create({ forceEscape: this.forceEscape }) ); this.set("computedContent", []); this.set("highlightedSelection", []); if (this.nameChanges) { this.addObserver( `content.@each.${this.nameProperty}`, this, this._compute ); } if (this.allowContentReplacement) { this.addObserver(`content.[]`, this, this._compute); } if (this.isAsync) { this.addObserver(`asyncContent.[]`, this, this._compute); } }, keyDown(event) { if (!isEmpty(this.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.nameProperty}`, this, "_compute" ); this.removeObserver(`content.[]`, this, "_compute"); this.removeObserver(`asyncContent.[]`, this, "_compute"); }, willComputeAttributes() {}, didComputeAttributes() {}, willComputeContent(content) { return applyContentPluginApiCallbacks( this.pluginApiIdentifiers, content, this ); }, computeContent(content) { return content; }, _beforeDidComputeContent(content) { let existingCreatedComputedContent = []; if (!this.allowContentReplacement) { existingCreatedComputedContent = this.computedContent.filterBy( "created", true ); } this.setProperties({ computedContent: content .map(c => this.computeContentItem(c)) .concat(existingCreatedComputedContent) }); return content; }, didComputeContent() {}, willComputeAsyncContent(content) { return content; }, computeAsyncContent(content) { return content; }, _beforeDidComputeAsyncContent(content) { content = applyContentPluginApiCallbacks( this.pluginApiIdentifiers, content, this ); this.setProperties({ computedAsyncContent: content.map(c => this.computeAsyncContentItem(c)) }); return content; }, didComputeAsyncContent() {}, computeContentItem(contentItem, options) { let originalContent; options = options || {}; const name = options.name; if (typeof contentItem === "string" || typeof contentItem === "number") { originalContent = {}; originalContent[this.valueAttribute] = contentItem; originalContent[this.nameProperty] = name || contentItem; } else { originalContent = contentItem; } let computedContentItem = { value: this._cast(this.valueForContentItem(contentItem)), name: name || this._nameForContent(contentItem), locked: false, created: options.created || false, __sk_row_type: options.created ? "createRow" : contentItem.__sk_row_type, originalContent }; return computedContentItem; }, computeAsyncContentItem(contentItem, options) { return this.computeContentItem(contentItem, options); }, @discourseComputed( "isAsync", "isLoading", "filteredAsyncComputedContent.[]", "filteredComputedContent.[]" ) collectionComputedContent( isAsync, isLoading, filteredAsyncComputedContent, filteredComputedContent ) { if (isAsync) { return isLoading ? [] : filteredAsyncComputedContent; } else { return filteredComputedContent; } }, validateCreate(created) { return !this.hasReachedMaximum && created.length > 0; }, validateSelect() { return !this.hasReachedMaximum; }, @discourseComputed("maximum", "selection.[]") hasReachedMaximum(maximum, selection) { if (!maximum) return false; selection = makeArray(selection); return selection.length >= maximum; }, @discourseComputed("minimum", "selection.[]") hasReachedMinimum(minimum, selection) { if (!minimum) return true; selection = makeArray(selection); return selection.length >= minimum; }, @discourseComputed("shouldFilter", "allowAny") shouldDisplayFilter(shouldFilter, allowAny) { if (shouldFilter) return true; if (allowAny) return true; return false; }, @discourseComputed("filter", "collectionComputedContent.[]", "isLoading") noContentRow(filter, collectionComputedContent, isLoading) { if ( filter.length > 0 && collectionComputedContent.length === 0 && !isLoading ) { return this.termMatchErrorMessage || I18n.t("select_kit.no_content"); } }, @discourseComputed("hasReachedMaximum", "hasReachedMinimum", "isExpanded") validationMessage(hasReachedMaximum, hasReachedMinimum) { if (hasReachedMaximum && this.maximum) { const key = this.maximumLabel || "select_kit.max_content_reached"; return I18n.t(key, { count: this.maximum }); } if (!hasReachedMinimum && this.minimum) { const key = this.minimumLabel || "select_kit.min_content_not_reached"; return I18n.t(key, { count: this.minimum }); } }, @discourseComputed("allowAny") filterPlaceholder(allowAny) { return allowAny ? "select_kit.filter_placeholder_with_any" : "select_kit.filter_placeholder"; }, @discourseComputed( "filter", "filterable", "autoFilterable", "renderedFilterOnce" ) shouldFilter(filter, filterable, autoFilterable, renderedFilterOnce) { if (renderedFilterOnce && filterable) return true; if (filterable) return true; if (autoFilterable && filter.length > 0) return true; return false; }, @discourseComputed( "computedValue", "filter", "collectionComputedContent.[]", "hasReachedMaximum", "isLoading" ) shouldDisplayCreateRow( computedValue, filter, collectionComputedContent, hasReachedMaximum, isLoading ) { if (isLoading || hasReachedMaximum) return false; if (collectionComputedContent.map(c => c.value).includes(filter)) return false; if (this.allowAny && this.validateCreate(filter)) return true; return false; }, @discourseComputed("filter", "shouldDisplayCreateRow") createRowComputedContent(filter, shouldDisplayCreateRow) { if (shouldDisplayCreateRow) { let content = this.createContentFromInput(filter); let computedContentItem = this.computeContentItem(content, { created: true }); computedContentItem.__sk_row_type = "createRow"; return computedContentItem; } }, @discourseComputed templateForRow() { return () => null; }, @discourseComputed templateForNoneRow() { return () => null; }, @discourseComputed("filter") templateForCreateRow() { return rowComponent => { return I18n.t("select_kit.create", { content: rowComponent.get("computedContent.name") }); }; }, @discourseComputed("none") noneRowComputedContent(none) { if (isNone(none)) return null; let noneRowComputedContent; switch (typeof none) { case "string": noneRowComputedContent = this.computeContentItem(this.noneValue, { name: (I18n.t(none) || "").htmlSafe() }); break; default: noneRowComputedContent = this.computeContentItem(none); } noneRowComputedContent.__sk_row_type = "noneRow"; return noneRowComputedContent; }, createContentFromInput(input) { return input; }, highlightSelection(items) { this.set("highlightedSelection", makeArray(items)); this.notifyPropertyChange("highlightedSelection"); }, clearHighlightSelection() { this.highlightSelection([]); }, willSelect() {}, didSelect() {}, didClearSelection() {}, willCreate() {}, didCreate() {}, willDeselect() {}, didDeselect() {}, clearFilter() { this.$filterInput().val(""); this.setProperties({ filter: "", previousFilter: "" }); }, startLoading() { this.set("isLoading", true); this.set("highlighted", null); this._boundaryActionHandler("onStartLoading"); }, stopLoading() { if (this.site && !this.site.isMobileDevice) { this.focusFilterOrHeader(); } this.set("isLoading", false); this._boundaryActionHandler("onStopLoading"); }, @discourseComputed( "selection.[]", "isExpanded", "filter", "highlightedSelection.[]" ) collectionHeaderComputedContent() { return applyCollectionHeaderCallbacks( this.pluginApiIdentifiers, this.collectionHeader, this ); }, @discourseComputed("selection.[]", "isExpanded", "headerIcon") headerComputedContent() { return applyHeaderContentPluginApiCallbacks( this.pluginApiIdentifiers, this.computeHeaderContent(), this ); }, _boundaryActionHandler(actionName, ...params) { if (get(this.actions, actionName)) { run.next(() => this.send(actionName, ...params)); } else if (this.get(actionName)) { run.next(() => this.get(actionName)(...params)); } }, highlight(computedContent) { this.set("highlighted", computedContent); this._boundaryActionHandler("onHighlight", computedContent); }, clearSelection() { this.deselect(this.selection); this.focusFilterOrHeader(); this.didClearSelection(); }, actions: { onToggle() { this.clearHighlightSelection(); if (this.isExpanded) { this.collapse(); } else { this.expand(); } }, onClickRow(computedContentItem) { this.didClickRow(computedContentItem); }, onClickSelectionItem(computedContentItem) { this.didClickSelectionItem(computedContentItem); }, onClearSelection() { this.clearSelection(); }, onMouseoverRow(computedContentItem) { this.highlight(computedContentItem); }, onFilterComputedContent(filter) { if (filter === this.previousFilter) return; this.clearHighlightSelection(); this.setProperties({ highlighted: null, renderedFilterOnce: true, previousFilter: filter, filter }); this.autoHighlight(); this._boundaryActionHandler("onFilter", filter); } } } );