luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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.
This commit is contained in:
John Cowen 2022-01-27 11:21:12 +00:00 committed by GitHub
parent d3324d0d27
commit a8466a874c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/packages/consul-ui/app/helpers/class-map.js Normal file
View File

@ -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);

45
ui/packages/consul-ui/app/helpers/class-map.mdx Normal file
View File

@ -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])` | |