DEV: Minor refactor of d-menu/d-tooltip (#26942)
* `menuInstance` cached getter -> prop * `next()` and a `trigger` check -> gone * `allowedProperties` action -> getter * `keys` -> `entries` * update the `service` import * flatten the object spread structures
This commit is contained in:
parent
4404b6808c
commit
20e049bcbc
|
@ -1,10 +1,7 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { cached } from "@glimmer/tracking";
|
||||
import { getOwner } from "@ember/application";
|
||||
import { concat } from "@ember/helper";
|
||||
import { action } from "@ember/object";
|
||||
import { next } from "@ember/runloop";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { service } from "@ember/service";
|
||||
import { modifier } from "ember-modifier";
|
||||
import { and } from "truth-helpers";
|
||||
import DButton from "discourse/components/d-button";
|
||||
|
@ -19,25 +16,16 @@ export default class DMenu extends Component {
|
|||
@service menu;
|
||||
@service site;
|
||||
|
||||
menuInstance = new DMenuInstance(getOwner(this), {
|
||||
...this.allowedProperties,
|
||||
autoUpdate: true,
|
||||
listeners: true,
|
||||
});
|
||||
|
||||
registerTrigger = modifier((element) => {
|
||||
if (!this.menuInstance.trigger) {
|
||||
next(() => {
|
||||
this.menuInstance.trigger = element;
|
||||
this.options.onRegisterApi?.(this.menuInstance);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@cached
|
||||
get menuInstance() {
|
||||
return new DMenuInstance(getOwner(this), {
|
||||
...this.allowedProperties(),
|
||||
...{
|
||||
autoUpdate: true,
|
||||
listeners: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
get menuId() {
|
||||
return `d-menu-${this.menuInstance.id}`;
|
||||
|
@ -54,18 +42,17 @@ export default class DMenu extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
@action
|
||||
allowedProperties() {
|
||||
get allowedProperties() {
|
||||
const properties = {};
|
||||
Object.keys(MENU.options).forEach((key) => {
|
||||
const value = MENU.options[key];
|
||||
for (const [key, value] of Object.entries(MENU.options)) {
|
||||
properties[key] = this.args[key] ?? value;
|
||||
});
|
||||
}
|
||||
return properties;
|
||||
}
|
||||
|
||||
<template>
|
||||
<DButton
|
||||
{{this.registerTrigger}}
|
||||
class={{concatClass
|
||||
"fk-d-menu__trigger"
|
||||
(if this.menuInstance.expanded "-expanded")
|
||||
|
@ -81,7 +68,6 @@ export default class DMenu extends Component {
|
|||
@translatedTitle={{@title}}
|
||||
@disabled={{@disabled}}
|
||||
aria-expanded={{if this.menuInstance.expanded "true" "false"}}
|
||||
{{this.registerTrigger}}
|
||||
...attributes
|
||||
>
|
||||
{{#if (has-block "trigger")}}
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { cached } from "@glimmer/tracking";
|
||||
import { getOwner } from "@ember/application";
|
||||
import { concat } from "@ember/helper";
|
||||
import { action } from "@ember/object";
|
||||
import { next } from "@ember/runloop";
|
||||
import { service } from "@ember/service";
|
||||
import { modifier } from "ember-modifier";
|
||||
import { and } from "truth-helpers";
|
||||
|
@ -17,22 +14,16 @@ export default class DTooltip extends Component {
|
|||
@service tooltip;
|
||||
@service internalTooltip;
|
||||
|
||||
tooltipInstance = new DTooltipInstance(getOwner(this), {
|
||||
...this.allowedProperties,
|
||||
autoUpdate: true,
|
||||
listeners: true,
|
||||
});
|
||||
|
||||
registerTrigger = modifier((element) => {
|
||||
if (!this.tooltipInstance?.trigger) {
|
||||
next(() => {
|
||||
this.tooltipInstance.trigger = element;
|
||||
this.options.onRegisterApi?.(this.tooltipInstance);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@cached
|
||||
get tooltipInstance() {
|
||||
return new DTooltipInstance(getOwner(this), {
|
||||
...this.allowedProperties(),
|
||||
...{ autoUpdate: true, listeners: true },
|
||||
});
|
||||
}
|
||||
|
||||
get options() {
|
||||
return this.tooltipInstance?.options;
|
||||
|
@ -45,18 +36,17 @@ export default class DTooltip extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
@action
|
||||
allowedProperties() {
|
||||
get allowedProperties() {
|
||||
const properties = {};
|
||||
Object.keys(TOOLTIP.options).forEach((key) => {
|
||||
const value = TOOLTIP.options[key];
|
||||
for (const [key, value] of Object.entries(TOOLTIP.options)) {
|
||||
properties[key] = this.args[key] ?? value;
|
||||
});
|
||||
}
|
||||
return properties;
|
||||
}
|
||||
|
||||
<template>
|
||||
<span
|
||||
{{this.registerTrigger this.allowedProperties}}
|
||||
class={{concatClass
|
||||
"fk-d-tooltip__trigger"
|
||||
(if this.tooltipInstance.expanded "-expanded")
|
||||
|
@ -66,7 +56,6 @@ export default class DTooltip extends Component {
|
|||
data-identifier={{this.options.identifier}}
|
||||
data-trigger
|
||||
aria-expanded={{if this.tooltipInstance.expanded "true" "false"}}
|
||||
{{this.registerTrigger (this.allowedProperties)}}
|
||||
...attributes
|
||||
>
|
||||
<span class="fk-d-tooltip__trigger-container">
|
||||
|
|
Loading…
Reference in New Issue