Skip to content

Commit 108167d

Browse files
cloud-walkercloud-walker
committed
♻ Convert DataHandler to function component
1 parent eca74f1 commit 108167d

File tree

3 files changed

+84
-92
lines changed

3 files changed

+84
-92
lines changed

‎.changeset/kind-brooms-admire.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cloudwalker/react-inspect": patch
3+
---
4+
5+
Convert all internal components to function components

‎packages/react-inspect/src/components/DataHandler/DataHandler.tsx‎

Lines changed: 78 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,101 @@
1-
import {Component} from 'react'
2-
31
import {CollapseHandler} from '../CollapseHandler'
42
import {Key} from '../Key'
53
import {Level} from '../Level'
64
import {Punctuation} from '../Punctuation'
75
import {Value} from '../Value'
86

9-
export class DataHandler extends Component<{
10-
theme?: 'gloom' | 'default'
7+
export function DataHandler({
8+
data,
9+
outer = false,
10+
theme = 'default',
11+
}: {
1112
data: unknown
12-
outer: boolean
13-
}> {
14-
static displayName = 'ReactInspectDataHandler'
15-
static defaultProps = {
16-
outer: false,
13+
outer?: boolean
14+
theme?: 'gloom' | 'default'
15+
}) {
16+
if (typeof data == 'string') {
17+
return <Value type="string" theme={theme}>{`"${data}"`}</Value>
1718
}
1819

19-
render() {
20-
const {data, outer, theme = 'default'} = this.props
21-
22-
if (typeof data == 'string') {
23-
return <Value type="string" theme={theme}>{`"${data}"`}</Value>
24-
}
25-
26-
if (typeof data == 'number') {
27-
return <Value type="number" theme={theme}>{`${data}`}</Value>
28-
}
29-
30-
if (typeof data == 'function') {
31-
const value = (
32-
<Value type="function" theme={theme}>
33-
{String(data).trim()}
34-
</Value>
35-
)
20+
if (typeof data == 'number') {
21+
return <Value type="number" theme={theme}>{`${data}`}</Value>
22+
}
3623

37-
if (outer) {
38-
return value
39-
}
24+
if (typeof data == 'function') {
25+
const value = (
26+
<Value type="function" theme={theme}>
27+
{String(data).trim()}
28+
</Value>
29+
)
4030

41-
return (
42-
<CollapseHandler>
43-
{(show) =>
44-
show ? value : {...value, props: {...value.props, children: 'fn'}}
45-
}
46-
</CollapseHandler>
47-
)
31+
if (outer) {
32+
return value
4833
}
4934

50-
if (Array.isArray(data)) {
51-
const value = data.map((x, i) => (
52-
<Level key={i}>
53-
<DataHandler data={x} theme={theme} />
54-
</Level>
55-
))
35+
return (
36+
<CollapseHandler>
37+
{(show) =>
38+
show ? value : {...value, props: {...value.props, children: 'fn'}}
39+
}
40+
</CollapseHandler>
41+
)
42+
}
5643

57-
return (
58-
<span>
59-
<Punctuation theme={theme}>{'['}</Punctuation>
60-
{outer ? (
61-
value
62-
) : (
63-
<CollapseHandler>
64-
{(show) =>
65-
show ? (
66-
<>{value}</>
67-
) : (
68-
<Punctuation theme={theme}>...</Punctuation>
69-
)
70-
}
71-
</CollapseHandler>
72-
)}
73-
<Punctuation theme={theme}>{']'}</Punctuation>
74-
</span>
75-
)
76-
}
44+
if (Array.isArray(data)) {
45+
const value = data.map((x, i) => (
46+
<Level key={i}>
47+
<DataHandler data={x} theme={theme} />
48+
</Level>
49+
))
7750

78-
if (isRecord(data)) {
79-
const value = Object.keys(data).map((x) => (
80-
<Level key={x}>
81-
<Key theme={theme}>{x}</Key>
82-
<Punctuation theme={theme}>:</Punctuation>{' '}
83-
<DataHandler data={data[x]} theme={theme} />
84-
</Level>
85-
))
51+
return (
52+
<span>
53+
<Punctuation theme={theme}>{'['}</Punctuation>
54+
{outer ? (
55+
value
56+
) : (
57+
<CollapseHandler>
58+
{(show) =>
59+
show ? <>{value}</> : <Punctuation theme={theme}>...</Punctuation>
60+
}
61+
</CollapseHandler>
62+
)}
63+
<Punctuation theme={theme}>{']'}</Punctuation>
64+
</span>
65+
)
66+
}
8667

87-
return (
88-
<span>
89-
<Punctuation theme={theme}>{'{'}</Punctuation>
90-
{outer ? (
91-
value
92-
) : (
93-
<CollapseHandler>
94-
{(show) =>
95-
show ? (
96-
<>{value}</>
97-
) : (
98-
<Punctuation theme={theme}>...</Punctuation>
99-
)
100-
}
101-
</CollapseHandler>
102-
)}
103-
<Punctuation theme={theme}>{'}'}</Punctuation>
104-
</span>
105-
)
106-
}
68+
if (isRecord(data)) {
69+
const value = Object.keys(data).map((x) => (
70+
<Level key={x}>
71+
<Key theme={theme}>{x}</Key>
72+
<Punctuation theme={theme}>:</Punctuation>{' '}
73+
<DataHandler data={data[x]} theme={theme} />
74+
</Level>
75+
))
10776

108-
return <Value type="keyword" theme={theme}>{`${data}`}</Value>
77+
return (
78+
<span>
79+
<Punctuation theme={theme}>{'{'}</Punctuation>
80+
{outer ? (
81+
value
82+
) : (
83+
<CollapseHandler>
84+
{(show) =>
85+
show ? <>{value}</> : <Punctuation theme={theme}>...</Punctuation>
86+
}
87+
</CollapseHandler>
88+
)}
89+
<Punctuation theme={theme}>{'}'}</Punctuation>
90+
</span>
91+
)
10992
}
93+
94+
return <Value type="keyword" theme={theme}>{`${data}`}</Value>
11095
}
11196

97+
DataHandler.displayName = 'ReactInspectDataHandler'
98+
11299
function isRecord(data: unknown): data is Record<string, unknown> {
113100
return data != null && typeof data == 'object'
114101
}

‎packages/react-inspect/src/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export {Inspect} from './components/ReactInspect'
1+
export {Inspect} from './components/Inspect'

0 commit comments

Comments
 (0)