@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
39 lines (38 loc) • 1.91 kB
JavaScript
'use client';
import { useMemo } from 'react';
import { __unsafe_useEmotionCache } from '@emotion/react';
import { createUseCssAndCx } from "./cssAndCx.js";
import { mergeClasses } from "./mergeClasses.js";
import { getDependencyArrayRef } from "./tools/getDependencyArrayRef.js";
const useContextualCache = __unsafe_useEmotionCache;
export function createMakeStyles(params) {
const { useTheme } = params;
const { useCssAndCx } = createUseCssAndCx({
useCache: useContextualCache,
});
function makeStyles() {
return function (cssObjectByRuleNameOrGetCssObjectByRuleName) {
const getCssObjectByRuleName = typeof cssObjectByRuleNameOrGetCssObjectByRuleName === 'function'
? cssObjectByRuleNameOrGetCssObjectByRuleName
: () => cssObjectByRuleNameOrGetCssObjectByRuleName;
return function useStyles(_params, muiStyleOverridesParams) {
const theme = useTheme();
const { css, cx } = useCssAndCx();
const classes = useMemo(() => {
const cssObjectByRuleName = getCssObjectByRuleName(theme);
const result = {};
for (const ruleName of Object.keys(cssObjectByRuleName)) {
const cssObject = cssObjectByRuleName[ruleName];
result[ruleName] = css(cssObject);
}
return result;
}, [css, theme]);
const propsClasses = muiStyleOverridesParams?.props.classes;
const propsClassesRef = getDependencyArrayRef(propsClasses);
const mergedClasses = useMemo(() => propsClasses ? mergeClasses(classes, propsClasses, cx) : classes, [classes, propsClassesRef, cx]);
return { classes: mergedClasses, theme, css, cx };
};
};
}
return { makeStyles };
}