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

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);
      }
    }
  }
);