@uiw/react-json-view
Version:
JSON viewer for react.
194 lines (193 loc) • 7.78 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KeyValuesItem = exports.KeyValues = exports.KayName = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _store = require("../store");
var _Expands = require("../store/Expands");
var _ShowTools = require("../store/ShowTools");
var _Value = require("./Value");
var _KeyName = require("../section/KeyName");
var _Row = require("../section/Row");
var _Container = require("../Container");
var _symbol = require("../symbol/");
var _useHighlight = require("../utils/useHighlight");
var _Copied = require("../comps/Copied");
var _useIdCompat = require("../comps/useIdCompat");
var _jsxRuntime = require("react/jsx-runtime");
var KeyValues = exports.KeyValues = function KeyValues(props) {
var _expands$expandKey;
var value = props.value,
_props$expandKey = props.expandKey,
expandKey = _props$expandKey === void 0 ? '' : _props$expandKey,
level = props.level,
_props$keys = props.keys,
keys = _props$keys === void 0 ? [] : _props$keys;
var expands = (0, _Expands.useExpandsStore)();
var _useStore = (0, _store.useStore)(),
objectSortKeys = _useStore.objectSortKeys,
indentWidth = _useStore.indentWidth,
collapsed = _useStore.collapsed,
shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
var isMyArray = Array.isArray(value);
var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, {
value: value,
keys: keys,
level: level
});
if (expands[expandKey] === undefined && shouldExpandNodeInitially && !shouldExpand) {
return null;
}
if (isExpanded) {
return null;
}
// object
var entries = isMyArray ? Object.entries(value).map(function (m) {
return [Number(m[0]), m[1]];
}) : Object.entries(value);
if (objectSortKeys) {
entries = objectSortKeys === true ? entries.sort(function (_ref, _ref2) {
var _ref3 = (0, _slicedToArray2["default"])(_ref, 1),
a = _ref3[0];
var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
b = _ref4[0];
return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
}) : entries.sort(function (_ref5, _ref6) {
var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
a = _ref7[0],
valA = _ref7[1];
var _ref8 = (0, _slicedToArray2["default"])(_ref6, 2),
b = _ref8[0],
valB = _ref8[1];
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__*/(0, _jsxRuntime.jsx)("div", {
className: "w-rjv-wrap",
style: style,
children: entries.map(function (_ref9, idx) {
var _ref0 = (0, _slicedToArray2["default"])(_ref9, 2),
key = _ref0[0],
val = _ref0[1];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyValuesItem, {
parentValue: value,
keyName: key,
keys: [].concat((0, _toConsumableArray2["default"])(keys), [key]),
value: val,
level: level
}, idx);
})
});
};
KeyValues.displayName = 'JVR.KeyValues';
var KayName = exports.KayName = function KayName(props) {
var keyName = props.keyName,
parentValue = props.parentValue,
keys = props.keys,
value = props.value;
var _useStore2 = (0, _store.useStore)(),
highlightUpdates = _useStore2.highlightUpdates;
var isNumber = typeof keyName === 'number';
var highlightContainer = (0, _react.useRef)(null);
(0, _useHighlight.useHighlight)({
value: value,
highlightUpdates: highlightUpdates,
highlightContainer: highlightContainer
});
var compProps = {
keyName: keyName,
value: value,
keys: keys,
parentValue: parentValue
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
ref: highlightContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
isNumber: isNumber,
"data-placement": "left"
}, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, compProps), {}, {
children: keyName
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
isNumber: isNumber,
"data-placement": "right"
}, compProps))]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, (0, _objectSpread2["default"])({}, compProps))]
});
};
KayName.displayName = 'JVR.KayName';
var KeyValuesItem = exports.KeyValuesItem = function KeyValuesItem(props) {
var keyName = props.keyName,
value = props.value,
parentValue = props.parentValue,
_props$level = props.level,
level = _props$level === void 0 ? 0 : _props$level,
_props$keys2 = props.keys,
keys = _props$keys2 === void 0 ? [] : _props$keys2;
var dispatch = (0, _ShowTools.useShowToolsDispatch)();
var subkeyid = (0, _useIdCompat.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 && (0, _typeof2["default"])(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__*/(0, _jsxRuntime.jsx)(_Container.Container, {
keyName: keyName,
value: myValue,
parentValue: parentValue,
initialValue: value,
keys: keys,
level: level + 1
});
}
var reset = {
onMouseEnter: function onMouseEnter() {
return dispatch((0, _defineProperty2["default"])({}, subkeyid, true));
},
onMouseLeave: function onMouseLeave() {
return dispatch((0, _defineProperty2["default"])({}, subkeyid, false));
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Row.RowComp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
className: "w-rjv-line",
value: value,
keyName: keyName,
keys: keys,
parentValue: parentValue
}, reset), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(KayName, {
keyName: keyName,
value: value,
keys: keys,
parentValue: parentValue
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Value.Value, {
keyName: keyName,
value: value
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
keyName: keyName,
value: value,
keys: keys,
parentValue: parentValue,
expandKey: subkeyid
})]
}));
};
KeyValuesItem.displayName = 'JVR.KeyValuesItem';