react-cimpress-comment
Version:
Visualizes comment(s) for a particular platform resource
255 lines (219 loc) • 9.73 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
require('../style/index.css');
var _reactComponents = require('@cimpress/react-components');
var _Comments = require('./Comments');
var _Comments2 = _interopRequireDefault(_Comments);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactPortal = require('react-portal');
var _i18n = require('./tools/i18n');
var _reactI18next = require('react-i18next');
var _CommentsClient = require('./clients/CommentsClient');
var _CommentsClient2 = _interopRequireDefault(_CommentsClient);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var CommentsDrawerLink = function (_React$Component) {
_inherits(CommentsDrawerLink, _React$Component);
function CommentsDrawerLink(props) {
_classCallCheck(this, CommentsDrawerLink);
var _this = _possibleConstructorReturn(this, (CommentsDrawerLink.__proto__ || Object.getPrototypeOf(CommentsDrawerLink)).call(this, props));
_this.escFunction = _this.escFunction.bind(_this);
_this.state = {
commentsDrawerOpen: props.opened || false,
unreadCommentsCount: null
};
return _this;
}
_createClass(CommentsDrawerLink, [{
key: 'escFunction',
value: function escFunction(event) {
if (event.keyCode === 27) {
this.safeSetState({
commentsDrawerOpen: false
});
}
}
}, {
key: 'safeSetState',
value: function safeSetState(data, callback) {
if (this._ismounted) {
this.setState(data, callback);
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this._ismounted = true;
document.addEventListener('keydown', this.escFunction, false);
this.fetchUnreadCount();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._ismounted = false;
document.removeEventListener('keydown', this.escFunction, false);
}
}, {
key: 'fetchUnreadCount',
value: function fetchUnreadCount() {
var _this2 = this;
if (!this.props.accessToken) {
return;
}
var client = new _CommentsClient2.default(this.props.accessToken, this.props.resourceUri);
this.safeSetState({
fetchingData: true
}, function () {
return client.getUserInfo().then(function (data) {
_this2.safeSetState({
fetchingData: false,
unreadCommentsCount: data.unreadCount
});
}).catch(function (err) {
_this2.safeSetState({
fetchingData: false,
unreadCommentsCount: '?'
});
});
});
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
if (this.props.resourceUri !== prevProps.resourceUri || this.props.accessToken !== prevProps.accessToken) {
this.fetchUnreadCount();
}
if (prevProps.opened !== this.props.opened) {
this.safeSetState({
commentsDrawerOpen: this.props.opened
});
}
}
}, {
key: 'tt',
value: function tt(key) {
// eslint-disable-next-line react/prop-types
var _props = this.props,
t = _props.t,
locale = _props.locale;
if (locale.length > 2) {
locale = locale.substr(0, 2);
}
return t(key, { lng: locale });
}
}, {
key: 'defaultFooter',
value: function defaultFooter() {
var _this3 = this;
return _react2.default.createElement(
'div',
{ className: 'text-right' },
_react2.default.createElement(
'button',
{ className: 'btn btn-default', onClick: function onClick() {
return _this3.onDrawerClose();
} },
_react2.default.createElement('i', { className: 'fa fa-times', 'aria-hidden': 'true' }),
'\xA0',
this.tt('btn_close')
)
);
}
}, {
key: 'defaultHeader',
value: function defaultHeader() {
return this.tt('header_comments');
}
}, {
key: 'getUnreadComments',
value: function getUnreadComments() {
var items = void 0;
if (this.state.fetchingData) {
items = _react2.default.createElement('i', { className: 'fa fa-spinner fa-spin' });
} else {
items = this.state.unreadCommentsCount;
}
if (!this.state.fetchingData && this.state.unreadCommentsCount === 0) {
return null;
}
return _react2.default.createElement(
'span',
{ className: 'comment-count-badge ' + (this.state.fetchingData ? 'comment-count-badge-loading' : '') },
items
);
}
}, {
key: 'onDrawerOpen',
value: function onDrawerOpen() {
this.safeSetState({ commentsDrawerOpen: true });
}
}, {
key: 'onDrawerClose',
value: function onDrawerClose() {
var _this4 = this;
this.safeSetState({ commentsDrawerOpen: false }, function () {
return _this4.fetchUnreadCount();
});
}
}, {
key: 'render',
value: function render() {
var _this5 = this;
return [_react2.default.createElement(
'div',
{ key: 0, className: 'comment-drawer-button' },
_react2.default.createElement('span', { className: 'fa fa-comments-o', onClick: function onClick() {
return _this5.onDrawerOpen();
} }),
this.getUnreadComments()
), _react2.default.createElement(
_reactPortal.Portal,
{ key: 1 },
_react2.default.createElement(
_reactComponents.Drawer,
{
show: this.state.commentsDrawerOpen,
onRequestHide: function onRequestHide() {
return _this5.onDrawerClose();
},
header: this.props.header || this.defaultHeader(),
position: this.props.position,
closeOnClickOutside: true,
footer: this.props.footer || this.defaultFooter() },
this.state.commentsDrawerOpen ? _react2.default.createElement(_Comments2.default, this.props) : null
)
)];
}
}]);
return CommentsDrawerLink;
}(_react2.default.Component);
CommentsDrawerLink.propTypes = {
locale: _propTypes2.default.string,
accessToken: _propTypes2.default.string.isRequired,
resourceUri: _propTypes2.default.string.isRequired,
newestFirst: _propTypes2.default.bool,
editComments: _propTypes2.default.bool,
deleteComments: _propTypes2.default.bool,
refreshInterval: _propTypes2.default.number,
position: _propTypes2.default.oneOf(['left', 'right']),
header: _propTypes2.default.node,
footer: _propTypes2.default.node,
opened: _propTypes2.default.bool
};
CommentsDrawerLink.defaultProps = {
position: 'right',
newestFirst: true,
editComments: false,
deleteComments: false,
opened: false,
locale: 'en'
};
exports.default = (0, _reactI18next.translate)('translations', { i18n: (0, _i18n.getI18nInstance)() })(CommentsDrawerLink);