mirror of https://github.com/hashicorp/consul
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
parent
db0478265b
commit
eac0f5b860
@ -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…
Reference in new issue