feat: add components.countInfo props.

Author: jaywcjlove

core/README.md

@@ -150,71 +150,6 @@ export default function Demo() {
 }
 ```
 
-Inspector
-
-```tsx mdx:preview
-import React from 'react';
-import JsonView from '@uiw/react-json-view';
-
-const object = [
-  {
-    "_id": "56dcf573b09c217d39fd7621",
-    "name": "Howard Christensen",
-    "email": "[email protected]",
-    "phone": "+1 (830) 529-3176",
-    "address": "511 Royce Street, Hilltop, Tennessee, 9712"
-  },
-  {
-    "_id": "56dcf57323630b06251e93cd",
-    "name": "Eleanor Lynn",
-    "email": "[email protected]",
-    "phone": "+1 (911) 576-2345",
-    "address": "547 Dearborn Court, Trona, California, 8629"
-  },
-  {
-    "_id": "56dcf5738279cac6b081e512",
-    "name": "Baxter Mooney",
-    "email": "[email protected]",
-    "phone": "+1 (954) 456-3456",
-    "address": "349 Cumberland Walk, Washington, Alaska, 3154"
-  },
-  {
-    "_id": "56dcf57303accabd43740957",
-    "name": "Calhoun Tyson",
-    "email": "[email protected]",
-    "phone": "+1 (818) 456-2529",
-    "address": "367 Lyme Avenue, Ladera, Louisiana, 6292"
-  },
-  {
-    "_id": "56dcf57391ea6a9d1f60df0c",
-    "name": "Judith Jimenez",
-    "email": "[email protected]",
-    "phone": "+1 (950) 587-3415",
-    "address": "269 Bogart Street, Sultana, Vermont, 7833"
-  },
-  {
-    "_id": "56dcf5735a7a0718a61f294d",
-    "name": "Newman Lawson",
-    "email": "[email protected]",
-    "phone": "+1 (814) 484-2827",
-    "address": "969 Conduit Boulevard, Lowell, Oregon, 4118"
-  }
-]
-
-const customTheme = {
-  '--w-rjv-background-color': '#fff',
-  '--w-rjv-border-left-width': 0,
-  '--w-rjv-color': '#881391',
-  '--w-rjv-type-int-color': '#881391',
-};
-
-export default function Demo() {
-  return (
-    <JsonView value={object} style={customTheme} quotes="" displayDataTypes={false} enableClipboard={false} />
-  )
-}
-```
-
 ## Online Editing Theme
 
 Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
@@ -465,6 +400,79 @@ export default function Demo() {
 }
 ```
 
+Inspector
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+const object = [
+  {
+    "_id": "56dcf573b09c217d39fd7621",
+    "name": "Howard Christensen",
+    "email": "[email protected]",
+    "phone": "+1 (830) 529-3176",
+    "address": "511 Royce Street, Hilltop, Tennessee, 9712"
+  },
+  {
+    "_id": "56dcf57323630b06251e93cd",
+    "name": "Eleanor Lynn",
+    "email": "[email protected]",
+    "phone": "+1 (911) 576-2345",
+    "address": "547 Dearborn Court, Trona, California, 8629"
+  },
+  {
+    "_id": "56dcf5738279cac6b081e512",
+    "name": "Baxter Mooney",
+    "email": "[email protected]",
+    "phone": "+1 (954) 456-3456",
+    "address": "349 Cumberland Walk, Washington, Alaska, 3154"
+  },
+  {
+    "_id": "56dcf57303accabd43740957",
+    "name": "Calhoun Tyson",
+    "email": "[email protected]",
+    "phone": "+1 (818) 456-2529",
+    "address": "367 Lyme Avenue, Ladera, Louisiana, 6292"
+  },
+]
+
+const customTheme = {
+  '--w-rjv-background-color': '#fff',
+  '--w-rjv-border-left-width': 0,
+  '--w-rjv-color': '#881391',
+  '--w-rjv-type-int-color': '#881391',
+};
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      style={customTheme}
+      quotes=""
+      enableClipboard={false}
+      displayDataTypes={false}
+      components={{
+        braces: ({ level }) => level !== 1 && <span />,
+        countInfo: ({ level, count, visible }) => {
+          if (level === 1) {
+            return <span />;
+            //return visible ? <span>{Array.from({ length: 3 }, () => 'Object').join(', ')}</span> : <span />
+          }
+          return <span style={{ color: '#222' }}>Object</span>;
+        },
+        ellipsis: ({ level, count }) => {
+          if (level === 1) {
+            return <span>{Array.from({ length: 3 }, () => 'Object').join(', ')}</span>;
+          }
+          return <span />;
+        },
+      }}
+    />
+  );
+}
+```
+
 ## Editor JSON
 
 ```tsx mdx:preview

core/src/comps/ellipsis.test.tsx

@@ -3,7 +3,7 @@ import { Ellipsis } from './ellipsis';
 
 it('renders <Ellipsis /> test case', () => {
   const component = renderer.create(
-    <Ellipsis />,
+    <Ellipsis count={1} level={1} />,
   );
   let tree = component.toJSON();
   expect(tree).toHaveProperty('type');
@@ -21,7 +21,7 @@ it('renders <Ellipsis /> test case', () => {
 
 it('renders <Ellipsis /> render props test case', () => {
   const component = renderer.create(
-    <Ellipsis render={(props) => <del {...props}>xxx</del>} />,
+    <Ellipsis count={1} level={1} render={(props) => <del {...props}>xxx</del>} />,
   );
   let tree = component.toJSON();
   expect(tree).toHaveProperty('type');
@@ -30,6 +30,8 @@ it('renders <Ellipsis /> render props test case', () => {
   expect(tree).toHaveProperty('type', 'del');
   expect(tree).toHaveProperty('props', {
     className: 'w-rjv-ellipsis ',
+    count: 1,
+    level: 1,
     style: {
       cursor: 'pointer',
     }

core/src/comps/ellipsis.tsx

@@ -1,12 +1,14 @@
 import { FC, PropsWithChildren } from 'react';
 
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+  count: number;
+  level: number;
   render?: (props: EllipsisProps) => JSX.Element;
 }
-export const Ellipsis: FC<PropsWithChildren<EllipsisProps>> = ({ style, render, ...props }) => {
+export const Ellipsis: FC<PropsWithChildren<EllipsisProps>> = ({ style, render, count, level, ...props }) => {
   const styl = { cursor: 'pointer', ...style };
   const className = `w-rjv-ellipsis ${props.className || ''}`;
-  if (render) return render({ style: styl, ...props, className });
+  if (render) return render({ style: styl, count, level, ...props, className });
   return (
     <span className={className} style={styl} {...props}>
       ...

core/src/comps/meta.tsx

@@ -3,22 +3,28 @@ import { Label, LabelProps } from '../value';
 export interface MetaProps extends LabelProps {
   isArray?: boolean;
   start?: boolean;
-  render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
+  level?: number;
+  render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
 
 export function Meta(props: MetaProps) {
-  const { isArray = false, start = false, className, render, ...reset } = props;
+  const { isArray = false, start = false, level, className, render, ...reset } = props;
   const mark = isArray ? '[]' : '{}';
   const cls = `w-rjv-${isArray ? 'brackets' : 'curlybraces'}-${start ? 'start' : 'end'} ${className || ''}`;
   const color = `var(--w-rjv-${isArray ? 'brackets' : 'curlybraces'}-color, #236a7c)`;
-  if (render)
-    return render({
+  if (render) {
+    const viev = render({
       isArray,
+      level,
       className: cls,
       style: { color },
       children: start ? mark.charAt(0) : mark.charAt(1),
       ...reset,
     });
+    if (viev) {
+      return viev;
+    }
+  }
   return (
     <Label color={color} className={cls} {...reset}>
       {start ? mark.charAt(0) : mark.charAt(1)}

core/src/editor/index.test.tsx

@@ -0,0 +1,28 @@
+import renderer from 'react-test-renderer';
+import JsonViewEditor from './';
+
+it('renders <JsonViewEditor /> test case', () => {
+  const component = renderer.create(
+    <JsonViewEditor />,
+  );
+  const tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('type', 'div');
+  expect(tree).toHaveProperty('props.style', {
+    lineHeight: 1.4,
+    fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
+    color: 'var(--w-rjv-color, #002b36)',
+    backgroundColor: 'var(--w-rjv-background-color, #00000000)'
+  });
+  // @ts-ignore
+  expect(tree.children).toHaveLength(3);
+  expect(tree).toHaveProperty('props.className', 'w-json-view-container w-rjv  w-rjv-inner');
+  expect(tree).toHaveProperty('props.onMouseEnter');
+  expect(tree).toHaveProperty('props.onMouseLeave');
+  expect(tree).toHaveProperty('children[0].type', 'div');
+  expect(tree).toHaveProperty('children[0].props.style', {
+    "alignItems": "center", "display": "inline-flex"
+  });
+  expect(tree).toHaveProperty('children[0].props.onClick');
+});

core/src/editor/objectKey.test.tsx

@@ -0,0 +1,60 @@
+import renderer from 'react-test-renderer';
+import { ObjectKey } from './objectKey';
+
+it('renders <ObjectKey /> test case', () => {
+  const component = renderer.create(
+    <ObjectKey />,
+  );
+  const tree = component.toJSON();
+
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children', null);
+  expect(tree).toHaveProperty('type', 'span');
+  expect(tree).toHaveProperty('props.style', {
+    color: undefined,
+    fontSize: undefined,
+    opacity: undefined,
+    paddingRight: undefined
+  })
+  expect(tree).toHaveProperty('props.onClick');
+  expect(tree).toHaveProperty('props.onFocus');
+  expect(tree).toHaveProperty('props.onBlur');
+  expect(tree).toHaveProperty('props.onKeyDown');
+  expect(tree).toHaveProperty('props.autoFocus', false);
+  expect(tree).toHaveProperty('props.contentEditable', false);
+  expect(tree).toHaveProperty('props.spellCheck', false);
+  expect(tree).toHaveProperty('props.suppressContentEditableWarning', true);
+});
+
+it('renders <ObjectKey /> render test case', () => {
+  const component = renderer.create(
+    <ObjectKey
+      label="good"
+      keyName="key"
+      quotes="'"
+      render={({ value, keyName, label, parentName, ...props}) => {
+        return <span {...props}>xx{label}</span>
+      }}
+    />,
+  );
+  const tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children', ['xx', 'good']);
+  expect(tree).toHaveProperty('type', 'span');
+  expect(tree).toHaveProperty('props.style', {
+    color: undefined,
+    fontSize: undefined,
+    opacity: undefined,
+    paddingRight: undefined
+  })
+  expect(tree).toHaveProperty('props.onClick');
+  expect(tree).toHaveProperty('props.onFocus');
+  expect(tree).toHaveProperty('props.onBlur');
+  expect(tree).toHaveProperty('props.onKeyDown');
+  expect(tree).toHaveProperty('props.autoFocus', false);
+  expect(tree).toHaveProperty('props.contentEditable', false);
+  expect(tree).toHaveProperty('props.spellCheck', false);
+  expect(tree).toHaveProperty('props.suppressContentEditableWarning', true);
+});

core/src/editor/objectKey.tsx

@@ -82,7 +82,7 @@ export const ObjectKey: FC<ObjectKeyProps<object>>= (props) => {
     return render({ className, ...reset, ...spanProps, parentName, label: curentLabel as string, children: editable ? curentLabel : content, ref: $edit });
   }
 
-  return <Label className={className} {...reset} autoFocus={editable}  {...spanProps} ref={$edit} />;
+  return <Label className={className} {...reset} autoFocus={editable} {...spanProps} ref={$edit} />;
 }