@uiw/react-json-view 2.0.0-alpha.3 → 2.0.0-alpha.31

package/esm/types/index.js

@@ -13,16 +13,27 @@ var _excluded = ["as", "render"],
   _excluded11 = ["as", "render"],
   _excluded12 = ["as", "render"],
   _excluded13 = ["as", "render"];
-import { Fragment, useState } from 'react';
-import { useTypesStore } from '../store/Types';
+import { Fragment, useEffect, useState } from 'react';
 import { useStore } from '../store';
+import { useTypesStore } from '../store/Types';
 import { ValueQuote } from '../symbol';
-import { Copied } from '../comps/Copied';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var bigIntToString = bi => {
+  if (bi === undefined) {
+    return '0n';
+  } else if (typeof bi === 'string') {
+    try {
+      bi = BigInt(bi);
+    } catch (e) {
+      return '0n';
+    }
+  }
+  return bi ? bi.toString() + 'n' : '0n';
+};
 export var SetComp = _ref => {
   var {
-    value
+    value,
+    keyName
   } = _ref;
   var {
     Set: Comp = {},
@@ -38,7 +49,8 @@ export var SetComp = _ref => {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value
+    value,
+    keyName
   });
   if (type) return type;
   var Elm = as || 'span';
@@ -47,7 +59,8 @@ export var SetComp = _ref => {
 SetComp.displayName = 'JVR.SetComp';
 export var MapComp = _ref2 => {
   var {
-    value
+    value,
+    keyName
   } = _ref2;
   var {
     Map: Comp = {},
@@ -63,7 +76,8 @@ export var MapComp = _ref2 => {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value
+    value,
+    keyName
   });
   if (type) return type;
   var Elm = as || 'span';
@@ -77,7 +91,6 @@ var defalutStyle = {
 export var TypeString = _ref3 => {
   var {
     children = '',
-    expandKey,
     keyName
   } = _ref3;
   var {
@@ -85,7 +98,8 @@ export var TypeString = _ref3 => {
     displayDataTypes
   } = useTypesStore();
   var {
-    shortenTextAfterLength: length = 20
+    shortenTextAfterLength: length = 30,
+    stringEllipsis = '...'
   } = useStore();
   var {
       as,
@@ -93,7 +107,8 @@ export var TypeString = _ref3 => {
     } = Str,
     reset = _objectWithoutPropertiesLoose(Str, _excluded3);
   var childrenStr = children;
-  var [shorten, setShorten] = useState(length && childrenStr.length >= length);
+  var [shorten, setShorten] = useState(length && childrenStr.length > length);
+  useEffect(() => setShorten(length && childrenStr.length > length), [length]);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Str.style || {});
   if (length > 0) {
@@ -106,33 +121,32 @@ export var TypeString = _ref3 => {
       };
     }
   }
-  var text = shorten ? childrenStr.slice(0, length) + "..." : childrenStr;
+  var text = shorten ? "" + childrenStr.slice(0, length) + stringEllipsis : childrenStr;
   var isRender = render && typeof render === 'function';
   var type = isRender && render(_extends({}, reset, {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
+  var cls = shorten ? 'w-rjv-value w-rjv-value-short' : 'w-rjv-value';
   var child = isRender && render(_extends({}, reset, {
     children: text,
-    className: 'w-rjv-value'
+    className: cls
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
     }))), child || /*#__PURE__*/_jsxs(Fragment, {
       children: [/*#__PURE__*/_jsx(ValueQuote, {}), /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
-        className: "w-rjv-value",
+        className: cls,
         children: text
       })), /*#__PURE__*/_jsx(ValueQuote, {})]
-    }), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
     })]
   });
 };
@@ -140,7 +154,6 @@ TypeString.displayName = 'JVR.TypeString';
 export var TypeTrue = _ref4 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref4;
   var {
@@ -159,14 +172,16 @@ export var TypeTrue = _ref4 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -174,18 +189,13 @@ export var TypeTrue = _ref4 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeTrue.displayName = 'JVR.TypeTrue';
 export var TypeFalse = _ref5 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref5;
   var {
@@ -204,14 +214,16 @@ export var TypeFalse = _ref5 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -219,18 +231,13 @@ export var TypeFalse = _ref5 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeFalse.displayName = 'JVR.TypeFalse';
 export var TypeFloat = _ref6 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref6;
   var {
@@ -249,14 +256,16 @@ export var TypeFloat = _ref6 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -264,18 +273,13 @@ export var TypeFloat = _ref6 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeFloat.displayName = 'JVR.TypeFloat';
 export var TypeInt = _ref7 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref7;
   var {
@@ -294,14 +298,16 @@ export var TypeInt = _ref7 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -309,18 +315,13 @@ export var TypeInt = _ref7 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeInt.displayName = 'JVR.TypeInt';
 export var TypeBigint = _ref8 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref8;
   var {
@@ -339,33 +340,30 @@ export var TypeBigint = _ref8 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
-      children: (children == null ? void 0 : children.toString()) + 'n'
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+      children: bigIntToString(children == null ? void 0 : children.toString())
+    }))]
   });
 };
 TypeBigint.displayName = 'JVR.TypeFloat';
 export var TypeUrl = _ref9 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref9;
   var {
@@ -384,14 +382,16 @@ export var TypeUrl = _ref9 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children: children == null ? void 0 : children.href,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -402,18 +402,13 @@ export var TypeUrl = _ref9 => {
     }, reset, {
       className: "w-rjv-value",
       children: [/*#__PURE__*/_jsx(ValueQuote, {}), children == null ? void 0 : children.href, /*#__PURE__*/_jsx(ValueQuote, {})]
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeUrl.displayName = 'JVR.TypeUrl';
 export var TypeDate = _ref10 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref10;
   var {
@@ -432,15 +427,17 @@ export var TypeDate = _ref10 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
-  var childStr = children == null ? void 0 : children.toString();
+  var childStr = children instanceof Date ? children.toLocaleString() : children;
   var child = isRender && render(_extends({}, reset, {
     children: childStr,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -448,18 +445,13 @@ export var TypeDate = _ref10 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: childStr
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeDate.displayName = 'JVR.TypeDate';
 export var TypeUndefined = _ref11 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref11;
   var {
@@ -478,30 +470,27 @@ export var TypeUndefined = _ref11 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
-    }))), child, /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))), child]
   });
 };
 TypeUndefined.displayName = 'JVR.TypeUndefined';
 export var TypeNull = _ref12 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref12;
   var {
@@ -520,30 +509,27 @@ export var TypeNull = _ref12 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
-    }))), child, /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))), child]
   });
 };
 TypeNull.displayName = 'JVR.TypeNull';
 export var TypeNan = _ref13 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref13;
   var {
@@ -562,23 +548,21 @@ export var TypeNan = _ref13 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children: children == null ? void 0 : children.toString(),
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
-    }))), child, /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))), child]
   });
 };
 TypeNan.displayName = 'JVR.TypeNan';

package/esm/utils/useHighlight.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function usePrevious<T>(value: T): T | undefined;
 interface UseHighlight {
     value: any;

package/esm/utils/useRender.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType, type TypesElement } from '../store/Types';
 import { type SectionElement } from '../store/Section';
-export declare function useSymbolsRender(currentProps: SymbolsElement<TagType>, props: SymbolsElement<TagType>, key: string): void;
+export declare function useSymbolsRender<K extends TagType>(currentProps: SymbolsElement<TagType>, props: SymbolsElement<K>, key: string): void;
 export declare function useTypesRender<K extends TagType>(currentProps: TypesElement<TagType>, props: TypesElement<K>, key: string): void;
 export declare function useSectionRender<K extends TagType>(currentProps: SectionElement<TagType>, props: SectionElement<K>, key: string): void;

package/githubDark.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/githubDark' {
+  export const githubDarkTheme: import('react').CSSProperties;
+}

package/githubLight.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/githubLight' {
+  export const githubLightTheme: import('react').CSSProperties;
+}

package/gruvbox.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/gruvbox' {
+  export const gruvboxTheme: import('react').CSSProperties;
+}

package/monokai.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/monokai' {
+  export const monokaiTheme: import('react').CSSProperties;
+}

package/nord.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/nord' {
+  export const nordTheme: import('react').CSSProperties;
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.31",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "homepage": "https://uiwjs.github.io/react-json-view",
+  "funding": "https://jaywcjlove.github.io/#/sponsor",
   "exports": {
     "./README.md": "./README.md",
     ".": {
@@ -85,11 +86,18 @@
     "react-dom": ">=18.0.0"
   },
   "files": [
-    "editor.d.ts",
+    "basic.d.ts",
     "dark.d.ts",
+    "editor.d.ts",
+    "githubDark.d.ts",
+    "githubLight.d.ts",
+    "gruvbox.d.ts",
     "light.d.ts",
+    "monokai.d.ts",
+    "nord.d.ts",
     "triangle-arrow.d.ts",
     "triangle-solid-arrow.d.ts",
+    "vscode.d.ts",
     "cjs",
     "esm"
   ],
@@ -114,10 +122,8 @@
     "tree-view",
     "treeview"
   ],
-  "dependencies": {
-    "@babel/runtime": "^7.22.6"
-  },
   "devDependencies": {
+    "@babel/runtime": "^7.22.6",
     "@testing-library/react": "^14.0.0",
     "@types/react-test-renderer": "^18.0.0",
     "react": "^18.2.0",

package/vscode.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/vscode' {
+  export const vscodeTheme: import('react').CSSProperties;
+}