@uiw/react-json-view/esm/comps/KeyValues.js

JSON viewer for react.

import _extends from "@babel/runtime/helpers/extends";
import { Fragment, useRef } from 'react';
import { useStore } from '../store';
import { useExpandsStore } from '../store/Expands';
import { useShowToolsDispatch } from '../store/ShowTools';
import { Value } from './Value';
import { KeyNameComp } from '../section/KeyName';
import { RowComp } from '../section/Row';
import { Container } from '../Container';
import { Quote, Colon } from '../symbol';
import { useHighlight } from '../utils/useHighlight';
import { Copied } from '../comps/Copied';
import { useIdCompat } from '../comps/useIdCompat';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var KeyValues = props => {
  var _expands$expandKey;
  var {
    value,
    expandKey = '',
    level,
    keys = []
  } = props;
  var expands = useExpandsStore();
  var {
    objectSortKeys,
    indentWidth,
    collapsed
  } = useStore();
  var isMyArray = Array.isArray(value);
  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
  if (isExpanded) {
    return null;
  }
  // object
  var entries = isMyArray ? Object.entries(value).map(m => [Number(m[0]), m[1]]) : Object.entries(value);
  if (objectSortKeys) {
    entries = objectSortKeys === true ? entries.sort((_ref, _ref2) => {
      var [a] = _ref;
      var [b] = _ref2;
      return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
    }) : entries.sort((_ref3, _ref4) => {
      var [a, valA] = _ref3;
      var [b, valB] = _ref4;
      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b, valA, valB) : 0;
    });
  }
  var style = {
    borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
    paddingLeft: indentWidth,
    marginLeft: 6
  };
  return /*#__PURE__*/_jsx("div", {
    className: "w-rjv-wrap",
    style: style,
    children: entries.map((_ref5, idx) => {
      var [key, val] = _ref5;
      return /*#__PURE__*/_jsx(KeyValuesItem, {
        parentValue: value,
        keyName: key,
        keys: [...keys, key],
        value: val,
        level: level
      }, idx);
    })
  });
};
KeyValues.displayName = 'JVR.KeyValues';
export var KayName = props => {
  var {
    keyName,
    parentValue,
    keys,
    value
  } = props;
  var {
    highlightUpdates
  } = useStore();
  var isNumber = typeof keyName === 'number';
  var highlightContainer = useRef(null);
  useHighlight({
    value,
    highlightUpdates,
    highlightContainer
  });
  return /*#__PURE__*/_jsxs(Fragment, {
    children: [/*#__PURE__*/_jsxs("span", {
      ref: highlightContainer,
      children: [/*#__PURE__*/_jsx(Quote, {
        isNumber: isNumber,
        "data-placement": "left"
      }), /*#__PURE__*/_jsx(KeyNameComp, {
        keyName: keyName,
        value: value,
        keys: keys,
        parentValue: parentValue,
        children: keyName
      }), /*#__PURE__*/_jsx(Quote, {
        isNumber: isNumber,
        "data-placement": "right"
      })]
    }), /*#__PURE__*/_jsx(Colon, {})]
  });
};
KayName.displayName = 'JVR.KayName';
export var KeyValuesItem = props => {
  var {
    keyName,
    value,
    parentValue,
    level = 0,
    keys = []
  } = props;
  var dispatch = useShowToolsDispatch();
  var subkeyid = useIdCompat();
  var isMyArray = Array.isArray(value);
  var isMySet = value instanceof Set;
  var isMyMap = value instanceof Map;
  var isDate = value instanceof Date;
  var isUrl = value instanceof URL;
  var isMyObject = value && typeof value === 'object' && !isMyArray && !isMySet && !isMyMap && !isDate && !isUrl;
  var isNested = isMyObject || isMyArray || isMySet || isMyMap;
  if (isNested) {
    var myValue = isMySet ? Array.from(value) : isMyMap ? Object.fromEntries(value) : value;
    return /*#__PURE__*/_jsx(Container, {
      keyName: keyName,
      value: myValue,
      parentValue: parentValue,
      initialValue: value,
      keys: keys,
      level: level + 1
    });
  }
  var reset = {
    onMouseEnter: () => dispatch({
      [subkeyid]: true
    }),
    onMouseLeave: () => dispatch({
      [subkeyid]: false
    })
  };
  return /*#__PURE__*/_jsxs(RowComp, _extends({
    className: "w-rjv-line",
    value: value,
    keyName: keyName,
    keys: keys,
    parentValue: parentValue
  }, reset, {
    children: [/*#__PURE__*/_jsx(KayName, {
      keyName: keyName,
      value: value,
      keys: keys,
      parentValue: parentValue
    }), /*#__PURE__*/_jsx(Value, {
      keyName: keyName,
      value: value
    }), /*#__PURE__*/_jsx(Copied, {
      keyName: keyName,
      value: value,
      keys: keys,
      parentValue: parentValue,
      expandKey: subkeyid
    })]
  }));
};
KeyValuesItem.displayName = 'JVR.KeyValuesItem';