@tanstack/react-query-devtools 5.0.0-alpha.3 → 5.0.0-alpha.30
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/lib/__tests__/devtools.test.d.ts +1 -1
- package/build/lib/__tests__/devtools.test.d.ts.map +1 -0
- package/build/lib/__tests__/utils.d.ts +1 -0
- package/build/lib/__tests__/utils.d.ts.map +1 -0
- package/build/lib/devtools.d.ts +11 -75
- package/build/lib/devtools.d.ts.map +1 -0
- package/build/lib/devtools.esm.js +52 -766
- package/build/lib/devtools.esm.js.map +1 -1
- package/build/lib/devtools.js +49 -783
- package/build/lib/devtools.js.map +1 -1
- package/build/lib/devtools.mjs +52 -766
- package/build/lib/devtools.mjs.map +1 -1
- package/build/lib/index.d.ts +1 -1
- package/build/lib/index.d.ts.map +1 -0
- package/build/lib/index.esm.js +10 -5
- package/build/lib/index.esm.js.map +1 -1
- package/build/lib/index.js +8 -4
- package/build/lib/index.js.map +1 -1
- package/build/lib/index.mjs +10 -5
- package/build/lib/index.mjs.map +1 -1
- package/build/lib/index.prod.d.ts +1 -1
- package/build/lib/index.prod.esm.js +7886 -1302
- package/build/lib/index.prod.esm.js.map +1 -1
- package/build/lib/index.prod.js +7953 -1389
- package/build/lib/index.prod.js.map +1 -1
- package/build/lib/index.prod.mjs +7886 -1302
- package/build/lib/index.prod.mjs.map +1 -1
- package/build/umd/index.development.js +7010 -2089
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +5 -6
- package/src/__tests__/devtools.test.tsx +1 -860
- package/src/devtools.tsx +61 -1165
- package/src/index.ts +6 -6
- package/build/lib/Explorer.d.ts +0 -50
- package/build/lib/Explorer.esm.js +0 -253
- package/build/lib/Explorer.esm.js.map +0 -1
- package/build/lib/Explorer.js +0 -287
- package/build/lib/Explorer.js.map +0 -1
- package/build/lib/Explorer.mjs +0 -253
- package/build/lib/Explorer.mjs.map +0 -1
- package/build/lib/Logo.d.ts +0 -1
- package/build/lib/Logo.esm.js +0 -32
- package/build/lib/Logo.esm.js.map +0 -1
- package/build/lib/Logo.js +0 -55
- package/build/lib/Logo.js.map +0 -1
- package/build/lib/Logo.mjs +0 -32
- package/build/lib/Logo.mjs.map +0 -1
- package/build/lib/__tests__/Explorer.test.d.ts +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -17
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -19
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -17
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
- package/build/lib/noop.d.ts +0 -2
- package/build/lib/screenreader.d.ts +0 -3
- package/build/lib/screenreader.esm.js +0 -17
- package/build/lib/screenreader.esm.js.map +0 -1
- package/build/lib/screenreader.js +0 -40
- package/build/lib/screenreader.js.map +0 -1
- package/build/lib/screenreader.mjs +0 -17
- package/build/lib/screenreader.mjs.map +0 -1
- package/build/lib/styledComponents.d.ts +0 -9
- package/build/lib/styledComponents.esm.js +0 -93
- package/build/lib/styledComponents.esm.js.map +0 -1
- package/build/lib/styledComponents.js +0 -102
- package/build/lib/styledComponents.js.map +0 -1
- package/build/lib/styledComponents.mjs +0 -93
- package/build/lib/styledComponents.mjs.map +0 -1
- package/build/lib/theme.d.ts +0 -36
- package/build/lib/theme.esm.js +0 -32
- package/build/lib/theme.esm.js.map +0 -1
- package/build/lib/theme.js +0 -55
- package/build/lib/theme.js.map +0 -1
- package/build/lib/theme.mjs +0 -32
- package/build/lib/theme.mjs.map +0 -1
- package/build/lib/useLocalStorage.d.ts +0 -1
- package/build/lib/useLocalStorage.esm.js +0 -40
- package/build/lib/useLocalStorage.esm.js.map +0 -1
- package/build/lib/useLocalStorage.js +0 -63
- package/build/lib/useLocalStorage.js.map +0 -1
- package/build/lib/useLocalStorage.mjs +0 -40
- package/build/lib/useLocalStorage.mjs.map +0 -1
- package/build/lib/useMediaQuery.d.ts +0 -1
- package/build/lib/useMediaQuery.esm.js +0 -36
- package/build/lib/useMediaQuery.esm.js.map +0 -1
- package/build/lib/useMediaQuery.js +0 -59
- package/build/lib/useMediaQuery.js.map +0 -1
- package/build/lib/useMediaQuery.mjs +0 -36
- package/build/lib/useMediaQuery.mjs.map +0 -1
- package/build/lib/utils.d.ts +0 -79
- package/build/lib/utils.esm.js +0 -184
- package/build/lib/utils.esm.js.map +0 -1
- package/build/lib/utils.js +0 -218
- package/build/lib/utils.js.map +0 -1
- package/build/lib/utils.mjs +0 -184
- package/build/lib/utils.mjs.map +0 -1
- package/src/Explorer.tsx +0 -385
- package/src/Logo.tsx +0 -32
- package/src/__tests__/Explorer.test.tsx +0 -149
- package/src/noop.ts +0 -7
- package/src/screenreader.tsx +0 -16
- package/src/styledComponents.ts +0 -108
- package/src/theme.tsx +0 -33
- package/src/useLocalStorage.ts +0 -52
- package/src/useMediaQuery.ts +0 -34
- package/src/utils.ts +0 -319
package/build/lib/theme.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * 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":";;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,gBAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAOJ,gBAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAAK,iCAAA,CAAA;AAAC,IAAA,KAAK,EAAEF,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASE,QAAQ,GAAG;AACzB,EAAA,OAAON,gBAAK,CAACO,UAAU,CAACR,YAAY,CAAC,CAAA;AACvC;;;;;;"}
|
package/build/lib/theme.mjs
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.mjs';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
const defaultTheme = {
|
|
5
|
-
background: '#0b1521',
|
|
6
|
-
backgroundAlt: '#132337',
|
|
7
|
-
foreground: 'white',
|
|
8
|
-
gray: '#3f4e60',
|
|
9
|
-
grayAlt: '#222e3e',
|
|
10
|
-
inputBackgroundColor: '#fff',
|
|
11
|
-
inputTextColor: '#000',
|
|
12
|
-
success: '#00ab52',
|
|
13
|
-
danger: '#ff0085',
|
|
14
|
-
active: '#006bff',
|
|
15
|
-
paused: '#8c49eb',
|
|
16
|
-
warning: '#ffb200'
|
|
17
|
-
};
|
|
18
|
-
const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
|
|
19
|
-
function ThemeProvider({
|
|
20
|
-
theme,
|
|
21
|
-
...rest
|
|
22
|
-
}) {
|
|
23
|
-
return /*#__PURE__*/React.createElement(ThemeContext.Provider, _extends({
|
|
24
|
-
value: theme
|
|
25
|
-
}, rest));
|
|
26
|
-
}
|
|
27
|
-
function useTheme() {
|
|
28
|
-
return React.useContext(ThemeContext);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export { ThemeProvider, defaultTheme, useTheme };
|
|
32
|
-
//# sourceMappingURL=theme.mjs.map
|
package/build/lib/theme.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.mjs","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * 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","useTheme","useContext"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAO,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,QAAA,CAAA;AAAC,IAAA,KAAK,EAAED,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASC,QAAQ,GAAG;AACzB,EAAA,OAAOL,KAAK,CAACM,UAAU,CAACP,YAAY,CAAC,CAAA;AACvC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function useLocalStorage<T>(key: string, defaultValue: T | undefined): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void];
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
const getItem = key => {
|
|
4
|
-
try {
|
|
5
|
-
const itemValue = localStorage.getItem(key);
|
|
6
|
-
if (typeof itemValue === 'string') {
|
|
7
|
-
return JSON.parse(itemValue);
|
|
8
|
-
}
|
|
9
|
-
return undefined;
|
|
10
|
-
} catch {
|
|
11
|
-
return undefined;
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
function useLocalStorage(key, defaultValue) {
|
|
15
|
-
const [value, setValue] = React.useState();
|
|
16
|
-
React.useEffect(() => {
|
|
17
|
-
const initialValue = getItem(key);
|
|
18
|
-
if (typeof initialValue === 'undefined' || initialValue === null) {
|
|
19
|
-
setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
|
|
20
|
-
} else {
|
|
21
|
-
setValue(initialValue);
|
|
22
|
-
}
|
|
23
|
-
}, [defaultValue, key]);
|
|
24
|
-
const setter = React.useCallback(updater => {
|
|
25
|
-
setValue(old => {
|
|
26
|
-
let newVal = updater;
|
|
27
|
-
if (typeof updater == 'function') {
|
|
28
|
-
newVal = updater(old);
|
|
29
|
-
}
|
|
30
|
-
try {
|
|
31
|
-
localStorage.setItem(key, JSON.stringify(newVal));
|
|
32
|
-
} catch {}
|
|
33
|
-
return newVal;
|
|
34
|
-
});
|
|
35
|
-
}, [key]);
|
|
36
|
-
return [value, setter];
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export { useLocalStorage as default };
|
|
40
|
-
//# sourceMappingURL=useLocalStorage.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLocalStorage.esm.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,GAAW,IAAc;EACxC,IAAI;AACF,IAAA,MAAMC,SAAS,GAAGC,YAAY,CAACH,OAAO,CAACC,GAAG,CAAC,CAAA;AAC3C,IAAA,IAAI,OAAOC,SAAS,KAAK,QAAQ,EAAE;AACjC,MAAA,OAAOE,IAAI,CAACC,KAAK,CAACH,SAAS,CAAC,CAAA;AAC9B,KAAA;AACA,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAC,CAAC,MAAM;AACN,IAAA,OAAOA,SAAS,CAAA;AAClB,GAAA;AACF,CAAC,CAAA;AAEc,SAASC,eAAe,CACrCN,GAAW,EACXO,YAA2B,EACiC;EAC5D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,KAAK,CAACC,QAAQ,EAAK,CAAA;EAE7CD,KAAK,CAACE,SAAS,CAAC,MAAM;AACpB,IAAA,MAAMC,YAAY,GAAGd,OAAO,CAACC,GAAG,CAAkB,CAAA;IAElD,IAAI,OAAOa,YAAY,KAAK,WAAW,IAAIA,YAAY,KAAK,IAAI,EAAE;MAChEJ,QAAQ,CACN,OAAOF,YAAY,KAAK,UAAU,GAAGA,YAAY,EAAE,GAAGA,YAAY,CACnE,CAAA;AACH,KAAC,MAAM;MACLE,QAAQ,CAACI,YAAY,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACN,YAAY,EAAEP,GAAG,CAAC,CAAC,CAAA;AAEvB,EAAA,MAAMc,MAAM,GAAGJ,KAAK,CAACK,WAAW,CAC7BC,OAAY,IAAK;IAChBP,QAAQ,CAAEQ,GAAG,IAAK;MAChB,IAAIC,MAAM,GAAGF,OAAO,CAAA;AAEpB,MAAA,IAAI,OAAOA,OAAO,IAAI,UAAU,EAAE;AAChCE,QAAAA,MAAM,GAAGF,OAAO,CAACC,GAAG,CAAC,CAAA;AACvB,OAAA;MACA,IAAI;QACFf,YAAY,CAACiB,OAAO,CAACnB,GAAG,EAAEG,IAAI,CAACiB,SAAS,CAACF,MAAM,CAAC,CAAC,CAAA;OAClD,CAAC,MAAM,EAAC;AAET,MAAA,OAAOA,MAAM,CAAA;AACf,KAAC,CAAC,CAAA;AACJ,GAAC,EACD,CAAClB,GAAG,CAAC,CACN,CAAA;AAED,EAAA,OAAO,CAACQ,KAAK,EAAEM,MAAM,CAAC,CAAA;AACxB;;;;"}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
function _interopNamespaceDefault(e) {
|
|
8
|
-
var n = Object.create(null);
|
|
9
|
-
if (e) {
|
|
10
|
-
Object.keys(e).forEach(function (k) {
|
|
11
|
-
if (k !== 'default') {
|
|
12
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () { return e[k]; }
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
n.default = e;
|
|
21
|
-
return Object.freeze(n);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
|
-
|
|
26
|
-
const getItem = key => {
|
|
27
|
-
try {
|
|
28
|
-
const itemValue = localStorage.getItem(key);
|
|
29
|
-
if (typeof itemValue === 'string') {
|
|
30
|
-
return JSON.parse(itemValue);
|
|
31
|
-
}
|
|
32
|
-
return undefined;
|
|
33
|
-
} catch {
|
|
34
|
-
return undefined;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
function useLocalStorage(key, defaultValue) {
|
|
38
|
-
const [value, setValue] = React__namespace.useState();
|
|
39
|
-
React__namespace.useEffect(() => {
|
|
40
|
-
const initialValue = getItem(key);
|
|
41
|
-
if (typeof initialValue === 'undefined' || initialValue === null) {
|
|
42
|
-
setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
|
|
43
|
-
} else {
|
|
44
|
-
setValue(initialValue);
|
|
45
|
-
}
|
|
46
|
-
}, [defaultValue, key]);
|
|
47
|
-
const setter = React__namespace.useCallback(updater => {
|
|
48
|
-
setValue(old => {
|
|
49
|
-
let newVal = updater;
|
|
50
|
-
if (typeof updater == 'function') {
|
|
51
|
-
newVal = updater(old);
|
|
52
|
-
}
|
|
53
|
-
try {
|
|
54
|
-
localStorage.setItem(key, JSON.stringify(newVal));
|
|
55
|
-
} catch {}
|
|
56
|
-
return newVal;
|
|
57
|
-
});
|
|
58
|
-
}, [key]);
|
|
59
|
-
return [value, setter];
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
exports.default = useLocalStorage;
|
|
63
|
-
//# sourceMappingURL=useLocalStorage.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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,GAAW,IAAc;EACxC,IAAI;AACF,IAAA,MAAMC,SAAS,GAAGC,YAAY,CAACH,OAAO,CAACC,GAAG,CAAC,CAAA;AAC3C,IAAA,IAAI,OAAOC,SAAS,KAAK,QAAQ,EAAE;AACjC,MAAA,OAAOE,IAAI,CAACC,KAAK,CAACH,SAAS,CAAC,CAAA;AAC9B,KAAA;AACA,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAC,CAAC,MAAM;AACN,IAAA,OAAOA,SAAS,CAAA;AAClB,GAAA;AACF,CAAC,CAAA;AAEc,SAASC,eAAe,CACrCN,GAAW,EACXO,YAA2B,EACiC;EAC5D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,gBAAK,CAACC,QAAQ,EAAK,CAAA;EAE7CD,gBAAK,CAACE,SAAS,CAAC,MAAM;AACpB,IAAA,MAAMC,YAAY,GAAGd,OAAO,CAACC,GAAG,CAAkB,CAAA;IAElD,IAAI,OAAOa,YAAY,KAAK,WAAW,IAAIA,YAAY,KAAK,IAAI,EAAE;MAChEJ,QAAQ,CACN,OAAOF,YAAY,KAAK,UAAU,GAAGA,YAAY,EAAE,GAAGA,YAAY,CACnE,CAAA;AACH,KAAC,MAAM;MACLE,QAAQ,CAACI,YAAY,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACN,YAAY,EAAEP,GAAG,CAAC,CAAC,CAAA;AAEvB,EAAA,MAAMc,MAAM,GAAGJ,gBAAK,CAACK,WAAW,CAC7BC,OAAY,IAAK;IAChBP,QAAQ,CAAEQ,GAAG,IAAK;MAChB,IAAIC,MAAM,GAAGF,OAAO,CAAA;AAEpB,MAAA,IAAI,OAAOA,OAAO,IAAI,UAAU,EAAE;AAChCE,QAAAA,MAAM,GAAGF,OAAO,CAACC,GAAG,CAAC,CAAA;AACvB,OAAA;MACA,IAAI;QACFf,YAAY,CAACiB,OAAO,CAACnB,GAAG,EAAEG,IAAI,CAACiB,SAAS,CAACF,MAAM,CAAC,CAAC,CAAA;OAClD,CAAC,MAAM,EAAC;AAET,MAAA,OAAOA,MAAM,CAAA;AACf,KAAC,CAAC,CAAA;AACJ,GAAC,EACD,CAAClB,GAAG,CAAC,CACN,CAAA;AAED,EAAA,OAAO,CAACQ,KAAK,EAAEM,MAAM,CAAC,CAAA;AACxB;;;;"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
const getItem = key => {
|
|
4
|
-
try {
|
|
5
|
-
const itemValue = localStorage.getItem(key);
|
|
6
|
-
if (typeof itemValue === 'string') {
|
|
7
|
-
return JSON.parse(itemValue);
|
|
8
|
-
}
|
|
9
|
-
return undefined;
|
|
10
|
-
} catch {
|
|
11
|
-
return undefined;
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
function useLocalStorage(key, defaultValue) {
|
|
15
|
-
const [value, setValue] = React.useState();
|
|
16
|
-
React.useEffect(() => {
|
|
17
|
-
const initialValue = getItem(key);
|
|
18
|
-
if (typeof initialValue === 'undefined' || initialValue === null) {
|
|
19
|
-
setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
|
|
20
|
-
} else {
|
|
21
|
-
setValue(initialValue);
|
|
22
|
-
}
|
|
23
|
-
}, [defaultValue, key]);
|
|
24
|
-
const setter = React.useCallback(updater => {
|
|
25
|
-
setValue(old => {
|
|
26
|
-
let newVal = updater;
|
|
27
|
-
if (typeof updater == 'function') {
|
|
28
|
-
newVal = updater(old);
|
|
29
|
-
}
|
|
30
|
-
try {
|
|
31
|
-
localStorage.setItem(key, JSON.stringify(newVal));
|
|
32
|
-
} catch {}
|
|
33
|
-
return newVal;
|
|
34
|
-
});
|
|
35
|
-
}, [key]);
|
|
36
|
-
return [value, setter];
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export { useLocalStorage as default };
|
|
40
|
-
//# sourceMappingURL=useLocalStorage.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLocalStorage.mjs","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,GAAW,IAAc;EACxC,IAAI;AACF,IAAA,MAAMC,SAAS,GAAGC,YAAY,CAACH,OAAO,CAACC,GAAG,CAAC,CAAA;AAC3C,IAAA,IAAI,OAAOC,SAAS,KAAK,QAAQ,EAAE;AACjC,MAAA,OAAOE,IAAI,CAACC,KAAK,CAACH,SAAS,CAAC,CAAA;AAC9B,KAAA;AACA,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAC,CAAC,MAAM;AACN,IAAA,OAAOA,SAAS,CAAA;AAClB,GAAA;AACF,CAAC,CAAA;AAEc,SAASC,eAAe,CACrCN,GAAW,EACXO,YAA2B,EACiC;EAC5D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,KAAK,CAACC,QAAQ,EAAK,CAAA;EAE7CD,KAAK,CAACE,SAAS,CAAC,MAAM;AACpB,IAAA,MAAMC,YAAY,GAAGd,OAAO,CAACC,GAAG,CAAkB,CAAA;IAElD,IAAI,OAAOa,YAAY,KAAK,WAAW,IAAIA,YAAY,KAAK,IAAI,EAAE;MAChEJ,QAAQ,CACN,OAAOF,YAAY,KAAK,UAAU,GAAGA,YAAY,EAAE,GAAGA,YAAY,CACnE,CAAA;AACH,KAAC,MAAM;MACLE,QAAQ,CAACI,YAAY,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACN,YAAY,EAAEP,GAAG,CAAC,CAAC,CAAA;AAEvB,EAAA,MAAMc,MAAM,GAAGJ,KAAK,CAACK,WAAW,CAC7BC,OAAY,IAAK;IAChBP,QAAQ,CAAEQ,GAAG,IAAK;MAChB,IAAIC,MAAM,GAAGF,OAAO,CAAA;AAEpB,MAAA,IAAI,OAAOA,OAAO,IAAI,UAAU,EAAE;AAChCE,QAAAA,MAAM,GAAGF,OAAO,CAACC,GAAG,CAAC,CAAA;AACvB,OAAA;MACA,IAAI;QACFf,YAAY,CAACiB,OAAO,CAACnB,GAAG,EAAEG,IAAI,CAACiB,SAAS,CAACF,MAAM,CAAC,CAAC,CAAA;OAClD,CAAC,MAAM,EAAC;AAET,MAAA,OAAOA,MAAM,CAAA;AACf,KAAC,CAAC,CAAA;AACJ,GAAC,EACD,CAAClB,GAAG,CAAC,CACN,CAAA;AAED,EAAA,OAAO,CAACQ,KAAK,EAAEM,MAAM,CAAC,CAAA;AACxB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function useMediaQuery(query: string): boolean | undefined;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
function useMediaQuery(query) {
|
|
4
|
-
// Keep track of the preference in state, start with the current match
|
|
5
|
-
const [isMatch, setIsMatch] = React.useState(() => {
|
|
6
|
-
if (typeof window !== 'undefined') {
|
|
7
|
-
return window.matchMedia(query).matches;
|
|
8
|
-
}
|
|
9
|
-
return;
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
// Watch for changes
|
|
13
|
-
React.useEffect(() => {
|
|
14
|
-
if (typeof window !== 'undefined') {
|
|
15
|
-
// Create a matcher
|
|
16
|
-
const matcher = window.matchMedia(query);
|
|
17
|
-
|
|
18
|
-
// Create our handler
|
|
19
|
-
const onChange = ({
|
|
20
|
-
matches
|
|
21
|
-
}) => setIsMatch(matches);
|
|
22
|
-
|
|
23
|
-
// Listen for changes
|
|
24
|
-
matcher.addListener(onChange);
|
|
25
|
-
return () => {
|
|
26
|
-
// Stop listening for changes
|
|
27
|
-
matcher.removeListener(onChange);
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
return;
|
|
31
|
-
}, [isMatch, query, setIsMatch]);
|
|
32
|
-
return isMatch;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export { useMediaQuery as default };
|
|
36
|
-
//# sourceMappingURL=useMediaQuery.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.esm.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 return\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 return\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,aAAa,CAACC,KAAa,EAAuB;AACxE;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACjD,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;AACjC,MAAA,OAAOA,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAACO,OAAO,CAAA;AACzC,KAAA;AACA,IAAA,OAAA;AACF,GAAC,CAAC,CAAA;;AAEF;EACAJ,KAAK,CAACK,SAAS,CAAC,MAAM;AACpB,IAAA,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAE;AACjC;AACA,MAAA,MAAMI,OAAO,GAAGJ,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAAA;;AAExC;MACA,MAAMU,QAAQ,GAAG,CAAC;AAAEH,QAAAA,OAAAA;AAA8B,OAAC,KACjDL,UAAU,CAACK,OAAO,CAAC,CAAA;;AAErB;AACAE,MAAAA,OAAO,CAACE,WAAW,CAACD,QAAQ,CAAC,CAAA;AAE7B,MAAA,OAAO,MAAM;AACX;AACAD,QAAAA,OAAO,CAACG,cAAc,CAACF,QAAQ,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACA,IAAA,OAAA;GACD,EAAE,CAACT,OAAO,EAAED,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEhC,EAAA,OAAOD,OAAO,CAAA;AAChB;;;;"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
function _interopNamespaceDefault(e) {
|
|
8
|
-
var n = Object.create(null);
|
|
9
|
-
if (e) {
|
|
10
|
-
Object.keys(e).forEach(function (k) {
|
|
11
|
-
if (k !== 'default') {
|
|
12
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () { return e[k]; }
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
n.default = e;
|
|
21
|
-
return Object.freeze(n);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
|
-
|
|
26
|
-
function useMediaQuery(query) {
|
|
27
|
-
// Keep track of the preference in state, start with the current match
|
|
28
|
-
const [isMatch, setIsMatch] = React__namespace.useState(() => {
|
|
29
|
-
if (typeof window !== 'undefined') {
|
|
30
|
-
return window.matchMedia(query).matches;
|
|
31
|
-
}
|
|
32
|
-
return;
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
// Watch for changes
|
|
36
|
-
React__namespace.useEffect(() => {
|
|
37
|
-
if (typeof window !== 'undefined') {
|
|
38
|
-
// Create a matcher
|
|
39
|
-
const matcher = window.matchMedia(query);
|
|
40
|
-
|
|
41
|
-
// Create our handler
|
|
42
|
-
const onChange = ({
|
|
43
|
-
matches
|
|
44
|
-
}) => setIsMatch(matches);
|
|
45
|
-
|
|
46
|
-
// Listen for changes
|
|
47
|
-
matcher.addListener(onChange);
|
|
48
|
-
return () => {
|
|
49
|
-
// Stop listening for changes
|
|
50
|
-
matcher.removeListener(onChange);
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
return;
|
|
54
|
-
}, [isMatch, query, setIsMatch]);
|
|
55
|
-
return isMatch;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
exports.default = useMediaQuery;
|
|
59
|
-
//# sourceMappingURL=useMediaQuery.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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 return\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 return\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,aAAa,CAACC,KAAa,EAAuB;AACxE;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAAC,MAAM;AACjD,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;AACjC,MAAA,OAAOA,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAACO,OAAO,CAAA;AACzC,KAAA;AACA,IAAA,OAAA;AACF,GAAC,CAAC,CAAA;;AAEF;EACAJ,gBAAK,CAACK,SAAS,CAAC,MAAM;AACpB,IAAA,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAE;AACjC;AACA,MAAA,MAAMI,OAAO,GAAGJ,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAAA;;AAExC;MACA,MAAMU,QAAQ,GAAG,CAAC;AAAEH,QAAAA,OAAAA;AAA8B,OAAC,KACjDL,UAAU,CAACK,OAAO,CAAC,CAAA;;AAErB;AACAE,MAAAA,OAAO,CAACE,WAAW,CAACD,QAAQ,CAAC,CAAA;AAE7B,MAAA,OAAO,MAAM;AACX;AACAD,QAAAA,OAAO,CAACG,cAAc,CAACF,QAAQ,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACA,IAAA,OAAA;GACD,EAAE,CAACT,OAAO,EAAED,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEhC,EAAA,OAAOD,OAAO,CAAA;AAChB;;;;"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
function useMediaQuery(query) {
|
|
4
|
-
// Keep track of the preference in state, start with the current match
|
|
5
|
-
const [isMatch, setIsMatch] = React.useState(() => {
|
|
6
|
-
if (typeof window !== 'undefined') {
|
|
7
|
-
return window.matchMedia(query).matches;
|
|
8
|
-
}
|
|
9
|
-
return;
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
// Watch for changes
|
|
13
|
-
React.useEffect(() => {
|
|
14
|
-
if (typeof window !== 'undefined') {
|
|
15
|
-
// Create a matcher
|
|
16
|
-
const matcher = window.matchMedia(query);
|
|
17
|
-
|
|
18
|
-
// Create our handler
|
|
19
|
-
const onChange = ({
|
|
20
|
-
matches
|
|
21
|
-
}) => setIsMatch(matches);
|
|
22
|
-
|
|
23
|
-
// Listen for changes
|
|
24
|
-
matcher.addListener(onChange);
|
|
25
|
-
return () => {
|
|
26
|
-
// Stop listening for changes
|
|
27
|
-
matcher.removeListener(onChange);
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
return;
|
|
31
|
-
}, [isMatch, query, setIsMatch]);
|
|
32
|
-
return isMatch;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export { useMediaQuery as default };
|
|
36
|
-
//# sourceMappingURL=useMediaQuery.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.mjs","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 return\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 return\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,aAAa,CAACC,KAAa,EAAuB;AACxE;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACjD,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;AACjC,MAAA,OAAOA,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAACO,OAAO,CAAA;AACzC,KAAA;AACA,IAAA,OAAA;AACF,GAAC,CAAC,CAAA;;AAEF;EACAJ,KAAK,CAACK,SAAS,CAAC,MAAM;AACpB,IAAA,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAE;AACjC;AACA,MAAA,MAAMI,OAAO,GAAGJ,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAAA;;AAExC;MACA,MAAMU,QAAQ,GAAG,CAAC;AAAEH,QAAAA,OAAAA;AAA8B,OAAC,KACjDL,UAAU,CAACK,OAAO,CAAC,CAAA;;AAErB;AACAE,MAAAA,OAAO,CAACE,WAAW,CAACD,QAAQ,CAAC,CAAA;AAE7B,MAAA,OAAO,MAAM;AACX;AACAD,QAAAA,OAAO,CAACG,cAAc,CAACF,QAAQ,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACA,IAAA,OAAA;GACD,EAAE,CAACT,OAAO,EAAED,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEhC,EAAA,OAAOD,OAAO,CAAA;AAChB;;;;"}
|
package/build/lib/utils.d.ts
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { Query } from '@tanstack/react-query';
|
|
3
|
-
import type { Theme } from './theme';
|
|
4
|
-
declare type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> : T extends 'input' ? React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : T extends 'select' ? React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? React.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
|
|
5
|
-
export declare function getQueryStatusColor({ queryState, observerCount, isStale, theme, }: {
|
|
6
|
-
queryState: Query['state'];
|
|
7
|
-
observerCount: number;
|
|
8
|
-
isStale: boolean;
|
|
9
|
-
theme: Theme;
|
|
10
|
-
}): "#3f4e60" | "#00ab52" | "#006bff" | "#8c49eb" | "#ffb200";
|
|
11
|
-
export declare function getQueryStatusLabel(query: Query): "fetching" | "paused" | "inactive" | "stale" | "fresh";
|
|
12
|
-
declare type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
|
|
13
|
-
export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
|
|
14
|
-
export declare function useIsMounted(): () => boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Displays a string regardless the type of the data
|
|
17
|
-
* @param {unknown} value Value to be stringified
|
|
18
|
-
* @param {boolean} beautify Formats json to multiline
|
|
19
|
-
*/
|
|
20
|
-
export declare const displayValue: (value: unknown, beautify?: boolean) => string;
|
|
21
|
-
declare type SortFn = (a: Query, b: Query) => number;
|
|
22
|
-
export declare const sortFns: Record<string, SortFn>;
|
|
23
|
-
export declare const minPanelSize = 70;
|
|
24
|
-
export declare const defaultPanelSize = 500;
|
|
25
|
-
export declare const sides: Record<Side, Side>;
|
|
26
|
-
export declare type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
27
|
-
export declare type Side = 'left' | 'right' | 'top' | 'bottom';
|
|
28
|
-
/**
|
|
29
|
-
* Check if the given side is vertical (left/right)
|
|
30
|
-
*/
|
|
31
|
-
export declare function isVerticalSide(side: Side): boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
|
|
34
|
-
*/
|
|
35
|
-
export declare function getOppositeSide(side: Side): Side;
|
|
36
|
-
/**
|
|
37
|
-
* Given as css prop it will return a sided css prop based on a given side
|
|
38
|
-
* Example given `border` and `right` it return `borderRight`
|
|
39
|
-
*/
|
|
40
|
-
export declare function getSidedProp<T extends string>(prop: T, side: Side): `${T}Left` | `${T}Right` | `${T}Bottom` | `${T}Top`;
|
|
41
|
-
export interface SidePanelStyleOptions {
|
|
42
|
-
/**
|
|
43
|
-
* Position of the panel
|
|
44
|
-
* Defaults to 'bottom'
|
|
45
|
-
*/
|
|
46
|
-
position?: Side;
|
|
47
|
-
/**
|
|
48
|
-
* Staring height for the panel, it is set if the position is horizontal eg 'top' or 'bottom'
|
|
49
|
-
* Defaults to 500
|
|
50
|
-
*/
|
|
51
|
-
height?: number;
|
|
52
|
-
/**
|
|
53
|
-
* Staring width for the panel, it is set if the position is vertical eg 'left' or 'right'
|
|
54
|
-
* Defaults to 500
|
|
55
|
-
*/
|
|
56
|
-
width?: number;
|
|
57
|
-
/**
|
|
58
|
-
* RQ devtools theme
|
|
59
|
-
*/
|
|
60
|
-
devtoolsTheme: Theme;
|
|
61
|
-
/**
|
|
62
|
-
* Sets the correct transition and visibility styles
|
|
63
|
-
*/
|
|
64
|
-
isOpen?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* If the panel is resizing set to true to apply the correct transition styles
|
|
67
|
-
*/
|
|
68
|
-
isResizing?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* Extra panel style passed by the user
|
|
71
|
-
*/
|
|
72
|
-
panelStyle?: React.CSSProperties;
|
|
73
|
-
}
|
|
74
|
-
export declare function getSidePanelStyle({ position, height, width, devtoolsTheme, isOpen, isResizing, panelStyle, }: SidePanelStyleOptions): React.CSSProperties;
|
|
75
|
-
/**
|
|
76
|
-
* Get resize handle style based on a given side
|
|
77
|
-
*/
|
|
78
|
-
export declare function getResizeHandleStyle(position?: Side): React.CSSProperties;
|
|
79
|
-
export {};
|
package/build/lib/utils.esm.js
DELETED
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import SuperJSON from 'superjson';
|
|
3
|
-
import { useTheme } from './theme.esm.js';
|
|
4
|
-
import useMediaQuery from './useMediaQuery.esm.js';
|
|
5
|
-
|
|
6
|
-
function getQueryStatusColor({
|
|
7
|
-
queryState,
|
|
8
|
-
observerCount,
|
|
9
|
-
isStale,
|
|
10
|
-
theme
|
|
11
|
-
}) {
|
|
12
|
-
return queryState.fetchStatus === 'fetching' ? theme.active : !observerCount ? theme.gray : queryState.fetchStatus === 'paused' ? theme.paused : isStale ? theme.warning : theme.success;
|
|
13
|
-
}
|
|
14
|
-
function getQueryStatusLabel(query) {
|
|
15
|
-
return query.state.fetchStatus === 'fetching' ? 'fetching' : !query.getObserversCount() ? 'inactive' : query.state.fetchStatus === 'paused' ? 'paused' : query.isStale() ? 'stale' : 'fresh';
|
|
16
|
-
}
|
|
17
|
-
function styled(type, newStyles, queries = {}) {
|
|
18
|
-
return /*#__PURE__*/React.forwardRef(({
|
|
19
|
-
style,
|
|
20
|
-
...rest
|
|
21
|
-
}, ref) => {
|
|
22
|
-
const theme = useTheme();
|
|
23
|
-
const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
|
|
24
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
25
|
-
return useMediaQuery(key) ? {
|
|
26
|
-
...current,
|
|
27
|
-
...(typeof value === 'function' ? value(rest, theme) : value)
|
|
28
|
-
} : current;
|
|
29
|
-
}, {});
|
|
30
|
-
return /*#__PURE__*/React.createElement(type, {
|
|
31
|
-
...rest,
|
|
32
|
-
style: {
|
|
33
|
-
...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
|
|
34
|
-
...style,
|
|
35
|
-
...mediaStyles
|
|
36
|
-
},
|
|
37
|
-
ref
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
function useIsMounted() {
|
|
42
|
-
const mountedRef = React.useRef(false);
|
|
43
|
-
const isMounted = React.useCallback(() => mountedRef.current, []);
|
|
44
|
-
React.useEffect(() => {
|
|
45
|
-
mountedRef.current = true;
|
|
46
|
-
return () => {
|
|
47
|
-
mountedRef.current = false;
|
|
48
|
-
};
|
|
49
|
-
}, []);
|
|
50
|
-
return isMounted;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Displays a string regardless the type of the data
|
|
55
|
-
* @param {unknown} value Value to be stringified
|
|
56
|
-
* @param {boolean} beautify Formats json to multiline
|
|
57
|
-
*/
|
|
58
|
-
const displayValue = (value, beautify = false) => {
|
|
59
|
-
const {
|
|
60
|
-
json
|
|
61
|
-
} = SuperJSON.serialize(value);
|
|
62
|
-
return JSON.stringify(json, null, beautify ? 2 : undefined);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
// Sorting functions
|
|
66
|
-
|
|
67
|
-
const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
|
|
68
|
-
const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
|
|
69
|
-
const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
|
|
70
|
-
const statusAndDateSort = (a, b) => {
|
|
71
|
-
if (getStatusRank(a) === getStatusRank(b)) {
|
|
72
|
-
return dateSort(a, b);
|
|
73
|
-
}
|
|
74
|
-
return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
|
|
75
|
-
};
|
|
76
|
-
const sortFns = {
|
|
77
|
-
'Status > Last Updated': statusAndDateSort,
|
|
78
|
-
'Query Hash': queryHashSort,
|
|
79
|
-
'Last Updated': dateSort
|
|
80
|
-
};
|
|
81
|
-
const minPanelSize = 70;
|
|
82
|
-
const defaultPanelSize = 500;
|
|
83
|
-
const sides = {
|
|
84
|
-
top: 'bottom',
|
|
85
|
-
bottom: 'top',
|
|
86
|
-
left: 'right',
|
|
87
|
-
right: 'left'
|
|
88
|
-
};
|
|
89
|
-
/**
|
|
90
|
-
* Check if the given side is vertical (left/right)
|
|
91
|
-
*/
|
|
92
|
-
function isVerticalSide(side) {
|
|
93
|
-
return ['left', 'right'].includes(side);
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
|
|
97
|
-
*/
|
|
98
|
-
function getOppositeSide(side) {
|
|
99
|
-
return sides[side];
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Given as css prop it will return a sided css prop based on a given side
|
|
103
|
-
* Example given `border` and `right` it return `borderRight`
|
|
104
|
-
*/
|
|
105
|
-
function getSidedProp(prop, side) {
|
|
106
|
-
return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
|
|
107
|
-
}
|
|
108
|
-
function getSidePanelStyle({
|
|
109
|
-
position = 'bottom',
|
|
110
|
-
height,
|
|
111
|
-
width,
|
|
112
|
-
devtoolsTheme,
|
|
113
|
-
isOpen,
|
|
114
|
-
isResizing,
|
|
115
|
-
panelStyle
|
|
116
|
-
}) {
|
|
117
|
-
const oppositeSide = getOppositeSide(position);
|
|
118
|
-
const borderSide = getSidedProp('border', oppositeSide);
|
|
119
|
-
const isVertical = isVerticalSide(position);
|
|
120
|
-
return {
|
|
121
|
-
...panelStyle,
|
|
122
|
-
direction: 'ltr',
|
|
123
|
-
position: 'fixed',
|
|
124
|
-
[position]: 0,
|
|
125
|
-
[borderSide]: `1px solid ${devtoolsTheme.gray}`,
|
|
126
|
-
transformOrigin: oppositeSide,
|
|
127
|
-
boxShadow: '0 0 20px rgba(0,0,0,.3)',
|
|
128
|
-
zIndex: 99999,
|
|
129
|
-
// visibility will be toggled after transitions, but set initial state here
|
|
130
|
-
visibility: isOpen ? 'visible' : 'hidden',
|
|
131
|
-
...(isResizing ? {
|
|
132
|
-
transition: `none`
|
|
133
|
-
} : {
|
|
134
|
-
transition: `all .2s ease`
|
|
135
|
-
}),
|
|
136
|
-
...(isOpen ? {
|
|
137
|
-
opacity: 1,
|
|
138
|
-
pointerEvents: 'all',
|
|
139
|
-
transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
|
|
140
|
-
} : {
|
|
141
|
-
opacity: 0,
|
|
142
|
-
pointerEvents: 'none',
|
|
143
|
-
transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
|
|
144
|
-
}),
|
|
145
|
-
...(isVertical ? {
|
|
146
|
-
top: 0,
|
|
147
|
-
height: '100vh',
|
|
148
|
-
maxWidth: '90%',
|
|
149
|
-
width: typeof width === 'number' && width >= minPanelSize ? width : defaultPanelSize
|
|
150
|
-
} : {
|
|
151
|
-
left: 0,
|
|
152
|
-
width: '100%',
|
|
153
|
-
maxHeight: '90%',
|
|
154
|
-
height: typeof height === 'number' && height >= minPanelSize ? height : defaultPanelSize
|
|
155
|
-
})
|
|
156
|
-
};
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* Get resize handle style based on a given side
|
|
161
|
-
*/
|
|
162
|
-
function getResizeHandleStyle(position = 'bottom') {
|
|
163
|
-
const isVertical = isVerticalSide(position);
|
|
164
|
-
const oppositeSide = getOppositeSide(position);
|
|
165
|
-
const marginSide = getSidedProp('margin', oppositeSide);
|
|
166
|
-
return {
|
|
167
|
-
position: 'absolute',
|
|
168
|
-
cursor: isVertical ? 'col-resize' : 'row-resize',
|
|
169
|
-
zIndex: 100000,
|
|
170
|
-
[oppositeSide]: 0,
|
|
171
|
-
[marginSide]: `-4px`,
|
|
172
|
-
...(isVertical ? {
|
|
173
|
-
top: 0,
|
|
174
|
-
height: '100%',
|
|
175
|
-
width: '4px'
|
|
176
|
-
} : {
|
|
177
|
-
width: '100%',
|
|
178
|
-
height: '4px'
|
|
179
|
-
})
|
|
180
|
-
};
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
export { defaultPanelSize, displayValue, getOppositeSide, getQueryStatusColor, getQueryStatusLabel, getResizeHandleStyle, getSidePanelStyle, getSidedProp, isVerticalSide, minPanelSize, sides, sortFns, styled, useIsMounted };
|
|
184
|
-
//# sourceMappingURL=utils.esm.js.map
|