smallstonesk
4 years ago
5 changed files with 0 additions and 315 deletions
@ -1,114 +0,0 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
// import DataList from './dataList'
|
|||
import Simple from './simple' |
|||
import styles from './index.module.less' |
|||
|
|||
const previewComplex = (data: any) => { |
|||
if (Array.isArray(data)) { |
|||
return <span>Array[{data.length}]</span> |
|||
} |
|||
switch (typeof data) { |
|||
case 'function': |
|||
return <span>{data.name || 'fn'}()</span> |
|||
case 'object': |
|||
case 'undefined': |
|||
case null: |
|||
return '{…}' |
|||
} |
|||
return null |
|||
} |
|||
|
|||
interface Props { |
|||
startOpen?: boolean |
|||
noSort?: boolean |
|||
name: string |
|||
value: any |
|||
} |
|||
|
|||
interface State { |
|||
open: boolean |
|||
loading?: boolean |
|||
} |
|||
|
|||
const DataItem: React.FC<Props> = (props) => { |
|||
const [state, setState] = useState<State>({ open: !!props.startOpen, loading: false }) |
|||
let opener = null |
|||
let children = null |
|||
let { name } = props |
|||
let preview |
|||
|
|||
useEffect(() => { |
|||
if (state.open && props.value) { |
|||
setState({ loading: true, open: true }) |
|||
} |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
const data = props.value |
|||
const otype = typeof data |
|||
let complex = true |
|||
|
|||
if ( |
|||
otype === 'number' || |
|||
otype === 'string' || |
|||
data == null || |
|||
otype === 'boolean' |
|||
) { |
|||
preview = <Simple data={data} /> |
|||
complex = false |
|||
} else { |
|||
preview = previewComplex(data) |
|||
} |
|||
|
|||
const open = state.open |
|||
|
|||
if (complex && Object.keys(props.value).length) { |
|||
opener = ( |
|||
<div onClick={toggleOpen()} className={styles.opener}> |
|||
{open ? |
|||
<span className={styles.openerOpen} /> : |
|||
<span className={styles.openerClose} /> |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
// if (complex && open) {
|
|||
// children = <DataList data={data} />
|
|||
// }
|
|||
|
|||
if (name.length > 50) { |
|||
name = name.slice(0, 50) + '…' |
|||
} |
|||
}, [props]) |
|||
|
|||
const toggleOpen = () => { |
|||
return () => { |
|||
const data = props.value |
|||
const isArray = Array.isArray(data) |
|||
|
|||
if (state.loading) return |
|||
if (!isArray && !Object.keys(props.value).length) return |
|||
if (isArray && data.length === 0) return |
|||
|
|||
setState({ |
|||
open: !state.open |
|||
}) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<li className={styles.codeWrap}> |
|||
<div className={styles.codeBox}> |
|||
{opener} |
|||
<div onClick={toggleOpen()} className={styles.codeKey}> |
|||
{name ? `${name}:` : ''} |
|||
</div> |
|||
<div className={styles.codeVal}>{preview}</div> |
|||
</div> |
|||
{children} |
|||
</li> |
|||
) |
|||
} |
|||
|
|||
export default DataItem |
@ -1,64 +0,0 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import DataItem from './dataItem' |
|||
import styles from './index.module.less' |
|||
|
|||
interface DataListProps { |
|||
data: any |
|||
startOpen?: boolean |
|||
noSort?: boolean |
|||
} |
|||
|
|||
const alphanumericSort = (a: string, b: string): number => { |
|||
if ('' + +a === a) { |
|||
if ('' + +b !== b) { |
|||
return -1 |
|||
} |
|||
return +a < +b ? -1 : 1 |
|||
} |
|||
return a < b ? -1 : 1 |
|||
} |
|||
|
|||
const DataList: React.FC<DataListProps> = (props) => { |
|||
const [element, setElement] = useState<any[]>([]) |
|||
const renderItem = (name: string, key: string) => { |
|||
const data = props.data |
|||
return ( |
|||
<DataItem |
|||
key={key} |
|||
name={name} |
|||
startOpen={props.startOpen} |
|||
value={data[name]} |
|||
/> |
|||
) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
const { data } = props |
|||
if (!data) return |
|||
|
|||
const isArray = Array.isArray(data) |
|||
const ele: any[] = [] |
|||
if (isArray) { |
|||
data.forEach((item: any, i: number) => { |
|||
ele.push(renderItem(String(i), String(i))) |
|||
}) |
|||
} else { |
|||
const names = Object.keys(data) |
|||
if (!props.noSort) { |
|||
names.sort(alphanumericSort) |
|||
} |
|||
names.forEach((name, i) => { |
|||
ele.push(renderItem(name, name)) |
|||
}) |
|||
} |
|||
setElement(ele) |
|||
}) |
|||
|
|||
return ( |
|||
!element.length ? |
|||
<div>{Array.isArray(props.data) ? 'Empty array' : 'Empty object'}</div> : |
|||
<ul className={styles.codeContainer}>{element}</ul> |
|||
) |
|||
} |
|||
|
|||
export default DataList |
@ -1,48 +0,0 @@ |
|||
.codeContainer { |
|||
padding: 10px; |
|||
font-size: 12px; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.codeBox { |
|||
display: flex; |
|||
position: relative; |
|||
} |
|||
|
|||
.codeVal { |
|||
display: flex; |
|||
white-space: pre; |
|||
word-break: break-word; |
|||
margin-left: 10px; |
|||
flex: 1; |
|||
color: #183691; |
|||
} |
|||
|
|||
.codeKey { |
|||
margin-left: 5px; |
|||
color: #905; |
|||
} |
|||
|
|||
.opener { |
|||
cursor: pointer; |
|||
margin-left: -10px; |
|||
position: absolute; |
|||
} |
|||
|
|||
.openerOpen { |
|||
border-color: #bbb transparent transparent transparent; |
|||
border-style: solid; |
|||
border-width: 6px 4px 0 4px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.openerClose { |
|||
border-color: transparent transparent transparent #bbb; |
|||
border-style: solid; |
|||
border-width: 4px 0 4px 6px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
@ -1,61 +0,0 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import DataList from './dataList' |
|||
import styles from './index.module.less' |
|||
|
|||
interface DataViewProps { |
|||
data: any |
|||
startOpen?: boolean |
|||
} |
|||
|
|||
interface State { |
|||
open: boolean |
|||
} |
|||
|
|||
const DataView: React.FC<DataViewProps> = (props) => { |
|||
const [state, setState] = useState<State>({ open: !!props.startOpen }) |
|||
let children = null |
|||
let preview |
|||
|
|||
const toggleOpen = () => { |
|||
return () => { |
|||
setState({ |
|||
open: !state.open |
|||
}) |
|||
} |
|||
} |
|||
|
|||
useEffect(() => { |
|||
const { data } = props |
|||
const { open } = state |
|||
if (!data) { |
|||
return |
|||
} |
|||
const isArray = Array.isArray(data) |
|||
children = open ? <DataList data={data} /> : null |
|||
if (isArray) { |
|||
preview = '[...]' |
|||
} else { |
|||
preview = '{...}' |
|||
} |
|||
}, [props]) |
|||
|
|||
return ( |
|||
<ul className={styles.codeContainer}> |
|||
<li className={styles.codeWrap}> |
|||
<div className={styles.codeBox}> |
|||
<div onClick={toggleOpen()} className={styles.opener}> |
|||
{state.open ? ( |
|||
<span className={styles.openerOpen} /> |
|||
) : ( |
|||
<span className={styles.openerClose} /> |
|||
)} |
|||
</div> |
|||
<div className={styles.codeVal}>{preview}</div> |
|||
</div> |
|||
{children} |
|||
</li> |
|||
</ul> |
|||
) |
|||
} |
|||
|
|||
export default DataView |
@ -1,28 +0,0 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
|
|||
interface Props { |
|||
data: any |
|||
} |
|||
|
|||
const Simple: React.FC<Props> = (props) => { |
|||
const [data, setData] = useState(props.data) |
|||
|
|||
const valueToText = (value: any) => { |
|||
if (value === undefined) { |
|||
return 'undefined' |
|||
} else if (typeof value === 'number') { |
|||
return value.toString() |
|||
} |
|||
return JSON.stringify(value) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
if (typeof data === 'string' && data.length > 200) { |
|||
setData(data.slice(0, 200) + '…') |
|||
} |
|||
}, [props]) |
|||
|
|||
return <div style={{ color: '#333' }}>{valueToText(data)}</div> |
|||
} |
|||
|
|||
export default Simple |
Loading…
Reference in new issue