@tanstack/react-query-devtools 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/Explorer.js +215 -0
- package/build/cjs/Explorer.js.map +1 -0
- package/build/cjs/Logo.js +66 -0
- package/build/cjs/Logo.js.map +1 -0
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +33 -0
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/build/cjs/devtools.js +822 -0
- package/build/cjs/devtools.js.map +1 -0
- package/build/cjs/index.js +21 -0
- package/build/cjs/index.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/Explorer.js +215 -0
- package/build/cjs/packages/react-query-devtools/src/Explorer.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/Logo.js +66 -0
- package/build/cjs/packages/react-query-devtools/src/Logo.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/devtools.js +818 -0
- package/build/cjs/packages/react-query-devtools/src/devtools.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/index.js +22 -0
- package/build/cjs/packages/react-query-devtools/src/index.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/styledComponents.js +113 -0
- package/build/cjs/packages/react-query-devtools/src/styledComponents.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/theme.js +68 -0
- package/build/cjs/packages/react-query-devtools/src/theme.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/useLocalStorage.js +81 -0
- package/build/cjs/packages/react-query-devtools/src/useLocalStorage.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/useMediaQuery.js +66 -0
- package/build/cjs/packages/react-query-devtools/src/useMediaQuery.js.map +1 -0
- package/build/cjs/packages/react-query-devtools/src/utils.js +100 -0
- package/build/cjs/packages/react-query-devtools/src/utils.js.map +1 -0
- package/build/cjs/styledComponents.js +113 -0
- package/build/cjs/styledComponents.js.map +1 -0
- package/build/cjs/theme.js +68 -0
- package/build/cjs/theme.js.map +1 -0
- package/build/cjs/useLocalStorage.js +81 -0
- package/build/cjs/useLocalStorage.js.map +1 -0
- package/build/cjs/useMediaQuery.js +66 -0
- package/build/cjs/useMediaQuery.js.map +1 -0
- package/build/cjs/utils.js +100 -0
- package/build/cjs/utils.js.map +1 -0
- package/build/esm/index.js +1973 -0
- package/build/esm/index.js.map +1 -0
- package/build/stats-html.html +2689 -0
- package/build/umd/index.development.js +2001 -0
- package/build/umd/index.development.js.map +1 -0
- package/build/umd/index.production.js +29 -0
- package/build/umd/index.production.js.map +1 -0
- package/package.json +30 -0
- package/src/Explorer.tsx +261 -0
- package/src/Logo.tsx +32 -0
- package/src/__tests__/Explorer.test.tsx +68 -0
- package/src/__tests__/devtools.test.tsx +766 -0
- package/src/__tests__/utils.tsx +81 -0
- package/src/devtools.tsx +1128 -0
- package/src/index.ts +1 -0
- package/src/noop.ts +7 -0
- package/src/styledComponents.ts +108 -0
- package/src/theme.tsx +32 -0
- package/src/useLocalStorage.ts +52 -0
- package/src/useMediaQuery.ts +32 -0
- package/src/utils.ts +126 -0
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* react-query-devtools
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) TanStack
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
+
*
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
|
+
|
|
15
|
+
var React = require('react');
|
|
16
|
+
var theme = require('./theme.js');
|
|
17
|
+
var useMediaQuery = require('./useMediaQuery.js');
|
|
18
|
+
|
|
19
|
+
function _interopNamespace(e) {
|
|
20
|
+
if (e && e.__esModule) return e;
|
|
21
|
+
var n = Object.create(null);
|
|
22
|
+
if (e) {
|
|
23
|
+
Object.keys(e).forEach(function (k) {
|
|
24
|
+
if (k !== 'default') {
|
|
25
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function () { return e[k]; }
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
n["default"] = e;
|
|
34
|
+
return Object.freeze(n);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
38
|
+
|
|
39
|
+
const isServer = typeof window === 'undefined';
|
|
40
|
+
function getQueryStatusColor({
|
|
41
|
+
queryState,
|
|
42
|
+
observerCount,
|
|
43
|
+
isStale,
|
|
44
|
+
theme
|
|
45
|
+
}) {
|
|
46
|
+
return queryState.fetchStatus === 'fetching' ? theme.active : !observerCount ? theme.gray : queryState.fetchStatus === 'paused' ? theme.paused : isStale ? theme.warning : theme.success;
|
|
47
|
+
}
|
|
48
|
+
function getQueryStatusLabel(query) {
|
|
49
|
+
return query.state.fetchStatus === 'fetching' ? 'fetching' : !query.getObserversCount() ? 'inactive' : query.state.fetchStatus === 'paused' ? 'paused' : query.isStale() ? 'stale' : 'fresh';
|
|
50
|
+
}
|
|
51
|
+
function styled(type, newStyles, queries = {}) {
|
|
52
|
+
return /*#__PURE__*/React__namespace.forwardRef(({
|
|
53
|
+
style,
|
|
54
|
+
...rest
|
|
55
|
+
}, ref) => {
|
|
56
|
+
const theme$1 = theme.useTheme();
|
|
57
|
+
const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
|
|
58
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
59
|
+
return useMediaQuery["default"](key) ? { ...current,
|
|
60
|
+
...(typeof value === 'function' ? value(rest, theme$1) : value)
|
|
61
|
+
} : current;
|
|
62
|
+
}, {});
|
|
63
|
+
return /*#__PURE__*/React__namespace.createElement(type, { ...rest,
|
|
64
|
+
style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
|
|
65
|
+
...style,
|
|
66
|
+
...mediaStyles
|
|
67
|
+
},
|
|
68
|
+
ref
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
function useIsMounted() {
|
|
73
|
+
const mountedRef = React__namespace.useRef(false);
|
|
74
|
+
const isMounted = React__namespace.useCallback(() => mountedRef.current, []);
|
|
75
|
+
React__namespace[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
|
|
76
|
+
mountedRef.current = true;
|
|
77
|
+
return () => {
|
|
78
|
+
mountedRef.current = false;
|
|
79
|
+
};
|
|
80
|
+
}, []);
|
|
81
|
+
return isMounted;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Displays a string regardless the type of the data
|
|
85
|
+
* @param {unknown} value Value to be stringified
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
const displayValue = value => {
|
|
89
|
+
const name = Object.getOwnPropertyNames(Object(value));
|
|
90
|
+
const newValue = typeof value === 'bigint' ? value.toString() + "n" : value;
|
|
91
|
+
return JSON.stringify(newValue, name);
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.displayValue = displayValue;
|
|
95
|
+
exports.getQueryStatusColor = getQueryStatusColor;
|
|
96
|
+
exports.getQueryStatusLabel = getQueryStatusLabel;
|
|
97
|
+
exports.isServer = isServer;
|
|
98
|
+
exports.styled = styled;
|
|
99
|
+
exports.useIsMounted = useIsMounted;
|
|
100
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport type { Query } from '@tanstack/react-query'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getQueryStatusColor({\n queryState,\n observerCount,\n isStale,\n theme,\n}: {\n queryState: Query['state']\n observerCount: number\n isStale: boolean\n theme: Theme\n}) {\n return queryState.fetchStatus === 'fetching'\n ? theme.active\n : !observerCount\n ? theme.gray\n : queryState.fetchStatus === 'paused'\n ? theme.paused\n : isStale\n ? theme.warning\n : theme.success\n}\n\nexport function getQueryStatusLabel(query: Query) {\n return query.state.fetchStatus === 'fetching'\n ? 'fetching'\n : !query.getObserversCount()\n ? 'inactive'\n : query.state.fetchStatus === 'paused'\n ? 'paused'\n : query.isStale()\n ? 'stale'\n : 'fresh'\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n const name = Object.getOwnPropertyNames(Object(value))\n const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n\n return JSON.stringify(newValue, name)\n}\n"],"names":["isServer","window","getQueryStatusColor","queryState","observerCount","isStale","theme","fetchStatus","active","gray","paused","warning","success","getQueryStatusLabel","query","state","getObserversCount","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","displayValue","name","getOwnPropertyNames","newValue","toString","JSON","stringify"],"mappings":"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"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* react-query-devtools
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) TanStack
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
+
*
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
|
+
|
|
15
|
+
var utils = require('./utils.js');
|
|
16
|
+
|
|
17
|
+
const Panel = utils.styled('div', (_props, theme) => ({
|
|
18
|
+
fontSize: 'clamp(12px, 1.5vw, 14px)',
|
|
19
|
+
fontFamily: "sans-serif",
|
|
20
|
+
display: 'flex',
|
|
21
|
+
backgroundColor: theme.background,
|
|
22
|
+
color: theme.foreground
|
|
23
|
+
}), {
|
|
24
|
+
'(max-width: 700px)': {
|
|
25
|
+
flexDirection: 'column'
|
|
26
|
+
},
|
|
27
|
+
'(max-width: 600px)': {
|
|
28
|
+
fontSize: '.9em' // flexDirection: 'column',
|
|
29
|
+
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
const ActiveQueryPanel = utils.styled('div', () => ({
|
|
33
|
+
flex: '1 1 500px',
|
|
34
|
+
display: 'flex',
|
|
35
|
+
flexDirection: 'column',
|
|
36
|
+
overflow: 'auto',
|
|
37
|
+
height: '100%'
|
|
38
|
+
}), {
|
|
39
|
+
'(max-width: 700px)': (_props, theme) => ({
|
|
40
|
+
borderTop: "2px solid " + theme.gray
|
|
41
|
+
})
|
|
42
|
+
});
|
|
43
|
+
const Button = utils.styled('button', (props, theme) => ({
|
|
44
|
+
appearance: 'none',
|
|
45
|
+
fontSize: '.9em',
|
|
46
|
+
fontWeight: 'bold',
|
|
47
|
+
background: theme.gray,
|
|
48
|
+
border: '0',
|
|
49
|
+
borderRadius: '.3em',
|
|
50
|
+
color: 'white',
|
|
51
|
+
padding: '.5em',
|
|
52
|
+
opacity: props.disabled ? '.5' : undefined,
|
|
53
|
+
cursor: 'pointer'
|
|
54
|
+
}));
|
|
55
|
+
const QueryKeys = utils.styled('span', {
|
|
56
|
+
display: 'inline-block',
|
|
57
|
+
fontSize: '0.9em'
|
|
58
|
+
});
|
|
59
|
+
const QueryKey = utils.styled('span', {
|
|
60
|
+
display: 'inline-flex',
|
|
61
|
+
alignItems: 'center',
|
|
62
|
+
padding: '.2em .4em',
|
|
63
|
+
fontWeight: 'bold',
|
|
64
|
+
textShadow: '0 0 10px black',
|
|
65
|
+
borderRadius: '.2em'
|
|
66
|
+
});
|
|
67
|
+
const Code = utils.styled('code', {
|
|
68
|
+
fontSize: '.9em',
|
|
69
|
+
color: 'inherit',
|
|
70
|
+
background: 'inherit'
|
|
71
|
+
});
|
|
72
|
+
const Input = utils.styled('input', (_props, theme) => ({
|
|
73
|
+
backgroundColor: theme.inputBackgroundColor,
|
|
74
|
+
border: 0,
|
|
75
|
+
borderRadius: '.2em',
|
|
76
|
+
color: theme.inputTextColor,
|
|
77
|
+
fontSize: '.9em',
|
|
78
|
+
lineHeight: "1.3",
|
|
79
|
+
padding: '.3em .4em'
|
|
80
|
+
}));
|
|
81
|
+
const Select = utils.styled('select', (_props, theme) => ({
|
|
82
|
+
display: "inline-block",
|
|
83
|
+
fontSize: ".9em",
|
|
84
|
+
fontFamily: "sans-serif",
|
|
85
|
+
fontWeight: 'normal',
|
|
86
|
+
lineHeight: "1.3",
|
|
87
|
+
padding: ".3em 1.5em .3em .5em",
|
|
88
|
+
height: 'auto',
|
|
89
|
+
border: 0,
|
|
90
|
+
borderRadius: ".2em",
|
|
91
|
+
appearance: "none",
|
|
92
|
+
WebkitAppearance: 'none',
|
|
93
|
+
backgroundColor: theme.inputBackgroundColor,
|
|
94
|
+
backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
|
|
95
|
+
backgroundRepeat: "no-repeat",
|
|
96
|
+
backgroundPosition: "right .55em center",
|
|
97
|
+
backgroundSize: ".65em auto, 100%",
|
|
98
|
+
color: theme.inputTextColor
|
|
99
|
+
}), {
|
|
100
|
+
'(max-width: 500px)': {
|
|
101
|
+
display: 'none'
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
exports.ActiveQueryPanel = ActiveQueryPanel;
|
|
106
|
+
exports.Button = Button;
|
|
107
|
+
exports.Code = Code;
|
|
108
|
+
exports.Input = Input;
|
|
109
|
+
exports.Panel = Panel;
|
|
110
|
+
exports.QueryKey = QueryKey;
|
|
111
|
+
exports.QueryKeys = QueryKeys;
|
|
112
|
+
exports.Select = Select;
|
|
113
|
+
//# sourceMappingURL=styledComponents.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'inline-block',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* react-query-devtools
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) TanStack
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
+
*
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
|
+
|
|
15
|
+
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
16
|
+
var React = require('react');
|
|
17
|
+
|
|
18
|
+
function _interopNamespace(e) {
|
|
19
|
+
if (e && e.__esModule) return e;
|
|
20
|
+
var n = Object.create(null);
|
|
21
|
+
if (e) {
|
|
22
|
+
Object.keys(e).forEach(function (k) {
|
|
23
|
+
if (k !== 'default') {
|
|
24
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
25
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () { return e[k]; }
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
n["default"] = e;
|
|
33
|
+
return Object.freeze(n);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
37
|
+
|
|
38
|
+
const defaultTheme = {
|
|
39
|
+
background: '#0b1521',
|
|
40
|
+
backgroundAlt: '#132337',
|
|
41
|
+
foreground: 'white',
|
|
42
|
+
gray: '#3f4e60',
|
|
43
|
+
grayAlt: '#222e3e',
|
|
44
|
+
inputBackgroundColor: '#fff',
|
|
45
|
+
inputTextColor: '#000',
|
|
46
|
+
success: '#00ab52',
|
|
47
|
+
danger: '#ff0085',
|
|
48
|
+
active: '#006bff',
|
|
49
|
+
paused: '#8c49eb',
|
|
50
|
+
warning: '#ffb200'
|
|
51
|
+
};
|
|
52
|
+
const ThemeContext = /*#__PURE__*/React__namespace.createContext(defaultTheme);
|
|
53
|
+
function ThemeProvider({
|
|
54
|
+
theme,
|
|
55
|
+
...rest
|
|
56
|
+
}) {
|
|
57
|
+
return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, _rollupPluginBabelHelpers["extends"]({
|
|
58
|
+
value: theme
|
|
59
|
+
}, rest));
|
|
60
|
+
}
|
|
61
|
+
function useTheme() {
|
|
62
|
+
return React__namespace.useContext(ThemeContext);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
exports.ThemeProvider = ThemeProvider;
|
|
66
|
+
exports.defaultTheme = defaultTheme;
|
|
67
|
+
exports.useTheme = useTheme;
|
|
68
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const defaultTheme = {\n background: '#0b1521',\n backgroundAlt: '#132337',\n foreground: 'white',\n gray: '#3f4e60',\n grayAlt: '#222e3e',\n inputBackgroundColor: '#fff',\n inputTextColor: '#000',\n success: '#00ab52',\n danger: '#ff0085',\n active: '#006bff',\n paused: '#8c49eb',\n warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n theme: Theme\n children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","_extends","useTheme","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SADc;AAE1BC,EAAAA,aAAa,EAAE,SAFW;AAG1BC,EAAAA,UAAU,EAAE,OAHc;AAI1BC,EAAAA,IAAI,EAAE,SAJoB;AAK1BC,EAAAA,OAAO,EAAE,SALiB;AAM1BC,EAAAA,oBAAoB,EAAE,MANI;AAO1BC,EAAAA,cAAc,EAAE,MAPU;AAQ1BC,EAAAA,OAAO,EAAE,SARiB;AAS1BC,EAAAA,MAAM,EAAE,SATkB;AAU1BC,EAAAA,MAAM,EAAE,SAVkB;AAW1BC,EAAAA,MAAM,EAAE,SAXkB;AAY1BC,EAAAA,OAAO,EAAE,SAAA;AAZiB,EAArB;AAqBP,MAAMC,YAAY,gBAAGC,gBAAK,CAACC,aAAN,CAAoBf,YAApB,CAArB,CAAA;AAEO,SAASgB,aAAT,CAAuB;EAAEC,KAAF;EAAS,GAAGC,IAAAA;AAAZ,CAAvB,EAA0D;EAC/D,oBAAOJ,gBAAA,CAAA,aAAA,CAAC,YAAD,CAAc,QAAd,EAAAK,oCAAA,CAAA;AAAuB,IAAA,KAAK,EAAEF,KAAAA;AAA9B,GAAA,EAAyCC,IAAzC,CAAP,CAAA,CAAA;AACD,CAAA;AAEM,SAASE,QAAT,GAAoB;AACzB,EAAA,OAAON,gBAAK,CAACO,UAAN,CAAiBR,YAAjB,CAAP,CAAA;AACD;;;;;;"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* react-query-devtools
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) TanStack
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
+
*
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
|
+
|
|
15
|
+
var React = require('react');
|
|
16
|
+
|
|
17
|
+
function _interopNamespace(e) {
|
|
18
|
+
if (e && e.__esModule) return e;
|
|
19
|
+
var n = Object.create(null);
|
|
20
|
+
if (e) {
|
|
21
|
+
Object.keys(e).forEach(function (k) {
|
|
22
|
+
if (k !== 'default') {
|
|
23
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
24
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () { return e[k]; }
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
n["default"] = e;
|
|
32
|
+
return Object.freeze(n);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
36
|
+
|
|
37
|
+
const getItem = key => {
|
|
38
|
+
try {
|
|
39
|
+
const itemValue = localStorage.getItem(key);
|
|
40
|
+
|
|
41
|
+
if (typeof itemValue === 'string') {
|
|
42
|
+
return JSON.parse(itemValue);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return undefined;
|
|
46
|
+
} catch {
|
|
47
|
+
return undefined;
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
function useLocalStorage(key, defaultValue) {
|
|
52
|
+
const [value, setValue] = React__namespace.useState();
|
|
53
|
+
React__namespace.useEffect(() => {
|
|
54
|
+
const initialValue = getItem(key);
|
|
55
|
+
|
|
56
|
+
if (typeof initialValue === 'undefined' || initialValue === null) {
|
|
57
|
+
setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
|
|
58
|
+
} else {
|
|
59
|
+
setValue(initialValue);
|
|
60
|
+
}
|
|
61
|
+
}, [defaultValue, key]);
|
|
62
|
+
const setter = React__namespace.useCallback(updater => {
|
|
63
|
+
setValue(old => {
|
|
64
|
+
let newVal = updater;
|
|
65
|
+
|
|
66
|
+
if (typeof updater == 'function') {
|
|
67
|
+
newVal = updater(old);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
try {
|
|
71
|
+
localStorage.setItem(key, JSON.stringify(newVal));
|
|
72
|
+
} catch {}
|
|
73
|
+
|
|
74
|
+
return newVal;
|
|
75
|
+
});
|
|
76
|
+
}, [key]);
|
|
77
|
+
return [value, setter];
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
exports["default"] = useLocalStorage;
|
|
81
|
+
//# sourceMappingURL=useLocalStorage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLocalStorage.js","sources":["../../src/useLocalStorage.ts"],"sourcesContent":["import * as React from 'react'\n\nconst getItem = (key: string): unknown => {\n try {\n const itemValue = localStorage.getItem(key)\n if (typeof itemValue === 'string') {\n return JSON.parse(itemValue)\n }\n return undefined\n } catch {\n return undefined\n }\n}\n\nexport default function useLocalStorage<T>(\n key: string,\n defaultValue: T | undefined,\n): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {\n const [value, setValue] = React.useState<T>()\n\n React.useEffect(() => {\n const initialValue = getItem(key) as T | undefined\n\n if (typeof initialValue === 'undefined' || initialValue === null) {\n setValue(\n typeof defaultValue === 'function' ? defaultValue() : defaultValue,\n )\n } else {\n setValue(initialValue)\n }\n }, [defaultValue, key])\n\n const setter = React.useCallback(\n (updater: any) => {\n setValue((old) => {\n let newVal = updater\n\n if (typeof updater == 'function') {\n newVal = updater(old)\n }\n try {\n localStorage.setItem(key, JSON.stringify(newVal))\n } catch {}\n\n return newVal\n })\n },\n [key],\n )\n\n return [value, setter]\n}\n"],"names":["getItem","key","itemValue","localStorage","JSON","parse","undefined","useLocalStorage","defaultValue","value","setValue","React","useState","useEffect","initialValue","setter","useCallback","updater","old","newVal","setItem","stringify"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAMA,OAAO,GAAIC,GAAD,IAA0B;EACxC,IAAI;AACF,IAAA,MAAMC,SAAS,GAAGC,YAAY,CAACH,OAAb,CAAqBC,GAArB,CAAlB,CAAA;;AACA,IAAA,IAAI,OAAOC,SAAP,KAAqB,QAAzB,EAAmC;AACjC,MAAA,OAAOE,IAAI,CAACC,KAAL,CAAWH,SAAX,CAAP,CAAA;AACD,KAAA;;AACD,IAAA,OAAOI,SAAP,CAAA;AACD,GAND,CAME,MAAM;AACN,IAAA,OAAOA,SAAP,CAAA;AACD,GAAA;AACF,CAVD,CAAA;;AAYe,SAASC,eAAT,CACbN,GADa,EAEbO,YAFa,EAG+C;EAC5D,MAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,gBAAK,CAACC,QAAN,EAA1B,CAAA;EAEAD,gBAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,IAAA,MAAMC,YAAY,GAAGd,OAAO,CAACC,GAAD,CAA5B,CAAA;;IAEA,IAAI,OAAOa,YAAP,KAAwB,WAAxB,IAAuCA,YAAY,KAAK,IAA5D,EAAkE;MAChEJ,QAAQ,CACN,OAAOF,YAAP,KAAwB,UAAxB,GAAqCA,YAAY,EAAjD,GAAsDA,YADhD,CAAR,CAAA;AAGD,KAJD,MAIO;MACLE,QAAQ,CAACI,YAAD,CAAR,CAAA;AACD,KAAA;AACF,GAVD,EAUG,CAACN,YAAD,EAAeP,GAAf,CAVH,CAAA,CAAA;AAYA,EAAA,MAAMc,MAAM,GAAGJ,gBAAK,CAACK,WAAN,CACZC,OAAD,IAAkB;IAChBP,QAAQ,CAAEQ,GAAD,IAAS;MAChB,IAAIC,MAAM,GAAGF,OAAb,CAAA;;AAEA,MAAA,IAAI,OAAOA,OAAP,IAAkB,UAAtB,EAAkC;AAChCE,QAAAA,MAAM,GAAGF,OAAO,CAACC,GAAD,CAAhB,CAAA;AACD,OAAA;;MACD,IAAI;QACFf,YAAY,CAACiB,OAAb,CAAqBnB,GAArB,EAA0BG,IAAI,CAACiB,SAAL,CAAeF,MAAf,CAA1B,CAAA,CAAA;OADF,CAEE,MAAM,EAAE;;AAEV,MAAA,OAAOA,MAAP,CAAA;AACD,KAXO,CAAR,CAAA;AAYD,GAdY,EAeb,CAAClB,GAAD,CAfa,CAAf,CAAA;AAkBA,EAAA,OAAO,CAACQ,KAAD,EAAQM,MAAR,CAAP,CAAA;AACD;;;;"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* react-query-devtools
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) TanStack
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
+
*
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
|
+
|
|
15
|
+
var React = require('react');
|
|
16
|
+
|
|
17
|
+
function _interopNamespace(e) {
|
|
18
|
+
if (e && e.__esModule) return e;
|
|
19
|
+
var n = Object.create(null);
|
|
20
|
+
if (e) {
|
|
21
|
+
Object.keys(e).forEach(function (k) {
|
|
22
|
+
if (k !== 'default') {
|
|
23
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
24
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () { return e[k]; }
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
n["default"] = e;
|
|
32
|
+
return Object.freeze(n);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
36
|
+
|
|
37
|
+
function useMediaQuery(query) {
|
|
38
|
+
// Keep track of the preference in state, start with the current match
|
|
39
|
+
const [isMatch, setIsMatch] = React__namespace.useState(() => {
|
|
40
|
+
if (typeof window !== 'undefined') {
|
|
41
|
+
return window.matchMedia(query).matches;
|
|
42
|
+
}
|
|
43
|
+
}); // Watch for changes
|
|
44
|
+
|
|
45
|
+
React__namespace.useEffect(() => {
|
|
46
|
+
if (typeof window !== 'undefined') {
|
|
47
|
+
// Create a matcher
|
|
48
|
+
const matcher = window.matchMedia(query); // Create our handler
|
|
49
|
+
|
|
50
|
+
const onChange = ({
|
|
51
|
+
matches
|
|
52
|
+
}) => setIsMatch(matches); // Listen for changes
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
matcher.addListener(onChange);
|
|
56
|
+
return () => {
|
|
57
|
+
// Stop listening for changes
|
|
58
|
+
matcher.removeListener(onChange);
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
}, [isMatch, query, setIsMatch]);
|
|
62
|
+
return isMatch;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
exports["default"] = useMediaQuery;
|
|
66
|
+
//# sourceMappingURL=useMediaQuery.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMediaQuery.js","sources":["../../src/useMediaQuery.ts"],"sourcesContent":["import * as React from 'react'\n\nexport default function useMediaQuery(query: string): boolean | undefined {\n // Keep track of the preference in state, start with the current match\n const [isMatch, setIsMatch] = React.useState(() => {\n if (typeof window !== 'undefined') {\n return window.matchMedia(query).matches\n }\n })\n\n // Watch for changes\n React.useEffect(() => {\n if (typeof window !== 'undefined') {\n // Create a matcher\n const matcher = window.matchMedia(query)\n\n // Create our handler\n const onChange = ({ matches }: { matches: boolean }) =>\n setIsMatch(matches)\n\n // Listen for changes\n matcher.addListener(onChange)\n\n return () => {\n // Stop listening for changes\n matcher.removeListener(onChange)\n }\n }\n }, [isMatch, query, setIsMatch])\n\n return isMatch\n}\n"],"names":["useMediaQuery","query","isMatch","setIsMatch","React","useState","window","matchMedia","matches","useEffect","matcher","onChange","addListener","removeListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEe,SAASA,aAAT,CAAuBC,KAAvB,EAA2D;AACxE;EACA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBC,gBAAK,CAACC,QAAN,CAAe,MAAM;AACjD,IAAA,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;AACjC,MAAA,OAAOA,MAAM,CAACC,UAAP,CAAkBN,KAAlB,EAAyBO,OAAhC,CAAA;AACD,KAAA;GAH2B,CAA9B,CAFwE;;EASxEJ,gBAAK,CAACK,SAAN,CAAgB,MAAM;AACpB,IAAA,IAAI,OAAOH,MAAP,KAAkB,WAAtB,EAAmC;AACjC;MACA,MAAMI,OAAO,GAAGJ,MAAM,CAACC,UAAP,CAAkBN,KAAlB,CAAhB,CAFiC;;MAKjC,MAAMU,QAAQ,GAAG,CAAC;AAAEH,QAAAA,OAAAA;AAAF,OAAD,KACfL,UAAU,CAACK,OAAD,CADZ,CALiC;;;MASjCE,OAAO,CAACE,WAAR,CAAoBD,QAApB,CAAA,CAAA;AAEA,MAAA,OAAO,MAAM;AACX;QACAD,OAAO,CAACG,cAAR,CAAuBF,QAAvB,CAAA,CAAA;OAFF,CAAA;AAID,KAAA;AACF,GAjBD,EAiBG,CAACT,OAAD,EAAUD,KAAV,EAAiBE,UAAjB,CAjBH,CAAA,CAAA;AAmBA,EAAA,OAAOD,OAAP,CAAA;AACD;;;;"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* react-query-devtools
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) TanStack
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
+
*
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
|
+
|
|
15
|
+
var React = require('react');
|
|
16
|
+
var theme = require('./theme.js');
|
|
17
|
+
var useMediaQuery = require('./useMediaQuery.js');
|
|
18
|
+
|
|
19
|
+
function _interopNamespace(e) {
|
|
20
|
+
if (e && e.__esModule) return e;
|
|
21
|
+
var n = Object.create(null);
|
|
22
|
+
if (e) {
|
|
23
|
+
Object.keys(e).forEach(function (k) {
|
|
24
|
+
if (k !== 'default') {
|
|
25
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function () { return e[k]; }
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
n["default"] = e;
|
|
34
|
+
return Object.freeze(n);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
38
|
+
|
|
39
|
+
const isServer = typeof window === 'undefined';
|
|
40
|
+
function getQueryStatusColor({
|
|
41
|
+
queryState,
|
|
42
|
+
observerCount,
|
|
43
|
+
isStale,
|
|
44
|
+
theme
|
|
45
|
+
}) {
|
|
46
|
+
return queryState.fetchStatus === 'fetching' ? theme.active : !observerCount ? theme.gray : queryState.fetchStatus === 'paused' ? theme.paused : isStale ? theme.warning : theme.success;
|
|
47
|
+
}
|
|
48
|
+
function getQueryStatusLabel(query) {
|
|
49
|
+
return query.state.fetchStatus === 'fetching' ? 'fetching' : !query.getObserversCount() ? 'inactive' : query.state.fetchStatus === 'paused' ? 'paused' : query.isStale() ? 'stale' : 'fresh';
|
|
50
|
+
}
|
|
51
|
+
function styled(type, newStyles, queries = {}) {
|
|
52
|
+
return /*#__PURE__*/React__namespace.forwardRef(({
|
|
53
|
+
style,
|
|
54
|
+
...rest
|
|
55
|
+
}, ref) => {
|
|
56
|
+
const theme$1 = theme.useTheme();
|
|
57
|
+
const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
|
|
58
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
59
|
+
return useMediaQuery["default"](key) ? { ...current,
|
|
60
|
+
...(typeof value === 'function' ? value(rest, theme$1) : value)
|
|
61
|
+
} : current;
|
|
62
|
+
}, {});
|
|
63
|
+
return /*#__PURE__*/React__namespace.createElement(type, { ...rest,
|
|
64
|
+
style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
|
|
65
|
+
...style,
|
|
66
|
+
...mediaStyles
|
|
67
|
+
},
|
|
68
|
+
ref
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
function useIsMounted() {
|
|
73
|
+
const mountedRef = React__namespace.useRef(false);
|
|
74
|
+
const isMounted = React__namespace.useCallback(() => mountedRef.current, []);
|
|
75
|
+
React__namespace[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
|
|
76
|
+
mountedRef.current = true;
|
|
77
|
+
return () => {
|
|
78
|
+
mountedRef.current = false;
|
|
79
|
+
};
|
|
80
|
+
}, []);
|
|
81
|
+
return isMounted;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Displays a string regardless the type of the data
|
|
85
|
+
* @param {unknown} value Value to be stringified
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
const displayValue = value => {
|
|
89
|
+
const name = Object.getOwnPropertyNames(Object(value));
|
|
90
|
+
const newValue = typeof value === 'bigint' ? value.toString() + "n" : value;
|
|
91
|
+
return JSON.stringify(newValue, name);
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.displayValue = displayValue;
|
|
95
|
+
exports.getQueryStatusColor = getQueryStatusColor;
|
|
96
|
+
exports.getQueryStatusLabel = getQueryStatusLabel;
|
|
97
|
+
exports.isServer = isServer;
|
|
98
|
+
exports.styled = styled;
|
|
99
|
+
exports.useIsMounted = useIsMounted;
|
|
100
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport type { Query } from '@tanstack/react-query'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getQueryStatusColor({\n queryState,\n observerCount,\n isStale,\n theme,\n}: {\n queryState: Query['state']\n observerCount: number\n isStale: boolean\n theme: Theme\n}) {\n return queryState.fetchStatus === 'fetching'\n ? theme.active\n : !observerCount\n ? theme.gray\n : queryState.fetchStatus === 'paused'\n ? theme.paused\n : isStale\n ? theme.warning\n : theme.success\n}\n\nexport function getQueryStatusLabel(query: Query) {\n return query.state.fetchStatus === 'fetching'\n ? 'fetching'\n : !query.getObserversCount()\n ? 'inactive'\n : query.state.fetchStatus === 'paused'\n ? 'paused'\n : query.isStale()\n ? 'stale'\n : 'fresh'\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n const name = Object.getOwnPropertyNames(Object(value))\n const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n\n return JSON.stringify(newValue, name)\n}\n"],"names":["isServer","window","getQueryStatusColor","queryState","observerCount","isStale","theme","fetchStatus","active","gray","paused","warning","success","getQueryStatusLabel","query","state","getObserversCount","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","displayValue","name","getOwnPropertyNames","newValue","toString","JSON","stringify"],"mappings":"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"}
|