diff --git a/src/Routes/Vegetable.js b/src/Routes/Vegetable.js index 9755723..1347daf 100644 --- a/src/Routes/Vegetable.js +++ b/src/Routes/Vegetable.js @@ -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 { ); } + formatValue(value) { + + if (!value) { + return (null) + } + + if (value[0] === '*') { + return (
- ') }} />); + } + return value + } + + renderProperty(item, key) { + if (item.Property === null || item.Property === undefined) { + return (null) + } + + return ( + + {item.Property.name} : {this.formatValue(item.value)} + + ) + } + + renderProperties() { + const { + item, + } = this.state; + + if (!item.Properties || + !item.Properties.length === 0 + ) { + return (null); + } + + return ( + {item.Properties.map(this.renderProperty)} + ) + } + render() { return ( @@ -184,23 +225,8 @@ export default class RouterVegetable extends React.Component { - - {this.state.item && - this.state.item.Properties && - this.state.item.Properties.map((item, key) => { - return ( - item.Property !== null && - item.Property !== undefined ? - ( - - {item.Property.name} : {item.value} - - ) - : - (null) - ) - })} - + {this.renderProperties()} + diff --git a/src/css/index.css b/src/css/index.css index 8eb580e..ba6054b 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -113,4 +113,8 @@ border: 1px solid #ccc; .carousel-item img { max-width: 100%; +} + +.tabbed { + padding-left: 16px; } \ No newline at end of file