@redux-devtools/rtk-query-monitor/lib/esm/styles/tree.js

rtk-query monitor for Redux DevTools

import React from 'react';
import { isCollection, isIndexed, isKeyed } from 'immutable';
import isIterable from '../utils/isIterable';
import { DATA_TYPE_KEY } from '../monitor-config';
import { jsx as ___EmotionJSX } from "@emotion/react";
const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
function isImmutable(value) {
  return isKeyed(value) || isIndexed(value) || isCollection(value);
}
function getShortTypeString(val, diff) {
  if (diff && Array.isArray(val)) {
    val = val[val.length === 2 ? 1 : 0];
  }
  if (isIterable(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;
  }
}
export const getItemString = (type, data) => ___EmotionJSX("span", null, data[IS_IMMUTABLE_KEY] ? 'Immutable' : '', DATA_TYPE_KEY && data[DATA_TYPE_KEY] ? `${data[DATA_TYPE_KEY]} ` : '', getText(type, data, false, undefined));
export const labelRenderer = (_ref, nodeType, expanded) => {
  let [key] = _ref;
  return ___EmotionJSX("span", null, ___EmotionJSX("span", {
    css: theme => ({
      color: theme.TEXT_PLACEHOLDER_COLOR
    })
  }, key), !expanded && ': ');
};