Display list as list for Properties

This commit is contained in:
dbroqua 2019-04-11 19:15:09 +02:00
parent 0759a859ef
commit d817fe3ca2
2 changed files with 47 additions and 17 deletions

View file

@ -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>

View file

@ -114,3 +114,7 @@ border: 1px solid #ccc;
.carousel-item img {
max-width: 100%;
}
.tabbed {
padding-left: 16px;
}