Display list as list for Properties
This commit is contained in:
parent
0759a859ef
commit
d817fe3ca2
2 changed files with 47 additions and 17 deletions
|
@ -49,6 +49,7 @@ export default class RouterVegetable extends React.Component {
|
|||
this.onExiting = this.onExiting.bind(this);
|
||||
this.onExited = this.onExited.bind(this);
|
||||
this.setHeight = this.setHeight.bind(this);
|
||||
this.renderProperty = this.renderProperty.bind(this);
|
||||
|
||||
this.getItem();
|
||||
this.props.changeBackground('vegetables')
|
||||
|
@ -160,6 +161,46 @@ export default class RouterVegetable extends React.Component {
|
|||
</Col>);
|
||||
}
|
||||
|
||||
formatValue(value) {
|
||||
|
||||
if (!value) {
|
||||
return (null)
|
||||
}
|
||||
|
||||
if (value[0] === '*') {
|
||||
return (<div className='tabbed' dangerouslySetInnerHTML={{ __html: value.replace('*', '- ').replace(/\*/g, '<br />- ') }} />);
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
renderProperty(item, key) {
|
||||
if (item.Property === null || item.Property === undefined) {
|
||||
return (null)
|
||||
}
|
||||
|
||||
return (
|
||||
<ListGroupItem key={key}>
|
||||
<strong>{item.Property.name}</strong> : {this.formatValue(item.value)}
|
||||
</ListGroupItem>
|
||||
)
|
||||
}
|
||||
|
||||
renderProperties() {
|
||||
const {
|
||||
item,
|
||||
} = this.state;
|
||||
|
||||
if (!item.Properties ||
|
||||
!item.Properties.length === 0
|
||||
) {
|
||||
return (null);
|
||||
}
|
||||
|
||||
return (<ListGroup className="double">
|
||||
{item.Properties.map(this.renderProperty)}
|
||||
</ListGroup>)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
|
@ -184,23 +225,8 @@ export default class RouterVegetable extends React.Component {
|
|||
<Col xs="12">
|
||||
<Row className="with-margin">
|
||||
<Col className=" with-border with-background">
|
||||
<ListGroup className="double">
|
||||
{this.state.item &&
|
||||
this.state.item.Properties &&
|
||||
this.state.item.Properties.map((item, key) => {
|
||||
return (
|
||||
item.Property !== null &&
|
||||
item.Property !== undefined ?
|
||||
(
|
||||
<ListGroupItem key={key}>
|
||||
<strong>{item.Property.name}</strong> : {item.value}
|
||||
</ListGroupItem>
|
||||
)
|
||||
:
|
||||
(null)
|
||||
)
|
||||
})}
|
||||
</ListGroup>
|
||||
{this.renderProperties()}
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
|
|
|
@ -114,3 +114,7 @@ border: 1px solid #ccc;
|
|||
.carousel-item img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tabbed {
|
||||
padding-left: 16px;
|
||||
}
|
Loading…
Reference in a new issue