@uiw/react-json-view 2.0.0-alpha.6 → 2.0.0-alpha.8

package/cjs/types/index.js

@@ -27,8 +27,9 @@ var _excluded = ["as", "render"],
   _excluded11 = ["as", "render"],
   _excluded12 = ["as", "render"],
   _excluded13 = ["as", "render"];
-var SetComp = function SetComp(_ref) {
-  var value = _ref.value;
+var SetComp = exports.SetComp = function SetComp(_ref) {
+  var value = _ref.value,
+    keyName = _ref.keyName;
   var _useTypesStore = (0, _Types.useTypesStore)(),
     _useTypesStore$Set = _useTypesStore.Set,
     Comp = _useTypesStore$Set === void 0 ? {} : _useTypesStore$Set,
@@ -41,16 +42,17 @@ var SetComp = function SetComp(_ref) {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value: value
+    value: value,
+    keyName: keyName
   });
   if (type) return type;
   var Elm = as || 'span';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
-exports.SetComp = SetComp;
 SetComp.displayName = 'JVR.SetComp';
-var MapComp = function MapComp(_ref2) {
-  var value = _ref2.value;
+var MapComp = exports.MapComp = function MapComp(_ref2) {
+  var value = _ref2.value,
+    keyName = _ref2.keyName;
   var _useTypesStore2 = (0, _Types.useTypesStore)(),
     _useTypesStore2$Map = _useTypesStore2.Map,
     Comp = _useTypesStore2$Map === void 0 ? {} : _useTypesStore2$Map,
@@ -63,19 +65,19 @@ var MapComp = function MapComp(_ref2) {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value: value
+    value: value,
+    keyName: keyName
   });
   if (type) return type;
   var Elm = as || 'span';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
-exports.MapComp = MapComp;
 MapComp.displayName = 'JVR.MapComp';
 var defalutStyle = {
   opacity: 0.75,
   paddingRight: 4
 };
-var TypeString = function TypeString(_ref3) {
+var TypeString = exports.TypeString = function TypeString(_ref3) {
   var _ref3$children = _ref3.children,
     children = _ref3$children === void 0 ? '' : _ref3$children,
     expandKey = _ref3.expandKey,
@@ -116,14 +118,16 @@ var TypeString = function TypeString(_ref3) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: text,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -140,9 +144,8 @@ var TypeString = function TypeString(_ref3) {
     })]
   });
 };
-exports.TypeString = TypeString;
 TypeString.displayName = 'JVR.TypeString';
-var TypeTrue = function TypeTrue(_ref4) {
+var TypeTrue = exports.TypeTrue = function TypeTrue(_ref4) {
   var children = _ref4.children,
     expandKey = _ref4.expandKey,
     keyName = _ref4.keyName;
@@ -160,14 +163,16 @@ var TypeTrue = function TypeTrue(_ref4) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -182,9 +187,8 @@ var TypeTrue = function TypeTrue(_ref4) {
     })]
   });
 };
-exports.TypeTrue = TypeTrue;
 TypeTrue.displayName = 'JVR.TypeTrue';
-var TypeFalse = function TypeFalse(_ref5) {
+var TypeFalse = exports.TypeFalse = function TypeFalse(_ref5) {
   var children = _ref5.children,
     expandKey = _ref5.expandKey,
     keyName = _ref5.keyName;
@@ -202,14 +206,16 @@ var TypeFalse = function TypeFalse(_ref5) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -224,9 +230,8 @@ var TypeFalse = function TypeFalse(_ref5) {
     })]
   });
 };
-exports.TypeFalse = TypeFalse;
 TypeFalse.displayName = 'JVR.TypeFalse';
-var TypeFloat = function TypeFloat(_ref6) {
+var TypeFloat = exports.TypeFloat = function TypeFloat(_ref6) {
   var children = _ref6.children,
     expandKey = _ref6.expandKey,
     keyName = _ref6.keyName;
@@ -244,14 +249,16 @@ var TypeFloat = function TypeFloat(_ref6) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -266,9 +273,8 @@ var TypeFloat = function TypeFloat(_ref6) {
     })]
   });
 };
-exports.TypeFloat = TypeFloat;
 TypeFloat.displayName = 'JVR.TypeFloat';
-var TypeInt = function TypeInt(_ref7) {
+var TypeInt = exports.TypeInt = function TypeInt(_ref7) {
   var children = _ref7.children,
     expandKey = _ref7.expandKey,
     keyName = _ref7.keyName;
@@ -286,14 +292,16 @@ var TypeInt = function TypeInt(_ref7) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -308,9 +316,8 @@ var TypeInt = function TypeInt(_ref7) {
     })]
   });
 };
-exports.TypeInt = TypeInt;
 TypeInt.displayName = 'JVR.TypeInt';
-var TypeBigint = function TypeBigint(_ref8) {
+var TypeBigint = exports.TypeBigint = function TypeBigint(_ref8) {
   var children = _ref8.children,
     expandKey = _ref8.expandKey,
     keyName = _ref8.keyName;
@@ -328,14 +335,16 @@ var TypeBigint = function TypeBigint(_ref8) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -350,9 +359,8 @@ var TypeBigint = function TypeBigint(_ref8) {
     })]
   });
 };
-exports.TypeBigint = TypeBigint;
 TypeBigint.displayName = 'JVR.TypeFloat';
-var TypeUrl = function TypeUrl(_ref9) {
+var TypeUrl = exports.TypeUrl = function TypeUrl(_ref9) {
   var children = _ref9.children,
     expandKey = _ref9.expandKey,
     keyName = _ref9.keyName;
@@ -370,14 +378,16 @@ var TypeUrl = function TypeUrl(_ref9) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children === null || children === void 0 ? void 0 : children.href,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -395,9 +405,8 @@ var TypeUrl = function TypeUrl(_ref9) {
     })]
   });
 };
-exports.TypeUrl = TypeUrl;
 TypeUrl.displayName = 'JVR.TypeUrl';
-var TypeDate = function TypeDate(_ref10) {
+var TypeDate = exports.TypeDate = function TypeDate(_ref10) {
   var children = _ref10.children,
     expandKey = _ref10.expandKey,
     keyName = _ref10.keyName;
@@ -415,15 +424,17 @@ var TypeDate = function TypeDate(_ref10) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
-  var childStr = children === null || children === void 0 ? void 0 : children.toString();
+  var childStr = children instanceof Date ? children.toLocaleString() : children;
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: childStr,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -438,9 +449,8 @@ var TypeDate = function TypeDate(_ref10) {
     })]
   });
 };
-exports.TypeDate = TypeDate;
 TypeDate.displayName = 'JVR.TypeDate';
-var TypeUndefined = function TypeUndefined(_ref11) {
+var TypeUndefined = exports.TypeUndefined = function TypeUndefined(_ref11) {
   var children = _ref11.children,
     expandKey = _ref11.expandKey,
     keyName = _ref11.keyName;
@@ -458,14 +468,16 @@ var TypeUndefined = function TypeUndefined(_ref11) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -477,9 +489,8 @@ var TypeUndefined = function TypeUndefined(_ref11) {
     })]
   });
 };
-exports.TypeUndefined = TypeUndefined;
 TypeUndefined.displayName = 'JVR.TypeUndefined';
-var TypeNull = function TypeNull(_ref12) {
+var TypeNull = exports.TypeNull = function TypeNull(_ref12) {
   var children = _ref12.children,
     expandKey = _ref12.expandKey,
     keyName = _ref12.keyName;
@@ -497,14 +508,16 @@ var TypeNull = function TypeNull(_ref12) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -516,9 +529,8 @@ var TypeNull = function TypeNull(_ref12) {
     })]
   });
 };
-exports.TypeNull = TypeNull;
 TypeNull.displayName = 'JVR.TypeNull';
-var TypeNan = function TypeNan(_ref13) {
+var TypeNan = exports.TypeNan = function TypeNan(_ref13) {
   var children = _ref13.children,
     expandKey = _ref13.expandKey,
     keyName = _ref13.keyName;
@@ -536,14 +548,16 @@ var TypeNan = function TypeNan(_ref13) {
     style: style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName: keyName
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: children === null || children === void 0 ? void 0 : children.toString(),
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName: keyName
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -555,5 +569,4 @@ var TypeNan = function TypeNan(_ref13) {
     })]
   });
 };
-exports.TypeNan = TypeNan;
 TypeNan.displayName = 'JVR.TypeNan';

package/esm/comps/Copied.js

@@ -27,18 +27,21 @@ export var Copied = props => {
   if (enableClipboard === false || !isShowTools) return null;
   var click = event => {
     event.stopPropagation();
-    var copyText = JSON.stringify(value, (key, value) => {
-      if (typeof value === 'bigint') {
-        return value.toString();
-      }
-      return value;
-    }, 2);
-    if (typeof value === 'number' && value === Infinity) copyText = 'Infinity';
-    if (typeof value === 'number' && isNaN(value)) copyText = 'NaN';
-    if (typeof value === 'bigint') copyText = value + 'n';
+    var copyText = '';
+    if (typeof value === 'number' && value === Infinity) {
+      copyText = 'Infinity';
+    } else if (typeof value === 'number' && isNaN(value)) {
+      copyText = 'NaN';
+    } else if (typeof value === 'bigint') {
+      copyText = value + 'n';
+    } else if (value instanceof Date) {
+      copyText = value.toLocaleString();
+    } else {
+      copyText = JSON.stringify(value, null, 2);
+    }
+    onCopied && onCopied(copyText, value);
+    setCopied(true);
     navigator.clipboard.writeText(copyText).then(() => {
-      onCopied && onCopied(copyText, value);
-      setCopied(true);
       var timer = setTimeout(() => {
         setCopied(false);
         clearTimeout(timer);

package/esm/comps/NestedOpen.js

@@ -64,9 +64,11 @@ export var NestedOpen = props => {
     }), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
       keyName: keyName
     }), /*#__PURE__*/_jsx(SetComp, {
-      value: initialValue
+      value: initialValue,
+      keyName: keyName
     }), /*#__PURE__*/_jsx(MapComp, {
-      value: initialValue
+      value: initialValue,
+      keyName: keyName
     }), /*#__PURE__*/_jsx(BracketsOpen, {
       isBrackets: isArray || isMySet
     }), /*#__PURE__*/_jsx(EllipsisComp, {

package/esm/store/Types.d.ts

@@ -1,32 +1,33 @@
-import { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
+import { PropsWithChildren, ComponentPropsWithoutRef } from 'react';
 export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
-type TypesElementProps<T extends TagType> = {
+type TypesElementProps<T extends TagType = 'span'> = {
     as?: T;
     render?: (props: TypesElement<T>, result: {
         type: 'type' | 'value';
         value?: unknown;
+        keyName: string | number;
     }) => React.ReactNode;
     'data-type'?: string;
 };
 export type TypesElement<T extends TagType> = TypesElementProps<T> & ComponentPropsWithoutRef<T>;
-export type InitialTypesState = {
+export type InitialTypesState<T extends TagType = 'span'> = {
     displayDataTypes?: boolean;
-    Url?: TypesElement<TagType>;
-    Str?: TypesElement<TagType>;
-    Undefined?: TypesElement<TagType>;
-    Null?: TypesElement<TagType>;
-    True?: TypesElement<TagType>;
-    False?: TypesElement<TagType>;
-    Date?: TypesElement<TagType>;
-    Float?: TypesElement<TagType>;
-    Set?: TypesElement<TagType>;
-    Int?: TypesElement<TagType>;
-    Map?: TypesElement<TagType>;
-    Nan?: TypesElement<TagType>;
-    Bigint?: TypesElement<TagType>;
+    Url?: TypesElement<T>;
+    Str?: TypesElement<T>;
+    Undefined?: TypesElement<T>;
+    Null?: TypesElement<T>;
+    True?: TypesElement<T>;
+    False?: TypesElement<T>;
+    Date?: TypesElement<T>;
+    Float?: TypesElement<T>;
+    Set?: TypesElement<T>;
+    Int?: TypesElement<T>;
+    Map?: TypesElement<T>;
+    Nan?: TypesElement<T>;
+    Bigint?: TypesElement<T>;
 };
-type Dispatch = React.Dispatch<InitialTypesState>;
-export declare const useTypesStore: () => InitialTypesState;
+type Dispatch<T extends TagType> = React.Dispatch<InitialTypesState<T>>;
+export declare const useTypesStore: () => InitialTypesState<TagType>;
 export declare function useTypes(): [{
     displayDataTypes?: boolean | undefined;
     Url?: TypesElement<TagType> | undefined;
@@ -42,11 +43,14 @@ export declare function useTypes(): [{
     Map?: TypesElement<TagType> | undefined;
     Nan?: TypesElement<TagType> | undefined;
     Bigint?: TypesElement<TagType> | undefined;
-}, import("react").Dispatch<InitialTypesState>];
-export declare function useTypesDispatch(): Dispatch;
-interface TypesProps {
-    initial: InitialTypesState;
-    dispatch: Dispatch;
+}, import("react").Dispatch<InitialTypesState<TagType>>];
+export declare function useTypesDispatch(): Dispatch<TagType>;
+interface TypesProps<T extends TagType> {
+    initial: InitialTypesState<T>;
+    dispatch: Dispatch<TagType>;
+}
+export declare function Types<T extends TagType>({ initial, dispatch, children }: PropsWithChildren<TypesProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Types {
+    var displayName: string;
 }
-export declare const Types: FC<PropsWithChildren<TypesProps>>;
 export {};

package/esm/store/Types.js

@@ -40,7 +40,8 @@ var initialState = {
   },
   Map: {
     style: {
-      color: 'var(--w-rjv-type-map-color, #268bd2)'
+      color: 'var(--w-rjv-type-map-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'map',
@@ -76,7 +77,8 @@ var initialState = {
   },
   Set: {
     style: {
-      color: 'var(--w-rjv-type-set-color, #268bd2)'
+      color: 'var(--w-rjv-type-set-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'set',
@@ -133,7 +135,7 @@ export function useTypes() {
 export function useTypesDispatch() {
   return useContext(DispatchTypes);
 }
-export var Types = _ref => {
+export function Types(_ref) {
   var {
     initial,
     dispatch,
@@ -146,5 +148,5 @@ export var Types = _ref => {
       children: children
     })
   });
-};
+}
 Types.displayName = 'JVR.Types';

package/esm/store.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { JsonViewProps } from './';
-import { type InitialTypesState } from './store/Types';
+import { type InitialTypesState, type TagType } from './store/Types';
 export type BlockTagType = keyof JSX.IntrinsicElements;
 export interface InitialState<T extends object> {
     value?: object;
@@ -20,10 +20,13 @@ export declare const Context: React.Context<InitialState<object>>;
 export declare function reducer(state: InitialState<object>, action: InitialState<object>): InitialState<object>;
 export declare const useStore: () => InitialState<object>;
 export declare const useDispatchStore: () => Dispatch;
-export interface ProviderProps {
+export interface ProviderProps<T extends TagType> {
     initialState?: InitialState<object>;
-    initialTypes?: InitialTypesState;
+    initialTypes?: InitialTypesState<T>;
 }
-export declare const Provider: React.FC<PropsWithChildren<ProviderProps>>;
+export declare const Provider: {
+    <T extends TagType>({ children, initialState: init, initialTypes, }: React.PropsWithChildren<ProviderProps<T>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare function useDispatch(): Dispatch;
 export {};

package/esm/types/index.d.ts

@@ -1,9 +1,11 @@
 import { FC, PropsWithChildren } from 'react';
 export declare const SetComp: FC<PropsWithChildren<{
     value: unknown;
+    keyName: string | number;
 }>>;
 export declare const MapComp: FC<PropsWithChildren<{
     value: unknown;
+    keyName: string | number;
 }>>;
 type TypeProps = PropsWithChildren<{
     expandKey: string;