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 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")}}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue