Skip to content

Commit 49de404

Browse files
jaywcjlovejaywcjlove
committed
feat: type component render adds keyName return param.
1 parent c906c9e commit 49de404

File tree

3 files changed

+40
-29
lines changed

3 files changed

+40
-29
lines changed

‎core/src/comps/NestedOpen.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
4545
<span {...reset}>
4646
{showArrow && <Arrow style={arrowStyle} expandKey={expandKey} />}
4747
{(keyName || typeof keyName === 'number') && <KayName keyName={keyName} />}
48-
<SetComp value={initialValue} />
49-
<MapComp value={initialValue} />
48+
<SetComp value={initialValue} keyName={keyName!} />
49+
<MapComp value={initialValue} keyName={keyName!} />
5050
<BracketsOpen isBrackets={isArray || isMySet} />
5151
<EllipsisComp keyName={keyName!} value={value} isExpanded={isExpanded} />
5252
<BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} />

‎core/src/store/Types.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
44

55
type TypesElementProps<T extends TagType = 'span'> = {
66
as?: T;
7-
render?: (props: TypesElement<T>, result: { type: 'type' | 'value'; value?: unknown }) => React.ReactNode;
7+
render?: (
8+
props: TypesElement<T>,
9+
result: { type: 'type' | 'value'; value?: unknown; keyName: string | number },
10+
) => React.ReactNode;
811
'data-type'?: string;
912
};
1013

‎core/src/types/index.tsx

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { useStore } from '../store';
44
import { ValueQuote } from '../symbol';
55
import { Copied } from '../comps/Copied';
66

7-
export const SetComp: FC<PropsWithChildren<{ value: unknown }>> = ({ value }) => {
7+
export const SetComp: FC<PropsWithChildren<{ value: unknown; keyName: string | number }>> = ({ value, keyName }) => {
88
const { Set: Comp = {}, displayDataTypes } = useTypesStore();
99
const isSet = value instanceof Set;
1010
if (!isSet || !displayDataTypes) return null;
1111
const { as, render, ...reset } = Comp;
1212
const isRender = render && typeof render === 'function';
13-
const type = isRender && render(reset, { type: 'type', value });
13+
const type = isRender && render(reset, { type: 'type', value, keyName });
1414
if (type) return type;
1515

1616
const Elm = as || 'span';
@@ -19,13 +19,13 @@ export const SetComp: FC<PropsWithChildren<{ value: unknown }>> = ({ value }) =>
1919

2020
SetComp.displayName = 'JVR.SetComp';
2121

22-
export const MapComp: FC<PropsWithChildren<{ value: unknown }>> = ({ value }) => {
22+
export const MapComp: FC<PropsWithChildren<{ value: unknown; keyName: string | number }>> = ({ value, keyName }) => {
2323
const { Map: Comp = {}, displayDataTypes } = useTypesStore();
2424
const isMap = value instanceof Map;
2525
if (!isMap || !displayDataTypes) return null;
2626
const { as, render, ...reset } = Comp;
2727
const isRender = render && typeof render === 'function';
28-
const type = isRender && render(reset, { type: 'type', value });
28+
const type = isRender && render(reset, { type: 'type', value, keyName });
2929
if (type) return type;
3030

3131
const Elm = as || 'span';
@@ -71,9 +71,10 @@ export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName })
7171
const text = shorten ? `${childrenStr.slice(0, length)}...` : childrenStr;
7272

7373
const isRender = render && typeof render === 'function';
74-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
74+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
7575
const child =
76-
isRender && render({ ...reset, children: text, className: 'w-rjv-value' }, { type: 'value', value: children });
76+
isRender &&
77+
render({ ...reset, children: text, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
7778
return (
7879
<Fragment>
7980
{displayDataTypes && (type || <Comp {...reset} style={style} />)}
@@ -103,9 +104,9 @@ export const TypeTrue: FC<TypeProps> = ({ children, expandKey, keyName }) => {
103104
};
104105

105106
const isRender = render && typeof render === 'function';
106-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
107+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
107108
const child =
108-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
109+
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
109110
return (
110111
<Fragment>
111112
{displayDataTypes && (type || <Comp {...reset} style={style} />)}
@@ -131,9 +132,9 @@ export const TypeFalse: FC<TypeProps> = ({ children, expandKey, keyName }) => {
131132
};
132133

133134
const isRender = render && typeof render === 'function';
134-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
135+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
135136
const child =
136-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
137+
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
137138

138139
return (
139140
<Fragment>
@@ -160,9 +161,9 @@ export const TypeFloat: FC<TypeProps> = ({ children, expandKey, keyName }) => {
160161
};
161162

162163
const isRender = render && typeof render === 'function';
163-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
164+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
164165
const child =
165-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
166+
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
166167

167168
return (
168169
<Fragment>
@@ -189,9 +190,9 @@ export const TypeInt: FC<TypeProps> = ({ children, expandKey, keyName }) => {
189190
};
190191

191192
const isRender = render && typeof render === 'function';
192-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
193+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
193194
const child =
194-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
195+
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
195196

196197
return (
197198
<Fragment>
@@ -222,9 +223,9 @@ export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>>
222223
};
223224

224225
const isRender = render && typeof render === 'function';
225-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
226+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
226227
const child =
227-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
228+
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
228229

229230
return (
230231
<Fragment>
@@ -251,10 +252,13 @@ export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({
251252
};
252253

253254
const isRender = render && typeof render === 'function';
254-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
255+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
255256
const child =
256257
isRender &&
257-
render({ ...reset, children: children?.href, className: 'w-rjv-value' }, { type: 'value', value: children });
258+
render(
259+
{ ...reset, children: children?.href, className: 'w-rjv-value' },
260+
{ type: 'value', value: children, keyName },
261+
);
258262

259263
return (
260264
<Fragment>
@@ -283,10 +287,11 @@ export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = (
283287
};
284288

285289
const isRender = render && typeof render === 'function';
286-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
290+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
287291
const childStr = children instanceof Date ? children.toLocaleString() : children;
288292
const child =
289-
isRender && render({ ...reset, children: childStr, className: 'w-rjv-value' }, { type: 'value', value: children });
293+
isRender &&
294+
render({ ...reset, children: childStr, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
290295

291296
return (
292297
<Fragment>
@@ -313,9 +318,9 @@ export const TypeUndefined: FC<TypeProps> = ({ children, expandKey, keyName }) =
313318
};
314319

315320
const isRender = render && typeof render === 'function';
316-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
321+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
317322
const child =
318-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
323+
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
319324

320325
return (
321326
<Fragment>
@@ -338,9 +343,9 @@ export const TypeNull: FC<TypeProps> = ({ children, expandKey, keyName }) => {
338343
};
339344

340345
const isRender = render && typeof render === 'function';
341-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
346+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
342347
const child =
343-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
348+
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
344349

345350
return (
346351
<Fragment>
@@ -363,10 +368,13 @@ export const TypeNan: FC<TypeProps> = ({ children, expandKey, keyName }) => {
363368
};
364369

365370
const isRender = render && typeof render === 'function';
366-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
371+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
367372
const child =
368373
isRender &&
369-
render({ ...reset, children: children?.toString(), className: 'w-rjv-value' }, { type: 'value', value: children });
374+
render(
375+
{ ...reset, children: children?.toString(), className: 'w-rjv-value' },
376+
{ type: 'value', value: children, keyName },
377+
);
370378

371379
return (
372380
<Fragment>

0 commit comments

Comments
 (0)