fix: fix CountInfoExtra render issue.

Author: jaywcjlove

core/src/comps/Ellipsis.tsx

@@ -5,7 +5,7 @@ import { Copied } from './Copied';
 import { CountInfoExtraComps } from '../section/CountInfoExtra';
 import { CountInfoComp } from '../section/CountInfo';
 import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
-import { Ellipsis } from './Ellipsis';
+import { EllipsisComp } from '../section/Ellipsis';
 import { SetComp, MapComp } from '../types';
 
 export interface NestedOpenProps<T extends object> {
@@ -48,7 +48,7 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
       <SetComp value={initialValue} />
       <MapComp value={initialValue} />
       <BracketsOpen isBrackets={isArray || isMySet} />
-      <Ellipsis keyName={keyName!} value={value} isExpanded={isExpanded} />
+      <EllipsisComp keyName={keyName!} value={value} isExpanded={isExpanded} />
       <BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} />
       <CountInfoComp value={value} keyName={keyName!} />
       <CountInfoExtraComps value={value} keyName={keyName!} />

core/src/comps/NestedOpen.tsx

@@ -0,0 +1,37 @@
+import { screen, render } from '@testing-library/react';
+import JsonView from '../';
+
+const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
+const example = {
+  avatar,
+};
+
+it('renders <JsonView.CountInfoExtra /> test case', async () => {
+  const { container } = render(
+    <JsonView value={example}>
+      <JsonView.CountInfoExtra data-testid="countInfo">xx</JsonView.CountInfoExtra>
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const countInfo = screen.getByTestId('countInfo');
+  expect(countInfo.className).toEqual('w-rjv-object-extra');
+  expect(countInfo.style).toHaveProperty('padding-left', '8px');
+});
+
+it('renders <JsonView.CountInfoExtra /> test case', async () => {
+  const { container, debug } = render(
+    <JsonView value={example}>
+      <JsonView.CountInfoExtra
+        data-testid="countInfo"
+        render={(props) => {
+          return <span {...props}>xx</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const countInfo = screen.getByTestId('countInfo');
+  expect(countInfo.className).toEqual('w-rjv-object-extra');
+  expect(countInfo.style).toHaveProperty('padding-left', '8px');
+  expect(countInfo.innerHTML).toEqual('xx');
+});

core/src/section/CountInfoExtra.test.tsx

@@ -21,7 +21,7 @@ export const CountInfoExtraComps = <T extends object>(
   const { value = {}, keyName, ...other } = props;
   const { CountInfoExtra: Comp = {} } = useSectionStore();
   const { as, render, ...reset } = Comp;
-  if (!render || !reset.children) return null;
+  if (!render && !reset.children) return null;
   const Elm = as || 'span';
   const isRender = render && typeof render === 'function';
   const elmProps = { ...reset, ...other };

core/src/section/CountInfoExtra.tsx

@@ -9,3 +9,22 @@ export const Ellipsis = <K extends TagType>(props: SectionElement<K>) => {
 };
 
 Ellipsis.displayName = 'JVR.Ellipsis';
+
+export interface EllipsisCompProps<T extends object> {
+  value?: T;
+  keyName: string | number;
+  isExpanded: boolean;
+}
+
+export const EllipsisComp = <T extends object>({ isExpanded, value, keyName }: EllipsisCompProps<T>) => {
+  const { Ellipsis: Comp = {} } = useSectionStore();
+  const { as, render, ...reset } = Comp;
+  const Elm = as || 'span';
+  const child =
+    render && typeof render === 'function' && render({ ...reset, 'data-expanded': isExpanded }, { value, keyName });
+  if (child) return child;
+  if (!isExpanded) return null;
+  return <Elm {...reset} />;
+};
+
+EllipsisComp.displayName = 'JVR.EllipsisComp';

core/src/section/Ellipsis.tsx

@@ -1,3 +1,4 @@
+import { type FC, type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
 import { type SectionElement, useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
@@ -9,3 +10,25 @@ export const KeyName = <K extends TagType>(props: SectionElement<K>) => {
 };
 
 KeyName.displayName = 'JVR.KeyName';
+
+type KeyNameCompProps = {
+  keyName: string | number;
+  value?: unknown;
+};
+
+export const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>> = (props) => {
+  const { children, value, keyName } = props;
+  const isNumber = typeof children === 'number';
+  const style: React.CSSProperties = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)',
+  };
+  const { KeyName: Comp = {} } = useSectionStore();
+  const { as, render, ...reset } = Comp;
+  reset.style = { ...reset.style, ...style };
+  const Elm = as || 'span';
+  const child = render && typeof render === 'function' && render({ ...reset, children }, { value, keyName });
+  if (child) return child;
+  return <Elm {...reset}>{children}</Elm>;
+};
+
+KeyNameComp.displayName = 'JVR.KeyNameComp';