ui: class-map helper (#12202)

{{class-map}} is used to easily add a list of classes, conditionally, and
have them all formatted nicely ready to be printed in a DOM class attribute.

For ease, as well as using entries, you can also just provide a simple string
without the boolean and that class will always be added.
pull/12210/head
John Cowen 3 years ago committed by GitHub
parent db0478265b
commit eac0f5b860
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,17 @@
import { helper } from '@ember/component/helper';
/**
* Conditionally maps classInfos (classes) to a string ready for typical DOM
* usage (i.e. space delimited)
*
* @typedef {([string, boolean] | [string])} classInfo
* @param {(classInfo | string)[]} entries - An array of 'entry-like' arrays of `classInfo`s to map
*/
const classMap = entries => {
const str = entries
.filter(entry => (typeof entry === 'string' ? true : entry[entry.length - 1]))
.map(entry => (typeof entry === 'string' ? entry : entry[0]))
.join(' ');
return str.length > 0 ? str : undefined;
};
export default helper(classMap);

@ -0,0 +1,45 @@
# class-map
`{{class-map}}` is used to easily add a list of classes, conditionally, and
have them all formatted nicely ready to be printed in a DOM `class` attribute.
For ease, as well as using entries, you can also just provide a simple string
without the boolean and that class will always be added.
```hbs preview-template
<figure>
<figcaption>
The correct classes added/omitted
</figcaption>
<div
class={{class-map
'component-name'
(array 'add-this-class' true)
(array 'dont-add-this-class' false)
'simple-string-class'
}}
...attributes
>
<code>
class="{{class-map
(array 'add-this-class' true)
(array 'dont-add-this-class' false)
'simple-string-class'
}}"
</code>
</div>
</figure>
```
## Positional Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `entries` | `(classInfo \| string)[]` | | An array of 'entry-like' arrays of `classInfo`s to map |
## Types
| Type | Default | Description |
| --- | --- | --- |
| `classInfo` | `([string, boolean] \| [string])` | |
Loading…
Cancel
Save