Skip to content

Commit 25b23eb

Browse files
xepozzxepozz
authored
fix: some enhancements (#78)
1 parent ad1c4ba commit 25b23eb

File tree

8 files changed

+56
-53
lines changed

8 files changed

+56
-53
lines changed

‎README.md

+7-6
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,14 @@ const Component = () => (
6060
value={object}
6161
// just define it
6262
valueTypes={[
63+
{
64+
is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
65+
Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value}/>,
66+
},
67+
// or
6368
createDataType(
64-
(value) => typeof value === 'string' &&
65-
value.startsWith('https://i.imgur.com'),
66-
(props) => {
67-
return <Image height={50} width={50} src={props.value}
68-
alt={props.value}/>
69-
}
69+
(value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
70+
(props) => <Image height={50} width={50} src={props.value} alt={props.value}/>,
7071
)
7172
]}
7273
/>

‎src/components/DataKeyPair.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -228,18 +228,20 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
228228
: null
229229
}
230230
{
231-
(isRoot && rootName !== false)
232-
? <>&quot;{rootName}&quot;</>
233-
: isRoot && rootName === false
234-
? <></>
235-
: !isRoot && KeyRenderer.when(downstreamProps)
231+
(isRoot
232+
? (
233+
rootName !== false
234+
? (quotesOnKeys ? <>&quot;{rootName}&quot;</> : <>{rootName}</>)
235+
: null
236+
)
237+
: KeyRenderer.when(downstreamProps)
236238
? <KeyRenderer {...downstreamProps} />
237239
: nestedIndex === undefined && (
238240
isNumberKey
239-
? <Box component='span'
240-
style={{ color: numberKeyColor }}>{key}</Box>
241+
? <Box component='span' style={{ color: numberKeyColor }}>{key}</Box>
241242
: quotesOnKeys ? <>&quot;{key}&quot;</> : <>{key}</>
242243
)
244+
)
243245
}
244246
{
245247
(

‎src/components/DataTypes/Object.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
6565
<CircularArrowsIcon sx={{
6666
fontSize: 12,
6767
color: textColor,
68-
mx: sizeOfValue ? 0.5 : 0
68+
mx: 0.5,
6969
}}/>
7070
{isTrap}
7171
</>
@@ -123,7 +123,6 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
123123
if (iterator && !Array.isArray(value)) {
124124
const elements = []
125125
if (value instanceof Map) {
126-
let _count = 0
127126
for (const item of value) {
128127
// fixme: key might be a object, array, or any value for the `Map<any, any>`
129128
const [k, value] = item
@@ -132,7 +131,6 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
132131
<DataKeyPair key={key} path={[...props.path, key]} value={value}
133132
editable={false}/>
134133
)
135-
_count++
136134
}
137135
} else {
138136
let count = 0

‎src/hooks/useInspect.ts

+20-18
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,31 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
2020
store => store.defaultInspectDepth)
2121
useEffect(() => {
2222
const inspect = getInspectCache(path, nestedIndex)
23-
if (inspect === undefined) {
24-
if (nestedIndex !== undefined) {
25-
setInspectCache(path, false, nestedIndex)
26-
} else {
27-
// do not inspect when it is a cycle reference, otherwise there will have a loop
28-
const inspect = isTrap
29-
? false
30-
: depth < defaultInspectDepth
31-
setInspectCache(path, inspect)
32-
}
23+
if (inspect !== undefined) {
24+
return
25+
}
26+
if (nestedIndex !== undefined) {
27+
setInspectCache(path, false, nestedIndex)
28+
} else {
29+
// do not inspect when it is a cycle reference, otherwise there will have a loop
30+
const inspect = isTrap
31+
? false
32+
: depth < defaultInspectDepth
33+
setInspectCache(path, inspect)
3334
}
3435
}, [defaultInspectDepth, depth, getInspectCache, isTrap, nestedIndex, path, setInspectCache])
3536
const [inspect, set] = useState<boolean>(() => {
3637
const shouldInspect = getInspectCache(path, nestedIndex)
37-
if (shouldInspect === undefined) {
38-
if (nestedIndex !== undefined) {
39-
return false
40-
}
41-
return isTrap
42-
? false
43-
: depth < defaultInspectDepth
38+
if (shouldInspect !== undefined) {
39+
return shouldInspect
40+
}
41+
if (nestedIndex !== undefined) {
42+
return false
4443
}
45-
return shouldInspect
44+
return isTrap
45+
? false
46+
: depth < defaultInspectDepth
47+
4648
})
4749
const setInspect = useCallback<Dispatch<SetStateAction<boolean>>>((apply) => {
4850
set((oldState) => {

‎src/stores/typeRegistry.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const {
5252
} = createStore<ReturnType<typeof createTypeRegistryStore>>()
5353

5454
const objectType: DataType<object> = {
55-
is: (value): value is object => typeof value === 'object',
55+
is: (value) => typeof value === 'object',
5656
Component: ObjectType,
5757
PreComponent: PreObjectType,
5858
PostComponent: PostObjectType
@@ -110,7 +110,7 @@ export function predefined (): DataType<any>[] {
110110

111111
registerType<boolean>(
112112
{
113-
is: (value): value is boolean => typeof value === 'boolean',
113+
is: (value) => typeof value === 'boolean',
114114
...createEasyType(
115115
'bool',
116116
({ value }) => <>{value ? 'true' : 'false'}</>,
@@ -133,7 +133,7 @@ export function predefined (): DataType<any>[] {
133133

134134
registerType<Date>(
135135
{
136-
is: (value): value is Date => value instanceof Date,
136+
is: (value) => value instanceof Date,
137137
...createEasyType(
138138
'date',
139139
({ value }) => <>{value.toLocaleTimeString('en-us', displayOptions)}</>,
@@ -146,7 +146,7 @@ export function predefined (): DataType<any>[] {
146146

147147
registerType<null>(
148148
{
149-
is: (value): value is null => value === null,
149+
is: (value) => value === null,
150150
...createEasyType(
151151
'null',
152152
() => {
@@ -171,7 +171,7 @@ export function predefined (): DataType<any>[] {
171171

172172
registerType<undefined>(
173173
{
174-
is: (value): value is undefined => value === undefined,
174+
is: (value) => value === undefined,
175175
...createEasyType(
176176
'undefined',
177177
() => {
@@ -198,7 +198,7 @@ export function predefined (): DataType<any>[] {
198198

199199
registerType<string>(
200200
{
201-
is: (value): value is string => typeof value === 'string',
201+
is: (value) => typeof value === 'string',
202202
...createEasyType(
203203
'string',
204204
(props) => {
@@ -238,7 +238,7 @@ export function predefined (): DataType<any>[] {
238238

239239
registerType<Function>(
240240
{
241-
is: (value): value is Function => typeof value === 'function',
241+
is: (value) => typeof value === 'function',
242242
Component: FunctionType,
243243
PreComponent: PreFunctionType,
244244
PostComponent: PostFunctionType
@@ -249,7 +249,7 @@ export function predefined (): DataType<any>[] {
249249

250250
registerType<number>(
251251
{
252-
is: (value): value is number => typeof value === 'number' && isNaN(value),
252+
is: (value) => typeof value === 'number' && isNaN(value),
253253
...createEasyType(
254254
'NaN',
255255
() => {
@@ -276,7 +276,7 @@ export function predefined (): DataType<any>[] {
276276

277277
registerType<number>(
278278
{
279-
is: (value): value is number => typeof value === 'number' &&
279+
is: (value) => typeof value === 'number' &&
280280
!isInt(value),
281281
...createEasyType(
282282
'float',
@@ -291,7 +291,7 @@ export function predefined (): DataType<any>[] {
291291

292292
registerType<number>(
293293
{
294-
is: (value): value is number => typeof value === 'number' && isInt(value),
294+
is: (value) => typeof value === 'number' && isInt(value),
295295
...createEasyType(
296296
'int',
297297
({ value }) => <>{`${value}`}</>,
@@ -305,7 +305,7 @@ export function predefined (): DataType<any>[] {
305305

306306
registerType<bigint>(
307307
{
308-
is: (value): value is bigint => typeof value === 'bigint',
308+
is: (value) => typeof value === 'bigint',
309309
...createEasyType(
310310
'bigint',
311311
({ value }) => <>{`${value}n`}</>,

‎src/type.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export type DataType<ValueType = unknown> = {
2525
/**
2626
* Whether the value belongs to the data type
2727
*/
28-
is: (value: unknown) => value is ValueType
28+
is: (value: unknown) => boolean
2929
Component: React.ComponentType<DataItemProps<ValueType>>
3030
Editor?: React.ComponentType<EditorProps<ValueType>>
3131
PreComponent?: React.ComponentType<DataItemProps<ValueType>>

‎src/utils/index.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function createDataType<ValueType = unknown> (
2828
is: (value: unknown) => boolean,
2929
Component: React.ComponentType<DataItemProps<ValueType>>
3030
): {
31-
is: (value: unknown) => value is ValueType
31+
is: (value: unknown) => boolean
3232
Component: React.ComponentType<DataItemProps<ValueType>>
3333
}
3434
// case 2: you only render with a single component with editor
@@ -37,7 +37,7 @@ export function createDataType<ValueType = unknown> (
3737
Component: React.ComponentType<DataItemProps<ValueType>>,
3838
Editor: React.ComponentType<EditorProps<ValueType>>
3939
): {
40-
is: (value: unknown) => value is ValueType
40+
is: (value: unknown) => boolean
4141
Component: React.ComponentType<DataItemProps<ValueType>>
4242
Editor: React.ComponentType<DataItemProps<ValueType>>
4343
}
@@ -49,7 +49,7 @@ export function createDataType<ValueType = unknown> (
4949
PreComponent: React.ComponentType<DataItemProps<ValueType>>,
5050
PostComponent: React.ComponentType<DataItemProps<ValueType>>
5151
): {
52-
is: (value: unknown) => value is ValueType
52+
is: (value: unknown) => boolean
5353
Component: React.ComponentType<DataItemProps<ValueType>>
5454
PreComponent: React.ComponentType<DataItemProps<ValueType>>
5555
PostComponent: React.ComponentType<DataItemProps<ValueType>>
@@ -62,7 +62,7 @@ export function createDataType<ValueType = unknown> (
6262
PreComponent: React.ComponentType<DataItemProps<ValueType>>,
6363
PostComponent: React.ComponentType<DataItemProps<ValueType>>
6464
): {
65-
is: (value: unknown) => value is ValueType
65+
is: (value: unknown) => boolean
6666
Component: React.ComponentType<DataItemProps<ValueType>>
6767
Editor: React.ComponentType<DataItemProps<ValueType>>
6868
PreComponent: React.ComponentType<DataItemProps<ValueType>>

‎tests/index.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ describe('render <JsonViewer/> with multiple instances', () => {
141141
value={undefined}
142142
valueTypes={[
143143
{
144-
is: (() => true) as any,
144+
is: () => true,
145145
Component: () => {
146146
return <>first viewer</>
147147
}
@@ -153,7 +153,7 @@ describe('render <JsonViewer/> with multiple instances', () => {
153153
value={undefined}
154154
valueTypes={[
155155
{
156-
is: (() => true) as any,
156+
is: () => true,
157157
Component: () => {
158158
return <>second viewer</>
159159
}
@@ -233,7 +233,7 @@ describe('render <JsonViewer/> with props', () => {
233233
render(<JsonViewer value={undefined} valueTypes={[]}/>)
234234
render(<JsonViewer value={undefined} valueTypes={[
235235
{
236-
is: (value: unknown): value is string => typeof value === 'string',
236+
is: (value) => typeof value === 'string',
237237
Component: (props) => {
238238
expectTypeOf(props.value).toMatchTypeOf<unknown>()
239239
return null

0 commit comments

Comments
 (0)