Skip to content

Commit

Permalink
OpenConceptLab/ocl_issues#1356 | fixing custom attributes numeric dis…
Browse files Browse the repository at this point in the history 
…play
  • Loading branch information
@snyaggarwal
snyaggarwal committed Oct 4, 2022
1 parent 38a3ca9 commit dddf4f5
Showing 1 changed file with 86 additions and 82 deletions.
168 changes: 86 additions & 82 deletions src/components/common/CustomAttributesAccordian.jsx
View file
Expand Up @@ -30,8 +30,8 @@ const CustomAttributesAccordian = ({headingStyles, detailStyles, attributes}) =>
}
const getNestedValueDom = (value, index) => {
return isObject(value) ?
<pre style={{fontSize: '12px', margin: 0}} key={index}>{JSON.stringify(value, undefined, 2)}</pre> :
<code key={index}>{JSON.stringify(value)}</code>
<pre style={{fontSize: '12px', margin: 0}} key={index}>{JSON.stringify(value, undefined, 2)}</pre> :
<code key={index}>{JSON.stringify(value)}</code>
}

const getAttributeKeys = () => {
Expand Down Expand Up @@ -62,97 +62,101 @@ const CustomAttributesAccordian = ({headingStyles, detailStyles, attributes}) =>
<TabCountLabel label='Attributes' style={headingStyles} count={count}/>
{
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>
<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>
<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>
</Typography>
</span>
}
</span>
</AccordionSummary>
<AccordionDetails style={{...detailStyles, maxHeight: 'auto'}}>
{
hasAttributes ?
(
raw ?
<CustomAttributes
attributes={attributes}
preStyles={{marginLeft: '20px'}}
/> :
<div className='col-xs-12 no-side-padding'>
{
map(getAttributeKeys(), (name, i) => {
const value = attributes[name]
const isBool = isBoolean(value)
const needNesting = !isBool && shouldBeNested(value)
const isArr = isArray(value)
const elId = name.replaceAll(' ', '-').toLowerCase() + '-' + i
const isExpanded = get(expanded, elId)
const isHidden = (has(expanded, elId) && !isExpanded) || isContentHidden(document.getElementById(elId))
const classes = isExpanded ? '' : 'truncate-lines-4';
return (
<div className="col-xs-12 no-side-padding custom-attributes-accordion-content" key={name}>
<div className='col-xs-3' style={{color: '#777', overflow: 'hidden', paddingRight: '5px'}}>
<b>{startCase(name)}</b>
</div>
<div className="col-xs-9 flex-vertical-center" style={{maxWidth: '100%', paddingLeft: '10px'}}>
{
isBool && value.toString()
}
{
needNesting &&
<div id={elId} className={classes}>
{
map(value, (val, index) => getNestedValueDom(val, index))
}
</div>
}
{
isArr && !needNesting &&
<div id={elId} className={classes}>
<pre style={{margin: '0'}}>{JSON.stringify(value)}</pre>
</div>
}
{
!isBool && !needNesting && !isArr && isObject(value) &&
<div id={elId} className={classes}>
{getNestedValueDom(value)}
</div>
}
(
raw ?
<CustomAttributes
attributes={attributes}
preStyles={{marginLeft: '20px'}}
/> :
<div className='col-xs-12 no-side-padding'>
{
map(getAttributeKeys(), (name, i) => {
const value = attributes[name]
const isBool = isBoolean(value)
const needNesting = !isBool && shouldBeNested(value)
const isArr = isArray(value)
const elId = name.replaceAll(' ', '-').toLowerCase() + '-' + i
const isExpanded = get(expanded, elId)
const isHidden = (has(expanded, elId) && !isExpanded) || isContentHidden(document.getElementById(elId))
const classes = isExpanded ? '' : 'truncate-lines-4';
return (
<div className="col-xs-12 no-side-padding custom-attributes-accordion-content" key={name}>
<div className='col-xs-3' style={{color: '#777', overflow: 'hidden', paddingRight: '5px'}}>
<b>{startCase(name)}</b>
</div>
<div className="col-xs-9 flex-vertical-center" style={{maxWidth: '100%', paddingLeft: '10px'}}>
{
isBool && value.toString()
}
{
needNesting &&
<div id={elId} className={classes}>
{
map(value, (val, index) => getNestedValueDom(val, index))
}
</div>
}
{
isArr && !needNesting &&
<div id={elId} className={classes}>
<pre style={{margin: '0'}}>{JSON.stringify(value)}</pre>
</div>
}
{
!isBool && !needNesting && !isArr && isObject(value) &&
<div id={elId} className={classes}>
{getNestedValueDom(value)}
</div>
}
{
!isBool && !needNesting && !isArr && !isObject(value) &&
<span style={isNumber(value) ? {} : {marginTop: '-14px', display: 'block'}}>
{
isNumber(value) ?
value :
<CustomMarkdown markdown={value} classes={classes} id={elId} />
}
</span>
}
</div>
{
!isBool && !needNesting && !isArr && !isObject(value) &&
<span style={isNumber(value) ? {} : {marginTop: '-14px', display: 'block'}}>
<CustomMarkdown markdown={value} classes={classes} id={elId} />
</span>
isHidden &&
<React.Fragment>
<div className='col-xs-3 no-right-padding'/>
<div className='col-xs-9 no-left-padding'>
<Chip variant='outlined' color='primary' size='small' label={isExpanded ? 'less' : 'more'} onClick={() => toggleExpanded(elId)} style={{border: 'none', marginLeft: '-8px'}} />
</div>
</React.Fragment>
}
</div>
{
isHidden &&
<React.Fragment>
<div className='col-xs-3 no-right-padding'/>
<div className='col-xs-9 no-left-padding'>
<Chip variant='outlined' color='primary' size='small' label={isExpanded ? 'less' : 'more'} onClick={() => toggleExpanded(elId)} style={{border: 'none', marginLeft: '-8px'}} />
</div>
</React.Fragment>
}
</div>
)
)

})
}
</div>
) :
None()
})
}
</div>
) :
None()
}
</AccordionDetails>
</Accordion>
Expand Down

0 comments on commit dddf4f5

Please sign in to comment.