composeClasses.js
1.48 KB
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
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = composeClasses;
/* eslint no-restricted-syntax: 0, prefer-template: 0, guard-for-in: 0
---
These rules are preventing the performance optimizations below.
*/
/**
* Compose classes from multiple sources.
*
* @example
* ```tsx
* const slots = {
* root: ['root', 'primary'],
* label: ['label'],
* };
*
* const getUtilityClass = (slot) => `MuiButton-${slot}`;
*
* const classes = {
* root: 'my-root-class',
* };
*
* const output = composeClasses(slots, getUtilityClass, classes);
* // {
* // root: 'MuiButton-root MuiButton-primary my-root-class',
* // label: 'MuiButton-label',
* // }
* ```
*
* @param slots a list of classes for each possible slot
* @param getUtilityClass a function to resolve the class based on the slot name
* @param classes the input classes from props
* @returns the resolved classes for all slots
*/
function composeClasses(slots, getUtilityClass, classes = undefined) {
const output = {};
for (const slotName in slots) {
const slot = slots[slotName];
let buffer = '';
let start = true;
for (let i = 0; i < slot.length; i += 1) {
const value = slot[i];
if (value) {
buffer += (start === true ? '' : ' ') + getUtilityClass(value);
start = false;
if (classes && classes[value]) {
buffer += ' ' + classes[value];
}
}
}
output[slotName] = buffer;
}
return output;
}