@atlaskit/navigation-system/dist/cjs/ui/top-nav-items/themed/use-custom-theme.js

The latest navigation system for Atlassian apps.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCustomTheme = useCustomTheme;
var _react = require("react");
var _getCustomThemeStyles = require("./get-custom-theme-styles");
/**
 * Processes the provided theme and returns theme styles if possible.
 */
function useCustomTheme(theme) {
  var value = (0, _react.useMemo)(function () {
    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 🙌
     */
    var value = {
      backgroundColor: theme.backgroundColor,
      highlightColor: theme.highlightColor
    };
    var style = (0, _getCustomThemeStyles.getCustomThemeStyles)(value);
    if (!style) {
      // Either the `backgroundColor` or `highlightColor` could not be parsed
      return {
        isEnabled: false
      };
    }
    return {
      isEnabled: true,
      style: 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;
}