@tanstack/react-query-devtools
Version:
806 lines (753 loc) • 29.4 kB
JavaScript
/**
* react-query-devtools
*
* Copyright (c) TanStack
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var shim = require('use-sync-external-store/shim');
var reactQuery = require('@tanstack/react-query');
var index = require('../../../node_modules/@tanstack/match-sorter-utils/build/esm/index.js');
var useLocalStorage = require('./useLocalStorage.js');
var utils = require('./utils.js');
var styledComponents = require('./styledComponents.js');
var theme = require('./theme.js');
var Explorer = require('./Explorer.js');
var Logo = require('./Logo.js');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
const isServer = typeof window === 'undefined';
function ReactQueryDevtools({
initialIsOpen,
panelProps = {},
closeButtonProps = {},
toggleButtonProps = {},
position = 'bottom-left',
containerElement: Container = 'aside',
context,
styleNonce
}) {
const rootRef = React__namespace.useRef(null);
const panelRef = React__namespace.useRef(null);
const [isOpen, setIsOpen] = useLocalStorage["default"]('reactQueryDevtoolsOpen', initialIsOpen);
const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('reactQueryDevtoolsHeight', null);
const [isResolvedOpen, setIsResolvedOpen] = React__namespace.useState(false);
const [isResizing, setIsResizing] = React__namespace.useState(false);
const isMounted = utils.useIsMounted();
const handleDragStart = (panelElement, startEvent) => {
var _panelElement$getBoun;
if (startEvent.button !== 0) return; // Only allow left click for drag
setIsResizing(true);
const dragInfo = {
originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
pageY: startEvent.pageY
};
const run = moveEvent => {
const delta = dragInfo.pageY - moveEvent.pageY;
const newHeight = dragInfo.originalHeight + delta;
setDevtoolsHeight(newHeight);
if (newHeight < 70) {
setIsOpen(false);
} else {
setIsOpen(true);
}
};
const unsub = () => {
setIsResizing(false);
document.removeEventListener('mousemove', run);
document.removeEventListener('mouseUp', unsub);
};
document.addEventListener('mousemove', run);
document.addEventListener('mouseup', unsub);
};
React__namespace.useEffect(() => {
setIsResolvedOpen(isOpen != null ? isOpen : false);
}, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
// Prevents focusing in a closed panel.
React__namespace.useEffect(() => {
const ref = panelRef.current;
if (ref) {
const handlePanelTransitionStart = () => {
if (isResolvedOpen) {
ref.style.visibility = 'visible';
}
};
const handlePanelTransitionEnd = () => {
if (!isResolvedOpen) {
ref.style.visibility = 'hidden';
}
};
ref.addEventListener('transitionstart', handlePanelTransitionStart);
ref.addEventListener('transitionend', handlePanelTransitionEnd);
return () => {
ref.removeEventListener('transitionstart', handlePanelTransitionStart);
ref.removeEventListener('transitionend', handlePanelTransitionEnd);
};
}
}, [isResolvedOpen]);
React__namespace[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
if (isResolvedOpen) {
var _rootRef$current, _rootRef$current$pare;
const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
const run = () => {
var _panelRef$current, _rootRef$current2;
const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
}
};
run();
if (typeof window !== 'undefined') {
window.addEventListener('resize', run);
return () => {
var _rootRef$current3;
window.removeEventListener('resize', run);
if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
rootRef.current.parentElement.style.paddingBottom = previousValue;
}
};
}
}
}, [isResolvedOpen]);
const {
style: panelStyle = {},
...otherPanelProps
} = panelProps;
const {
style: closeButtonStyle = {},
onClick: onCloseClick,
...otherCloseButtonProps
} = closeButtonProps;
const {
style: toggleButtonStyle = {},
onClick: onToggleClick,
...otherToggleButtonProps
} = toggleButtonProps; // Do not render on the server
if (!isMounted()) return null;
return /*#__PURE__*/React__namespace.createElement(Container, {
ref: rootRef,
className: "ReactQueryDevtools",
"aria-label": "React Query Devtools"
}, /*#__PURE__*/React__namespace.createElement(theme.ThemeProvider, {
theme: theme.defaultTheme
}, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
ref: panelRef,
context: context,
styleNonce: styleNonce
}, otherPanelProps, {
style: {
position: 'fixed',
bottom: '0',
right: '0',
zIndex: 99999,
width: '100%',
height: devtoolsHeight != null ? devtoolsHeight : 500,
maxHeight: '90%',
boxShadow: '0 0 20px rgba(0,0,0,.3)',
borderTop: "1px solid " + theme.defaultTheme.gray,
transformOrigin: 'top',
// visibility will be toggled after transitions, but set initial state here
visibility: isOpen ? 'visible' : 'hidden',
...panelStyle,
...(isResizing ? {
transition: "none"
} : {
transition: "all .2s ease"
}),
...(isResolvedOpen ? {
opacity: 1,
pointerEvents: 'all',
transform: "translateY(0) scale(1)"
} : {
opacity: 0,
pointerEvents: 'none',
transform: "translateY(15px) scale(1.02)"
})
},
isOpen: isResolvedOpen,
setIsOpen: setIsOpen,
handleDragStart: e => handleDragStart(panelRef.current, e)
})), isResolvedOpen ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
type: "button",
"aria-controls": "ReactQueryDevtoolsPanel",
"aria-haspopup": "true",
"aria-expanded": "true"
}, otherCloseButtonProps, {
onClick: e => {
setIsOpen(false);
onCloseClick == null ? void 0 : onCloseClick(e);
},
style: {
position: 'fixed',
zIndex: 99999,
margin: '.5em',
bottom: 0,
...(position === 'top-right' ? {
right: '0'
} : position === 'top-left' ? {
left: '0'
} : position === 'bottom-right' ? {
right: '0'
} : {
left: '0'
}),
...closeButtonStyle
}
}), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers["extends"]({
type: "button"
}, otherToggleButtonProps, {
"aria-label": "Open React Query Devtools",
"aria-controls": "ReactQueryDevtoolsPanel",
"aria-haspopup": "true",
"aria-expanded": "false",
onClick: e => {
setIsOpen(true);
onToggleClick == null ? void 0 : onToggleClick(e);
},
style: {
background: 'none',
border: 0,
padding: 0,
position: 'fixed',
zIndex: 99999,
display: 'inline-flex',
fontSize: '1.5em',
margin: '.5em',
cursor: 'pointer',
width: 'fit-content',
...(position === 'top-right' ? {
top: '0',
right: '0'
} : position === 'top-left' ? {
top: '0',
left: '0'
} : position === 'bottom-right' ? {
bottom: '0',
right: '0'
} : {
bottom: '0',
left: '0'
}),
...toggleButtonStyle
}
}), /*#__PURE__*/React__namespace.createElement(Logo["default"], {
"aria-hidden": true
})) : null);
}
const useSubscribeToQueryCache = (queryCache, getSnapshot) => {
return shim.useSyncExternalStore(React__namespace.useCallback(onStoreChange => queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange)), [queryCache]), getSnapshot, getSnapshot);
};
const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
const {
isOpen = true,
styleNonce,
setIsOpen,
handleDragStart,
context,
...panelProps
} = props;
const queryClient = reactQuery.useQueryClient({
context
});
const queryCache = queryClient.getQueryCache();
const [sort, setSort] = useLocalStorage["default"]('reactQueryDevtoolsSortFn', Object.keys(utils.sortFns)[0]);
const [filter, setFilter] = useLocalStorage["default"]('reactQueryDevtoolsFilter', '');
const [sortDesc, setSortDesc] = useLocalStorage["default"]('reactQueryDevtoolsSortDesc', false);
const sortFn = React__namespace.useMemo(() => utils.sortFns[sort], [sort]);
const queriesCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().length);
const [activeQueryHash, setActiveQueryHash] = useLocalStorage["default"]('reactQueryDevtoolsActiveQueryHash', '');
const queries = React__namespace.useMemo(() => {
const unsortedQueries = queryCache.getAll();
const sorted = queriesCount > 0 ? [...unsortedQueries].sort(sortFn) : [];
if (sortDesc) {
sorted.reverse();
}
if (!filter) {
return sorted;
}
let ranked = sorted.map(item => [item, index.rankItem(item.queryHash, filter)]);
ranked = ranked.filter(d => d[1].passed);
ranked = ranked.sort((a, b) => index.compareItems(a[1], b[1]));
return ranked.map(d => d[0]);
}, [sortDesc, sortFn, filter, queriesCount, queryCache]);
const [isMockOffline, setMockOffline] = React__namespace.useState(false);
return /*#__PURE__*/React__namespace.createElement(theme.ThemeProvider, {
theme: theme.defaultTheme
}, /*#__PURE__*/React__namespace.createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
ref: ref,
className: "ReactQueryDevtoolsPanel",
"aria-label": "React Query Devtools Panel",
id: "ReactQueryDevtoolsPanel"
}, panelProps), /*#__PURE__*/React__namespace.createElement("style", {
nonce: styleNonce,
dangerouslySetInnerHTML: {
__html: "\n .ReactQueryDevtoolsPanel * {\n scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.defaultTheme.gray + ";\n }\n\n .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n width: 1em;\n height: 1em;\n }\n\n .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n background: " + theme.defaultTheme.backgroundAlt + ";\n }\n\n .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n background: " + theme.defaultTheme.gray + ";\n border-radius: .5em;\n border: 3px solid " + theme.defaultTheme.backgroundAlt + ";\n }\n "
}
}), /*#__PURE__*/React__namespace.createElement("div", {
style: {
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '4px',
marginBottom: '-4px',
cursor: 'row-resize',
zIndex: 100000
},
onMouseDown: handleDragStart
}), /*#__PURE__*/React__namespace.createElement("div", {
style: {
flex: '1 1 500px',
minHeight: '40%',
maxHeight: '100%',
overflow: 'auto',
borderRight: "1px solid " + theme.defaultTheme.grayAlt,
display: isOpen ? 'flex' : 'none',
flexDirection: 'column'
}
}, /*#__PURE__*/React__namespace.createElement("div", {
style: {
padding: '.5em',
background: theme.defaultTheme.backgroundAlt,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}
}, /*#__PURE__*/React__namespace.createElement("button", {
type: "button",
"aria-label": "Close React Query Devtools",
"aria-controls": "ReactQueryDevtoolsPanel",
"aria-haspopup": "true",
"aria-expanded": "true",
onClick: () => setIsOpen(false),
style: {
display: 'inline-flex',
background: 'none',
border: 0,
padding: 0,
marginRight: '.5em',
cursor: 'pointer'
}
}, /*#__PURE__*/React__namespace.createElement(Logo["default"], {
"aria-hidden": true
})), /*#__PURE__*/React__namespace.createElement("div", {
style: {
display: 'flex',
flexDirection: 'column'
}
}, /*#__PURE__*/React__namespace.createElement(QueryStatusCount, {
queryCache: queryCache
}), /*#__PURE__*/React__namespace.createElement("div", {
style: {
display: 'flex',
alignItems: 'center'
}
}, /*#__PURE__*/React__namespace.createElement(styledComponents.Input, {
placeholder: "Filter",
"aria-label": "Filter by queryhash",
value: filter != null ? filter : '',
onChange: e => setFilter(e.target.value),
onKeyDown: e => {
if (e.key === 'Escape') setFilter('');
},
style: {
flex: '1',
marginRight: '.5em',
width: '100%'
}
}), !filter ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
"aria-label": "Sort queries",
value: sort,
onChange: e => setSort(e.target.value),
style: {
flex: '1',
minWidth: 75,
marginRight: '.5em'
}
}, Object.keys(utils.sortFns).map(key => /*#__PURE__*/React__namespace.createElement("option", {
key: key,
value: key
}, "Sort by ", key))), /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
type: "button",
onClick: () => setSortDesc(old => !old),
style: {
padding: '.3em .4em',
marginRight: '.5em'
}
}, sortDesc ? '⬇ Desc' : '⬆ Asc'), /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
type: "button",
onClick: () => {
if (isMockOffline) {
reactQuery.onlineManager.setOnline(undefined);
setMockOffline(false);
window.dispatchEvent(new Event('online'));
} else {
reactQuery.onlineManager.setOnline(false);
setMockOffline(true);
}
},
"aria-label": isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
title: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
style: {
padding: '0',
height: '2em'
}
}, /*#__PURE__*/React__namespace.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "2em",
height: "2em",
viewBox: "0 0 24 24",
stroke: isMockOffline ? theme.defaultTheme.danger : 'currentColor',
fill: "none"
}, isMockOffline ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("path", {
stroke: "none",
d: "M0 0h24v24H0z",
fill: "none"
}), /*#__PURE__*/React__namespace.createElement("line", {
x1: "12",
y1: "18",
x2: "12.01",
y2: "18"
}), /*#__PURE__*/React__namespace.createElement("path", {
d: "M9.172 15.172a4 4 0 0 1 5.656 0"
}), /*#__PURE__*/React__namespace.createElement("path", {
d: "M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2"
}), /*#__PURE__*/React__namespace.createElement("path", {
d: "M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374"
}), /*#__PURE__*/React__namespace.createElement("line", {
x1: "3",
y1: "3",
x2: "21",
y2: "21"
})) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("path", {
stroke: "none",
d: "M0 0h24v24H0z",
fill: "none"
}), /*#__PURE__*/React__namespace.createElement("line", {
x1: "12",
y1: "18",
x2: "12.01",
y2: "18"
}), /*#__PURE__*/React__namespace.createElement("path", {
d: "M9.172 15.172a4 4 0 0 1 5.656 0"
}), /*#__PURE__*/React__namespace.createElement("path", {
d: "M6.343 12.343a8 8 0 0 1 11.314 0"
}), /*#__PURE__*/React__namespace.createElement("path", {
d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"
}))))) : null))), /*#__PURE__*/React__namespace.createElement("div", {
style: {
overflowY: 'auto',
flex: '1'
}
}, queries.map(query => {
return /*#__PURE__*/React__namespace.createElement(QueryRow, {
queryKey: query.queryKey,
activeQueryHash: activeQueryHash,
setActiveQueryHash: setActiveQueryHash,
key: query.queryHash,
queryCache: queryCache
});
}))), activeQueryHash ? /*#__PURE__*/React__namespace.createElement(ActiveQuery, {
activeQueryHash: activeQueryHash,
queryCache: queryCache,
queryClient: queryClient
}) : null));
});
const ActiveQuery = ({
queryCache,
activeQueryHash,
queryClient
}) => {
var _useSubscribeToQueryC, _useSubscribeToQueryC2;
const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$getAll$fi;
return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
});
const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$getAll$fi2;
return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
})) != null ? _useSubscribeToQueryC : false;
const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$getAll$fi3;
return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
})) != null ? _useSubscribeToQueryC2 : 0;
const handleRefetch = () => {
const promise = activeQuery == null ? void 0 : activeQuery.fetch();
promise == null ? void 0 : promise.catch(noop);
};
if (!activeQuery || !activeQueryState) {
return null;
}
return /*#__PURE__*/React__namespace.createElement(styledComponents.ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
style: {
padding: '.5em',
background: theme.defaultTheme.backgroundAlt,
position: 'sticky',
top: 0,
zIndex: 1
}
}, "Query Details"), /*#__PURE__*/React__namespace.createElement("div", {
style: {
padding: '.5em'
}
}, /*#__PURE__*/React__namespace.createElement("div", {
style: {
marginBottom: '.5em',
display: 'flex',
alignItems: 'stretch',
justifyContent: 'space-between'
}
}, /*#__PURE__*/React__namespace.createElement(styledComponents.Code, {
style: {
lineHeight: '1.8em'
}
}, /*#__PURE__*/React__namespace.createElement("pre", {
style: {
margin: 0,
padding: 0,
overflow: 'auto'
}
}, JSON.stringify(activeQuery.queryKey, null, 2))), /*#__PURE__*/React__namespace.createElement("span", {
style: {
padding: '0.3em .6em',
borderRadius: '0.4em',
fontWeight: 'bold',
textShadow: '0 2px 10px black',
background: utils.getQueryStatusColor({
queryState: activeQueryState,
isStale: isStale,
observerCount: observerCount,
theme: theme.defaultTheme
}),
flexShrink: 0
}
}, utils.getQueryStatusLabel(activeQuery))), /*#__PURE__*/React__namespace.createElement("div", {
style: {
marginBottom: '.5em',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}
}, "Observers: ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, observerCount)), /*#__PURE__*/React__namespace.createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}
}, "Last Updated:", ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, new Date(activeQueryState.dataUpdatedAt).toLocaleTimeString()))), /*#__PURE__*/React__namespace.createElement("div", {
style: {
background: theme.defaultTheme.backgroundAlt,
padding: '.5em',
position: 'sticky',
top: 0,
zIndex: 1
}
}, "Actions"), /*#__PURE__*/React__namespace.createElement("div", {
style: {
padding: '0.5em'
}
}, /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
type: "button",
onClick: handleRefetch,
disabled: activeQueryState.fetchStatus === 'fetching',
style: {
background: theme.defaultTheme.active
}
}, "Refetch"), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
type: "button",
onClick: () => queryClient.invalidateQueries(activeQuery),
style: {
background: theme.defaultTheme.warning,
color: theme.defaultTheme.inputTextColor
}
}, "Invalidate"), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
type: "button",
onClick: () => queryClient.resetQueries(activeQuery),
style: {
background: theme.defaultTheme.gray
}
}, "Reset"), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
type: "button",
onClick: () => queryClient.removeQueries(activeQuery),
style: {
background: theme.defaultTheme.danger
}
}, "Remove")), /*#__PURE__*/React__namespace.createElement("div", {
style: {
background: theme.defaultTheme.backgroundAlt,
padding: '.5em',
position: 'sticky',
top: 0,
zIndex: 1
}
}, "Data Explorer"), /*#__PURE__*/React__namespace.createElement("div", {
style: {
padding: '.5em'
}
}, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
label: "Data",
value: activeQueryState.data,
defaultExpanded: {}
})), /*#__PURE__*/React__namespace.createElement("div", {
style: {
background: theme.defaultTheme.backgroundAlt,
padding: '.5em',
position: 'sticky',
top: 0,
zIndex: 1
}
}, "Query Explorer"), /*#__PURE__*/React__namespace.createElement("div", {
style: {
padding: '.5em'
}
}, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
label: "Query",
value: activeQuery,
defaultExpanded: {
queryKey: true
}
})));
};
const QueryStatusCount = ({
queryCache
}) => {
const hasFresh = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'fresh').length);
const hasFetching = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'fetching').length);
const hasPaused = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'paused').length);
const hasStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'stale').length);
const hasInactive = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'inactive').length);
return /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKeys, {
style: {
marginBottom: '.5em'
}
}, /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
style: {
background: theme.defaultTheme.success,
opacity: hasFresh ? 1 : 0.3
}
}, "fresh ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasFresh, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
style: {
background: theme.defaultTheme.active,
opacity: hasFetching ? 1 : 0.3
}
}, "fetching ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasFetching, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
style: {
background: theme.defaultTheme.paused,
opacity: hasPaused ? 1 : 0.3
}
}, "paused ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasPaused, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
style: {
background: theme.defaultTheme.warning,
color: 'black',
textShadow: '0',
opacity: hasStale ? 1 : 0.3
}
}, "stale ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasStale, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
style: {
background: theme.defaultTheme.gray,
opacity: hasInactive ? 1 : 0.3
}
}, "inactive ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasInactive, ")")));
};
const QueryRow = ({
queryKey,
setActiveQueryHash,
activeQueryHash,
queryCache
}) => {
var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$find;
return (_queryCache$find = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find.queryHash;
})) != null ? _useSubscribeToQueryC3 : '';
const queryState = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$find2;
return (_queryCache$find2 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find2.state;
});
const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$find3;
return (_queryCache$find3 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find3.isStale();
})) != null ? _useSubscribeToQueryC4 : false;
const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$find4;
return (_queryCache$find4 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find4.isDisabled();
})) != null ? _useSubscribeToQueryC5 : false;
const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
var _queryCache$find5;
return (_queryCache$find5 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find5.getObserversCount();
})) != null ? _useSubscribeToQueryC6 : 0;
if (!queryState) {
return null;
}
return /*#__PURE__*/React__namespace.createElement("div", {
role: "button",
"aria-label": "Open query details for " + queryHash,
onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
style: {
display: 'flex',
borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
cursor: 'pointer',
background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
}
}, /*#__PURE__*/React__namespace.createElement("div", {
style: {
flex: '0 0 auto',
width: '2em',
height: '2em',
background: utils.getQueryStatusColor({
queryState,
isStale,
observerCount,
theme: theme.defaultTheme
}),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 'bold',
textShadow: isStale ? '0' : '0 0 10px black',
color: isStale ? 'black' : 'white'
}
}, observerCount), isDisabled ? /*#__PURE__*/React__namespace.createElement("div", {
style: {
flex: '0 0 auto',
height: '2em',
background: theme.defaultTheme.gray,
display: 'flex',
alignItems: 'center',
fontWeight: 'bold',
padding: '0 0.5em'
}
}, "disabled") : null, /*#__PURE__*/React__namespace.createElement(styledComponents.Code, {
style: {
padding: '.5em'
}
}, "" + queryHash));
}; // eslint-disable-next-line @typescript-eslint/no-empty-function
function noop() {}
exports.ReactQueryDevtools = ReactQueryDevtools;
exports.ReactQueryDevtoolsPanel = ReactQueryDevtoolsPanel;
//# sourceMappingURL=devtools.js.map