-
Notifications
You must be signed in to change notification settings - Fork 879
/
class-map.ts
75 lines (65 loc) · 2.52 KB
/
class-map.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
import {AttributePart, directive, Part, PropertyPart} from '../lit-html.js';
export interface ClassInfo {
readonly [name: string]: string|boolean|number;
}
/**
* Stores the ClassInfo object applied to a given AttributePart.
* Used to unset existing values when a new ClassInfo object is applied.
*/
const classMapCache = new WeakMap();
/**
* A directive that applies CSS classes. This must be used in the `class`
* attribute and must be the only part used in the attribute. It takes each
* property in the `classInfo` argument and adds the property name to the
* element's `classList` if the property value is truthy; if the property value
* is falsey, the property name is removed from the element's `classList`. For
* example
* `{foo: bar}` applies the class `foo` if the value of `bar` is truthy.
* @param classInfo {ClassInfo}
*/
export const classMap = directive((classInfo: ClassInfo) => (part: Part) => {
if (!(part instanceof AttributePart) || (part instanceof PropertyPart) ||
part.committer.name !== 'class' || part.committer.parts.length > 1) {
throw new Error(
'The `classMap` directive must be used in the `class` attribute ' +
'and must be the only part in the attribute.');
}
const {committer} = part;
const {element} = committer;
// handle static classes
if (!classMapCache.has(part)) {
element.className = committer.strings.join(' ');
}
const {classList} = element;
// remove old classes that no longer apply
const oldInfo = classMapCache.get(part);
for (const name in oldInfo) {
if (!(name in classInfo)) {
classList.remove(name);
}
}
// add new classes
for (const name in classInfo) {
const value = classInfo[name];
if (!oldInfo || value !== oldInfo[name]) {
// We explicitly want a loose truthy check here because
// it seems more convenient that '' and 0 are skipped.
const method = value ? 'add' : 'remove';
classList[method](name);
}
}
classMapCache.set(part, classInfo);
});