'use strict';
import React from 'react';
import UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store';
import MediaPlayer from './ascribe_media/media_player';
import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import PersonalNoteForm from './ascribe_forms/form_note_personal';
import PieceExtraDataForm from './ascribe_forms/form_piece_extradata';
import RequestActionForm from './ascribe_forms/form_request_action';
import EditionActions from '../actions/edition_actions';
import AclButtonList from './ascribe_buttons/acl_button_list';
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
import classNames from 'classnames';
/**
* This is the component that implements display-specific functionality
*/
let Edition = React.createClass({
propTypes: {
edition: React.PropTypes.object,
loadEdition: React.PropTypes.func
},
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
render() {
let thumbnail = this.props.edition.thumbnail;
let mimetype = this.props.edition.digital_work.mime;
let extraData = null;
if (this.props.edition.digital_work.encoding_urls) {
extraData = this.props.edition.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
}
let bitcoinIdValue = (
{this.props.edition.bitcoin_id}
);
let hashOfArtwork = (
{this.props.edition.hash_as_address}
);
let ownerAddress = (
{this.props.edition.btc_owner_address_noprefix}
);
return (
0}>
0}>
0}>
);
}
});
let EditionHeader = React.createClass({
propTypes: {
edition: React.PropTypes.object
},
render() {
var titleHtml = {this.props.edition.title}
;
return (
);
}
});
let EditionSummary = React.createClass({
propTypes: {
edition: React.PropTypes.object
},
handleSuccess(){
EditionActions.fetchOne(this.props.edition.id);
},
showNotification(response){
this.handleSuccess();
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
let status = null;
if (this.props.edition.status.length > 0){
status = ;
}
let actions = null;
if (this.props.edition.request_action && this.props.edition.request_action.length > 0){
actions = (
);
}
else {
actions = (
);
}
return (
{status}
{actions}
);
}
});
let CollapsibleEditionDetails = React.createClass({
propTypes: {
title: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
]),
show: React.PropTypes.bool,
iconName: React.PropTypes.string
},
getDefaultProps() {
return {
show: true
};
},
render() {
if(this.props.show) {
return (
{this.props.children}
);
} else {
return null;
}
}
});
const CollapsibleParagraph = React.createClass({
propTypes: {
title: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
]),
iconName: React.PropTypes.string
},
mixins: [CollapsibleMixin],
getCollapsibleDOMNode(){
return React.findDOMNode(this.refs.panel);
},
getCollapsibleDimensionValue(){
return React.findDOMNode(this.refs.panel).scrollHeight;
},
onHandleToggle(e){
e.preventDefault();
this.setState({expanded: !this.state.expanded});
},
render() {
let styles = this.getCollapsibleClassSet();
let text = this.isExpanded() ? '-' : '+';
let icon = this.props.iconName ? () : null;
return (
{text} {icon} {this.props.title}
{this.props.children}
);
}
});
let EditionDetailProperty = React.createClass({
propTypes: {
label: React.PropTypes.string,
value: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
separator: React.PropTypes.string,
labelClassName: React.PropTypes.string,
valueClassName: React.PropTypes.string
},
getDefaultProps() {
return {
separator: ':',
labelClassName: 'col-xs-5 col-sm-4 col-md-3 col-lg-3',
valueClassName: 'col-xs-7 col-sm-8 col-md-9 col-lg-9'
};
},
render() {
return (
{ this.props.label + this.props.separator}
);
}
});
let EditionDetailHistoryIterator = React.createClass({
propTypes: {
history: React.PropTypes.array
},
render() {
return (
{this.props.history.map((historicalEvent, i) => {
return (
);
})}
);
}
});
let EditionPersonalNote = React.createClass({
propTypes: {
edition: React.PropTypes.object,
handleSuccess: React.PropTypes.func
},
showNotification(){
this.props.handleSuccess();
let notification = new GlobalNotificationModel('Note saved', 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
return (
);
}
});
let EditionFurtherDetails = React.createClass({
propTypes: {
edition: React.PropTypes.object,
handleSuccess: React.PropTypes.func
},
showNotification(){
this.props.handleSuccess();
let notification = new GlobalNotificationModel('Details updated', 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
let editable = this.props.edition.acl.indexOf('edit') > -1;
return (
);
}
});
export default Edition;