-
Notifications
You must be signed in to change notification settings - Fork 12
/
CustomAttributesAccordian.jsx
129 lines (123 loc) · 4.59 KB
/
CustomAttributesAccordian.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React from 'react';
import {
Accordion, AccordionSummary, AccordionDetails, Switch, Grid, Typography
} from '@mui/material';
import {
map, isEmpty, isBoolean, isArray, isObject, find, startCase, keys, orderBy
} from 'lodash';
import { BLUE } from '../../common/constants';
import CustomAttributes from './CustomAttributes'
import TabCountLabel from './TabCountLabel'
const None = () => {
return <div style={{padding: '20px', fontWeight: '300'}}>None</div>
}
const CustomAttributesAccordian = ({headingStyles, detailStyles, attributes}) => {
const [raw, setRaw] = React.useState(false)
const hasAttributes = !isEmpty(attributes)
const onRawClick = event => {
event.stopPropagation()
event.preventDefault()
setRaw(!raw)
return false;
}
const shouldBeNested = value => {
return isArray(value) && Boolean(find(value, isObject))
}
const getNestedValueDom = (value, index) => {
return isObject(value) ?
<pre style={{fontSize: '12px', margin: 0}}>{JSON.stringify(value, undefined, 2)}</pre> :
<code key={index}>{JSON.stringify(value)}</code>
}
const getAttributeKeys = () => {
if(!hasAttributes)
return []
return orderBy(keys(attributes), attr => attr.toLowerCase())
}
return (
<Accordion defaultExpanded expanded>
<AccordionSummary
className='light-gray-bg less-paded-accordian-header'
expandIcon={<span />}
aria-controls="panel1a-content"
>
<span className='col-md-12 no-side-padding flex-vertical-center' style={{justifyContent: 'space-between'}}>
<TabCountLabel label='Attributes' style={headingStyles} count={keys(attributes).length}/>
{
hasAttributes &&
<span onClick={onRawClick}>
<Typography component="div">
<Grid component="label" container alignItems="center" spacing={1}>
<Grid item>
<span style={{fontSize: '14px', color: raw ? 'gray' : BLUE}}>Formatted</span>
</Grid>
<Grid item>
<Switch size='small' checked={raw} onChange={onRawClick} name="raw" color='primary' />
</Grid>
<Grid item>
<span style={{fontSize: '14px', color: raw ? BLUE : 'gray'}}>Raw</span>
</Grid>
</Grid>
</Typography>
</span>
}
</span>
</AccordionSummary>
<AccordionDetails style={detailStyles}>
{
hasAttributes ?
(
raw ?
<CustomAttributes
attributes={attributes}
preStyles={{marginLeft: '20px'}}
/> :
<div className='col-md-12 no-side-padding'>
{
map(getAttributeKeys(), name => {
const value = attributes[name]
const isBool = isBoolean(value)
const needNesting = !isBool && shouldBeNested(value)
const isArr = isArray(value)
return (
<div className='col-md-12 no-side-padding custom-attributes-accordion-content' key={name}>
<div className='col-md-3 no-right-padding' style={{color: '#777'}}>
<b>{startCase(name)}</b>
</div>
<div className='col-md-9 no-left-padding flex-vertical-center' style={{maxWidth: '100%'}}>
{
isBool && value.toString()
}
{
needNesting &&
<div>
{
map(value, (val, index) => getNestedValueDom(val, index))
}
</div>
}
{
isArr && !needNesting &&
<pre style={{margin: '0'}}>{JSON.stringify(value)}</pre>
}
{
!isBool && !needNesting && !isArr && isObject(value) &&
getNestedValueDom(value)
}
{
!isBool && !needNesting && !isArr && !isObject(value) &&
value
}
</div>
</div>
)
})
}
</div>
) :
None()
}
</AccordionDetails>
</Accordion>
)
}
export default CustomAttributesAccordian;