@uiw/react-json-view 2.0.0-alpha.4 → 2.0.0-alpha.40

package/esm/types/index.js

@@ -9,20 +9,31 @@ var _excluded = ["as", "render"],
   _excluded7 = ["as", "render"],
   _excluded8 = ["as", "render"],
   _excluded9 = ["as", "render"],
+  _excluded0 = ["as", "render"],
+  _excluded1 = ["as", "render"],
   _excluded10 = ["as", "render"],
-  _excluded11 = ["as", "render"],
-  _excluded12 = ["as", "render"],
-  _excluded13 = ["as", "render"];
-import { Fragment, useState } from 'react';
-import { useTypesStore } from '../store/Types';
-import { useStore } from '../store';
-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";
+  _excluded11 = ["as", "render"];
+import { Fragment, useEffect, useState } from 'react';
+import { useStore } from "../store.js";
+import { useTypesStore } from "../store/Types.js";
+import { ValueQuote } from "../symbol/index.js";
+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,15 +91,16 @@ var defalutStyle = {
 export var TypeString = _ref3 => {
   var {
     children = '',
-    expandKey,
-    keyName
+    keyName,
+    keys
   } = _ref3;
   var {
     Str = {},
     displayDataTypes
   } = useTypesStore();
   var {
-    shortenTextAfterLength: length = 20
+    shortenTextAfterLength: length = 30,
+    stringEllipsis = '...'
   } = useStore();
   var {
       as,
@@ -93,7 +108,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 +122,34 @@ 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,
+    keys
   });
+  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,
+    keys
   });
   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,8 +157,8 @@ TypeString.displayName = 'JVR.TypeString';
 export var TypeTrue = _ref4 => {
   var {
     children,
-    expandKey,
-    keyName
+    keyName,
+    keys
   } = _ref4;
   var {
     True = {},
@@ -159,14 +176,18 @@ export var TypeTrue = _ref4 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -174,19 +195,15 @@ 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
+    keyName,
+    keys
   } = _ref5;
   var {
     False = {},
@@ -204,14 +221,18 @@ export var TypeFalse = _ref5 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -219,19 +240,15 @@ 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
+    keyName,
+    keys
   } = _ref6;
   var {
     Float = {},
@@ -249,14 +266,18 @@ export var TypeFloat = _ref6 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -264,19 +285,15 @@ 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
+    keyName,
+    keys
   } = _ref7;
   var {
     Int = {},
@@ -294,14 +311,18 @@ export var TypeInt = _ref7 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -309,19 +330,15 @@ 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
+    keyName,
+    keys
   } = _ref8;
   var {
     Bigint: CompBigint = {},
@@ -339,34 +356,34 @@ export var TypeBigint = _ref8 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   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
+    keyName,
+    keys
   } = _ref9;
   var {
     Url = {},
@@ -384,14 +401,18 @@ export var TypeUrl = _ref9 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children: children == null ? void 0 : children.href,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -402,20 +423,16 @@ 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 => {
+export var TypeDate = _ref0 => {
   var {
     children,
-    expandKey,
-    keyName
-  } = _ref10;
+    keyName,
+    keys
+  } = _ref0;
   var {
     Date: CompData = {},
     displayDataTypes
@@ -424,7 +441,7 @@ export var TypeDate = _ref10 => {
       as,
       render
     } = CompData,
-    reset = _objectWithoutPropertiesLoose(CompData, _excluded10);
+    reset = _objectWithoutPropertiesLoose(CompData, _excluded0);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, CompData.style || {});
   var isRender = render && typeof render === 'function';
@@ -432,15 +449,19 @@ export var TypeDate = _ref10 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
-  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,
+    keys
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -448,20 +469,16 @@ 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 => {
+export var TypeUndefined = _ref1 => {
   var {
     children,
-    expandKey,
-    keyName
-  } = _ref11;
+    keyName,
+    keys
+  } = _ref1;
   var {
     Undefined = {},
     displayDataTypes
@@ -470,7 +487,7 @@ export var TypeUndefined = _ref11 => {
       as,
       render
     } = Undefined,
-    reset = _objectWithoutPropertiesLoose(Undefined, _excluded11);
+    reset = _objectWithoutPropertiesLoose(Undefined, _excluded1);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Undefined.style || {});
   var isRender = render && typeof render === 'function';
@@ -478,32 +495,32 @@ export var TypeUndefined = _ref11 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   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 => {
+export var TypeNull = _ref10 => {
   var {
     children,
-    expandKey,
-    keyName
-  } = _ref12;
+    keyName,
+    keys
+  } = _ref10;
   var {
     Null = {},
     displayDataTypes
@@ -512,7 +529,7 @@ export var TypeNull = _ref12 => {
       as,
       render
     } = Null,
-    reset = _objectWithoutPropertiesLoose(Null, _excluded12);
+    reset = _objectWithoutPropertiesLoose(Null, _excluded10);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Null.style || {});
   var isRender = render && typeof render === 'function';
@@ -520,32 +537,32 @@ export var TypeNull = _ref12 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   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 => {
+export var TypeNan = _ref11 => {
   var {
     children,
-    expandKey,
-    keyName
-  } = _ref13;
+    keyName,
+    keys
+  } = _ref11;
   var {
     Nan = {},
     displayDataTypes
@@ -554,7 +571,7 @@ export var TypeNan = _ref13 => {
       as,
       render
     } = Nan,
-    reset = _objectWithoutPropertiesLoose(Nan, _excluded13);
+    reset = _objectWithoutPropertiesLoose(Nan, _excluded11);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Nan.style || {});
   var isRender = render && typeof render === 'function';
@@ -562,23 +579,23 @@ export var TypeNan = _ref13 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   var child = isRender && render(_extends({}, reset, {
     children: children == null ? void 0 : children.toString(),
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName,
+    keys
   });
   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/esm/utils/useRender.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { useEffect } from 'react';
-import { useSymbolsDispatch } from '../store/Symbols';
-import { useTypesDispatch } from '../store/Types';
-import { useSectionDispatch } from '../store/Section';
+import { useSymbolsDispatch } from "../store/Symbols.js";
+import { useTypesDispatch } from "../store/Types.js";
+import { useSectionDispatch } from "../store/Section.js";
 export function useSymbolsRender(currentProps, props, key) {
   var dispatch = useSymbolsDispatch();
   var cls = [currentProps.className, props.className].filter(Boolean).join(' ');

package/githubDark.d.ts

@@ -0,0 +1,4 @@
+declare module '@uiw/react-json-view/githubDark' {
+  import type * as CSS from 'csstype';
+  export const githubDarkTheme: CSS.Properties<string | number>;
+}

package/githubLight.d.ts

@@ -0,0 +1,4 @@
+declare module '@uiw/react-json-view/githubLight' {
+  import type * as CSS from 'csstype';
+  export const githubLightTheme: CSS.Properties<string | number>;
+}

package/gruvbox.d.ts

@@ -0,0 +1,4 @@
+declare module '@uiw/react-json-view/gruvbox' {
+  import type * as CSS from 'csstype';
+  export const gruvboxTheme: CSS.Properties<string | number>;
+}

package/light.d.ts

@@ -1,3 +1,4 @@
 declare module '@uiw/react-json-view/light' {
-  export const lightTheme: import('react').CSSProperties;
+  import type * as CSS from 'csstype';
+  export const lightTheme: CSS.Properties<string | number>;
 }

package/monokai.d.ts

@@ -0,0 +1,4 @@
+declare module '@uiw/react-json-view/monokai' {
+  import type * as CSS from 'csstype';
+  export const monokaiTheme: CSS.Properties<string | number>;
+}

package/nord.d.ts

@@ -0,0 +1,4 @@
+declare module '@uiw/react-json-view/nord' {
+  import type * as CSS from 'csstype';
+  export const nordTheme: CSS.Properties<string | number>;
+}