redash/client/app/components/json-view-interactive/JsonViewInteractive.jsx

/* eslint-disable react/prop-types */

import { isFinite, isString, isArray, isObject, keys, map } from 'lodash';
import React, { useState } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';

import './json-view-interactive.less';

function JsonBlock({ value, children, openingBrace, closingBrace, withKeys }) {
  const [isExpanded, setIsExpanded] = useState(false);

  const objectKeys = keys(value);
  const count = objectKeys.length;

  return (
    <React.Fragment>
      {(count > 0) && (
        <span className="jvi-toggle" onClick={() => setIsExpanded(!isExpanded)}>
          <i className={cx('fa', { 'fa-caret-right': !isExpanded, 'fa-caret-down': isExpanded })} />
        </span>
      )}
      <span className="jvi-punctuation jvi-braces">{openingBrace}</span>
      {!isExpanded && (count > 0) && (
        <span className="jvi-punctuation jvi-ellipsis" onClick={() => setIsExpanded(true)}>&hellip;</span>
      )}
      {isExpanded && (
        <span className="jvi-block">
          {map(objectKeys, (key, index) => {
            const isFirst = index === 0;
            const isLast = index === count - 1;
            const comma = isLast ? null : <span className="jvi-punctuation jvi-comma">,</span>;
            return (
              <span
                key={'item-' + key}
                className={cx('jvi-item', { 'jvi-nested-first': isFirst, 'jvi-nested-last': isLast })}
              >
                {withKeys && (
                  <span className="jvi-object-key">
                    <JsonValue value={key}>
                      <span className="jvi-punctuation">: </span>
                    </JsonValue>
                  </span>
                )}
                <JsonValue value={value[key]}>{comma}</JsonValue>
              </span>
            );
          })}
        </span>
      )}
      <span className="jvi-punctuation jvi-braces">{closingBrace}</span>
      {children}
      {!isExpanded && (
        <span className="jvi-comment">{' // ' + count + ' ' + (count === 1 ? 'item' : 'items')}</span>
      )}
    </React.Fragment>
  );
}

function JsonValue({ value, children }) {
  if ((value === null) || (value === false) || (value === true) || isFinite(value)) {
    return (
      <span className="jvi-value jvi-primitive">
        {'' + value}
        {children}
      </span>
    );
  }
  if (isString(value)) {
    return (
      <React.Fragment>
        <span className="jvi-punctuation jvi-string">&quot;</span>
        <span className="jvi-value jvi-string">{value}</span>
        <span className="jvi-punctuation jvi-string">&quot;</span>
        {children}
      </React.Fragment>
    );
  }
  if (isArray(value)) {
    return <JsonBlock value={value} openingBrace="[" closingBrace="]">{children}</JsonBlock>;
  }
  if (isObject(value)) {
    return <JsonBlock value={value} openingBrace="{" closingBrace="}" withKeys>{children}</JsonBlock>;
  }
  return null;
}

export default function JsonViewInteractive({ value }) {
  return (
    <span className="jvi-item jvi-root">
      <JsonValue value={value} />
    </span>
  );
}

JsonViewInteractive.propTypes = {
  value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
};

JsonViewInteractive.defaultProps = {
  // `null` will be rendered as "null" because it is a valid JSON value, so use `undefined` for no value
  value: undefined,
};