mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-21 09:07:49 +08:00
6cda3c728a
Follow up to refactoring the generic utils mixin used in select-kit components in https://github.com/discourse/discourse/pull/32594. This PR follows a different approach as the util functions related to properties here aren't easily extracted without a major change to the interface due to the dependency on `this.selectKit`. These util functions are instead declared on the prototype with a class decorator which ensures the same behaviour is maintained without relying on a mixin. It's largely a lift-and-shift with some minor refactoring of the conditional logic to reduce nesting and improve readability of the functions.
75 lines
1.9 KiB
Text
Vendored
75 lines
1.9 KiB
Text
Vendored
import Component from "@ember/component";
|
|
import { fn } from "@ember/helper";
|
|
import { on } from "@ember/modifier";
|
|
import { computed } from "@ember/object";
|
|
import { guidFor } from "@ember/object/internals";
|
|
import { tagName } from "@ember-decorators/component";
|
|
import icon from "discourse/helpers/d-icon";
|
|
import { i18n } from "discourse-i18n";
|
|
import selectKitPropUtils from "select-kit/lib/select-kit-prop-utils";
|
|
|
|
@tagName("")
|
|
@selectKitPropUtils
|
|
export default class SelectedChoice extends Component {
|
|
item = null;
|
|
selectKit = null;
|
|
extraClass = null;
|
|
id = null;
|
|
|
|
init() {
|
|
super.init(...arguments);
|
|
|
|
this.set("id", guidFor(this));
|
|
}
|
|
|
|
@computed("item")
|
|
get itemValue() {
|
|
return this.getValue(this.item);
|
|
}
|
|
|
|
@computed("item")
|
|
get itemName() {
|
|
return this.getName(this.item);
|
|
}
|
|
|
|
@computed("item")
|
|
get mandatoryValuesArray() {
|
|
return this.get("mandatoryValues")?.split("|") || [];
|
|
}
|
|
|
|
@computed("item")
|
|
get readOnly() {
|
|
if (typeof this.item === "string") {
|
|
return this.mandatoryValuesArray.includes(this.item);
|
|
}
|
|
return this.mandatoryValuesArray.includes(this.item.id);
|
|
}
|
|
|
|
<template>
|
|
{{#if this.readOnly}}
|
|
<button
|
|
class="btn btn-default disabled"
|
|
title={{i18n "admin.site_settings.mandatory_group"}}
|
|
>{{this.itemName}}</button>
|
|
{{else}}
|
|
<button
|
|
{{on "click" (fn this.selectKit.deselect this.item)}}
|
|
aria-label={{i18n "select_kit.delete_item" name=this.itemName}}
|
|
data-value={{this.itemValue}}
|
|
data-name={{this.itemName}}
|
|
type="button"
|
|
id="{{this.id}}-choice"
|
|
class="btn btn-default selected-choice {{this.extraClass}}"
|
|
>
|
|
{{icon "xmark"}}
|
|
{{#if (has-block)}}
|
|
{{yield}}
|
|
{{else}}
|
|
<span class="d-button-label">
|
|
{{this.itemName}}
|
|
</span>
|
|
{{/if}}
|
|
</button>
|
|
{{/if}}
|
|
</template>
|
|
}
|
