forked from GavinJoyce/ember-headlessui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
transition.js
61 lines (53 loc) · 1.61 KB
/
transition.js
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
import { TrackedSet } from 'tracked-maps-and-sets';
import { timeout } from 'ember-concurrency';
/**
* Create a promise that resolves after the transition timeout for a node
*
* Extracted from HeadlessUI here:
*
* https://github.com/tailwindlabs/headlessui/blob/b961a189d57fa24af2a0bd0a6d73fa44e1d34529/packages/%40headlessui-react/src/components/transitions/utils/transition.ts#L17
*
* @param {HTMLElement} node
* @return {Promise<void>}
*/
export async function waitForTransition(node) {
// Safari returns a comma separated list of values, so let's sort them and take the highest value.
let { transitionDuration, transitionDelay } = getComputedStyle(node);
let [durationMs, delaysMs] = [transitionDuration, transitionDelay].map(
(value) => {
let [resolvedValue = 0] = value
.split(',')
// Remove falsy we can't work with
.filter(Boolean)
// Values are returned as `0.3s` or `75ms`
.map((v) => (v.includes('ms') ? parseFloat(v) : parseFloat(v) * 1000))
.sort((a, z) => z - a);
return resolvedValue;
}
);
if (durationMs !== 0) {
await timeout(durationMs + delaysMs);
}
}
export function splitClassNames(classString = '') {
return classString
.split(' ')
.map((part) => part.trim())
.filter((part) => part.trim().length > 1);
}
export class ClassNameSet {
data = new TrackedSet();
add(...values) {
for (let value of values) {
this.data.add(value);
}
}
delete(...values) {
for (let value of values) {
this.data.delete(value);
}
}
toString() {
return Array.from(this.data).join(' ');
}
}