mirror of
https://github.com/status-im/consul.git
synced 2025-01-22 19:50:36 +00:00
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:
parent
db0478265b
commit
eac0f5b860
17
ui/packages/consul-ui/app/helpers/class-map.js
Normal file
17
ui/packages/consul-ui/app/helpers/class-map.js
Normal 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
45
ui/packages/consul-ui/app/helpers/class-map.mdx
Normal 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])` | |
|
||||||
|
|
Loading…
x
Reference in New Issue
Block a user