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.onExiting = this.onExiting.bind(this);
|
||||||
this.onExited = this.onExited.bind(this);
|
this.onExited = this.onExited.bind(this);
|
||||||
this.setHeight = this.setHeight.bind(this);
|
this.setHeight = this.setHeight.bind(this);
|
||||||
|
this.renderProperty = this.renderProperty.bind(this);
|
||||||
|
|
||||||
this.getItem();
|
this.getItem();
|
||||||
this.props.changeBackground('vegetables')
|
this.props.changeBackground('vegetables')
|
||||||
|
@ -160,6 +161,46 @@ export default class RouterVegetable extends React.Component {
|
||||||
</Col>);
|
</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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
|
@ -184,23 +225,8 @@ export default class RouterVegetable extends React.Component {
|
||||||
<Col xs="12">
|
<Col xs="12">
|
||||||
<Row className="with-margin">
|
<Row className="with-margin">
|
||||||
<Col className=" with-border with-background">
|
<Col className=" with-border with-background">
|
||||||
<ListGroup className="double">
|
{this.renderProperties()}
|
||||||
{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>
|
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
|
@ -114,3 +114,7 @@ border: 1px solid #ccc;
|
||||||
.carousel-item img {
|
.carousel-item img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabbed {
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
Loading…
Reference in a new issue