DEV: Add support for arrays to concatClass (#26777)
It'd be useful in cases like: ```gjs get flagNames() { return this.flags?.map((flag) => flag && `flag-${flag.name}`); // w/o this change you'd have to handle it here: // return this.flags?.map((flag) => flag && `flag-${flag.name}`).filter(Boolean).join(" "); } <template> <span class={{concatClass "gadget" this.flagNames}}> {{! …or here: }} <span class={{concatClass "gadget" (concatClass this.flagNames)}}> ``` (also: replaces ember's `compact()` with `filter(Boolean)`)
This commit is contained in:
parent
cf11e556cb
commit
505d8b52b8
|
@ -1,5 +1,5 @@
|
|||
export default function concatClass(...args) {
|
||||
const classes = args.compact().join(" ");
|
||||
const classes = args.flat().filter(Boolean).join(" ");
|
||||
|
||||
if (classes.length) {
|
||||
return classes;
|
||||
|
|
|
@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers";
|
|||
import { hbs } from "ember-cli-htmlbars";
|
||||
import { assert, module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import { query } from "discourse/tests/helpers/qunit-helpers";
|
||||
|
||||
module("Integration | Helper | concat-class", function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
@ -10,28 +9,28 @@ module("Integration | Helper | concat-class", function (hooks) {
|
|||
test("One class given", async function () {
|
||||
await render(hbs`<button class={{concat-class "foo"}} />`);
|
||||
|
||||
assert.equal(query("button").className, "foo");
|
||||
assert.dom("button").hasAttribute("class", "foo");
|
||||
});
|
||||
|
||||
test("Multiple class given", async function () {
|
||||
this.set("bar", "bar");
|
||||
await render(hbs`<button class={{concat-class "foo" this.bar}} />`);
|
||||
|
||||
assert.equal(query("button").className, "foo bar");
|
||||
assert.dom("button").hasAttribute("class", "foo bar");
|
||||
});
|
||||
|
||||
test("One undefined class given", async function () {
|
||||
this.set("bar", null);
|
||||
await render(hbs`<button class={{concat-class "foo" this.bar}} />`);
|
||||
|
||||
assert.equal(query("button").className, "foo");
|
||||
assert.dom("button").hasAttribute("class", "foo");
|
||||
});
|
||||
|
||||
test("Only undefined class given", async function () {
|
||||
this.set("bar", null);
|
||||
await render(hbs`<button class={{concat-class null this.bar}} />`);
|
||||
|
||||
assert.notOk(query("button").hasAttribute("class"));
|
||||
assert.dom("button").doesNotHaveAttribute("class");
|
||||
});
|
||||
|
||||
test("Helpers used", async function () {
|
||||
|
@ -39,6 +38,14 @@ module("Integration | Helper | concat-class", function (hooks) {
|
|||
hbs`<button class={{concat-class (if true "foo") (if true "bar")}} />`
|
||||
);
|
||||
|
||||
assert.equal(query("button").className, "foo bar");
|
||||
assert.dom("button").hasAttribute("class", "foo bar");
|
||||
});
|
||||
|
||||
test("Arrays", async function () {
|
||||
await render(
|
||||
hbs`<button class={{concat-class (array) (array "foo" "bar") (array null)}} />`
|
||||
);
|
||||
|
||||
assert.dom("button").hasAttribute("class", "foo bar");
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue