Skip to content

Commit 896344b

Browse files
yyytae0Uta-Gabia
yyytae0
and
Uta-Gabia
authored
feat: set keys as props on values to get when use render function to render values (#74)
Co-authored-by: uta <tyyoun@gabia.com>
1 parent 71eeaf2 commit 896344b

File tree

4 files changed

+54
-39
lines changed

4 files changed

+54
-39
lines changed

‎core/src/comps/KeyValues.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,11 @@ export const KeyValues = <T extends object>(props: KeyValuesProps<T>) => {
2525
const defaultExpanded =
2626
typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
2727
const isExpanded = expands[expandKey] ?? defaultExpanded;
28-
const shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, { value, keys, level });
29-
if (expands[expandKey] === undefined && shouldExpandNodeInitially && !shouldExpand) {
28+
if (
29+
expands[expandKey] === undefined &&
30+
shouldExpandNodeInitially &&
31+
shouldExpandNodeInitially(isExpanded, { value, keys, level })
32+
) {
3033
return null;
3134
}
3235
if (isExpanded) {
@@ -116,7 +119,7 @@ export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
116119
return (
117120
<RowComp className="w-rjv-line" value={value} keyName={keyName} keys={keys} parentValue={parentValue} {...reset}>
118121
<KayName keyName={keyName} value={value} keys={keys} parentValue={parentValue} />
119-
<Value keyName={keyName!} value={value} />
122+
<Value keyName={keyName!} value={value} keys={keys} />
120123
<Copied keyName={keyName} value={value as object} keys={keys} parentValue={parentValue} expandKey={subkeyid} />
121124
</RowComp>
122125
);

‎core/src/comps/Value.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ export const isFloat = (n: number) => (Number(n) === n && n % 1 !== 0) || isNaN(
1616
interface ValueProps {
1717
value: unknown;
1818
keyName: string | number;
19+
keys?: (string | number)[];
1920
}
2021

2122
export const Value = (props: ValueProps) => {
22-
const { value, keyName } = props;
23-
const reset = { keyName };
23+
const { value, keyName, keys } = props;
24+
const reset = { keyName, keys };
2425
if (value instanceof URL) {
2526
return <TypeUrl {...reset}>{value}</TypeUrl>;
2627
}

‎core/src/store/Types.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ type TypesElementProps<T extends TagType = 'span'> = {
55
as?: T;
66
render?: (
77
props: TypesElement<T>,
8-
result: { type: 'type' | 'value'; value?: unknown; keyName: string | number },
8+
result: { type: 'type' | 'value'; value?: unknown; keyName: string | number; keys?: (string | number)[] },
99
) => React.ReactNode;
1010
'data-type'?: string;
1111
};

‎core/src/types/index.tsx‎

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,10 @@ const defalutStyle: React.CSSProperties = {
5353

5454
type TypeProps = PropsWithChildren<{
5555
keyName: string | number;
56+
keys?: (string | number)[];
5657
}>;
5758

58-
export const TypeString: FC<TypeProps> = ({ children = '', keyName }) => {
59+
export const TypeString: FC<TypeProps> = ({ children = '', keyName, keys }) => {
5960
const { Str = {}, displayDataTypes } = useTypesStore();
6061
const { shortenTextAfterLength: length = 30, stringEllipsis = '...' } = useStore();
6162
const { as, render, ...reset } = Str;
@@ -82,10 +83,10 @@ export const TypeString: FC<TypeProps> = ({ children = '', keyName }) => {
8283
const text = shorten ? `${childrenStr.slice(0, length)}${stringEllipsis}` : childrenStr;
8384

8485
const isRender = render && typeof render === 'function';
85-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
86+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
8687
const cls = shorten ? 'w-rjv-value w-rjv-value-short' : 'w-rjv-value';
8788
const child =
88-
isRender && render({ ...reset, children: text, className: cls }, { type: 'value', value: children, keyName });
89+
isRender && render({ ...reset, children: text, className: cls }, { type: 'value', value: children, keyName, keys });
8990
return (
9091
<Fragment>
9192
{displayDataTypes && (type || <Comp {...reset} style={style} />)}
@@ -104,7 +105,7 @@ export const TypeString: FC<TypeProps> = ({ children = '', keyName }) => {
104105

105106
TypeString.displayName = 'JVR.TypeString';
106107

107-
export const TypeTrue: FC<TypeProps> = ({ children, keyName }) => {
108+
export const TypeTrue: FC<TypeProps> = ({ children, keyName, keys }) => {
108109
const { True = {}, displayDataTypes } = useTypesStore();
109110
const { as, render, ...reset } = True;
110111
const Comp = as || 'span';
@@ -114,9 +115,10 @@ export const TypeTrue: FC<TypeProps> = ({ children, keyName }) => {
114115
};
115116

116117
const isRender = render && typeof render === 'function';
117-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
118+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
118119
const child =
119-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
120+
isRender &&
121+
render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName, keys });
120122
return (
121123
<Fragment>
122124
{displayDataTypes && (type || <Comp {...reset} style={style} />)}
@@ -131,7 +133,7 @@ export const TypeTrue: FC<TypeProps> = ({ children, keyName }) => {
131133

132134
TypeTrue.displayName = 'JVR.TypeTrue';
133135

134-
export const TypeFalse: FC<TypeProps> = ({ children, keyName }) => {
136+
export const TypeFalse: FC<TypeProps> = ({ children, keyName, keys }) => {
135137
const { False = {}, displayDataTypes } = useTypesStore();
136138
const { as, render, ...reset } = False;
137139
const Comp = as || 'span';
@@ -141,9 +143,10 @@ export const TypeFalse: FC<TypeProps> = ({ children, keyName }) => {
141143
};
142144

143145
const isRender = render && typeof render === 'function';
144-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
146+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
145147
const child =
146-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
148+
isRender &&
149+
render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName, keys });
147150

148151
return (
149152
<Fragment>
@@ -159,7 +162,7 @@ export const TypeFalse: FC<TypeProps> = ({ children, keyName }) => {
159162

160163
TypeFalse.displayName = 'JVR.TypeFalse';
161164

162-
export const TypeFloat: FC<TypeProps> = ({ children, keyName }) => {
165+
export const TypeFloat: FC<TypeProps> = ({ children, keyName, keys }) => {
163166
const { Float = {}, displayDataTypes } = useTypesStore();
164167
const { as, render, ...reset } = Float;
165168
const Comp = as || 'span';
@@ -169,9 +172,10 @@ export const TypeFloat: FC<TypeProps> = ({ children, keyName }) => {
169172
};
170173

171174
const isRender = render && typeof render === 'function';
172-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
175+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
173176
const child =
174-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
177+
isRender &&
178+
render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName, keys });
175179

176180
return (
177181
<Fragment>
@@ -187,7 +191,7 @@ export const TypeFloat: FC<TypeProps> = ({ children, keyName }) => {
187191

188192
TypeFloat.displayName = 'JVR.TypeFloat';
189193

190-
export const TypeInt: FC<TypeProps> = ({ children, keyName }) => {
194+
export const TypeInt: FC<TypeProps> = ({ children, keyName, keys }) => {
191195
const { Int = {}, displayDataTypes } = useTypesStore();
192196
const { as, render, ...reset } = Int;
193197
const Comp = as || 'span';
@@ -197,9 +201,10 @@ export const TypeInt: FC<TypeProps> = ({ children, keyName }) => {
197201
};
198202

199203
const isRender = render && typeof render === 'function';
200-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
204+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
201205
const child =
202-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
206+
isRender &&
207+
render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName, keys });
203208

204209
return (
205210
<Fragment>
@@ -215,7 +220,7 @@ export const TypeInt: FC<TypeProps> = ({ children, keyName }) => {
215220

216221
TypeInt.displayName = 'JVR.TypeInt';
217222

218-
export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
223+
export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>> = ({ children, keyName, keys }) => {
219224
const { Bigint: CompBigint = {}, displayDataTypes } = useTypesStore();
220225
const { as, render, ...reset } = CompBigint;
221226
const Comp = as || 'span';
@@ -225,9 +230,10 @@ export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>>
225230
};
226231

227232
const isRender = render && typeof render === 'function';
228-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
233+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
229234
const child =
230-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
235+
isRender &&
236+
render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName, keys });
231237

232238
return (
233239
<Fragment>
@@ -243,7 +249,7 @@ export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>>
243249

244250
TypeBigint.displayName = 'JVR.TypeFloat';
245251

246-
export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
252+
export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({ children, keyName, keys }) => {
247253
const { Url = {}, displayDataTypes } = useTypesStore();
248254
const { as, render, ...reset } = Url;
249255
const Comp = as || 'span';
@@ -253,12 +259,12 @@ export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({
253259
};
254260

255261
const isRender = render && typeof render === 'function';
256-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
262+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
257263
const child =
258264
isRender &&
259265
render(
260266
{ ...reset, children: children?.href, className: 'w-rjv-value' },
261-
{ type: 'value', value: children, keyName },
267+
{ type: 'value', value: children, keyName, keys },
262268
);
263269

264270
return (
@@ -277,7 +283,7 @@ export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({
277283

278284
TypeUrl.displayName = 'JVR.TypeUrl';
279285

280-
export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
286+
export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = ({ children, keyName, keys }) => {
281287
const { Date: CompData = {}, displayDataTypes } = useTypesStore();
282288
const { as, render, ...reset } = CompData;
283289
const Comp = as || 'span';
@@ -287,11 +293,14 @@ export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = (
287293
};
288294

289295
const isRender = render && typeof render === 'function';
290-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
296+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
291297
const childStr = children instanceof Date ? children.toLocaleString() : children;
292298
const child =
293299
isRender &&
294-
render({ ...reset, children: childStr, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
300+
render(
301+
{ ...reset, children: childStr, className: 'w-rjv-value' },
302+
{ type: 'value', value: children, keyName, keys },
303+
);
295304

296305
return (
297306
<Fragment>
@@ -307,7 +316,7 @@ export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = (
307316

308317
TypeDate.displayName = 'JVR.TypeDate';
309318

310-
export const TypeUndefined: FC<TypeProps> = ({ children, keyName }) => {
319+
export const TypeUndefined: FC<TypeProps> = ({ children, keyName, keys }) => {
311320
const { Undefined = {}, displayDataTypes } = useTypesStore();
312321
const { as, render, ...reset } = Undefined;
313322
const Comp = as || 'span';
@@ -317,9 +326,10 @@ export const TypeUndefined: FC<TypeProps> = ({ children, keyName }) => {
317326
};
318327

319328
const isRender = render && typeof render === 'function';
320-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
329+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
321330
const child =
322-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
331+
isRender &&
332+
render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName, keys });
323333

324334
return (
325335
<Fragment>
@@ -331,7 +341,7 @@ export const TypeUndefined: FC<TypeProps> = ({ children, keyName }) => {
331341

332342
TypeUndefined.displayName = 'JVR.TypeUndefined';
333343

334-
export const TypeNull: FC<TypeProps> = ({ children, keyName }) => {
344+
export const TypeNull: FC<TypeProps> = ({ children, keyName, keys }) => {
335345
const { Null = {}, displayDataTypes } = useTypesStore();
336346
const { as, render, ...reset } = Null;
337347
const Comp = as || 'span';
@@ -341,9 +351,10 @@ export const TypeNull: FC<TypeProps> = ({ children, keyName }) => {
341351
};
342352

343353
const isRender = render && typeof render === 'function';
344-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
354+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
345355
const child =
346-
isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName });
356+
isRender &&
357+
render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children, keyName, keys });
347358

348359
return (
349360
<Fragment>
@@ -355,7 +366,7 @@ export const TypeNull: FC<TypeProps> = ({ children, keyName }) => {
355366

356367
TypeNull.displayName = 'JVR.TypeNull';
357368

358-
export const TypeNan: FC<TypeProps> = ({ children, keyName }) => {
369+
export const TypeNan: FC<TypeProps> = ({ children, keyName, keys }) => {
359370
const { Nan = {}, displayDataTypes } = useTypesStore();
360371
const { as, render, ...reset } = Nan;
361372
const Comp = as || 'span';
@@ -365,12 +376,12 @@ export const TypeNan: FC<TypeProps> = ({ children, keyName }) => {
365376
};
366377

367378
const isRender = render && typeof render === 'function';
368-
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName });
379+
const type = isRender && render({ ...reset, style }, { type: 'type', value: children, keyName, keys });
369380
const child =
370381
isRender &&
371382
render(
372383
{ ...reset, children: children?.toString(), className: 'w-rjv-value' },
373-
{ type: 'value', value: children, keyName },
384+
{ type: 'value', value: children, keyName, keys },
374385
);
375386

376387
return (

0 commit comments

Comments
 (0)