Skip to content

Commit 8cc7ab1

Browse files
jaywcjlovejaywcjlove
committed
fix: fix Ellipsis component issue.
1 parent ad3dbad commit 8cc7ab1

File tree

9 files changed

+91
-74
lines changed

9 files changed

+91
-74
lines changed

‎core/README.md

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export default function Demo() {
300300

301301
## Render
302302

303-
**`v2`** version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: `<Bigint />`, `<Date />`, `<False />`, `<Float />`, `<Int />`, `<Map />`, `<Nan />`, `<Null />`, `<Set />`, `<String />`, `<True />`, `<Undefined />`, `<Url />`, and symbol components: `<ValueQuote />`, `<Arrow />`, `<Colon />`, `<Quote />`, `<Ellipsis />`, `<BraceLeft />`, `<BraceRight />`, `<BracketsLeft />`, `<BracketsRight />`.
303+
**`v2`** version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: `<Bigint />`, `<Date />`, `<False />`, `<Float />`, `<Int />`, `<Map />`, `<Nan />`, `<Null />`, `<Set />`, `<String />`, `<True />`, `<Undefined />`, `<Url />`, and symbol components: `<ValueQuote />`, `<Arrow />`, `<Colon />`, `<Quote />`, `<BraceLeft />`, `<BraceRight />`, `<BracketsLeft />`, `<BracketsRight />`.
304304

305305
```tsx mdx:preview
306306
import React from 'react';
@@ -361,7 +361,7 @@ export default function Demo() {
361361
}
362362
```
363363

364-
Supports certain partial customizations such as: `Copied`, `CountInfo`, `CountInfoExtra`
364+
Supports certain partial customizations such as: `<Copied />`, `<CountInfo />`, `<CountInfoExtra />`, `<Ellipsis />`, `<KeyName />`
365365

366366
```tsx mdx:preview
367367
import React, { Fragment } from 'react';
@@ -464,6 +464,8 @@ const Quote = JsonView.Quote;
464464
const BraceLeft = JsonView.BraceLeft;
465465
const BraceRight = JsonView.BraceRight;
466466
const CountInfo = JsonView.CountInfo;
467+
const Ellipsis = JsonView.Ellipsis;
468+
const CountInfoExtra = JsonView.CountInfoExtra;
467469

468470
export default function Demo() {
469471
return (
@@ -473,6 +475,19 @@ export default function Demo() {
473475
enableClipboard={false}
474476
displayDataTypes={false}
475477
>
478+
<Ellipsis
479+
render={({ 'data-expanded': isExpanded, className, ...props }, { value }) => {
480+
if (Array.isArray(value) && isExpanded) {
481+
console.log('props:',value, isExpanded, props)
482+
return (
483+
<span className={className}>
484+
{Array.from({ length: value.length }, () => 'Object').join(', ')}
485+
</span>
486+
)
487+
}
488+
return <span />;
489+
}}
490+
/>
476491
<Quote>
477492
<span />
478493
</Quote>
@@ -656,29 +671,32 @@ export default function Demo() {
656671
## Props
657672

658673
```ts
659-
import { BraceLeft } from "./symbol/BraceLeft";
660-
import { BraceRight } from "./symbol/BraceRight";
674+
import { BraceLeft } from './symbol/BraceLeft';
675+
import { BraceRight } from './symbol/BraceRight';
661676
import { BracketsLeft } from './symbol/BracketsLeft';
662677
import { BracketsRight } from './symbol/BracketsRight';
663-
import { Arrow } from "./symbol/Arrow";
664-
import { Colon } from "./symbol/Colon";
678+
import { Arrow } from './symbol/Arrow';
679+
import { Colon } from './symbol/Colon';
665680
import { Ellipsis } from './symbol/Ellipsis';
666-
import { Quote } from "./symbol/Quote";
681+
import { Quote } from './symbol/Quote';
667682
import { ValueQuote } from './symbol/ValueQuote';
668-
import { Bigint } from "./types/Bigint";
669-
import { Date } from "./types/Date";
670-
import { False } from "./types/False";
671-
import { Float } from "./types/Float";
672-
import { Int } from "./types/Int";
673-
import { Map } from "./types/Map";
674-
import { Nan } from "./types/Nan";
675-
import { Null } from "./types/Null";
676-
import { Set } from "./types/Set";
677-
import { StringText } from "./types/String";
678-
import { True } from "./types/True";
679-
import { Undefined } from "./types/Undefined";
680-
import { Url } from "./types/Url";
681-
import { CountInfo } from "./section/CountInfo";
683+
import { Bigint } from './types/Bigint';
684+
import { Date } from './types/Date';
685+
import { False } from './types/False';
686+
import { Float } from './types/Float';
687+
import { Int } from './types/Int';
688+
import { Map } from './types/Map';
689+
import { Nan } from './types/Nan';
690+
import { Null } from './types/Null';
691+
import { Set } from './types/Set';
692+
import { StringText } from './types/String';
693+
import { True } from './types/True';
694+
import { Undefined } from './types/Undefined';
695+
import { Url } from './types/Url';
696+
import { Copied } from './section/Copied';
697+
import { CountInfo } from './section/CountInfo';
698+
import { CountInfoExtra } from './section/CountInfoExtra';
699+
import { KeyName } from './section/KeyName';
682700
import { type CountInfoProps } from "./comps/CountInfo";
683701
import { type CopiedOption } from "./comps/Copied";
684702
import { type NestedOpenProps } from "./comps/NestedOpen";
@@ -735,7 +753,10 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
735753
Quote: typeof Quote;
736754
ValueQuote: typeof ValueQuote;
737755
Arrow: typeof Arrow;
756+
Copied: typeof Copied;
738757
CountInfo: typeof CountInfo;
758+
CountInfoExtra: typeof CountInfoExtra;
759+
KeyName: typeof KeyName;
739760
};
740761
declare const JsonView: JsonViewComponent;
741762
export default JsonView;

‎core/src/comps/Ellipsis.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useStore } from '../store';
2+
import { useSectionStore, type SectionElementProps } from '../store/Section';
3+
import { type TagType } from '../store/Types';
4+
5+
export interface CountInfoProps<T extends object> {
6+
value?: T;
7+
keyName: string | number;
8+
isExpanded: boolean;
9+
}
10+
11+
export const Ellipsis = <T extends object>({ isExpanded, value, keyName }: CountInfoProps<T>) => {
12+
const { Ellipsis: Comp = {} } = useSectionStore();
13+
const { as, render, ...reset } = Comp;
14+
const Elm = as || 'span';
15+
const child =
16+
render && typeof render === 'function' && render({ ...reset, 'data-expanded': isExpanded }, { value, keyName });
17+
if (child) return child;
18+
if (!isExpanded) return null;
19+
return <Elm {...reset} />;
20+
};
21+
22+
Ellipsis.displayName = 'JVR.Ellipsis';

‎core/src/comps/NestedOpen.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { useExpandsStore, useExpandsDispatch, useExpands } from '../store/Expand
33
import { useStore } from '../store';
44
import { Copied } from './Copied';
55
import { CountInfo, CountInfoExtra } from './CountInfo';
6-
import { Ellipsis, Arrow, BracketsOpen, BracketsClose } from './ReRender/Symbols';
6+
import { Arrow, BracketsOpen, BracketsClose } from './ReRender/Symbols';
7+
import { Ellipsis } from './Ellipsis';
78
import { SetComp, MapComp } from './ReRender/Types';
89

910
export interface NestedOpenProps<T extends object> {

‎core/src/comps/ReRender/Symbols.tsx

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,18 +60,6 @@ type EllipsisProps<T extends object> = {
6060
value?: T;
6161
};
6262

63-
export const Ellipsis = <T extends object>({ isExpanded }: EllipsisProps<T>) => {
64-
const { Ellipsis: Comp = {} } = useSymbolsStore();
65-
const { as, render, ...reset } = Comp;
66-
if (!isExpanded) return null;
67-
const Elm = as || 'span';
68-
const child = render && typeof render === 'function' && render(reset);
69-
if (child) return child;
70-
return <Elm {...reset} />;
71-
};
72-
73-
Ellipsis.displayName = 'JVR.Ellipsis';
74-
7563
export const BracketsOpen = ({ isBrackets }: { isBrackets?: boolean }) => {
7664
const { BracketsLeft = {}, BraceLeft = {} } = useSymbolsStore();
7765
if (isBrackets) {

‎core/src/index.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { BracketsLeft } from './symbol/BracketsLeft';
88
import { BracketsRight } from './symbol/BracketsRight';
99
import { Arrow } from './symbol/Arrow';
1010
import { Colon } from './symbol/Colon';
11-
import { Ellipsis } from './symbol/Ellipsis';
1211
import { Quote } from './symbol/Quote';
1312
import { ValueQuote } from './symbol/ValueQuote';
1413

@@ -29,10 +28,9 @@ import { Url } from './types/Url';
2928
import { Copied } from './section/Copied';
3029
import { CountInfo } from './section/CountInfo';
3130
import { CountInfoExtra } from './section/CountInfoExtra';
31+
import { Ellipsis } from './section/Ellipsis';
3232
import { KeyName } from './section/KeyName';
3333

34-
import { type CopiedOption } from './comps/Copied';
35-
3634
export * from './store';
3735
export * from './store/Expands';
3836
export * from './store/ShowTools';

‎core/src/section/Ellipsis.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { type TagType } from '../store/Types';
2+
import { type SectionElement, useSectionStore } from '../store/Section';
3+
import { useSectionRender } from '../utils/useRender';
4+
5+
export const Ellipsis = <K extends TagType>(props: SectionElement<K>) => {
6+
const { Ellipsis: Comp = {} } = useSectionStore();
7+
useSectionRender(Comp, props, 'Ellipsis');
8+
return null;
9+
};
10+
11+
Ellipsis.displayName = 'JVR.Ellipsis';

‎core/src/store/Section.tsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
1-
import React, {
2-
FC,
3-
PropsWithChildren,
4-
ElementType,
5-
ComponentPropsWithoutRef,
6-
createContext,
7-
useContext,
8-
useReducer,
9-
} from 'react';
1+
import React, { FC, PropsWithChildren, ComponentPropsWithoutRef, createContext, useContext, useReducer } from 'react';
102
import { type TagType } from './Types';
113

12-
// export interface SectionElementProps<T extends TagType> {
13-
// as?: T;
14-
// render?: (props: SectionElement<T>, result: { value: unknown; keyName: string | number; }) => React.ReactNode;
15-
// }
164
export type SectionElementProps<T extends TagType> = {
175
as?: T;
186
render?: (props: SectionElement<T>, result: { value: unknown; keyName: string | number }) => React.ReactNode;
@@ -22,9 +10,10 @@ export type SectionElement<T extends TagType> = SectionElementProps<T> & Compone
2210

2311
type InitialState<T extends TagType> = {
2412
Copied?: SectionElement<T>;
25-
KeyName?: SectionElement<T>;
2613
CountInfo?: SectionElement<T>;
2714
CountInfoExtra?: SectionElement<T>;
15+
Ellipsis?: SectionElement<T>;
16+
KeyName?: SectionElement<T>;
2817
};
2918

3019
type Dispatch = React.Dispatch<InitialState<TagType>>;
@@ -55,6 +44,16 @@ const initialState: InitialState<TagType> = {
5544
paddingLeft: 8,
5645
},
5746
},
47+
Ellipsis: {
48+
as: 'span',
49+
style: {
50+
cursor: 'pointer',
51+
color: 'var(--w-rjv-ellipsis-color, #cb4b16)',
52+
userSelect: 'none',
53+
},
54+
className: 'w-rjv-ellipsis',
55+
children: '...',
56+
},
5857
KeyName: {
5958
as: 'span',
6059
className: 'w-rjv-object-key',

‎core/src/store/Symbols.tsx

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export type SymbolsElement<T extends TagType> = SymbolsElementProps<T> & Compone
2020
type InitialState<T extends ElementType = 'span'> = {
2121
Arrow?: SymbolsElement<T>;
2222
Colon?: SymbolsElement<T>;
23-
Ellipsis?: SymbolsElement<T>;
2423
Quote?: SymbolsElement<T>;
2524
ValueQuote?: SymbolsElement<T>;
2625
BracketsRight?: SymbolsElement<T>;
@@ -49,16 +48,6 @@ const initialState: InitialState<TagType> = {
4948
className: 'w-rjv-colon',
5049
children: ':',
5150
},
52-
Ellipsis: {
53-
as: 'span',
54-
style: {
55-
cursor: 'pointer',
56-
color: 'var(--w-rjv-ellipsis-color, #cb4b16)',
57-
userSelect: 'none',
58-
},
59-
className: 'w-rjv-ellipsis',
60-
children: '...',
61-
},
6251
Quote: {
6352
as: 'span',
6453
style: {

‎core/src/symbol/Ellipsis.tsx

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)