@redux-devtools/rtk-query-monitor
Version:
rtk-query monitor for Redux DevTools
65 lines (64 loc) • 2.64 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.labelRenderer = exports.getItemString = void 0;
var _react = _interopRequireDefault(require("react"));
var _immutable = require("immutable");
var _isIterable = _interopRequireDefault(require("../utils/isIterable"));
var _monitorConfig = require("../monitor-config");
var _react2 = require("@emotion/react");
const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
function isImmutable(value) {
return (0, _immutable.isKeyed)(value) || (0, _immutable.isIndexed)(value) || (0, _immutable.isCollection)(value);
}
function getShortTypeString(val, diff) {
if (diff && Array.isArray(val)) {
val = val[val.length === 2 ? 1 : 0];
}
if ((0, _isIterable.default)(val) && !isImmutable(val)) {
return '(…)';
} else if (Array.isArray(val)) {
return val.length > 0 ? '[…]' : '[]';
} else if (val === null) {
return 'null';
} else if (val === undefined) {
return 'undef';
} else if (typeof val === 'object') {
return Object.keys(val).length > 0 ? '{…}' : '{}';
} else if (typeof val === 'function') {
return 'fn';
} else if (typeof val === 'string') {
return `"${val.substr(0, 10) + (val.length > 10 ? '…' : '')}"`;
} else if (typeof val === 'symbol') {
return 'symbol';
} else {
return val;
}
}
function getText(type, data, previewContent, isDiff) {
if (type === 'Object') {
const keys = Object.keys(data);
if (!previewContent) return keys.length ? '{…}' : '{}';
const str = keys.slice(0, 3).map(key => `${key}: ${getShortTypeString(data[key], isDiff)}`).concat(keys.length > 3 ? ['…'] : []).join(', ');
return `{ ${str} }`;
} else if (type === 'Array') {
if (!previewContent) return data.length ? '[…]' : '[]';
const str = data.slice(0, 4).map(val => getShortTypeString(val, isDiff)).concat(data.length > 4 ? ['…'] : []).join(', ');
return `[${str}]`;
} else {
return type;
}
}
const getItemString = (type, data) => (0, _react2.jsx)("span", null, data[IS_IMMUTABLE_KEY] ? 'Immutable' : '', _monitorConfig.DATA_TYPE_KEY && data[_monitorConfig.DATA_TYPE_KEY] ? `${data[_monitorConfig.DATA_TYPE_KEY]} ` : '', getText(type, data, false, undefined));
exports.getItemString = getItemString;
const labelRenderer = (_ref, nodeType, expanded) => {
let [key] = _ref;
return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
css: theme => ({
color: theme.TEXT_PLACEHOLDER_COLOR
})
}, key), !expanded && ': ');
};
exports.labelRenderer = labelRenderer;