Skip to content

Commit f334c5d

Browse files
jaywcjlovejaywcjlove
committed
feat: support Set/Map display. (#13)
1 parent 991e57a commit f334c5d

File tree

5 files changed

+64
-29
lines changed

5 files changed

+64
-29
lines changed

‎core/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,9 +229,11 @@ const customTheme = {
229229
'--w-rjv-type-boolean-color': '#559bd4',
230230
'--w-rjv-type-date-color': '#586e75',
231231
'--w-rjv-type-url-color': '#0969da',
232-
'--w-rjv-type-null-color': '#d33682',
233232
'--w-rjv-type-nan-color': '#859900',
234233
'--w-rjv-type-undefined-color': '#586e75',
234+
'--w-rjv-type-null-color': '#d33682',
235+
'--w-rjv-type-set-color': '#268bd2',
236+
'--w-rjv-type-map-color': '#268bd2',
235237
};
236238

237239
export default function Demo() {

‎core/src/node.tsx

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, Fragment, PropsWithChildren, useId, cloneElement, useState, useEffect, forwardRef } from 'react';
2-
import { ValueView, ValueViewProps, Colon, Label, LabelProps, Line, typeMap } from './value';
2+
import { ValueView, Type, ValueViewProps, Colon, Label, LabelProps, Line, typeMap } from './value';
33
import { TriangleArrow } from './arrow/TriangleArrow';
44
import { useExpandsStatus, store } from './store';
55
import { JsonViewProps } from './';
@@ -33,6 +33,8 @@ export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
3333
keyid?: string;
3434
level?: number;
3535
parentValue?: T;
36+
isSet?: boolean;
37+
isMap?: boolean;
3638
namespace?: Array<string | number>;
3739
setParentValue?: React.Dispatch<React.SetStateAction<T>>;
3840
}
@@ -56,6 +58,8 @@ export const RootNode = forwardRef(
5658
keyid = 'root',
5759
quotes = '"',
5860
namespace = [],
61+
isSet = false,
62+
isMap = false,
5963
onCopied,
6064
onExpand,
6165
parentValue,
@@ -167,6 +171,8 @@ export const RootNode = forwardRef(
167171
<Colon />
168172
</Fragment>
169173
)}
174+
{isSet && <Type type="Set" />}
175+
{isMap && <Type type="Map" />}
170176
<Meta start isArray={isArray} level={level} render={components.braces} />
171177
{!expand && <Ellipsis render={components.ellipsis} count={nameKeys.length} level={level} />}
172178
{!expand && <Meta isArray={isArray} level={level} render={components.braces} />}
@@ -188,18 +194,23 @@ export const RootNode = forwardRef(
188194
{entries.length > 0 &&
189195
[...entries].map(([key, itemVal], idx) => {
190196
const item = itemVal as T;
197+
const isMySet = item instanceof Set;
198+
const isMyMap = item instanceof Map;
199+
let myValue = isMySet ? Array.from(item as Set<any>) : isMyMap ? Object.fromEntries(item) : item;
191200
const isEmpty =
192-
(Array.isArray(item) && (item as []).length === 0) ||
193-
(typeof item === 'object' &&
194-
item &&
195-
!((item as any) instanceof Date) &&
196-
Object.keys(item).length === 0);
197-
if (Array.isArray(item) && !isEmpty) {
201+
(Array.isArray(myValue) && (myValue as []).length === 0) ||
202+
(typeof myValue === 'object' &&
203+
myValue &&
204+
!((myValue as any) instanceof Date) &&
205+
Object.keys(myValue).length === 0);
206+
if ((Array.isArray(myValue) || isMySet || isMyMap) && !isEmpty) {
198207
const label = (isArray ? idx : key) as string;
199208
return (
200209
<Line key={label + idx} className="w-rjv-wrap">
201210
<RootNode
202-
value={item}
211+
value={myValue}
212+
isSet={isMySet}
213+
isMap={isMyMap}
203214
namespace={[...namespace, label]}
204215
keyName={label}
205216
keyid={keyid + subkeyid + label}
@@ -208,11 +219,11 @@ export const RootNode = forwardRef(
208219
</Line>
209220
);
210221
}
211-
if (typeof item === 'object' && item && !((item as any) instanceof Date) && !isEmpty) {
222+
if (typeof myValue === 'object' && myValue && !((myValue as any) instanceof Date) && !isEmpty) {
212223
return (
213224
<Line key={key + '' + idx} className="w-rjv-wrap">
214225
<RootNode
215-
value={item}
226+
value={myValue}
216227
namespace={[...namespace, key]}
217228
keyName={key}
218229
keyid={keyid + subkeyid + key}
@@ -221,12 +232,12 @@ export const RootNode = forwardRef(
221232
</Line>
222233
);
223234
}
224-
if (typeof item === 'function') {
235+
if (typeof myValue === 'function') {
225236
return;
226237
}
227238
const renderKey = (
228239
<Semicolon
229-
value={item}
240+
value={myValue}
230241
data-keys={keyid}
231242
quotes={quotes}
232243
namespace={[...namespace, key]}
@@ -237,7 +248,7 @@ export const RootNode = forwardRef(
237248
keyName={key}
238249
/>
239250
);
240-
const length = Array.isArray(item) ? item.length : getLength(item);
251+
const length = Array.isArray(myValue) ? myValue.length : getLength(myValue);
241252
countInfo = <CountInfo>{length}</CountInfo>;
242253
if (components.countInfo) {
243254
countInfo = components.countInfo({ count: length, level, visible: expand }) || countInfo;
@@ -251,7 +262,8 @@ export const RootNode = forwardRef(
251262
countInfo={countInfo}
252263
renderKey={renderKey}
253264
keyName={key}
254-
value={item}
265+
isSet={isSet}
266+
value={myValue}
255267
/>
256268
);
257269
})}

‎core/src/value.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,14 @@ export const typeMap = {
4040
color: 'var(--w-rjv-type-null-color, #d33682)',
4141
label: 'null',
4242
},
43+
Set: {
44+
color: 'var(--w-rjv-type-set-color, #268bd2)',
45+
label: 'Set',
46+
},
47+
Map: {
48+
color: 'var(--w-rjv-type-map-color, #268bd2)',
49+
label: 'Map',
50+
},
4351
NaN: {
4452
color: 'var(--w-rjv-type-nan-color, #859900)',
4553
label: 'NaN',
@@ -75,6 +83,7 @@ export interface ValueViewProps<T extends object>
7583
displayDataTypes: boolean;
7684
displayObjectSize: boolean;
7785
enableClipboard: boolean;
86+
isSet: boolean;
7887
indentWidth: number;
7988
level?: number;
8089
shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
@@ -145,7 +154,6 @@ const RenderShortenTextValue: FC<PropsWithChildren<RenderStringValueProps>> = ({
145154
const childrenStr = children as string;
146155
const [shorten, setShorten] = useState(length && childrenStr.length >= length);
147156
const click = () => {
148-
console.log(shorten);
149157
if (length && childrenStr.length <= length) return setShorten(false);
150158
setShorten(!shorten);
151159
};
@@ -189,6 +197,7 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
189197
data,
190198
keyName,
191199
indentWidth,
200+
isSet,
192201
namespace,
193202
renderKey,
194203
components = {},
@@ -200,7 +209,6 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
200209
shortenTextAfterLength,
201210
...reset
202211
} = props;
203-
204212
let color = '';
205213
let style = {} as React.CSSProperties;
206214

‎www/src/example/default.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,17 @@ export const themesData = {
2323
monokai: monokaiTheme,
2424
};
2525

26+
const mySet = new Set();
27+
mySet.add(1); // Set(1) { 1 }
28+
mySet.add(5); // Set(2) { 1, 5 }
29+
mySet.add(5); // Set(2) { 1, 5 }
30+
mySet.add('some text'); // Set(3) { 1, 5, 'some text' }
31+
32+
const myMap = new Map();
33+
34+
myMap.set('www', 'foo');
35+
myMap.set(1, 'bar');
36+
2637
const avatar = 'https://i.imgur.com/1bX5QH6.jpg';
2738
// const longArray = new Array(1000).fill(1);
2839
function aPlusB(a: number, b: number) {
@@ -54,6 +65,8 @@ export const example = {
5465
// longArray,
5566
string_number: '1234',
5667
string_empty: '',
68+
mySet,
69+
myMap,
5770
};
5871

5972
const Label = styled.label`

‎www/src/example/editor.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Fragment, useState, useEffect } from 'react';
1+
import { Fragment, useState } from 'react';
22
import { styled } from 'styled-components';
33
import JsonViewEditor from '@uiw/react-json-view/editor';
44
import { themesData, example } from './default';
@@ -19,18 +19,18 @@ const Options = styled.div`
1919
export function ExampleEditor() {
2020
const themeKeys = Object.keys(themesData) as Array<keyof typeof themesData>;
2121
const [theme, setTheme] = useState<React.CSSProperties>(themesData[themeKeys[0]]);
22-
const [src, setSrc] = useState({ ...example });
22+
const [src] = useState({ ...example });
2323

24-
useEffect(() => {
25-
const loop = () => {
26-
setSrc((src) => ({
27-
...src,
28-
timer: src.timer + 1,
29-
}));
30-
};
31-
const id = setInterval(loop, 1000);
32-
return () => clearInterval(id);
33-
}, []);
24+
// useEffect(() => {
25+
// const loop = () => {
26+
// setSrc((src) => ({
27+
// ...src,
28+
// timer: src.timer + 1,
29+
// }));
30+
// };
31+
// const id = setInterval(loop, 1000);
32+
// return () => clearInterval(id);
33+
// }, []);
3434

3535
return (
3636
<Fragment>

0 commit comments

Comments
 (0)