mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 23:38:35 +08:00
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) {
|
export default function concatClass(...args) {
|
||||||
const classes = args.compact().join(" ");
|
const classes = args.flat().filter(Boolean).join(" ");
|
||||||
|
|
||||||
if (classes.length) {
|
if (classes.length) {
|
||||||
return classes;
|
return classes;
|
||||||
|
|
|
@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers";
|
||||||
import { hbs } from "ember-cli-htmlbars";
|
import { hbs } from "ember-cli-htmlbars";
|
||||||
import { assert, module, test } from "qunit";
|
import { assert, module, test } from "qunit";
|
||||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||||
import { query } from "discourse/tests/helpers/qunit-helpers";
|
|
||||||
|
|
||||||
module("Integration | Helper | concat-class", function (hooks) {
|
module("Integration | Helper | concat-class", function (hooks) {
|
||||||
setupRenderingTest(hooks);
|
setupRenderingTest(hooks);
|
||||||
|
@ -10,28 +9,28 @@ module("Integration | Helper | concat-class", function (hooks) {
|
||||||
test("One class given", async function () {
|
test("One class given", async function () {
|
||||||
await render(hbs`<button class={{concat-class "foo"}} />`);
|
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 () {
|
test("Multiple class given", async function () {
|
||||||
this.set("bar", "bar");
|
this.set("bar", "bar");
|
||||||
await render(hbs`<button class={{concat-class "foo" this.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 () {
|
test("One undefined class given", async function () {
|
||||||
this.set("bar", null);
|
this.set("bar", null);
|
||||||
await render(hbs`<button class={{concat-class "foo" this.bar}} />`);
|
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 () {
|
test("Only undefined class given", async function () {
|
||||||
this.set("bar", null);
|
this.set("bar", null);
|
||||||
await render(hbs`<button class={{concat-class null this.bar}} />`);
|
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 () {
|
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")}} />`
|
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
Block a user