/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/mui-utils/src/composeClasses/composeClasses.ts
62 строки
2 KB
Jose C Quintas Jr
[core] Add documentation to `useThemeProps`, `deepmerge` and `composeClasses` functions (#44703)
11 дек 2024, 13:38
Не верифицирован
11 дек 2024, 13:38
2a8ba74
Код
Авторство
О чём код?
/* 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 */ export default function composeClasses<ClassKey extends string>( slots: Record<ClassKey, ReadonlyArray<string | false | undefined | null>>, getUtilityClass: (slot: string) => string, classes: Record<string, string> | undefined = undefined, ): Record<ClassKey, string> { const output: Record<ClassKey, string> = {} as any; 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; }