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:
Jarek Radosz 2024-05-09 10:54:37 +02:00 committed by GitHub
parent 4404b6808c
commit 20e049bcbc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 50 deletions

View File

@ -1,10 +1,7 @@
import Component from "@glimmer/component"; import Component from "@glimmer/component";
import { cached } from "@glimmer/tracking";
import { getOwner } from "@ember/application"; import { getOwner } from "@ember/application";
import { concat } from "@ember/helper"; import { concat } from "@ember/helper";
import { action } from "@ember/object"; import { service } from "@ember/service";
import { next } from "@ember/runloop";
import { inject as service } from "@ember/service";
import { modifier } from "ember-modifier"; import { modifier } from "ember-modifier";
import { and } from "truth-helpers"; import { and } from "truth-helpers";
import DButton from "discourse/components/d-button"; import DButton from "discourse/components/d-button";
@ -19,25 +16,16 @@ export default class DMenu extends Component {
@service menu; @service menu;
@service site; @service site;
registerTrigger = modifier((element) => { menuInstance = new DMenuInstance(getOwner(this), {
if (!this.menuInstance.trigger) { ...this.allowedProperties,
next(() => { autoUpdate: true,
this.menuInstance.trigger = element; listeners: true,
this.options.onRegisterApi?.(this.menuInstance);
});
}
}); });
@cached registerTrigger = modifier((element) => {
get menuInstance() { this.menuInstance.trigger = element;
return new DMenuInstance(getOwner(this), { this.options.onRegisterApi?.(this.menuInstance);
...this.allowedProperties(), });
...{
autoUpdate: true,
listeners: true,
},
});
}
get menuId() { get menuId() {
return `d-menu-${this.menuInstance.id}`; return `d-menu-${this.menuInstance.id}`;
@ -54,18 +42,17 @@ export default class DMenu extends Component {
}; };
} }
@action get allowedProperties() {
allowedProperties() {
const properties = {}; const properties = {};
Object.keys(MENU.options).forEach((key) => { for (const [key, value] of Object.entries(MENU.options)) {
const value = MENU.options[key];
properties[key] = this.args[key] ?? value; properties[key] = this.args[key] ?? value;
}); }
return properties; return properties;
} }
<template> <template>
<DButton <DButton
{{this.registerTrigger}}
class={{concatClass class={{concatClass
"fk-d-menu__trigger" "fk-d-menu__trigger"
(if this.menuInstance.expanded "-expanded") (if this.menuInstance.expanded "-expanded")
@ -81,7 +68,6 @@ export default class DMenu extends Component {
@translatedTitle={{@title}} @translatedTitle={{@title}}
@disabled={{@disabled}} @disabled={{@disabled}}
aria-expanded={{if this.menuInstance.expanded "true" "false"}} aria-expanded={{if this.menuInstance.expanded "true" "false"}}
{{this.registerTrigger}}
...attributes ...attributes
> >
{{#if (has-block "trigger")}} {{#if (has-block "trigger")}}

View File

@ -1,9 +1,6 @@
import Component from "@glimmer/component"; import Component from "@glimmer/component";
import { cached } from "@glimmer/tracking";
import { getOwner } from "@ember/application"; import { getOwner } from "@ember/application";
import { concat } from "@ember/helper"; import { concat } from "@ember/helper";
import { action } from "@ember/object";
import { next } from "@ember/runloop";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { modifier } from "ember-modifier"; import { modifier } from "ember-modifier";
import { and } from "truth-helpers"; import { and } from "truth-helpers";
@ -17,22 +14,16 @@ export default class DTooltip extends Component {
@service tooltip; @service tooltip;
@service internalTooltip; @service internalTooltip;
registerTrigger = modifier((element) => { tooltipInstance = new DTooltipInstance(getOwner(this), {
if (!this.tooltipInstance?.trigger) { ...this.allowedProperties,
next(() => { autoUpdate: true,
this.tooltipInstance.trigger = element; listeners: true,
this.options.onRegisterApi?.(this.tooltipInstance);
});
}
}); });
@cached registerTrigger = modifier((element) => {
get tooltipInstance() { this.tooltipInstance.trigger = element;
return new DTooltipInstance(getOwner(this), { this.options.onRegisterApi?.(this.tooltipInstance);
...this.allowedProperties(), });
...{ autoUpdate: true, listeners: true },
});
}
get options() { get options() {
return this.tooltipInstance?.options; return this.tooltipInstance?.options;
@ -45,18 +36,17 @@ export default class DTooltip extends Component {
}; };
} }
@action get allowedProperties() {
allowedProperties() {
const properties = {}; const properties = {};
Object.keys(TOOLTIP.options).forEach((key) => { for (const [key, value] of Object.entries(TOOLTIP.options)) {
const value = TOOLTIP.options[key];
properties[key] = this.args[key] ?? value; properties[key] = this.args[key] ?? value;
}); }
return properties; return properties;
} }
<template> <template>
<span <span
{{this.registerTrigger this.allowedProperties}}
class={{concatClass class={{concatClass
"fk-d-tooltip__trigger" "fk-d-tooltip__trigger"
(if this.tooltipInstance.expanded "-expanded") (if this.tooltipInstance.expanded "-expanded")
@ -66,7 +56,6 @@ export default class DTooltip extends Component {
data-identifier={{this.options.identifier}} data-identifier={{this.options.identifier}}
data-trigger data-trigger
aria-expanded={{if this.tooltipInstance.expanded "true" "false"}} aria-expanded={{if this.tooltipInstance.expanded "true" "false"}}
{{this.registerTrigger (this.allowedProperties)}}
...attributes ...attributes
> >
<span class="fk-d-tooltip__trigger-container"> <span class="fk-d-tooltip__trigger-container">