mirror of
https://github.com/discourse/discourse.git
synced 2024-12-04 20:03:43 +08:00
0431942f3d
This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component. Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**
65 lines
1.9 KiB
JavaScript
65 lines
1.9 KiB
JavaScript
import { computed } from "@ember/object";
|
|
import Component from "@ember/component";
|
|
import { makeArray } from "discourse-common/lib/helpers";
|
|
import UtilsMixin from "select-kit/mixins/utils";
|
|
import { get } from "@ember/object";
|
|
|
|
export default Component.extend(UtilsMixin, {
|
|
layoutName: "select-kit/templates/components/selected-name",
|
|
classNames: ["select-kit-selected-name", "selected-name", "choice"],
|
|
name: null,
|
|
value: null,
|
|
tabindex: 0,
|
|
attributeBindings: ["title", "value:data-value", "name:data-name"],
|
|
|
|
click() {
|
|
if (this.selectKit.options.clearOnClick) {
|
|
this.selectKit.deselect(this.item);
|
|
return false;
|
|
}
|
|
},
|
|
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
|
|
// we can't listen on `item.nameProperty` given it's variable
|
|
this.setProperties({
|
|
name: this.getName(this.item),
|
|
value:
|
|
this.item === this.selectKit.noneItem ? null : this.getValue(this.item)
|
|
});
|
|
},
|
|
|
|
ariaLabel: computed("item", "sanitizedTitle", function() {
|
|
return this._safeProperty("ariaLabel", this.item) || this.sanitizedTitle;
|
|
}),
|
|
|
|
// this might need a more advanced solution
|
|
// but atm it's the only case we have to handle
|
|
sanitizedTitle: computed("title", function() {
|
|
return String(this.title).replace("…", "");
|
|
}),
|
|
|
|
title: computed("item", function() {
|
|
return this._safeProperty("title", this.item) || this.name || "";
|
|
}),
|
|
|
|
label: computed("title", "name", function() {
|
|
return this._safeProperty("label", this.item) || this.title || this.name;
|
|
}),
|
|
|
|
icons: computed("item.{icon,icons}", function() {
|
|
const icon = makeArray(this._safeProperty("icon", this.item));
|
|
const icons = makeArray(this._safeProperty("icons", this.item));
|
|
return icon.concat(icons).filter(Boolean);
|
|
}),
|
|
|
|
_safeProperty(name, content) {
|
|
if (!content) {
|
|
return null;
|
|
}
|
|
|
|
return get(content, name);
|
|
}
|
|
});
|