Skip to content

Instantly share code, notes, and snippets.

@kryhtin
Created November 3, 2016 11:38
Show Gist options
  • Save kryhtin/771ce6e49525ef32422bca16650511fa to your computer and use it in GitHub Desktop.
Save kryhtin/771ce6e49525ef32422bca16650511fa to your computer and use it in GitHub Desktop.
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CommentActions from '../actions/CommentActions';
import Interact from '../wrappers/Interact';
import CommentView from './CommentView';
import CommentEdit from './CommentEdit';
import CommentNameEdit from './CommentNameEdit';
import CommentDelete from './CommentDelete';
const VIEW = 'VIEW';
const EDIT = 'EDIT';
const DELETE = 'DELETE';
const EDIT_NAME = 'EDIT_NAME';
class Comment extends Component {
constructor(props, context) {
super(props, context);
this.state = {
interactable: null
};
}
savePosition(width,height,data_x,data_y) {
let item = this.props.comment;
item.width = width;
item.height = height;
item.data_x = data_x;
item.data_y = data_y;
this.props.dispatch(CommentActions.fetchEditComment(this.props.comment.id, item));
}
cancel() {
this.props.actions.destroyCurrentComment();
this.props.actions.changeCurrentCommentState(VIEW);
}
view() {
this.props.actions.changeCurrentCommentState(VIEW);
}
save(text, name) {
let item = this.props.comment;
item.text = text;
item.author = name;
this.props.dispatch(CommentActions.fetchEditComment(this.props.comment.id, item));
this.props.actions.changeCurrentCommentState(VIEW);
}
render() {
const { comment, actions, dispatch, state } = this.props;
let style = {
height: comment.height,
width: comment.width,
position: 'absolute',
top: comment.top,
left: comment.left,
transform: "translate(" + comment.data_x + "px," + comment.data_y + "px)",
boxShadow: '0 0 0 99999px rgba(0, 0, 0, .6)',
minHeight: '40px',
minWidth: '40px',
};
let template;
switch (state.currentCommentState) {
case VIEW:
template = (
<CommentView comment={comment}
actions={actions}
isApprovePage={false}
dispatch={dispatch}/>
);
break
case EDIT:
template = (
<CommentEdit save={::this.save}
cancel={::this.view}
text={comment.text}
comment={comment}
actions={actions}/>
);
break
case EDIT_NAME:
template = (
<CommentNameEdit save={::this.save}
cancel={::this.view}
text={comment.text}
comment={comment}
actions={actions}/>
);
break
case DELETE:
template = (
<CommentDelete cancel={::this.view}
comment={comment}
actions={actions}
dispatch={dispatch}/>
);
break
default:
template = (
<CommentView comment={comment}
actions={actions}
dispatch={dispatch} />
);
}
return (
<div className="cycles-resize"
style={style}
ref='comment'
data-x={comment.data_x}
data-y={comment.data_y}>
<div className="cycles-dot"
style={{cursor: 'all-scroll'}}>
<span>{comment.counter}</span>
</div>
<div className="cycles-scaling-dot"></div>
{template}
</div>
);
}
}
function mapState(state) {
return {
comment: state.currentComment,
state: state.currentCommentState
};
}
function mapDispatch(dispatch) {
return {
actions: bindActionCreators({ ...CommentActions }, dispatch),
dispatch: dispatch
};
}
export default connect(mapState, mapDispatch)(Comment);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment