spee.ch/react/components/ShowAssetDetails/index.js

60 lines
2 KiB
JavaScript
Raw Normal View History

import React from 'react';
2018-02-05 01:40:28 +01:00
import PropTypes from 'prop-types';
import NavBar from 'containers/NavBar';
import AssetTitle from 'components/AssetTitle';
2018-02-07 04:00:52 +01:00
import AssetDisplay from 'containers/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
class ShowAssetDetails extends React.Component {
componentDidMount () {
console.log('ShowAssetDetails props', this.props);
}
render () {
return (
<div>
<NavBar/>
{this.props.error &&
<div className="row row--padded">
<p>{this.props.error}</p>
</div>
}
{this.props.claimData &&
<div className="row row--tall row--padded">
<div className="column column--10">
<AssetTitle title={this.props.claimData.title}/>
</div>
<div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded">
2018-02-07 04:00:52 +01:00
<AssetDisplay />
</div>
</div><div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded">
<AssetInfo
channelName={this.props.claimData.channelName}
certificateId={this.props.claimData.certificateId}
description={this.props.claimData.description}
name={this.props.claimData.name}
claimId={this.props.claimData.claimId}
2018-02-05 01:40:28 +01:00
fileExt={this.props.claimData.fileExt}
contentType={this.props.claimData.contentType}
thumbnail={this.props.claimData.thumbnail}
host={this.props.claimData.host}
2018-02-07 00:09:12 +01:00
shortId={this.props.shortId}
/>
</div>
</div>
</div>
}
</div>
);
}
};
2018-02-05 01:40:28 +01:00
ShowAssetDetails.propTypes = {
error : PropTypes.string,
claimData: PropTypes.object.isRequired,
2018-02-05 02:43:02 +01:00
shortId : PropTypes.string.isRequired,
2018-02-05 01:40:28 +01:00
};
export default ShowAssetDetails;