@redux-devtools/rtk-query-monitor
Version:
rtk-query monitor for Redux DevTools
89 lines (86 loc) • 3.38 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.colorMap = exports.StyleUtilsContext = void 0;
exports.createRtkQueryMonitorThemeFromBase16Theme = createRtkQueryMonitorThemeFromBase16Theme;
exports.getJsonTreeTheme = getJsonTreeTheme;
exports.resolveBase16Theme = resolveBase16Theme;
var _reactBase16Styling = require("react-base16-styling");
var _hexRgba = _interopRequireDefault(require("hex-rgba"));
var _react = require("react");
function resolveBase16Theme(theme) {
return (0, _reactBase16Styling.getBase16Theme)(theme, _reactBase16Styling.base16Themes) ?? _reactBase16Styling.base16Themes.nicinabox;
}
/**
* @internal
*/
const colorMap = theme => ({
TEXT_COLOR: theme.base06,
TEXT_PLACEHOLDER_COLOR: (0, _hexRgba.default)(theme.base06, 60),
BACKGROUND_COLOR: theme.base00,
SELECTED_BACKGROUND_COLOR: (0, _hexRgba.default)(theme.base03, 20),
SKIPPED_BACKGROUND_COLOR: (0, _hexRgba.default)(theme.base03, 10),
HEADER_BACKGROUND_COLOR: (0, _hexRgba.default)(theme.base03, 30),
HEADER_BORDER_COLOR: (0, _hexRgba.default)(theme.base03, 20),
BORDER_COLOR: (0, _hexRgba.default)(theme.base03, 50),
LIST_BORDER_COLOR: (0, _hexRgba.default)(theme.base03, 50),
ACTION_TIME_BACK_COLOR: (0, _hexRgba.default)(theme.base03, 20),
ACTION_TIME_COLOR: theme.base04,
PIN_COLOR: theme.base04,
ITEM_HINT_COLOR: (0, _hexRgba.default)(theme.base0F, 90),
TAB_BACK_SELECTED_COLOR: (0, _hexRgba.default)(theme.base03, 20),
TAB_BACK_COLOR: (0, _hexRgba.default)(theme.base00, 70),
TAB_BACK_HOVER_COLOR: (0, _hexRgba.default)(theme.base03, 40),
TAB_BORDER_COLOR: (0, _hexRgba.default)(theme.base03, 50),
DIFF_ADD_COLOR: (0, _hexRgba.default)(theme.base0B, 40),
DIFF_REMOVE_COLOR: (0, _hexRgba.default)(theme.base08, 40),
DIFF_ARROW_COLOR: theme.base0E,
LINK_COLOR: (0, _hexRgba.default)(theme.base0E, 90),
LINK_HOVER_COLOR: theme.base0E,
ERROR_COLOR: theme.base08,
ULIST_DISC_COLOR: theme.base0D,
ULIST_COLOR: (0, _hexRgba.default)(theme.base06, 60),
ULIST_STRONG_COLOR: theme.base0B,
TAB_CONTENT_COLOR: (0, _hexRgba.default)(theme.base06, 60),
TOGGLE_BUTTON_BACKGROUND: (0, _hexRgba.default)(theme.base00, 70),
TOGGLE_BUTTON_SELECTED_BACKGROUND: theme.base04,
TOGGLE_BUTTON_ERROR: (0, _hexRgba.default)(theme.base08, 40)
});
exports.colorMap = colorMap;
function createRtkQueryMonitorThemeFromBase16Theme(base16Theme, invertTheme) {
const finalBase16Theme = invertTheme ? (0, _reactBase16Styling.invertBase16Theme)(base16Theme) : base16Theme;
return colorMap(finalBase16Theme);
}
const StyleUtilsContext = exports.StyleUtilsContext = /*#__PURE__*/(0, _react.createContext)({
base16Theme: _reactBase16Styling.base16Themes.nicinabox,
invertTheme: false
});
function getJsonTreeTheme(base16Theme) {
return {
extend: base16Theme,
nestedNode: (_ref, keyPath, nodeType, expanded) => {
let {
style
} = _ref;
return {
style: {
...style,
whiteSpace: expanded ? 'inherit' : 'nowrap'
}
};
},
nestedNodeItemString: (_ref2, keyPath, nodeType, expanded) => {
let {
style
} = _ref2;
return {
style: {
...style,
display: expanded ? 'none' : 'inline'
}
};
}
};
}