discourse/app/assets/javascripts/select-kit/addon/components/single-select.js
David Taylor 3e3c051164
DEV: Convert select-kit base classes to native class syntax (#28467)
This lays the groundwork for converting SelectKit subclasses to native class syntax. This commit is designed to be entirely backwards-compatible, so it should not affect any existing subclasses.

Of interest:

- Any properties which are designed to be overridden by subclasses are implemented using a local `@protoProp` decorator. That means they are applied to the prototype, so that they can be overridden in subclasses by both legacy `.extend()` prototype extensions, and by modern native-class fields.

- New class decorators are introduced: `@selectKitOptions` and `@pluginApiIdentifiers`. These are native class versions of the legacy `concatenatedProperties` system. This follows the pattern Ember has introduced for `@className`, `@classNameBindings`, etc.
2024-08-22 09:39:03 +01:00

46 lines
1.2 KiB
JavaScript

import { computed } from "@ember/object";
import { isEmpty } from "@ember/utils";
import { classNames } from "@ember-decorators/component";
import SelectKitComponent, {
pluginApiIdentifiers,
selectKitOptions,
} from "select-kit/components/select-kit";
@classNames("single-select")
@selectKitOptions({
headerComponent: "select-kit/single-select-header",
})
@pluginApiIdentifiers(["single-select"])
export default class SingleSelect extends SelectKitComponent {
singleSelect = true;
@computed("value", "content.[]", "selectKit.noneItem")
get selectedContent() {
if (!isEmpty(this.value)) {
let content;
const value =
this.selectKit.options.castInteger && this._isNumeric(this.value)
? Number(this.value)
: this.value;
if (this.selectKit.valueProperty) {
content = (this.content || []).findBy(
this.selectKit.valueProperty,
value
);
return this.selectKit.modifySelection(
content || this.defaultItem(value, value)
);
} else {
return this.selectKit.modifySelection(
(this.content || []).filter((c) => c === value)
);
}
} else {
return this.selectKit.noneItem;
}
}
}