Skip to content

Commit 2101c36

Browse files
jaywcjlovejaywcjlove
committed
feat: enhance the render method of the Copied component. #35 
1 parent 2e21ade commit 2101c36

File tree

8 files changed

+49
-53
lines changed

8 files changed

+49
-53
lines changed

‎core/src/Container.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,23 @@ export const Container = forwardRef(<T extends object>(props: ContainerProps<T>,
3636
};
3737
return (
3838
<div className={defaultClassNames} ref={ref} {...elmProps} {...reset}>
39-
<NestedOpen expandKey={subkeyid} value={value} level={level} keyName={keyName} initialValue={initialValue} />
40-
<KeyValues expandKey={subkeyid} value={value} level={level} keys={keys} />
39+
<NestedOpen
40+
expandKey={subkeyid}
41+
value={value}
42+
level={level}
43+
keys={keys}
44+
parentValue={parentValue}
45+
keyName={keyName}
46+
initialValue={initialValue}
47+
/>
48+
<KeyValues
49+
expandKey={subkeyid}
50+
value={value}
51+
level={level}
52+
keys={keys}
53+
parentValue={parentValue}
54+
keyName={keyName}
55+
/>
4156
<NestedClose expandKey={subkeyid} value={value} level={level} />
4257
</div>
4358
);

‎core/src/comps/Copied.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@ import { useStore } from '../store';
33
import { useShowToolsStore } from '../store/ShowTools';
44
import { useSectionStore } from '../store/Section';
55
import { type TagType } from '../store/Types';
6+
import { type SectionElementResult } from '../store/Section';
67

78
export type CopiedOption<T extends object> = {
89
value?: T;
910
copied: boolean;
1011
setCopied: React.Dispatch<React.SetStateAction<boolean>>;
1112
};
1213

13-
export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement> {
14-
value?: T;
15-
keyName: string | number;
14+
export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement>, SectionElementResult<T> {
1615
expandKey: string;
1716
}
1817

1918
export const Copied = <T extends object, K extends TagType>(props: CopiedProps<T>) => {
20-
const { keyName, value, expandKey, ...other } = props;
19+
const { keyName, value, parentValue, expandKey, keys, ...other } = props;
2120
const { onCopied, enableClipboard } = useStore();
2221
const showTools = useShowToolsStore();
2322
const isShowTools = showTools[expandKey];
@@ -67,7 +66,8 @@ export const Copied = <T extends object, K extends TagType>(props: CopiedProps<T
6766
} as React.SVGProps<SVGSVGElement>;
6867
const isRender = render && typeof render === 'function';
6968
const child =
70-
isRender && render({ ...elmProps, 'data-copied': copied } as React.HTMLAttributes<K>, { value, keyName });
69+
isRender &&
70+
render({ ...elmProps, 'data-copied': copied } as React.HTMLAttributes<K>, { value, keyName, keys, parentValue });
7171
if (child) return child;
7272
if (copied) {
7373
return (

‎core/src/comps/KeyValues.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { useShowToolsDispatch } from '../store/ShowTools';
55
import { Value } from './Value';
66
import { KeyNameComp } from '../section/KeyName';
77
import { RowComp } from '../section/Row';
8-
import { Container, type ContainerProps } from '../Container';
8+
import { Container } from '../Container';
99
import { Quote, Colon } from '../symbol';
1010
import { useHighlight } from '../utils/useHighlight';
1111
import { type SectionElementResult } from '../store/Section';
12+
import { Copied } from '../comps/Copied';
1213

1314
interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
1415
expandKey?: string;
@@ -59,7 +60,7 @@ KeyValues.displayName = 'JVR.KeyValues';
5960

6061
interface KayNameProps<T extends object> extends Omit<KeyValuesProps<T>, 'level'> {}
6162
export const KayName = <T extends object>(props: KayNameProps<T>) => {
62-
const { keyName, parentValue, value } = props;
63+
const { keyName, parentValue, keys, value } = props;
6364
const { highlightUpdates } = useStore();
6465
const isNumber = typeof keyName === 'number';
6566
const highlightContainer = useRef<HTMLSpanElement>(null);
@@ -68,7 +69,7 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
6869
<Fragment>
6970
<span ref={highlightContainer}>
7071
<Quote isNumber={isNumber} data-placement="left" />
71-
<KeyNameComp keyName={keyName!} value={value} parentValue={parentValue}>
72+
<KeyNameComp keyName={keyName!} value={value} keys={keys} parentValue={parentValue}>
7273
{keyName}
7374
</KeyNameComp>
7475
<Quote isNumber={isNumber} data-placement="right" />
@@ -110,8 +111,9 @@ export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
110111
};
111112
return (
112113
<RowComp className="w-rjv-line" value={value} keyName={keyName} keys={keys} parentValue={parentValue} {...reset}>
113-
<KayName keyName={keyName} value={value} parentValue={parentValue} />
114-
<Value keyName={keyName!} value={value} expandKey={subkeyid} />
114+
<KayName keyName={keyName} value={value} keys={keys} parentValue={parentValue} />
115+
<Value keyName={keyName!} value={value} />
116+
<Copied keyName={keyName} value={value as object} keys={keys} parentValue={parentValue} expandKey={subkeyid} />
115117
</RowComp>
116118
);
117119
};

‎core/src/comps/NestedOpen.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,16 @@ import { CountInfoComp } from '../section/CountInfo';
77
import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
88
import { EllipsisComp } from '../section/Ellipsis';
99
import { SetComp, MapComp } from '../types';
10+
import { type SectionElementResult } from '../store/Section';
1011

11-
export interface NestedOpenProps<T extends object> {
12-
keyName?: string | number;
13-
value?: T;
12+
export interface NestedOpenProps<T extends object> extends SectionElementResult<T> {
1413
initialValue?: T;
1514
expandKey: string;
1615
level: number;
1716
}
1817

1918
export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
20-
const { keyName, expandKey, initialValue, value, level } = props;
19+
const { keyName, expandKey, keys, initialValue, value, parentValue, level } = props;
2120
const expands = useExpandsStore();
2221
const dispatchExpands = useExpandsDispatch();
2322
const { onExpand, collapsed } = useStore();
@@ -52,7 +51,7 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
5251
<BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} />
5352
<CountInfoComp value={value} keyName={keyName!} />
5453
<CountInfoExtraComps value={value} keyName={keyName!} />
55-
<Copied keyName={keyName!} value={value} expandKey={expandKey} />
54+
<Copied keyName={keyName!} value={value} expandKey={expandKey} parentValue={parentValue} keys={keys} />
5655
</span>
5756
);
5857
};

‎core/src/comps/Value.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,16 @@ import {
1111
TypeNan,
1212
TypeUrl,
1313
} from '../types';
14-
1514
export const isFloat = (n: number) => (Number(n) === n && n % 1 !== 0) || isNaN(n);
1615

1716
interface ValueProps {
18-
value?: unknown;
17+
value: unknown;
1918
keyName: string | number;
20-
expandKey: string;
2119
}
2220

2321
export const Value = (props: ValueProps) => {
24-
const { value, keyName, expandKey } = props;
25-
const reset = { keyName, expandKey };
22+
const { value, keyName } = props;
23+
const reset = { keyName };
2624
if (value instanceof URL) {
2725
return <TypeUrl {...reset}>{value}</TypeUrl>;
2826
}
@@ -35,7 +33,6 @@ export const Value = (props: ValueProps) => {
3533
if (value === false) {
3634
return <TypeFalse {...reset}>{value}</TypeFalse>;
3735
}
38-
3936
if (value === null) {
4037
return <TypeNull {...reset}>{value}</TypeNull>;
4138
}

‎core/src/editor/KeyName.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, useRef, useState } from 'react';
2-
import { SectionElementProps } from '../store/Section';
1+
import { useRef, useState } from 'react';
2+
import { type SectionElementProps } from '../store/Section';
33
import { useStore } from './store';
44
import { type SectionElementResult } from '../store/Section';
55

‎core/src/store/Types.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { PropsWithChildren, ComponentPropsWithoutRef, createContext, useContext, useReducer } from 'react';
2-
32
export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
43

54
type TypesElementProps<T extends TagType = 'span'> = {

‎core/src/types/index.tsx

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,10 @@ const defalutStyle: React.CSSProperties = {
4040
};
4141

4242
type TypeProps = PropsWithChildren<{
43-
expandKey: string;
4443
keyName: string | number;
4544
}>;
4645

47-
export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName }) => {
46+
export const TypeString: FC<TypeProps> = ({ children = '', keyName }) => {
4847
const { Str = {}, displayDataTypes } = useTypesStore();
4948
const { shortenTextAfterLength: length = 30 } = useStore();
5049
const { as, render, ...reset } = Str;
@@ -87,14 +86,13 @@ export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName })
8786
<ValueQuote />
8887
</Fragment>
8988
)}
90-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
9189
</Fragment>
9290
);
9391
};
9492

9593
TypeString.displayName = 'JVR.TypeString';
9694

97-
export const TypeTrue: FC<TypeProps> = ({ children, expandKey, keyName }) => {
95+
export const TypeTrue: FC<TypeProps> = ({ children, keyName }) => {
9896
const { True = {}, displayDataTypes } = useTypesStore();
9997
const { as, render, ...reset } = True;
10098
const Comp = as || 'span';
@@ -115,14 +113,13 @@ export const TypeTrue: FC<TypeProps> = ({ children, expandKey, keyName }) => {
115113
{children?.toString()}
116114
</Comp>
117115
)}
118-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
119116
</Fragment>
120117
);
121118
};
122119

123120
TypeTrue.displayName = 'JVR.TypeTrue';
124121

125-
export const TypeFalse: FC<TypeProps> = ({ children, expandKey, keyName }) => {
122+
export const TypeFalse: FC<TypeProps> = ({ children, keyName }) => {
126123
const { False = {}, displayDataTypes } = useTypesStore();
127124
const { as, render, ...reset } = False;
128125
const Comp = as || 'span';
@@ -144,14 +141,13 @@ export const TypeFalse: FC<TypeProps> = ({ children, expandKey, keyName }) => {
144141
{children?.toString()}
145142
</Comp>
146143
)}
147-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
148144
</Fragment>
149145
);
150146
};
151147

152148
TypeFalse.displayName = 'JVR.TypeFalse';
153149

154-
export const TypeFloat: FC<TypeProps> = ({ children, expandKey, keyName }) => {
150+
export const TypeFloat: FC<TypeProps> = ({ children, keyName }) => {
155151
const { Float = {}, displayDataTypes } = useTypesStore();
156152
const { as, render, ...reset } = Float;
157153
const Comp = as || 'span';
@@ -173,14 +169,13 @@ export const TypeFloat: FC<TypeProps> = ({ children, expandKey, keyName }) => {
173169
{children?.toString()}
174170
</Comp>
175171
)}
176-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
177172
</Fragment>
178173
);
179174
};
180175

181176
TypeFloat.displayName = 'JVR.TypeFloat';
182177

183-
export const TypeInt: FC<TypeProps> = ({ children, expandKey, keyName }) => {
178+
export const TypeInt: FC<TypeProps> = ({ children, keyName }) => {
184179
const { Int = {}, displayDataTypes } = useTypesStore();
185180
const { as, render, ...reset } = Int;
186181
const Comp = as || 'span';
@@ -202,18 +197,13 @@ export const TypeInt: FC<TypeProps> = ({ children, expandKey, keyName }) => {
202197
{children?.toString()}
203198
</Comp>
204199
)}
205-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
206200
</Fragment>
207201
);
208202
};
209203

210204
TypeInt.displayName = 'JVR.TypeInt';
211205

212-
export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>> = ({
213-
children,
214-
expandKey,
215-
keyName,
216-
}) => {
206+
export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
217207
const { Bigint: CompBigint = {}, displayDataTypes } = useTypesStore();
218208
const { as, render, ...reset } = CompBigint;
219209
const Comp = as || 'span';
@@ -235,14 +225,13 @@ export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>>
235225
{children?.toString() + 'n'}
236226
</Comp>
237227
)}
238-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
239228
</Fragment>
240229
);
241230
};
242231

243232
TypeBigint.displayName = 'JVR.TypeFloat';
244233

245-
export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({ children, expandKey, keyName }) => {
234+
export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
246235
const { Url = {}, displayDataTypes } = useTypesStore();
247236
const { as, render, ...reset } = Url;
248237
const Comp = as || 'span';
@@ -270,14 +259,13 @@ export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({
270259
<ValueQuote />
271260
</a>
272261
)}
273-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
274262
</Fragment>
275263
);
276264
};
277265

278266
TypeUrl.displayName = 'JVR.TypeUrl';
279267

280-
export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = ({ children, expandKey, keyName }) => {
268+
export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
281269
const { Date: CompData = {}, displayDataTypes } = useTypesStore();
282270
const { as, render, ...reset } = CompData;
283271
const Comp = as || 'span';
@@ -301,14 +289,13 @@ export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = (
301289
{childStr}
302290
</Comp>
303291
)}
304-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
305292
</Fragment>
306293
);
307294
};
308295

309296
TypeDate.displayName = 'JVR.TypeDate';
310297

311-
export const TypeUndefined: FC<TypeProps> = ({ children, expandKey, keyName }) => {
298+
export const TypeUndefined: FC<TypeProps> = ({ children, keyName }) => {
312299
const { Undefined = {}, displayDataTypes } = useTypesStore();
313300
const { as, render, ...reset } = Undefined;
314301
const Comp = as || 'span';
@@ -326,14 +313,13 @@ export const TypeUndefined: FC<TypeProps> = ({ children, expandKey, keyName }) =
326313
<Fragment>
327314
{displayDataTypes && (type || <Comp {...reset} style={style} />)}
328315
{child}
329-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
330316
</Fragment>
331317
);
332318
};
333319

334320
TypeUndefined.displayName = 'JVR.TypeUndefined';
335321

336-
export const TypeNull: FC<TypeProps> = ({ children, expandKey, keyName }) => {
322+
export const TypeNull: FC<TypeProps> = ({ children, keyName }) => {
337323
const { Null = {}, displayDataTypes } = useTypesStore();
338324
const { as, render, ...reset } = Null;
339325
const Comp = as || 'span';
@@ -351,14 +337,13 @@ export const TypeNull: FC<TypeProps> = ({ children, expandKey, keyName }) => {
351337
<Fragment>
352338
{displayDataTypes && (type || <Comp {...reset} style={style} />)}
353339
{child}
354-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
355340
</Fragment>
356341
);
357342
};
358343

359344
TypeNull.displayName = 'JVR.TypeNull';
360345

361-
export const TypeNan: FC<TypeProps> = ({ children, expandKey, keyName }) => {
346+
export const TypeNan: FC<TypeProps> = ({ children, keyName }) => {
362347
const { Nan = {}, displayDataTypes } = useTypesStore();
363348
const { as, render, ...reset } = Nan;
364349
const Comp = as || 'span';
@@ -380,7 +365,6 @@ export const TypeNan: FC<TypeProps> = ({ children, expandKey, keyName }) => {
380365
<Fragment>
381366
{displayDataTypes && (type || <Comp {...reset} style={style} />)}
382367
{child}
383-
<Copied keyName={keyName} value={children as object} expandKey={expandKey} />
384368
</Fragment>
385369
);
386370
};

0 commit comments

Comments
 (0)