@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
44 lines (43 loc) • 1.6 kB
JavaScript
import { useMemo } from 'react';
import { getCustomThemeStyles } from './get-custom-theme-styles';
/**
* Processes the provided theme and returns theme styles if possible.
*/
export function useCustomTheme(theme) {
const value = useMemo(() => {
if (!(theme !== null && theme !== void 0 && theme.backgroundColor) || !(theme !== null && theme !== void 0 && theme.highlightColor)) {
return {
isEnabled: false
};
}
/**
* Re-creating the `theme` object from it's pieces.
*
* _Technically_ we could just use `theme`, but that would involve an eslint opt out
* as we would be leveraging a value (`theme`) not in the dependency array.
*
* The current approach is the most correct™️ and avoids foot guns.
* We are only using values in the effect that are defined in the dependency array 🙌
*/
const value = {
backgroundColor: theme.backgroundColor,
highlightColor: theme.highlightColor
};
const style = getCustomThemeStyles(value);
if (!style) {
// Either the `backgroundColor` or `highlightColor` could not be parsed
return {
isEnabled: false
};
}
return {
isEnabled: true,
style
};
},
// Using individual properties as keys for improved memoization.
// Now this effect will only run if the values change rather than
// the reference to the object (which might be new on every call)
[theme === null || theme === void 0 ? void 0 : theme.backgroundColor, theme === null || theme === void 0 ? void 0 : theme.highlightColor]);
return value;
}