@uiw/react-json-view 1.12.0 → 2.0.0-alpha.0

package/esm/node.js

@@ -1,299 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "isSet", "isMap", "onCopied", "onExpand", "parentValue", "setParentValue"];
-import { Fragment, useId, cloneElement, useState, useEffect, forwardRef } from 'react';
-import { ValueView, Type, Colon, Label, Line, typeMap } from './value';
-import { TriangleArrow } from './arrow/TriangleArrow';
-import { useExpandsStatus, store } from './store';
-import { Semicolon } from './semicolon';
-import { Copied } from './copied';
-import { Ellipsis } from './comps/ellipsis';
-import { Meta } from './comps/meta';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-function getLength(obj) {
-  try {
-    return Object.keys(obj).length;
-  } catch (error) {
-    return -1;
-  }
-}
-export var CountInfo = _ref => {
-  var {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsxs(Label, {
-    style: {
-      paddingLeft: 4,
-      fontStyle: 'italic'
-    },
-    color: "var(--w-rjv-info-color, #0000004d)",
-    className: "w-rjv-object-size",
-    children: [children, " items"]
-  });
-};
-CountInfo.displayName = 'JVR.CountInfo';
-export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
-  var _expands$keyid;
-  var {
-      value = {},
-      keyName,
-      className,
-      displayDataTypes = true,
-      components = {},
-      displayObjectSize = true,
-      enableClipboard = true,
-      highlightUpdates = true,
-      objectSortKeys = false,
-      indentWidth = 15,
-      shortenTextAfterLength = 20,
-      collapsed,
-      level = 1,
-      keyid = 'root',
-      quotes = '"',
-      namespace = [],
-      isSet = false,
-      isMap = false,
-      onCopied,
-      onExpand,
-      parentValue,
-      setParentValue
-    } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded);
-  var isArray = Array.isArray(value);
-  var subkeyid = useId();
-  var expands = useExpandsStatus();
-  var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
-  var handle = () => {
-    onExpand && typeof onExpand === 'function' && onExpand({
-      expand: !expand,
-      keyid,
-      keyName,
-      value: value
-    });
-    !expand ? store.expand(keyid) : store.collapse(keyid);
-  };
-  var [valueData, setValueData] = useState(value);
-  var subNodeProps = {
-    components,
-    indentWidth,
-    displayDataTypes,
-    displayObjectSize,
-    enableClipboard,
-    highlightUpdates,
-    onCopied,
-    onExpand,
-    collapsed,
-    parentValue: value,
-    setParentValue: setValueData,
-    quotes,
-    level: level + 1,
-    style: {
-      paddingLeft: indentWidth
-    }
-  };
-  var valueViewProps = {
-    displayDataTypes,
-    displayObjectSize,
-    enableClipboard,
-    shortenTextAfterLength,
-    level: level + 1,
-    parentValue: value,
-    indentWidth,
-    data: valueData,
-    quotes,
-    setValue: setValueData
-  };
-  var arrowStyle = {
-    transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
-    transition: 'all 0.3s'
-  };
-  var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
-    style: arrowStyle,
-    'data-expand': expand,
-    className: 'w-rjv-arrow'
-  }) : /*#__PURE__*/_jsx(TriangleArrow, {
-    style: arrowStyle,
-    className: "w-rjv-arrow"
-  });
-  var [showTools, setShowTools] = useState(false);
-  var eventProps = {};
-  if (enableClipboard) {
-    eventProps.onMouseEnter = () => setShowTools(true);
-    eventProps.onMouseLeave = () => setShowTools(false);
-  }
-  useEffect(() => setValueData(value), [value]);
-  var nameKeys = isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData);
-
-  // object
-  var entries = isArray ? Object.entries(valueData).map(m => [Number(m[0]), m[1]]) : Object.entries(valueData);
-  if (objectSortKeys) {
-    entries = objectSortKeys === true ? entries.sort((_ref2, _ref3) => {
-      var [a] = _ref2;
-      var [b] = _ref3;
-      return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
-    }) : entries.sort((_ref4, _ref5) => {
-      var [a] = _ref4;
-      var [b] = _ref5;
-      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
-    });
-  }
-  var countInfo = /*#__PURE__*/_jsx(CountInfo, {
-    children: nameKeys.length
-  });
-  if (components.countInfo) {
-    countInfo = components.countInfo({
-      count: nameKeys.length,
-      level,
-      visible: expand
-    }) || countInfo;
-  }
-  if (!displayObjectSize) countInfo = null;
-  var countInfoExtra = components.countInfoExtra && components.countInfoExtra({
-    count: nameKeys.length,
-    level,
-    showTools,
-    keyName,
-    visible: expand,
-    value: valueData,
-    namespace: [...namespace],
-    parentValue,
-    setParentValue,
-    setValue: setValueData
-  });
-  return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref
-  }, reset, {
-    className: className + " w-rjv-inner"
-  }, eventProps, {
-    children: [/*#__PURE__*/_jsxs(Line, {
-      style: {
-        display: 'inline-flex',
-        alignItems: 'center'
-      },
-      onClick: handle,
-      children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/_jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx(Semicolon, {
-          value: valueData,
-          quotes: quotes,
-          "data-keys": keyid,
-          namespace: [...namespace],
-          render: components.objectKey,
-          keyName: keyName,
-          parentName: keyName,
-          color: typeof keyName === 'number' ? typeMap['number'].color : ''
-        }), /*#__PURE__*/_jsx(Colon, {})]
-      }), isSet && /*#__PURE__*/_jsx(Type, {
-        type: "Set"
-      }), isMap && /*#__PURE__*/_jsx(Type, {
-        type: "Map"
-      }), /*#__PURE__*/_jsx(Meta, {
-        start: true,
-        isArray: isArray,
-        level: level,
-        render: components.braces
-      }), !expand && /*#__PURE__*/_jsx(Ellipsis, {
-        render: components.ellipsis,
-        count: nameKeys.length,
-        level: level
-      }), !expand && /*#__PURE__*/_jsx(Meta, {
-        isArray: isArray,
-        level: level,
-        render: components.braces
-      }), countInfo, countInfoExtra, enableClipboard && /*#__PURE__*/_jsx(Copied, {
-        show: showTools,
-        text: valueData,
-        onCopied: onCopied,
-        render: components == null ? void 0 : components.copied
-      })]
-    }), expand && /*#__PURE__*/_jsx(Line, {
-      className: "w-rjv-content",
-      style: {
-        borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
-        marginLeft: 6
-      },
-      children: entries.length > 0 && [...entries].map((_ref6, idx) => {
-        var [key, itemVal] = _ref6;
-        var item = itemVal;
-        var isMySet = item instanceof Set;
-        var isMyMap = item instanceof Map;
-        var myValue = isMySet ? Array.from(item) : isMyMap ? Object.fromEntries(item) : item;
-        var isEmpty = Array.isArray(myValue) && myValue.length === 0 || typeof myValue === 'object' && myValue && !(myValue instanceof Date) && Object.keys(myValue).length === 0;
-        if ((Array.isArray(myValue) || isMySet || isMyMap) && !isEmpty) {
-          var label = isArray ? idx : key;
-          return /*#__PURE__*/_jsx(Line, {
-            className: "w-rjv-wrap",
-            children: /*#__PURE__*/_jsx(RootNode, _extends({
-              value: myValue,
-              isSet: isMySet,
-              isMap: isMyMap,
-              namespace: [...namespace, label],
-              keyName: label,
-              keyid: keyid + subkeyid + label
-            }, subNodeProps))
-          }, label + idx);
-        }
-        if (typeof myValue === 'object' && myValue && !(myValue instanceof Date) && !isEmpty) {
-          return /*#__PURE__*/_jsx(Line, {
-            className: "w-rjv-wrap",
-            children: /*#__PURE__*/_jsx(RootNode, _extends({
-              value: myValue,
-              namespace: [...namespace, key],
-              keyName: key,
-              keyid: keyid + subkeyid + key
-            }, subNodeProps))
-          }, key + '' + idx);
-        }
-        if (typeof myValue === 'function') {
-          return;
-        }
-        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
-          value: myValue,
-          "data-keys": keyid,
-          quotes: quotes,
-          namespace: [...namespace, key],
-          parentName: keyName,
-          highlightUpdates: highlightUpdates,
-          render: components.objectKey,
-          color: typeof key === 'number' ? typeMap['number'].color : '',
-          keyName: key
-        });
-        var length = Array.isArray(myValue) ? myValue.length : getLength(myValue);
-        countInfo = /*#__PURE__*/_jsx(CountInfo, {
-          children: length
-        });
-        if (components.countInfo) {
-          countInfo = components.countInfo({
-            count: length,
-            level,
-            visible: expand
-          }) || countInfo;
-        }
-        return /*#__PURE__*/_jsx(ValueView, _extends({
-          components: components,
-          namespace: [...namespace, key]
-        }, valueViewProps, {
-          countInfo: countInfo,
-          renderKey: renderKey,
-          keyName: key,
-          isSet: isSet,
-          value: myValue
-        }), idx);
-      })
-    }), expand && /*#__PURE__*/_jsx(Line, {
-      style: {
-        paddingLeft: 2
-      },
-      children: /*#__PURE__*/_jsx(Meta, {
-        render: components.braces,
-        isArray: isArray,
-        level: level,
-        style: {
-          paddingLeft: 2,
-          display: 'inline-block'
-        }
-      })
-    })]
-  }));
-});
-RootNode.displayName = 'JVR.RootNode';

package/esm/semicolon.d.ts

@@ -1,22 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-import type { LabelProps } from './value';
-import type { JsonViewProps } from './';
-export declare function usePrevious<T>(value: T): T | undefined;
-interface UseHighlight {
-    value: any;
-    highlightUpdates?: boolean;
-    highlightContainer: React.MutableRefObject<HTMLSpanElement | null>;
-}
-export declare function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight): void;
-export interface SemicolonProps extends LabelProps {
-    highlightUpdates?: boolean;
-    keyName?: string | number;
-    parentName?: string | number;
-    quotes?: JsonViewProps<object>['quotes'];
-    value?: object;
-    label?: string;
-    namespace?: Array<string | number>;
-    render?: (props: SemicolonProps) => React.ReactNode;
-}
-export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
-export {};

package/esm/value.d.ts

@@ -1,93 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-import type { JsonViewProps } from './';
-export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
-export declare const isFloat: (n: number) => boolean;
-export declare const typeMap: {
-    string: {
-        color: string;
-        label: string;
-    };
-    number: {
-        color: string;
-        label: string;
-    };
-    float: {
-        color: string;
-        label: string;
-    };
-    bigint: {
-        color: string;
-        label: string;
-    };
-    boolean: {
-        color: string;
-        label: string;
-    };
-    date: {
-        color: string;
-        label: string;
-    };
-    url: {
-        color: string;
-        label: string;
-    };
-    null: {
-        color: string;
-        label: string;
-    };
-    Set: {
-        color: string;
-        label: string;
-    };
-    Map: {
-        color: string;
-        label: string;
-    };
-    NaN: {
-        color: string;
-        label: string;
-    };
-    undefined: {
-        color: string;
-        label: string;
-    };
-};
-export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
-export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-    keyName?: string | number;
-    value?: unknown;
-    parentValue?: T;
-    data?: T;
-    displayDataTypes: boolean;
-    displayObjectSize: boolean;
-    enableClipboard: boolean;
-    isSet: boolean;
-    indentWidth: number;
-    level?: number;
-    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
-    namespace?: Array<string | number>;
-    quotes?: JsonViewProps<T>['quotes'];
-    components?: JsonViewProps<T>['components'];
-    renderKey?: JSX.Element;
-    countInfo?: JSX.Element;
-    setValue?: React.Dispatch<React.SetStateAction<T>>;
-}
-export declare function getValueString<T>(value: T): {
-    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "Set" | "Map" | "NaN";
-    content: string;
-};
-export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ValueView {
-    var displayName: string;
-}
-export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-    color?: string;
-    fontSize?: number;
-    opacity?: number;
-    paddingRight?: number;
-}
-export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
-export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-    type: keyof typeof typeMap;
-}
-export declare const Type: FC<PropsWithChildren<TypeProps>>;