@tanstack/react-query-devtools
Version:
216 lines (201 loc) • 6.66 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
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var utils = require('./utils.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 Entry = utils.styled('div', {
fontFamily: 'Menlo, monospace',
fontSize: '1em',
lineHeight: '1.7',
outline: 'none',
wordBreak: 'break-word'
});
const Label = utils.styled('span', {
color: 'white'
});
const LabelButton = utils.styled('button', {
cursor: 'pointer',
color: 'white'
});
const ExpandButton = utils.styled('button', {
cursor: 'pointer',
color: 'inherit',
font: 'inherit',
outline: 'inherit',
background: 'transparent',
border: 'none',
padding: 0
});
const Value = utils.styled('span', (_props, theme) => ({
color: theme.danger
}));
const SubEntries = utils.styled('div', {
marginLeft: '.1em',
paddingLeft: '1em',
borderLeft: '2px solid rgba(0,0,0,.15)'
});
const Info = utils.styled('span', {
color: 'grey',
fontSize: '.7em'
});
const Expander = ({
expanded,
style = {}
}) => /*#__PURE__*/React__namespace.createElement("span", {
style: {
display: 'inline-block',
transition: 'all .1s ease',
transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
...style
}
}, "\u25B6");
/**
* Chunk elements in the array by size
*
* when the array cannot be chunked evenly by size, the last chunk will be
* filled with the remaining elements
*
* @example
* chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
*/
function chunkArray(array, size) {
if (size < 1) return [];
let i = 0;
const result = [];
while (i < array.length) {
result.push(array.slice(i, i + size));
i = i + size;
}
return result;
}
const DefaultRenderer = ({
HandleEntry,
label,
value,
subEntries = [],
subEntryPages = [],
type,
expanded = false,
toggleExpanded,
pageSize
}) => {
const [expandedPages, setExpandedPages] = React__namespace.useState([]);
return /*#__PURE__*/React__namespace.createElement(Entry, {
key: label
}, subEntryPages.length ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ExpandButton, {
onClick: () => toggleExpanded()
}, /*#__PURE__*/React__namespace.createElement(Expander, {
expanded: expanded
}), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(entry => /*#__PURE__*/React__namespace.createElement(HandleEntry, {
key: entry.label,
entry: entry
}))) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
key: index
}, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
}, /*#__PURE__*/React__namespace.createElement(Expander, {
expanded: expanded
}), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, entries.map(entry => /*#__PURE__*/React__namespace.createElement(HandleEntry, {
key: entry.label,
entry: entry
}))) : null)))) : null) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React__namespace.createElement(Value, null, utils.displayValue(value))));
};
function isIterable(x) {
return Symbol.iterator in x;
}
function Explorer({
value,
defaultExpanded,
renderer = DefaultRenderer,
pageSize = 100,
...rest
}) {
const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
let type = typeof value;
let subEntries = [];
const makeProperty = sub => {
const subDefaultExpanded = defaultExpanded === true ? {
[sub.label]: true
} : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
return { ...sub,
defaultExpanded: subDefaultExpanded
};
};
if (Array.isArray(value)) {
type = 'array';
subEntries = value.map((d, i) => makeProperty({
label: i.toString(),
value: d
}));
} else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
type = 'Iterable';
subEntries = Array.from(value, (val, i) => makeProperty({
label: i.toString(),
value: val
}));
} else if (typeof value === 'object' && value !== null) {
type = 'object';
subEntries = Object.entries(value).map(([key, val]) => makeProperty({
label: key,
value: val
}));
}
const subEntryPages = chunkArray(subEntries, pageSize);
return renderer({
HandleEntry: ({
entry
}) => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers["extends"]({
value: value,
renderer: renderer
}, rest, entry)),
type,
subEntries,
subEntryPages,
value,
expanded,
toggleExpanded,
pageSize,
...rest
});
}
exports.DefaultRenderer = DefaultRenderer;
exports.Entry = Entry;
exports.ExpandButton = ExpandButton;
exports.Expander = Expander;
exports.Info = Info;
exports.Label = Label;
exports.LabelButton = LabelButton;
exports.SubEntries = SubEntries;
exports.Value = Value;
exports.chunkArray = chunkArray;
exports["default"] = Explorer;
//# sourceMappingURL=Explorer.js.map